생활코딩(WEB2-CSS 반응형 디자인 ~ 마무리 )

반응형 디자인 

화면에 크기에 따라서 웹페이지에 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는것 

미디어 쿼리 

반응형 디자인을 CSS를 통해 구현 할때 필요한 개념이 미디어 쿼리이고 어떠한 조건을 만족할때만 CSS의 내용이 동작하도록 하는것이 가능하게 하는것 이것을 미디어 쿼리라고 함 

<!-- 특정 크기에서 안보이게 하고 싶을 때 -->
<style>
@media(min-width:800px) {
        div {
          display:none;
        }
      }
</style>
.
.
.
<div>
      Responsive
</div>
<!-- min-width:800px 이거의 의미는 화면의 크기가 최소 800px 이라는 의미 (800px 이상이
되면 글자가 사라짐) 쉽게 말해서 screen-width > 800px 이랑 같은 의미 -->

코드의 재사용

여태했던 style 태그에 내용들을 다른 html에다가 똑같이 적용하려면 복사 붙여 넣기를 똑같이 해주어야 하는데 이게 지금은 페이지 수가 적어서 할만 하지만 엄청나게 많아진다면 아마 할맛이 안날것이다 이러한 중복을 없애기 위해서 

새로운 파일 예를들어 style.css 라는 파일을 만들고 그 안에다가 style 태그에 내용을 복사 붙여넣기 해주고 

html로 돌아와서 style 태그 내용을 지우고 그 자리에다가 style.css 라고 하는 별도의 파일에 저장되어 있는 CSS를 다운로드 받아서 이자리에 원래 그 코드가 있었던 것처럼 동작해 라고 이야기 해주는 <link>태그를 써준다 

<link> 태그를 통해서 웹페이지가 어떤 CSS와 어떤 CSS 파일과 연결되어 있는지를 웹브라우저 에게 알려줄수 있다

<link rel="stylesheet" href="style.css"> 
<!-- rel은 relation의 약자 연결관계를 의미함 stylesheet는 html에서 stylesheet로 연결됨을 의미
style.css 연결하고자 하는 파일 이름 -->