미디어 쿼리
화면의 크기에 따라서 웹 페이지의 각 요소들이 반응하여 최적화된 모양으로 바뀌는 것을 반응형 웹(반응형 디자인)이라고 한다.
웹은 수 많은 형태의 화면에 대응해야 했고 그에 적응하기 위한 반응형 웹이 만들어졌고 반응형 디자인을 만들기 위해 아래의 코드를 사용한다.
@media(반응 조건){
반응 태그{
}
}(반응 조건)에 화면의 크기 조건 값이 들어간다.
그 조건이 충족될 때, 반응 태그의 내용이 적용된다.
CSS file
CSS 코드가 <style>태그로 html 파일 내에 같이 작성되면, 각 페이지 별로 동일한 효과를 내는 태그들이 중복되서 쓰이고 html 코드가 상당히 혼잡스러운 느낌을 준다.
이러한 CSS를 별도의 file로 빼고, link를 통해 해당위치에 연결시켜주면 결과는 동일하지만 훨씬 더 효율적인 방식으로 웹 페이지를 작성할 수있게된다.
<link rel="stylesheet" href="style.css">
이렇게 구성하면 디자인에 관련된 작업들은 CSS만 따로 빼서 작업할 수 있게 되고, 반복적인 작업도 획기적으로 줄일 수 있게 된다.
전체적인 코드의 양도 줄일 수 있기 때문에, 웹페이지를 구성하기 위해 전송받는 데이터의 용량도 줄일 수 있다.
한걸음씩