🔍 CSS 적용 우선순위 계산법
참고사이트
선택자에 포함된 항목의 개수를 가중치로 표현하여 합산한 수치를 사용
- 전체 선택자, 복합 선택자는 가중치에 영향을 주지 않음
- 부정선택자는 가중치에 영향을 주지 않음 👉🏻 부정 선택자의 파라미터(선택자 조건)는 가중치에 포함
➰ 가중치 계산법
1-0-0 아이디 선택자
0-1-0 클래스, 속성, 가상 클래스 선택자
0-0-1 태그(요소), 가상 요소 선택자
0-0-0 전체, 복합 선택자
0-1-0-0-0 인라인 방식
1-0-0-0-0 !important
👀 Example
#wrap #content div > input[type="text"] {
color: red;
}
#wrap 1 0 0
#content 1 0 0
div 0 0 1
> 0 0 0
input 0 0 1
[type="text"] 0 1 0
2 1 2
input[type="text"] {
color: blue;
}
input 0 0 1
[type="text"] 0 1 0
0 1 1
👉🏻 red 적용됨
#wrap #content div#Div > input[type="text"] {
color: red;
}
#wrap 1 0 0
#content 1 0 0
div#myDiv 1 0 1
> 0 0 0
input 0 0 1
[type="text"] 0 1 0➰ 적용방법을 고려한 우선순위
✔ 1번이 우선순위가 높고, 8번이 우선순위가 낮음
1. !important
2. 인라인 방식
3. 임베디드 방식
4. @import
5. <link>
6. <link> 안에 적용된 @import
7. 브라우저의 기본 스타일
8. 상속된 스타일
🔍 CSS 레이아웃, Layout
화면에 표현될 태그 요소를 배치하는 작업
- 특정 요소를 어디에 어떻게 배치할 것인가에 대한 전략
👉🏻 태그의 모양, 크기 / 배치될 위치 / 다른 요소들과의 관계
➰ 태그의 기본적인 영역 속성
- width : 컨텐츠(내용물) 영역의 너비
- height : 컨텐츠(내용물) 영역의 높이
- padding : 내부 여백
- border : 테두리
- margin : 외부 여백
➰ CSS 테두리
태그의 컨텐츠 영역과 내부 여백(padding)을 감싸는 영역 👉🏻 컨텐츠 영역은 width와 height로 결정됨
- 테두리까지 포함하여 요소의 내부로 취급
- 설정 방식
border: border-width border-style border-color;
border: 1px soid #ccc; ➡ 두께 1px, 실선, 회색-
border-width : 테두리의 두께
주로 px단위를 이용하여 설정
thin(1px, 기본값) / thick(5px) / medium(3px) -
border-style : 테두리의 모양(스타일) 👉🏻 solid, hidden을 주로 사용 / dotted, dashed 정도까지 사용
- solid(실선) / dotted(점) / dashed(점선) / double(두 줄)
- groove(안쪽 마루) / ridge(바깥쪽 마루) / inset(오목) / outset(볼록) / hidden(테두리 없애기)
✔ 히든은 border의 존재 자체를 없애버림
-
border-color : 테두리의 색상
색상 단위로 설정 👉🏻 기본값은 black -
box-sizing 스타일 속성 ➡ 자주 쓰게 될 것
- content-box : 콘텐트 영역을 기준으로 크기가 정해짐 (기본값)
- border-box : 테두리를 기준으로 크기가 정해짐 👉🏻 boder, padding, 콘텐트 영역 모두 포함한 크기 ➡ 외부요소까지 고려할 때
➰ CSS 여백
태그 요소를 감싸고 있는 투명한 공간 👉🏻 내부 여백(padding), 외부 여백(margin)으로 구성됨
➡ top, right, left, bottom으로 구성되어 있음
-
padding : 테두리의 안쪽과 컨텐츠영역을 감싸고 있음
-
margin : 테두리의 바깥쪽으로 태그 요소 전체를 감싸고 있음
-
여백 설정 방법 👉🏻 padding, margin 설정 방법 같음
- 크기 단위로 설정(주로 px)
- top, right, bottom, left 각각의 방향에 여백을 설정할 수 있음
margin-top, margin-right, ...
-
여백 축약 설정 방법
margin: all;: 상하좌우 모두 똑같이 설정됨margin: top&bottom left&right;: 상하, 좌우에 각각 설정margin: top left&right bottom;: 상, 좌우, 하에 각각 설정됨margin: top, right, bottom, left': 상, 우, 하, 좌에 각각 설정됨
➰ 레이아웃의 배치 흐름 속성
태그요소가 배치되는 방향(흐름)을 설정하는 속성
- float속성 : 태그 요소를 화면에서 이동시킬 수 있는 상태로 설정
- float 속성이 부여되면 다음에 오는 모든 요소들에게 영향을 줌
- left : 요소를 왼쪽을 기준으로 배치
- right : 요소를 오른쪽을 기준으로 배치
- none : float를 하지 않음
- clear 속성 : float속성을 받은 태그의 영향으로부터 벗어나게 하는 속성
- left :
float: left;속성 무시(제거) - right :
float: right;속성 무시(제거) - both : left, right 속성 둘 다 무시
- none : float의 영향을 허용
- left :
➰ overflow 속성
블록 요소의 컨텐츠가 정해져 있을 때( ➡ 따로 지정하지 않으면 너비는 100%, 높이는 auto(내용물만큼)) 내용물이 컨텐츠 영역보다 크거나 많아서 넘친 부분이 발생 👉🏻 넘친 내용물을 어떻게 표현할지 설정하는 속성
- visible : 넘친 부분 보여주기 (기본값)
- hidden : 넘친 부분 감추기, 잘라내기
- scroll : 상하 스크롤, 좌우 스크롤 생성
넘친 부분이 있으면 스크롤 활성화, 넘친 부분이 없으면 스크롤 비활성화 - auto : 상하 또는 좌우 스크롤바를 내용물이 넘친 부분만 생성
상하스크롤, 수직 스크롤, vertical scroll, vscroll, scroll-y
좌우 스크롤, 수평 스크롤, horizontal scroll, hscroll, scroll-x
🔍 레이아웃 박스 모델, Box Model
요소 자체가 화면에 표현되는 방식을 뜻함 👉🏻 요소의 자체 레이아웃의 특성을 정해놓은 것
- block 모델, inline 모델, inline-block 모델 등으로 적용되어 있음
- CSS를 통해 변경할 수도 있음 👉🏻 스타일 속성 display를 이용
➰ 블록 모델, Block Model
display: block; 속성을 부여받은 요소의 레이아웃 모델
- 영역을 지정하기 위해 사용 👉🏻 내용물들이 들어갈 공간을 확보
- 주로 inline 요소
- 블록요소의 자체 레이아웃 특성
- width, height 속성
- width의 기본값 : 100% / height의 기본값 : auto
👉🏻 부모 요소의 너비만큼으로 설정 / 내부 요소의 최대높이로 설정 -> 가변적 - margin 속성 : 외부의 다른 요소와의 간격을 설정
- margin영역이 서로 만나는 부분은 밀어내지 않고 겹쳐짐
- block 요소의 내부 컨텐츠 정렬 :
text-align속성을 이용 - block요소의 외부 자체 정렬 : width를 설정하고(100%보다 작으면 됨)
margin: 0 auto;를 적용
- width, height 속성
✔종결 블록요소
자식태그로 다른 블록요소를 가질 수 없는 태그 👉🏻 더이상 영역을 만들지 않겠다!
인라인 요소나 텍스트만 자식요소(컨텐츠)로 가질 수 있음
<h1>~<h6>, <p>, <caption>, <dt>, <blockqoute>, <address>, ...
➰ 인라인 모델, Inline Model
display: inline;을 이용해 적용할 수 있음
- display속성이 없을 경우 inline설정과 같이 동작하는 경우가 많음
- inline 요소들끼리는 같은 줄에 여러 개를 배치할 수 있음
- 부모요소의 너비를 초과하여 배치될 때 자동 줄바꿈이 될 수 있음
- 인라인 요소의 자체 레이아웃 특성
- width, height 속성 : 설정한 항목이 화면에 적용되지 않음
컨텐츠 영역의 크기는 내용물에 맞춰서 자동으로 결정됨 - border 속성 : 내용물이 줄바꿈되면 border의 모양이 잘려서 줄바꿈 됨
- margin 속성 : left, right만 적용됨 👉🏻 상하여백이 없음
- line-height 속성 : 줄 간격
- 텍스트가 들어갈 수 있는 공간의 높이를 설정
- inline요소의 높이(height), 상하 margin처럼 사용할 수 있음
- width, height 속성 : 설정한 항목이 화면에 적용되지 않음
➰ 인라인블록 모델, Inline-Block Model
display: inline-block;으로 설정해서 적용
- block모델, inline모델의 표현방법이 섞여있음
- 자체 레이아웃(내부 레이아웃)은 block과 비슷 👉🏻 width, height, padding, border, margin은 block처럼 적용
- 외부 요소와의 관계(외부 레이아웃)는 inline과 비슷
- 인라인처럼 한 줄에 여러개의 요소를 배치할 수 있음
- 블록처럼 한 줄을 다 차지하지도 않고 auto margin도 없음
