-
CSS - 1. CSS 이해하기공부일기/부스트코스 2020. 9. 16. 23:02
1. CSS 소개
Cascading Style Sheets의 약자. HTML을 꾸며주는 언어이며 html이 웹페이지의 정보를 표현한다면, CSS는 html을 보기 좋게 디자인 하는 역할이다.
2. CSS 문법과 적용
h1 { color: yellow; font-size: 2em; } /* h1 = 선택자 color, font-size = 속성 yellow, 2em = 값 color: yellow, font-size: 2em = 선언 { ... } : 선언부 */- 선택자(selector): 어느 요소를 꾸밀 건지
- 속성(property): html의 속성과 구별해서 이해하자
- 값(value): 속성으로 표현될 값
- 선언(declaration): 속성과 값의 조합
- 선언부(declaration block): 중괄호를 포함한 부분
- 규칙(rule set): 선택자와 선언부가 합쳐진 구문. 선택자와 선언부, 선언과 선언사이에 개행 가능
- 주석: /* 내용 */
- CSS의 적용 방법 4가지
1. Inline: 해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법. 선택자는 필요 없고, 선언부에 내용만 스타일 속성의 값으로 넣어주면 된다. Inline 스타일 방식으로 부른다.
<div style="color:red;"> 내용 </div>2. Internal: 문서에 <style>을 활용한 방법. <head> 태그 내부에 들어가며 <style> 안에 스타일 규칙이 들어간다.
<style> div {color:red;} </style>3. External: 외부 스타일 시트 파일을 이용한 방법. 외부 스타일 시트는 스타일 규칙들을 별도의 외부파일을 만들어 넣는 방식이다. 외부 파일 확장자는 .css이며 css파일이라 부른다. 실제 제일 많이 사용하는 방식
<link rel="stylesheet" href="css/style.css"> /* <head>태그 내에 설정 */ p { color: gray; }4. @import: 스타일 시트 내에서 다른 스타일 시트 파일을 불러오는 방식이나 성능상 좋지 않아 거의 쓰이지 않는다.
3. 선택자
완성도 있는 디자인을 표현하기 위해 반드시 내가 원하는 요소를 선택할 수 있어야 한다. 따라서 CSS에서 선택자는 중요한 역할을 한다.
- 요소 선택자: 선택자 중에 가장 기본이 되는 선택자(태그 선택자)
- 그룹화: 쉼표를 이용해 선택자를 나열해주면 그룹화 할 수 있다.
h1 {color:yellow;} h2 {color:yellow;} h3 {color:yellow;} h4 {color:yellow;} h5 {color:yellow;} h6 {color:yellow;} h1, h2, h3, h4, h5, h6 {color:yellow;} /* 선택자 */ * {color:yellow} /* 전체 선택자, 성능에는 좋지 않으므로 사용을 지양한다. */ h1 { color:yellow; font-size: 2em; background-clor:gray;} /* 선언 */ h1, h2, h3, h4, h5, h6 { color:yellow; font-size: 2em; background-clor:gray;} /* 선택자&선언 */- class 선택자: .을 이용해 표현할 수 있다. 다중 class 선언도 가능하다.
<head> <meta charset="utf-8"> <title>CSS</title> <style media="screen"> .html { color:purple; } .css { text-decoration: underline; } </style> </head> <body> <dl> <dt class="html">HTML</dt> <dd><span class="html">HTML</span>은 문서의 구조를 나타냅니다.</dd> <dt class="css">CSS</dt> <dd><span class="css">CSS</span>는 문서의 표현을 나타냅니다.</dd> <dt class="html css">JS</dt> <dd><span class="html css">JS</span>는 문서의 동작을 나타냅니다.</dd> <dl> </body>- id 선택자: .대신에 #을 이용한다. class 선택자와의 차이는 문서 내에 유일한 요소에 사용하며, 구체성의 값이 다르다.
<head> <meta charset="utf-8"> <title>CSS</title> <style media="screen"> .html { color:purple; } .css { text-decoration: underline; } #id-selector { font-size: 30px; } .html.css { border: 1px solid; } /* 선택자 조합 */ </style> </head> <body> <dl> <dt class="html">HTML</dt> <dd><span class="html">HTML</span>은 문서의 구조를 나타냅니다.</dd> <dt class="css">CSS</dt> <dd><span class="css">CSS</span>는 문서의 표현을 나타냅니다.</dd> <dt class="html css">JS</dt> <dd><span class="html css">JS</span>는 문서의 동작을 나타냅니다.</dd> <dl> <p id="id-selector">id 선택자는 해쉬 기호를 사용합니다.</p> </body>- 선택자의 조합
/* 요소와 클래스의 조합 */ p.bar { ... } /* 다중 클래스 */ .foo.bar { ... } /* 아이디와 클래스의 조합 */ #foo.bar { ... }- 속성 선택자
- 단순 속성으로 선택
p[class] {color:silver;} p[class][id] {text-decoration:underline;} <p class="foo">Hello</p> <p class="bar">CSS</p> <p class="foo" id="title">Hello</p>- 정확한 속성값으로 선택
p[class="foo"] {color:silver;} p[id="title"] {text-decoration:underline;} <p class="foo">Hello</p> <p class="bar">CSS</p> <p class="baz" id="title">Hello</p>부분 속성값으로 선택:
p[class~="color"] {color:silver;} /* 속성값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택 */ p[class^="color"] {color:silver;} /* 속성값이 "bar"로 시작하는 요소 선택 */ p[class$="color"] {color:silver;} /* 속성값이 "bar"로 끝나는 요소 선택 */ p[class*="color"] {color:silver;} /* 속성의 값이 "bar" 문자가 포함되는 요소 선택 */ <p class="color hot">red</p> /* 1번, 2번, 4번 적용 */ <p class="cool color">blue</p> /* 1번, 3번, 4번 적용 */ <p class="colorful nature">rainbow</p> /* 2번, 4번 적용 */4. 문서 구조 관련 선택자
- 자손 선택자: 선택자 사이에 아무 기호 없이 공백으로 구분한다
div span { color: red }- 자식 선택자: 선택자 사이에 닫는 꺽쇠 기호 '>'를 넣는다. 밑의 예에선 <div>의 자식 요소인 <h1>를 선택하는 선택자이다.
div > h1 { color:red; }- 인접 형제 선택자: 인접 형제 선택자는 선택자 사이에 + 기호를 넣는다. 형제 관계이면서 바로 뒤에 인접해 있는 요소를 선택하는 선택자이다.
/* body 요소의 자식인 div 요소의 자손인 table 요소 바로 뒤에 인접한 ul 요소 선택 */ body > div table + ul { ... }5. 가상 선택자
가상 선택자는 지금 문서 내에 존재하지 않는 요소에 스타일을 부여하거나 특정 요소의 형태를 미리 추정해 가상의 클래스로 스타일을 적용시킬 수 있는 선택자.
- 가상 클래스: 미리 정의해 놓은 상황에 적용이 되도록 약속되어 있는 보이지 않는 클래스. 약속된 상황이 되면 브라우저 스스로 클래스를 적용한다.
:pseudo-class { property: value; }- 문서 구조와 관련된 가상 클래스
- :first-child: 첫 번째 자식 요소 선택
- :last-child: 마지막 자식 요소 선택
li:first-child { color: red } li:last-child { color: blue }- 링크 관련된 가상 클래스
- :link: 하이퍼링크이면서 아직 방문하지 않은 앵커
- :visited: 이미 방문한 하이퍼링크를 의미
a:link { color:blue; } a:visited { color:gray; }- 사용자 동작 관련 가상 클래스
- :focus: 현재 입력 포커스를 갖고 있는 요소에 적용 ex) tab 눌렀을 때 점선 테두리
- :hover: 마우스 포인터가 위치해 있는 요소에 적용
- :active: 사용자 입력에 의해 활성화된 요소에 적용
a:focus { background-color:yellow; } a:hover { font-weight: bold; } a:active { color:red; }- 가상 요소: 미리 정의해 놓은 위치에 삽입이 되도록 약속되어 있는 보이지 않는 요소. CSS3부터 가상 클래스와 구분하기 위해 :: 기호를 사용하기로 했으나 ::문법을 지원하지 않는 하위 브라우저 문제가 있어 상황에 따라 : 기호를 사용한다.
- :before: 가장 앞에 요소를 삽입
- :after: 가장 뒤에 요소를 삽입
- :first-line: 요소의 첫 번째 줄에 있는 텍스트
- :first-letter: 블록 레벨 요소의 첫 번째 문자
6. 구체성
- 구체성: 선택자를 얼마나 명시적으로 선언했느냐를 수치화 한 것. 구체성의 값이 높을 수록 우선되어 적용된다.
0, 0, 0, 0 - 0, 1, 0, 0: 선택자에 있는 모든 id 속성값
- 0, 0, 1, 0: 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
- 0, 0, 0, 1: 선택자에 있는 모든 요소, 가상 요소
- 전체 선택자는 0, 0, 0, 0을 갖는다. 조합자는 구체성에 영향을 주지 않는다.
h1 {...} /* 0,0,0,1 */ body h1 {...} /* 0,0,0,2 */ .grape {...} /* 0,0,1,0 */ *.bright {...} /* 0,0,1,0 */ p.bright em.dark {...} /* 0,0,2,2 */ #page {...} /* 0,1,0, */ div#page {...} /* 0,1,0,1 */- 인라인 스타일일 경우 가장 높은 구체성을 가진다. 1,0,0,0
- !important: 별도의 구체성 값은 없지만 구체성을 모두 무시하고 우선권을 갖는다.
7. 상속
- 구체성과 더불어 선언들이 문서에 어떻게 적용되는지를 이해하기 위한 중요한 핵심 개념
- 박스모델 관련 속성들은 상속되지 않는다.
- 상속된 값은 아무런 구체성을 가지지 않으며, 0,0,0,0도 아니다
8. 캐스케이딩
- cascading: CSS가 어떤 기준으로, 어떤 방식으로 문서에 적용 되는 지를 정한 규칙
- 캐스케이딩의 규칙은 1. 중요도와 출처 2. 구체성 3. 선언순서의 순으로 이뤄진다.
'공부일기 > 부스트코스' 카테고리의 다른 글
CSS - 3. 폰트, 텍스트 (0) 2020.09.19 CSS - 2. 단위, 배경, 박스모델 (0) 2020.09.17 HTML - 3. 콘텐츠모델, 시멘틱마크업, 블록&인라인 (0) 2020.09.13 HTML - 2. HTML 태그 (0) 2020.09.12 HTML - 1. HTML 이해하기 (0) 2020.09.12