css - 박스모델

 

html 와 css 의 연결

//전체 셀렉터 : 문서의 모든 요소를 선택합니다.
* { }

//태그 셀렉터 : 는 같은 태그명을 가진 모든 요소를 선택합니다. 복수로도 선택할 수 있습니다.
section, h1 { }

//ID 셀렉터는 #id로 입력하여 선택합니다.
#only { }

//class 셀렉터 : 같은 class를 가진 모든 요소를 선택합니다.
.center { }

//attribute 셀렉터 : 같은 속성을 가진 요소를 선택합니다. 
a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

 

 

 

 

 

---

 

 

글꼴 사이즈를 정할 때

px(픽셀)
기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우
픽셀은 크기가 고정된 절대 단위이기 때문에 사용자 접근성이 불리
픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리합니다.

rem
상대 단위
브라우저의 기본 글자 크기는 1rem. x2(두 배) = 2rem, 작게 = 0.8rem

em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵습니다.

이에 비해 rem은 root의 글자 크기에 따라서만 상대적으로 변하기 때문에 유리한 표현방식 입니다.

 

 

화면 사이즈를 정할 때

반응형 웹(responsive web)
디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트

 

화면 너비나 높이에 따른 상대적인 크기가 중요한 경우

vw(viewport width) = 영역 너비의 1/100

vh(viewpor height)

= 영역 높이의 1/100

 

화면을 가득 채우며 딱 떨어지게 스크롤 되는 사이트

max-width: 100vw;
height: 100vh;

 

 

---

 

 

줄 바꿈이 되는 박스(block)  vs 옆으로 붙는 박스(inline, inline-block)

 

• block 요소의 대표적인 예는 <div>, <p> 입니다.
• inline 요소의 대표적인 예는 <span>입니다

span 의 사용

display 속성 설정하기

span {
  display: inline-block;
  width: 100px;
  height: 100px;
}

• 줄 바꿈이 되는 요소: <h1>, <p>
• 줄 바꿈이 되지 않는 요소: <span>

 

 

 

---

 

 

 

박스를 구성하는 요소

• border(테두리) - 기준
• padding(안쪽 여백)
• margin(바깥 여백)

 

 

margin (바깥 여백)
각각의 값은 top, right, bottom, left로 시계방향

p {
  margin: 10px 20px 30px 40px;
}

 

박스를 벗어나는 콘텐츠 처리

overflow 속성을 지정해 박스보다 큰 콘텐츠에는 스크롤을 표시

p {
  height: 40px;
  overflow: auto;
}

auto : 콘텐츠가 넘치는 경우 스크롤

hidden : 넘치는 콘텐츠의 내용을 보여주고 싶지 않을 때