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 / 마우스 호버 효과 / 텍스트 나오게 하는 방법
CSS로 특정 요소에 마우스를 올렸을 때 보이지 않던 특정 요소가 보이게 할 수 있습니다. 아래는 문단에 마우스를 올렸을 때 div 요소가 나오게 하는 예제입니다. div 요소 안에 텍스트가 있지만, 텍스트가 아닌 이미지 등 다른 것도 가능합니다.
CSS에 변수를 만들고 사용할 수 있습니다. 변수를 이용하면 여러 값을 한 번에 변경할 수 있습니다. 변수를 정의하면, 변수를 정의한 요소와 그 하위 요소에서 그 변수를 사용할 수 있습니다. 만약 어느 곳에서나 사용할 수 있게 하려면 :root에 정의합니다.
CSS에서 !important는 특정 스타일 규칙이 다른 모든 스타일 규칙보다 우선 적용되도록 강제하는 데 사용됩니다. 이 키워드는 일반적인 스타일 우선 순위를 무시하고, 해당 스타일이 다른 어떤 스타일보다도 높은 우선순위를 가지도록 합니다.
CSS로 삼각형을 만들 수 있다면 마름모는 쉽게 만들 수 있습니다. 삼각형을 두 개 붙이면 마름모가 되기 때문입니다. 마름모는 네 변의 길이가 같은 사각형이므로, 이등변삼각형 두 개를 붙이며 됩니다.
CSS / Tutorial / 세로 가운데 정렬하는 방법
CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다. 요소의 가로 가운데 정렬은 margin 속성을 이용합니다. 세로 정렬을 가운데로 하려면 어떻게 해야 할까요? 네 가지 방법을 소개합니다.
CSS / Tutorial / 유튜브 동영상을 반응형으로 삽입하는 방법
유튜브 영상을 블로그나 홈페이지에 넣을 때 보통 iframe을 사용합니다. 코드는 유튜브 영상 공유에서 를 클릭하여 구할 수 있습니다. 아래와 같은 코드인데, 고정폭입니다. 즉 웹브라우저의 가로폭이 커지든 작아지든 가로폭이 일정합니다. 이를 반응형으로 만들고 싶다면 아래처럼 합니다.
CSS / Tutorial / 원 또는 타원 만드는 방법
CSS의 border-radius 속성으로 원 또는 타원을 만들 수 있습니다. HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만듭니다. 적절히 크기를 정하여 정사각형을 만들고, 배경색을 넣습니다. border-radius 속성을 추가하고, 값에 50%를 넣으면 원이 만들어집니다.
CSS / Tutorial / 선택자(Selector)
CSS에서 선택자(CSS Selector)는 HTML 문서의 요소를 선택하고 스타일을 적용할 때 사용되는 구문입니다. 선택자는 특정 요소를 대상으로 스타일을 지정할 수 있도록 돕는 중요한 역할을 하며, 다양한 방법으로 요소를 선택할 수 있습니다.
CSS / Tutorial / CSS를 HTML에 적용시키는 방법
HTML에 CSS를 적용시키는 방법은 세 가지가 있습니다. 각 방법은 장단점이 있으니 상황에 맞게 적절한 방법을 선택합니다. Inline Style Sheet HTML 태그의 style 속성에 CSS 코드를 넣습니다. Internal Style Sheet HTML 문서 안의 과 안에 CSS 코드를 넣습니다. Linking Style Sheet 별도의 CSS 파일을 만들고 HTML 문서와 연결합니다.
CSS / Tutorial / 양쪽 배분(균등 분할) 정렬 방법
문단 정렬을 양끝으로 꽉차게 하는 경우가 있습니다. 한글에서는 배분 정렬, 워드에서는 균등 분할이라고 합니다. 일반적인 문단에서는 거의 사용하지 않고, 표에서 제목을 넣을 때 많이 사용합니다.