Section1 / Unit3 : CSS
코드스테이츠 수업 3일차!
오늘 배운 CSS내용을 복습해보자
CSS의 사용 목적
CSS는 심미적인 화려함 뿐 아니라, 더 나은 사용자 경험(UX, user experience)을 주기 위한 콘텐츠 배치와 타이포그래피 등을 적용하기 위해 사용
CSS의 기본 문법과 구조
CSS를 HTML에 적용하는 방법
<link> 태그 안에서 href 속성을 통해 파일을 연결
/*예시*/
<link rel="stylesheet" href="index.css" /><link> 요소의 rel 은 연결하고자 하는 파일의 역할이나 특징을 나타냅니다.
CSS(Cascading Style Sheet)는 stylesheet이므로 rel 속성에 stylesheet 를 추가합니다.
href 속성에는 파일의 위치를 추가해야 합니다.
HTML 안에 CSS를 직접 정의하는 것을 권장하지 않는 이유
하나에 집중하기 위해 파일이나 구간을 구분하는 관심사 분리 측면에서 인라인 스타일과 내부 스타일 시트는 권장하지 않습니다.
*인라인 스타일 : 같은 줄에서 스타일을 적용 (ex / <p style="color:gray;">)
*내부 스타일 시트 : CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 <style> 요소 내에서 작성(<head></head>사이에 <style>을 정의)
*외부 스타일 시트(권장) : CSS파일을 만들고 이 파일을 HTML 문서에 연결하여 사용
CSS 박스 모델의 이해
종류로는 줄 바꿈이 되는 박스(block)와 줄 바꿈 없이 옆으로 붙는 박스(inline, inline-box)로 구분
*block박스 : 줄 바꿈O
*inline-box : 줄 바꿈이 일어나지 않는 동시에 block 박스의 특징을 가짐
| block | inline-block | inline | |
| 줄 바꿈 여부 | 줄 바꿈이 일어남 | 줄 바꿈이 일어나지 않음 | 줄 바꿈이 일어나지 않음 |
| 기본적으로 갖는 너비(width) | 100% | 글자가 차지하는 만큼 | 글자가 차지하는 만큼 |
| width, height 사용 가능 여부 | 가능 | 가능 | 불가능 |
박스를 구성하는 네 가지 요소
*Margin (바깥 여백)
-p{ margin : 10px 20px 30px 40px } -> 각각의 값은 top, right, bottom, left로 시계방향
-p{ margin : 10px 20px } -> top과 bottom이 10px, left 및 right가 20px
-p{ margin : 10px } -> 모든 방향에 적용
-margin-top, margin-left 등 위치를 특정해서 여백을 추가할 수 있음
-음수 값 지정 가능(padding에선 X)
-inline, block level 요소에 모두 적용된다. 하지만 좌,우 margin값은 가지지만, inline 속성이라 높이와 너비를 가질 수 없어 상,하에 margin을 가질 수 없다. 적용하려면 inline요소를 display 속성을 사용하여 으로 block 요소로 변환하여야함
*Border (테두리)
-border-width : 테두리 두께
-border-style : 테두리 스타일
-border-color : 테두리 색상
-이외에도 border-style mdn과 같은 키워드를 구글에 검색하면, 테두리 스타일에 대한 다양한 세부 속성을 찾아볼 수 있음
*Padding (안쪽 여백)
-margin과 같은 규칙
-inline, block level의 태그에 모두 적용
*Content (내용)
-텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분
-CSS에서 height와 width 속성을 설정할 때 그 크기가 가르키는 부분은 내용(content) 부분만을 대상
박스 크기를 측정하는 두 가지 기준의 차이
*content-box : 박스의 크기를 측정하는 기본값입니다.
*border-box : 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법
CSS selector
*CSS 속성을 적용할 대상을 선택하는 방법
*기본 셀렉터
(아래 작성하는 코드들은 예시)
-전체 셀렉터 : *{ }
-태그 셀렉터 : ex / h1{ } div{ } section, h1{ }(복수로도 선택 가능)
-ID 셀렉터 : ex / #only{ }
-class 셀렉터 : ex / .widget{ }
-(attribute 셀렉터)
: a[href]{ }
p[id="only"]{ }
p[class~="out"]{ }
p[class|="out"]{ }
section[id^="sect"]{ }
div[class$="2"]{ }
div[class*="w"]{ }
*자식 / 후손 / 형제 셀렉터
-자식 셀렉터 : header > div { } //첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택
-후손 셀렉터 : header div { } //첫 번째로 입력한 요소의 후손을 선택
-형제 셀렉터 : section ~ p { } //같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택
-인접 형제 셀렉터 : section + p { } //같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택
*(기타 셀렉터)
-가상 클래스 셀렉터 : 요소의 상태 정보에 기반해 요소를 선택
a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */-UI 요소 상태 셀렉터
input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */-구조 가상 클래스 셀렉터
p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }-부정 셀렉터
input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }-정합성 확인 셀렉터
input[type="text"]:valid { }
input[type="text"]:invalid { }