02. CSS 기본

01. CSS Box Model

모든 요소는 네모(박스모델)이고, 위에서부터 아래로, 왼쪽에서 오른쪽으로 쌓인다

content  padding  border  margin

 

Box model

shorthand 표현

 

 

box sizing

내가 원하는 너비는 100px -> 실제 box 의 너비는 142 

100으로 설정하려면?

 

• 기본적으로 모든 요소의 box-sizing은 content-box
  • Padding을 제외한 순수 contents 영역만을 box로 지정
• 다만 우리가 일반적으로 영역을 볼 때는 border까지의 너비를 100px 보는 것을 원함
  • 그 경우 box-sizing을 border-box으로 설정

 

---

02. 개발자 도구

웹 브라우저 크롬에서 제공하는 개발과 관련된 다양한 기능을 제공

 

Elements - DOM 탐색 및 CSS 확인 및 변경

- Styles : 요소에 적용된 CSS 확인

- Computed : 스타일이 계산된 최종 결과

- Event Listeners : 해당 요소에 적용된 이벤트 (JS)

 

Sources, Network, Performance, Application, Security, Audits 등

 

CSS 조작하기 

• 우선순위, 파일 로딩 등에 의해 적용되고 있는 모든 CSS를 확인할 수 있음
• 원하는 속성을 제거해보거나, 값을 변경하여 결과를 바로 확인할 수 있음
• 박스모델에 해당하는 영역 값을 쉽게 변경할 수 있음

 

---

03. CSS Display

 

| CSS 원칙

display에 따라 크기와 배치가 달라짐

---

 

display : block

• 줄 바꿈이 일어나는 요소 (다른 elem를 밀어낸다)
• 화면 크기 전체의 가로 폭을 차지함 = 가질 수 있는 너비의 100%
• 블록 레벨 요소 안에 인라 레벨 요소가 들어갈 수 있음

 

---

 

display : inline

• 줄 바꿈이 일어나지 않는 행의 일부 요소
• content를 마크업 하고 있는 만큼만 가로 폭을 차지 = 컨텐츠 영역만큼
• width, height, margin-top, margin-bottom 지정 불가
• 상하 여백은 line-height로 지정

 

---

 

| 블록 레벨 요소와 인라인 레벨 요소

• 대표적인 블록 레벨 : div / ul, ol, li, p / hr / form 등
• 대표적인 인라인 레벨 : span / a / img / input, label / b, em, i, strong 등

 

| 속성에 따른 수평 정렬

블록은 이미 자리를 차지하고 있기 때문에 수평 정렬이 불가능하지 않아?

-> 마진을 조절하여 수평정렬이 된 것처럼! 

-> 바깥 여백을 조정하여 컨텐츠를 수평정렬 한 것처럼보이게 하는 것!

인라인도 다음과 같은 코드로 정렬 가능

text-align : left;
text-align : right;
text-align : center;

 

---

display : inline-block

• block 과 inline 레벨 요소의 특징을 모두 가짐
• inline처럼 한 줄에 표시 가능하고, block처럼 width, height, margin 속성을 모두 지정가능

 

display : none

• 해당 요소를 화면에 표시하지 않고, 공간조차 부여되지 않음
• 이와 비슷한 visibility: hidden은 해당 요소가 공간은 차지하나 화면에 표시 안함

---

04. CSS Position

문서 상에서 요소의 위치를 지정

Position
static	모든 태그의 기본 값(기준 위치)	- 일반적인 요소의 배치 순서에 따름(좌측 상단) - 부모 요소 내에서 배치될 때는 부모 요소의 위치를 기준으로 배치
아래는 좌표 프로퍼티(top, bottom, left, right)를 사용하여 이동 가능
relative	상대 위치	- 자기 자신의 static 위치를 기준으로 이동(normal flow 유지) - 레이아웃에서 요소가 차지하는 공간은 static일 때와 같음(normal position 대비 offset)
absolute	절대 위치	- 요소를 일반적인 문서 흐름에서 제거 후 레이아웃에 공간을 차지하지 않음(normal flow에서 벗어남) - static이 아닌 가장 가까이 있는 부모/조상 요소를 기준으로 이동(없는 경우 body)
fixed	고정 위치	- 요소를 일반적인 문서 흐름에서 제거 후 레이아웃에 공간을 차지하지 않음(normal flow에서 벗어남) - 부모 요소와 관계없이 viewport를 기준으로 이동     -> 스크롤 시에도 항상 같은 곳에 위치함
sticky	스크롤에 따라 static -> fixed	- 스크롤 위치가 임계점에 이르면 fixed와 같이 박스를 화면에 고정할 수 있는 속성

https://developer.mozilla.org/ko/docs/Web/CSS/position