CSS 소개 및 동작
CSS?
Cascading Style Sheets 약자
- 문서 내에서 내용과 상관 없이 스타일(디자인)을 처리하는 기술
- 수시로 변경되는 웹 화면의 디자인 요소를 HTML에서 분리
- HTML로 만든 뼈대에 색상, 크기, 배치 등의 부가적인 옷을 입히는 것
- CSS의 장점
- 문서와 디자인의 분리로 소스의 관리와 수정 용이
- PC, Mobile 등 다양한 기기별 디자인 적용 용이
- 웹 문서 제작 기간 단축
- 화면 일관성 유지
기본적인 작성 방법
기본 문법
- CSS는 선택자 & 선언부로 구성
- 선택자 : 정의한 스타일을 적용할 대상
- 선언부 : 선택자에 적용할 스타일로
{}안에 작성하며 여러 개일 경우;으로 구분- 속성 : 지정할 속성
- 값 : 지정할 값
- 주석 : multiline 형태 (
/* 주석 내용 */)의 주석 사용
스타일 적용 방법
- 인라인 스타일
- 개별 태그들에
style="property:value;형태로 지정 - 별도로 선택자를 사용하지는 않으며 재사용은 불가
- 일반적으로 다른 스타일에 비해 강력한 우선 순위 가짐
- 개별 태그들에
<body style="color: blue">
. . .
</body>- 내부 스타일
- 일반적으로
<head>의<style>에 집중해서 작성 - 해당 html 페이지 내에서는 선택자 기준으로 재사용 가능
- 페이지에 특화된 내용 작성
- 일반적으로
<head>
<style>
h1 {
color : red;
}
</style>
</head>- 외부 스타일 시트 활용
- 외부에 별도의 스타일 시트 파일(.css)를 만들고<link>태그로 연결
- 모든 페이지에서 재사용 가능
-@import
-style tag안에 설정하며 다른 CSS 파일 내부에서도 사용 가능
-<style>태그의 맨 상단에 위치해야 함
-@import utl("file path");또는@import "file path";형태로 사용
CSS 적용 순서
CSS (Cascading Style Sheet)
- Cascading : 여러 스타일 규칙이 적용될 때 우선순위를 결정하는 방식
- 즉 style은 계층을 갖는다
- 계층 결정 방식
- 중요도 > 명시도 > 소스순서 > 상속
중요도
- Style Sheet은 중요도에 따라 3가지 단계의 origin으로 구성 - user agent, user, author
- user agent : 웹 브라우저가 미리 설정해 놓은 스타일로 가장 낮은 우선 순위를 가짐
- user : 사용자가 자신의 브라우저 설정이나 사용자 스타일 시트에 적용한 스타일
- author : 웹 페이지를 작성한 개발자가 정의한 스타일
- 우선순위 적용 순서는 "얼마나 중요한가?"
- !important는 중요한 속성에 지정
- Inherited style sheet에서는 !important 무시
명시도 / 로드 순서
- 중요도가 같다면 다음으로는 명시도 확인
- 명시도는 선택자를 이용해서 우선순위를 정하기 위한 값
- 얼마나 한정 지을 수 있는가?
- X-Y-Z의 3가지 숫자로 명시도를 매기며 금-은-동과 유사
- X : ID 선택자의 개수
- Y : class 선택자, 속성 선택자, 가상 클래스 선택자의 개수
- Z : 타입 선택자, 가상 요소 선택자의 개수
- 명시도는 선택자를 이용해서 우선순위를 정하기 위한 값
- 만약 명시도까지 같다면 로드된 우선순위에 의해 결정됨
- 마지막에 로드된 속성이 적용
상속
- 부모 요소에 지정한 스타일이 자식 요소에도 적용
- 필요 시 자식은 관련 속성을 재정의 가능 - 동일한 속성을 설정한다면 가장 마지막 설정이 적용
- 모든 속성이 상속되는 것은 아니다.
- 상속되는 속성 vs 상속되지 않는 속성
- XXX는 관련 속성 (ex : paddingXXX - padding, paddingBottom, paddingLeft, ...)
| 그룹 | 상속되는 속성 | 상속되지 않는 속성 |
|---|---|---|
| font & text | fontXXX, textXXX, wordXXX, lineBreak, lineHeight, letterSpacing, whiteSpace, direction | rubyXXX, verticalAlign |
| color & background | XXXcolor | backgroundXXX, background-color |
| layout | listXXX, layoutGridXXX, visibility | borderXXX, marginXXX, paddingXXX, tableLayout, float, clear, display |
| position | (상속되는 속성 없음) | position, bottom, left, right, top, clip, overflow, height, width, zIndex |
- 상속되지 않은 속성을 상속받기 위해서는 값에 inherit 사용
Selector
CSS 선택자
선택자?
- HTML 문서에서 CSS 규칙을 적용할 대상을 선택하기 위한 표현식
- CSS 뿐 아니라 JavaScript, Emmet 등 다양한 분야에서 활용
- 명시도는 선택자를 이용해서 우선순위를 정하기 위한 값
- 얼마나 한정 지을 수 있는가?
- X-Y-Z의 3가지 숫자로 명시도를 매기며 금-은-동가 유사
- X : ID 선택자의 개수
- Y : class 선택자, 속성 선택자, 가상 클래스 선택자의 개수
- Z : 타입 선택자, 가상 요소 선택자의 개수
기본 선택자
| 선택자 | 명시도 | 설명 | 활용 예 |
|---|---|---|---|
| 전체 선택자 (*) | 0-0-0 | HTML 문서 내 모든 요소를 선택. 주로 user agent의 CSS를 reset하는 용도로 사용 | * { margin: 0; } |
| 태그 선택자 | 0-0-1 | 지정된 태그명을 가진 요소를 선택 | p { color: blue; } |
| 클래스 선택자 (.) | 0-1-0 | 특정 클래스 속성값을 가진 요소를 선택. 하나의 태그에 여러 클래스 선언 가능 | .header { color: blue; } |
| ID 선택자 (#) | 1-0-0 | 특정 id 속성값을 가진 요소를 선택. ID는 문서 내에서 유일해야 함 | #logo { width: 100px; } |
- 선택자의 그룹핑 (명시도는 항목별로 평가)
- 여러 선택지를 or 조건으로 연결
- 선택자1, 선택자2, ... {속성:값;}
- 선택자의 결합
- 기존 선택자와 연결해서 사용
- 선택자1선택자2
복합 선택자
| 선택자 | 명시도 | 설명 | 활용 예 |
|---|---|---|---|
자식 선택자 (>) | 각 선택자의 합 | 부모 요소의 직계 자식 요소를 선택 | section > p { background-color: blue; } |
| 자손 선택자 (공백) | 각 선택자의 합 | 부모 요소의 하위 모든 요소(자손)를 선택 | section p { background-color: blue; } |
인접 형제 선택자 (+) | 각 선택자의 합 | 지정된 요소의 바로 다음 형제 요소를 선택 | header + span { background-color: blue; } article + p { background-color: blue; } |
일반 형제 선택자 (~) | 각 선택자의 합 | 지정된 요소의 다음에 오는 모든 형제 요소를 선택 | header ~ p { background-color: blue; } |
속성선택자
| 선택자 | 명시도 | 설명 | 활용 예 |
|---|---|---|---|
[attr] | 0-1-0 | 특정 속성을 가진 요소를 선택 | [data-type] { color: blue; } |
[attr=val] | 0-1-0 | 특정 속성의 값이 정확히 일치하는 요소를 선택 | [type="text"] { color: blue; } |
[attr^=val] | 0-1-0 | 특정 속성값으로 시작하는 요소를 선택 | [href^="https"] { color: blue; } |
[attr$=val] | 0-1-0 | 특정 속성값으로 끝나는 요소를 선택 | [href$=".pdf"] { color: blue; } |
[attr~=val] | 0-1-0 | 특정 속성값을 "단어"로 포함하는 요소를 선택 예: class="button primary" 중 button 선택 | [class~="button"] { color: blue; } |
[attr*=val] | 0-1-0 | 특정 속성값을 부분적으로 포함하는 요소를 선택 (Like) 예: class="dark-primary"에서 dark 선택 | [class*="dark"] { color: blue; } |
가상 클래스 선택자
- 실제로 class 형태로 존재하지는 않지만 상황에 따라 적용되는 class를 지정하기 위한 것
- 개발자가 태그에 class를 지정할 필요는 없으며 class 이름 앞에 : 추가
- 사용자 동작에 반응하는 가상 클래스, 구조적 가상 클래스, 상태 기반 가상 클래스
사용자 동작에 반응하는 가상 클래스
| 선택자 | 명시도 | 설명 | 활용 예 |
|---|---|---|---|
:hover | 0-1-0 | 이벤트 관련: 마우스 커서가 올라간 상태 | a:hover { color: red; } |
:active | 0-1-0 | 이벤트 관련: 마우스로 클릭된 상태 | button:active { background: #ddd; } |
:focus | 0-1-0 | 이벤트 관련: 포커스가 된 상태 | input:focus { border: 2px solid blue; } |
:link | 0-1-0 | 링크 관련: 아직 방문하지 않은 링크 | a:link { color: black; } |
:visited | 0-1-0 | 링크 관련: 한 번 이상 방문한 링크 | a:visited { color: black; } |
구조적 가상 클래스 (위치/순서 기반의 가상클래스)
| 선택자 | 명시도 | 설명 | 활용 예 |
|---|---|---|---|
:first-child:last-child | 0-1-0 | 각각 E가 첫 번째 또는 마지막 자식으로 등장한 요소 | li:first-child { color: red; }li:last-child { color: red; } |
:nth-child(n):nth-last-child(n) | 0-1-0 | 앞에서 또는 뒤에서 n번째 자식 요소 선택 n=1부터 시작, 2n-1 등 수식 가능, even/odd 사용 가능 | tr:nth-child(2n) { color: red; }tr:nth-child(even) |
:not() | 0-1-0 | 해당 선택자가 아닌 요소 선택 (not 자체는 명시도에 영향 없음) | div:not(.exclude) { color: red; } |
:empty | 0-1-0 | 자식 요소나 텍스트가 없는 빈 요소 선택 | p:empty { display: none; } |
:first-of-type:last-of-type | 0-1-0 | 같은 타입 중에서 첫 번째 또는 마지막 요소 선택 | li:first-of-type { color: red; }li:last-of-type { color: red; } |
:nth-of-type(n):nth-last-of-type(n) | 0-1-0 | 같은 타입 중에서 앞/뒤에서 n번째 요소 선택 | tr:nth-of-type(2n) { color: red; }tr:nth-of-type(even) |
:only-child | 0-1-0 | 형제 요소가 없는 요소 선택 | p:only-child { font-size: 1.5em; } |
:only-of-type | 0-1-0 | 같은 타입의 형제 요소가 없는 요소 선택 | img:only-of-type { color: red; } |
상태 기반 가상 클래스
| 선택자 | 명시도 | 설명 | 활용 예 |
|---|---|---|---|
:checked | 0-1-0 | 체크된 상태 | input:checked { background: yellow; } |
:disabled | 0-1-0 | 비활성화된 상태 | button:disabled { opacity: 0.5; } |
:enabled | 0-1-0 | 활성화된 상태 | button:enabled { opacity: 0.5; } |
:valid | 0-1-0 | HTML5 제약 조건(type 등)에 만족하는 요소 | input[type="email"]:valid { opacity: 0.5; } |
:invalid | 0-1-0 | HTML5 제약 조건에 만족하지 않는 요소 | input[required]:invalid { opacity: 0.5; } |
가상 엘리먼트 선택자
- 보이지 않는 가상의 요소를 선택하기 위한 선택자로 엘리먼트 이름 앞에 :: 추가
| 선택자 | 명시도 | 설명 | 활용 예 |
|---|---|---|---|
::before | 0-0-1 | 지정된 요소의 기존 내용 앞에 content 내용 추가 | p::before { content: "내용 : "; } |
::after | 0-0-1 | 지정된 요소의 기존 내용 뒤에 content 내용 추가 | p::after { content: "내용 : "; } |
::first-letter | 0-0-1 | 요소의 첫 번째 글자만 선택 | div::first-letter { font-size: 2em; } |
::first-line | 0-0-1 | 요소의 첫 번째 줄만 선택 | div::first-line { font-size: 2em; } |
::selection | 0-0-1 | 사용자가 드래그한 부분 선택 | div::selection { background: yellow; } |
box model
box model
box model
- 텍스트, 이미지 등의 모든 콘텐트를 사각의 박스 형태로 관리하는 모델
- HTML의 모든 요소는 사각형의 박스 모델
- block 요소는 위에서 아래로, inline 요소는 왼쪽에서 오른쪽으로 배치됨
- box는 content, padding, border, margin으로 구성
content 영역
| 속성명 | 설명 |
|---|---|
| width | 요소의 너비를 지정하는 속성min-width < width < max-width / 기본형: width: 값;값: auto, 길이값(px, em, vw 등), 백분율(%) em: 부모의 font-size 기준vw: viewport width, vh: viewport height |
| height | 요소의 높이를 지정하는 속성min-height < height < max-height 기본형: height: 값;값: auto, 길이값(px, em, vh 등), 백분율(%) |
| min-width | 요소의 최소 너비를 지정하는 속성 / 기본형: min-width: 값;값: 0, 길이값(px, em, vw 등), 백분율(%) |
| min-height | 요소의 최소 높이를 지정하는 속성 / 기본형: min-height: 값;값: 0, 길이값(px, em, vh 등), 백분율(%) |
| max-width | 요소의 최대 너비를 지정하는 속성 / 기본형: max-width: 값;값: none, 길이값(px, em, vw 등), 백분율(%) |
| max-height | 요소의 최대 높이를 지정하는 속성 / 기본형: max-height: 값;값: none, 길이값(px, em, vh 등), 백분율(%) |
display 속성
- block 요소는 width와 height를 갖지만 inline 요소는 무시됨
padding 영역
- content와 border 사이의 여백
| 속성명 | 설명 |
|---|---|
| padding-[dir] | dir은 top / right / bottom / left 각 방향의 여백을 지정하는 속성 / 기본형: padding-[dir]: 값;값: 0, 길이값(px, em 등), 백분율(%) |
| padding | 단축형으로 한 번에 여러 방향 지정 가능padding: 10px; → 모든 방향padding: 10px 20px; → 상하 / 좌우padding: 10px 20px 30px; → 상 / 좌우 / 하padding: 10px 20px 30px 40px; → 상 / 우 / 하 / 좌 (시계방향) |
block 요소와 inline 요소의 padding 차이
| 구분 | block 요소 | inline 요소 |
|---|---|---|
| 좌우 | 모두 패딩 적용 | 모두 패딩 적용 |
| 상하 | 모두 패딩 적용 | 시각적으로는 보임 - 실제 레이아웃에는 영향 없음 (다른 요소를 밀어내지 않음) |
- 위 내용은 border나 margin도 마찬가지로 적용됨
border 영역
- padding을 밖에서 감싸고 있는 테두리
| 속성명 | 설명 |
|---|---|
| border-[dir]-width | 테두리 두께 지정 기본형: border-width: 값;값: thin, medium, thick, 길이값(px 등) |
| border-[dir]-style | 테두리 스타일 지정 기본형: border-style: 값;값: none, solid, dashed, dotted, double, groove, ridge, inset, outset |
| border-[dir]-color | 테두리 색상 지정 기본형: border-color: 값;값: 색상명, RGB, HEX |
| border-[dir]-radius | 모서리 둥글기 지정 dir은 두 방향의 조합 (top/bottom - left/right) 기본형: border-radius: 값;값: 0, 길이값(px), 백분율(%) |
| border-[dir] | 단축 속성 기본형: border: width style color;값은 border-width border-style border-color 순서 |
- 속성별 dir의 의미 및 방향 지정 방식은 padding과 유사
box-sizing
- width와 height를 측정할 때의 기준 설정
| 속성명 | 설명 |
|---|---|
| box-sizing | 요소의 크기 계산 방식을 지정하는 속성 기본형: box-sizing: 계산방식;값: content-box (콘텐츠 영역만 포함, 기본값)border-box (padding과 border를 포함) |
margin 영역
- border 외부에서 다른 요소와의 거리
| 속성명 | 설명 |
|---|---|
| margin-[dir] | dir은 top / right / bottom / left 각 방향의 바깥 여백을 지정하는 속성 기본형: margin-[dir]: 값;값: 0, 길이값(px, em 등), 백분율(%) |
| margin | 단축형으로 한 번에 여러 방향 지정 가능margin: 10px; → 모든 방향margin: 10px 20px; → 상하 / 좌우margin: 10px 20px 30px; → 상 / 좌우 / 하margin: 10px 20px 30px 40px; → 상 / 우 / 하 / 좌 (시계방향) |
block 요소와 inline 요소의 margin
- inline 요소는 padding과 마찬가지로 좌우 margine만 가질 수 있으며 상하 마진은 의미 없음
- block 요소끼리의 상하 마진은 병합 (더 큰 마진 값이 하나만 적용)되며 수평 margin은 각자의 margin을 유지
- 단, 요소의 일반적인 문서흐름을 벗어나는 경우 margin 병합은 발생하지 않음
- position이 absolute / fixed인 경우, float된 요소, display가 flex, grid인 경우, overflow가 hidden으로 적용된 경우
- 단, 요소의 일반적인 문서흐름을 벗어나는 경우 margin 병합은 발생하지 않음
box를 활용한 기본 레이아웃 구성
- 가운데 정렬
- div의 width를 고정한 채 상하 margin을 0으로 두고 좌우 margin을 auto로 구성
- header, footer 고정
- header + footer + main의 height가 viewport를 채우도록 함
- 100vh (100 viewport height)
- header와 footer의 height를 고정
- 나머지 공간을 main이 모두 가져갈 수 있도록 처리
- header + footer + main의 height가 viewport를 채우도록 함
Study Logging...