TIL.40 CSS 알아보기_2(wecode_3일차)

CSS 레이아웃

레이아웃에는 정답도 공식도 없다.

오로지 경험을 통해 배우는것이 훨씬 많다.

보통 <div> 태그를 이용하여 레이아웃을 짜게 되는데 

<div> 태그를 만들고 class 나 id를 부여하여 스타일을 적용하게 되는데

우선순위가 id가 훨씬 높기 때문에 id를 남발하면 selector 지정시 코드가 쓸데없이 복잡하게되므로 class를 사용하는것이 좋다.

---

float

이미지 주변에 텍스트로 감싸기 위해 만들어진 프로퍼티로 

현재는 주로 flex 속성이 훨씬 더 많이 사용되고 있다.

시간이 지나면서 float -> flex로 변환했다는것만 인지하자.

---

Responsive Web(반응형 웹)

반응형 웹이란 pc, 스마트폰, 태블릿 pc 등 디스플레이 종류에 따라 화면의 크기가 자동으로 변하는 웹 페이지를 의미한다.

크기를 조절해 봄으로써 유동적으로 반응하는 반응형 웹인지 여부를 확인 할 수 있다.

 

Media Query 란?

반응형 웹을 구현하기 위한 CSS 기술로 생각하면 된다.

@media 이 키워드의 읨는 media 쿼리를 시작하겠다는 의미이다.

@media

아래 코드의 의미를 해석하자면

480px 보다 작은 화면에서 body 태그 내의 모든 font 크기를 12px로 전부 바꾼다는 뜻이다.

@media only screen and (max-width: 480px) {
	body {
		font-size: 12px;
	}
}

only screen - 화면에 보이는 스크린이기만 하면 전부 적용한다는 의미.

and (max-width: 480px) - media feature라 불리는 부분으로 조건으로 CSS를 적용할지 작성하는 부분이다.