[CSS] 박스모델과 플로팅, 반응형 웹

display 속성

inline 모드

• 앞, 뒤 개행 X
• 다른 요소들과 한 라인에 배치
• Content가 차지하는 양만큼만 공간 차지
• inline 요소
  • < span>
  • < a>
  • < button>
  • ...

block 모드

• 앞, 뒤 개행 O
• 다른 요소들과 다른 라인에 배치
• block의 높이, 너비, 안/밖의 여백을 줄 수 있음
  • 높이 속성 : height
  • 너비 속성 : width
  • 안쪽 여백 : padding
  • 바깥 여백 : margin
• block 요소
  • < div>
  • < p>
  • < h1>~< h5>
  • ...

none

• 해당 컨텐츠를 보여지 않게 함
• visibility:hidden과 차이
  • diplay:none; - 콘텐츠가 차지하는 공간을 없앰
  • visbility:hiddenl - 콘텐츠가 차지하는 공간을 유지하고 보이지만 않음

박스 모델 (box model)

• Content
  • 실질적인 내용을 담고 있는 영역
  • width
    • 너비
    • 기본 값 : 부모의 너비
  • height
    • 높이
    • 기본 값 : 콘텐츠의 양
• padding
  • 안쪽 여백
    • 컨텐츠(텍스트, 이미지, ...)와 영역 사이에 간격
• border
  • 테두리
• margin
  • 바깥 여백
    • 요소 영역 바깥쪽으로 갖는 여백

float 속성

플로팅 관련 속성

float	'뜨다'라는 의미 요소를 플로팅해서 어디에 보여줄 지를 결정
overflow	float된 요소가 부모 요소의 영역보다 클 때, 흘러 넘치는 상황에서 어떻게 보여줄 지 결정
clear	해당 위치에 부유를 제거하여 float된 요소 다음에 오는 요소가 float요소 밑에 깔리지 않게 하는 속성

• float(둥둥 뜨다)
• 요소의 위치, 레이아웃을 배치하기 위해 사용
• 값
  • none : 기본 값
  • left : 띄운 요소를 왼쪽에 배치
  • right: 띄운 요소를 오른쪽에 배치

문제점

1. float 속성을 사용
2. 컨테이너의 height이 기본값이면 컨텐츠의 양만큼 지정
3. 컨텐츠들이 다 float되면 overflow발생

→ 해결

1. 컨테이너에 overflow속성을 auto나 hidden을 줘서 넘친 속성만큼 컨테이너의 높이를 줘야 함
2. 의사 요소(::before / :: after)에 clear속성을 준다

이미지 플로팅

• < img>에 style 속성의 float 값
• 부모 태그의 영역에서 위치할 곳을 지정

<!-- style 속성으로 적용 -->
<p style="border:1px solid;">
	<img alt="Ryan" src="./img/Ryan.jpg" style="width:70px; float: right;">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</p>
<p style="border:1px solid;">
	<img alt="Ryan" src="./img/Ryan.jpg" style="width:70px; float: left;">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</p>

overflow 속성

반응형 웹

• 다양한 장치에서 페이지를 보기 좋게 디자인하는 것

뷰포트 (ViewPort)

• < meta name="viewport" content="width=device-width, initial-scale=1.0">
• width=device-width
  • 디바이스의 너비로 너비를 맞춤
• initial-scale=1.0
  • 초기 화면 배율을 설정
  • 0.0~1.0의 백분율

반응형 텍스트 크기

• vw(viewport width)
  • 1vw == 뷰포트의 1%
    • 뷰포트 50cm의 1vw == 0.5cm

미디어 쿼리

• 미디어 쿼리를 이용해서 화면 조건에 따라 다른 레이아웃 표현
• @ media 조건 {}
  • 조건
    • min-width : 최소 너비
    • max-width : 최대 너비
    • only screen : 화면에 표시될 때만 적용

nav {
  float : left;
  width : 20%;
}
article {
  float : left;
  width : 60%
}
aside {
  float : left;
  width : 20%;
}
@media only screen and (max-width:600px){
  nav, article{
    width : 100%
  }
  aside{
    display : none;
  }
}

• 600px 이상에서
  

• 600px 이하에서
  

position

속성 값	배치
static	기본값 정적 / top,left,... 속성 적용 불가
relative	상대 좌표 기준 위치
absolute	절대 좌표 가장 가까운 relative 부모 요소를 기준(0px,0px)으로 배치
fixed	고정 화면에 고정된 위치에 배치
sticky	사용자의 스크롤 위치에 따라 배치