CSS 정리 - 2019.04.17

- DIV태그는 기본적으로 width가 100%인데, float DIV인 경우 width 100%속성을 주면 한행을 다 차지한다.

 

- 부모에 height값이 절대값으로 지정되어 있으면 그 자식들은 자동으로 height를 100%로 설정하여 높이를 꽉 채운다.

- overflow:hidden은 높이가 정해지지 않은 부모에 적용할 때 사용되는 속성이다.

 

- 부모에 overflow:hidden을 적용하고 너비, 높이가 지정되어 있지 않은 경우에 자식의 내용물이 부모를 넘치게 되면 부모의 사이즈가 늘어난다.

- overflow:hidden 방식은 단점이 있는데, 자식에 position:relative을 설정하게 되면 부모 밖으로 자식이 빠져 나온다.

- 부모에 display:after(after 가상 선택자, 마지막 요소를 만들어냄)를 이용해서 display:block, clear:both를 넣으면 위의 문제가 해결 된다.

 

- <div id="wrap"> 태그로 body를 감싸는 이유는 header와 footer같은 태그를 body 태그내에서 반복해서 사용하기 위함이다.

 

- position:absolute는 부모 태그들 중에서 position:static(기본값)이 아닌 태그를 기준으로 상대 위치를 지정하는 속성이다.

- position:relative 속성은 자신의 위치를 부모를 기준으로 상대값으로 정하고, 자식들에게 마치 "내 자식들 중에 absolute 포지션을 가진 애들은 나를 기준으로 삼아서 상대 위치를 정해라"라고 말하는것과 같다. 즉, 이 속성은 자식들에게 어떤 기준점을 제공하는 역할을 한다.

- absolute와 fixed 속성은 자기 자신과 자식들에게 모두 영향을 미친다.

(자식들에게 미치는 영향 : absolute인 경우 기준점 제공,

 본인에게 미치는 영향 : 자신의 부모 중에서 static 포지션이 아닌 태그를 기준으로 상대 위치 지정)

- fixed 속성은 무조건 브라우저 윈도우를 기준으로 삼는다.

 

- 뷰포트란 모바일 브라우저에서 웹컨텐츠를 표현하기 위해서 애플에서 만든 개념이다. 사용자가 볼 수 있는 크기가 얼마나 되냐를 의미한다.

예를들어 1000px 가로 길이를 가진 웹페이지가 있는데, 모바일 디바이스의 가로 픽셀이 500px이라고 해보자. 이때 뷰포트가 1000인경우 즉, 사용자가 볼 수 있는 웹페이지 가로 픽셀 크기가 1000이지만 디바이스의 가로 픽셀이 500이므로 웹페이지가 반으로 축소되어서 보여질것이다.

그렇기 때문에 뷰포트 == 디바이스 가로 길이 로 맞춰 준다면 확대/축소가 없이 웹페이지를 100%로 볼 수 있을 것이다.

 

- <meta name="format-detection" content="telephone=no"> 아이폰에서 사파리를 사용할때 휴대폰번호와 같은 형식이 텍스트로 있을때 그 텍스트에 지정한 css가 적용되지 않고 전화걸기 링크가 걸리는 경우를 제거하기위해 나온 태그다.

 

- favicon : 웹사이트 https:// 옆에 조그맣게 표시되는 웹페이지 아이콘을 파비콘이라고 한다.

 

<link rel="apple-touch-icon" href="../img/common/ios_120x120.png" />

<link rel="apple-touch-icon-precomposed" sizes="120x120" href="../img/common/ios_120x20.png" />

사파리에서 북마크 추가나 웹사이트 표시 아이콘(파비콘) 설정을 위해 필요하다. 설정하지 않으면 웹페이지의 스크린샷이 설정된다.