반응형 웹 구현

[미션]
index.jsp 페이지의 layout을 grid 속성을 사용하여 배치하시오

<%@page import="java.util.Date"%>
href='./css/index4.css?version=<%=new Date()%>

box-sizing은 padding 속성때문에 설정해야한다

position:absolute, bottom:5px, right:3px->web browser를 기준(0,0)으로

display:block 설정O->CSS 앵커태그에 가지 않고 근처에 가도 손가락 모양으로 바뀐다(앵커태그를 감싸는 효과)
display:block 설정X->CSS 앵커태그에 가야 바뀐다
(책에 없는 내용)

[미션2]
html, css와 관련된 컨텐츠를 통합 페이지에 표시 할 때 
불필요한 css가 적용되는 파일을 찾아 원인 분석 및 조치
-------------------------------------------------------------------------

반응형 웹 만들기
1) link태그에 media속성 사용
<link rel='stylesheet' type='text/css' href='a.css'
   media='screen and(max-width:400px) and( )>
- 해석 : 표시 될 장치가 스크린이고, 화면의 넓이가 400px이 될 때까지는 a.css를 사용하여 
   layout을 설정하겠다
- 조건( )에 맞는 상태가 되면 a.css에 링크가 걸린다

<ink rel='stylesheet' type='text/css' href='b.css'
   media='screen and(min-width:500px)
                       and(max-width:900px)>
- 해석 : 표시 될 장치가 스크린이고, 화면의 최소 넓이가 500px이고,
  최대 넓이가 900px이하 일 때 b.css를 사용하여 스타일링하겠다

<style>
body{
   background-color:#0f0;                      -> 기본값은 녹색(#0f0)
}
@media screen and (max-width:600px){    -> 최대 넓이가 600px일 때 까지는 빨간색(#f00)
   body{                                                 (적용 범위 : 0px~600px)
      background-color:#f00;
   }
}
@media screen and (min-width:901px){     -> 최소 넓이가 901px일 때 까지는 파란색(#00f)
   body{                                                 (적용 범위 : 600px~901px)
      background-color:#00f;                  
   }
}
</style>

*-and- 앞 뒤 사이 공백을 꼭 띄어야한다