[HTML/CSS] CSS란? CSS의 작성법
[HTML/CSS] CSS란? CSS의 작성법
|
CSS란? 웹 문서의 스타일을 미리 정해둔 스타일시트로써 문서 전체를 일관성 있게 유지할 수 있으며 HTML을 그대로 둔체 CSS라는 옷을 입힘으로써 전혀 다른 페이지를 제공 할 수 있습니다. |
|
▶관련 포스팅◀
|
CSS의 작성법
|
CSS는 굉장히 단순한 구조를 가지고 있어서 초보자도 쉽게 코드를 작성 할 수 있어요. 다만 다양한 명령어가 있으니 그것들을 어떻게 조합 할 것인지는 본인의 역량에 따라 달라지겠죠? |
|
|
|
|
|
CSS는 간단히 셀렉터와, 선언 블록으로 구분되요. 앞서 CSS를 옷이라고 표현 했는데 "셀렉터(Selector)"는 누가 옷을 입을 것인지 대상을 선택하는 것이며, "선언 블록(Declarations)"은 대상이 어떤 옷을 입을지 표현하는거에요. |
셀렉터
|
셀렉터는 대소문자를 구분하며 문자로 시작해야하며 ( _ )언더바를 쓸수 있어요. 1. 전체셀렉터 ( * )을 써서 문서 안에 있는 모든 태그를 선택 할 수 있습니다. 예) * {color: red;} (문서 전체 빨간색) 2. 타입 셀렉터 HTML태그를 선택 할 수 있어요. 예) p {font-size: 18px;} (p태그의 폰트를 18px크기로 지정) 3. ID 셀렉터 ( # )을 써써 해당 ID를 가지고 있는 태그를 선택 할 수 있어요. 예) #secret {background-color: blue;} (ID secret의 태그 배경을 파란색) 4. CLASS 셀렉터 ( . )을 써서 해당 CLASS를 가지고 있는 태그들을 선택 할 수 있어요. 예) .garden {text-align: center;} (CLASS garden의 태그를 가운데 정렬) 5. 의사 셀렉터 의사 클래스(Pseudo Class)라고도 하며 HTML에서 작성하지 않았지만 스타일을 꾸며줄 수 있는 가짜 클래스를 의미해요. :hover, :active, :visited, :link, :focus, :first-child, :last-child, :first-letter, :first-line 등을 주로 사용합니다. 예) a:hover {color: red;} (a태그 위에 마우스를 올리면 빨간색으로 표현함) 6. 속성 셀렉터 예) h1[title] {color: red;} (title의 속성을 가지고 있는 h1태그를 빨간색) 예) p[class="tistory"] {color: blue;} (속성 class가 tistory인 p태그를 파란색) 7. 그룹 셀렉터 ( , )를 써서 여러개를 동시에 선택 할 수 있어요. 예) h1, h2, h3 {font-size: 24px;} (h1과 h2, h3태그의 폰트를 24px크기로 지정) |
선언 블록
|
선언 블록은 {,} 중괄호로 묶어주며 선언 블록 안에는 다시 속성(Property)과 값(Value)으로 나뉘어져요. 속성과 값은 ( : )콜론으로 구분하며 선언 블록안에 여러개의 속성을 쓰려면 각 선언마다 ( ; )세미콜론으로 마무리를 지어줘야 합니다. 위 그림에서는 font-size가 속성이며 18px가 값이 되고 ( ; )세미콜론으로 마무리 한 후, 다시 color속성을 red값으로 지정한 선언 블록입니다. |
CSS의 주석달기
|
HTML에서는 <!-- 내용 --> 이렇게 주석을 사용 했지만 CSS에서는 주석을 /* 내용 */ 이렇게 사용합니다. 그리고 CSS를 사용함에 있어서 HTML에 함께 표시를 하는 경우도 있고, CSS파일을 별도로 사용하는 경우도 있어요. 티스토리 스킨의 경우 HTML과 CSS파일을 별도로 사용하는 형태이며 HTML과 함께 표시를 하려면 HTML에 <style></style> 스타일태그 안에 CSS를 표현 할 수 있어요. |
