CSS / Tutorial / 문법
문법
CSS 문법은 선택자(selector), 속성(property), 값(value)의 조합으로 구성됩니다. 다음은 가장 간단한 CSS 코드입니다.
h1 { color: red }
h1, color, red 세 개의 단어가 있는데 각각 선택자, 속성, 값입니다.
- 선택자(selector) : 무엇을 꾸밀지 정합니다. h1은 h1 요소를 꾸미겠다는 뜻입니다. 태그, 클래스, ID 등 다양한 선택자가 있습니다.
- 속성(property) : 어떤 모양을 꾸밀지 정한다. color는 색을 꾸미겠다는 뜻입니다.
- 값(value) : 어떻게 꾸밀지 정한다. red는 빨간색으로 만들겠다는 뜻입니다.
즉, CSS 코드는 다음처럼 구성됩니다.
selector { property: value }
이때 property와 value를 합쳐서 선언(declaration)이라고 합니다.
여러 개의 선언
세미콜론(;)으로 구분하여 선언을 여러 개 넣을 수 있다. 예를 들어 아래는 h1 요소의 색을 빨간색으로 하고 글자 크기를 20px로 만들겠다는 뜻입니다.
h1 {
color: red;
font-size: 20px;
}
마지막 선언에는 세미콜론을 붙여도 되고 붙이지 않아도 됩니다. 즉 아래와 같이 해도 됩니다. 하지만, 실수를 방지하기 위해 보통 마지막에도 세미콜론을 붙입니다.
h1 {
color: red;
font-size: 20px
}
값(value)에 공백이 있는 경우
값(value)에 공백이 있다면 작은 따옴표 또는 큰 따옴표로 감쌉니다. 예를 들어 문단의 글꼴을 Times New Roman로 하고 싶다면, 아래와 같이 작은 따옴표로 감싸거나...
p {
font-family: 'Times New Roman';
}
아래와 같이 큰 따옴표로 감쌉니다.
p {
font-family: "Times New Roman";
}
공백
여러 개의 연속한 공백이나 줄바꿈은 하나의 공백으로 인식합니다. 즉 아래의 두 코드는 같은 결과를 만듭니다.
selector {
property: value;
property: value;
}
selector { property: value; property: value; }
주석
주석(Comment)은 /*과 */ 사이에 씁니다.
/* Comment */
/*과 */ 사이에 줄바꿈이 있어도 모두 주석으로 인식합니다.
/* Comment 1 Comment 2 */
여러 줄의 주석은 다음처럼 꾸미기도 합니다.
/* * Comment * Comment * Comment */
CSS / Tutorial / 선택자(Selector)
CSS에서 선택자(CSS Selector)는 HTML 문서의 요소를 선택하고 스타일을 적용할 때 사용되는 구문입니다. 선택자는 특정 요소를 대상으로 스타일을 지정할 수 있도록 돕는 중요한 역할을 하며, 다양한 방법으로 요소를 선택할 수 있습니다.
CSS / Tutorial / 마우스 호버 효과 / 이미지 확대하는 방법
이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다.
글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많습니다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 합니다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제입니다.
CSS / Tutorial / CSS를 HTML에 적용시키는 방법
HTML에 CSS를 적용시키는 방법은 세 가지가 있습니다. 각 방법은 장단점이 있으니 상황에 맞게 적절한 방법을 선택합니다. Inline Style Sheet HTML 태그의 style 속성에 CSS 코드를 넣습니다. Internal Style Sheet HTML 문서 안의 과 안에 CSS 코드를 넣습니다. Linking Style Sheet 별도의 CSS 파일을 만들고 HTML 문서와 연결합니다.
표와 셀의 크기는 정해져있지 않습니다. 내용이 짧으면 작게, 내용이 길면 크게 표와 셀이 만들어집니다. 의도하지 않은 결과가 나오지 않게 하려면 크기를 정하는 게 좋습니다.
CSS / Tutorial / 인용문(Blockquote) 꾸미는 방법
blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다. 그대로 사용하기보다는 여러 가지 모양으로 꾸미는 것이 일반적입니다. 다음은 아래와 같은 인용문을 꾸미는 몇 가지 예제입니다.
CSS / Tutorial / 원 또는 타원 만드는 방법
CSS의 border-radius 속성으로 원 또는 타원을 만들 수 있습니다. HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만듭니다. 적절히 크기를 정하여 정사각형을 만들고, 배경색을 넣습니다. border-radius 속성을 추가하고, 값에 50%를 넣으면 원이 만들어집니다.
CSS의 border 속성으로 삼각형을 만들 수 있습니다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아봅니다.
CSS / Tutorial / ul, ol 가운데 정렬하는 방법
목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. 목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. 만약 요소의 내용에 맞게 자동으로 크기가 정해지게 하고 싶으면 display 속성을 사용합니다.
CSS / Tutorial / 마우스 호버 효과 / 서서히 길어지는 선 만드는 방법
마우스를 올리면 선이 그려지는 효과를 만들어봅니다. 다음과 같이 사각형을 만듭니다. :before를 이용하여 선이 시작하는 위치를 정합니다. position 속성으로 선 위에 선을 그릴 수 있도록 설정합니다.