1. "이제 실전이다, HTML5&CSS3 사이트 제작의 모든 것"책의 384페이지에 보면
#inner_wrap 선택자에 padding값을 7px 지정하고
nav 선택자에 대해서 top:-7px; left:-7px; margin:0 0 -7px 0; 이런 형태로 지정을 하고 있는데요.
왜 #inner_wrap에 padding값을 지정하고 다시 nav에 음수(-)값을 지정해서 구성해야만 되는건지
여러번 확인해 봐도 정확한 내용에 대해서 이해가 되지 않습니다.
책에도 자세한 설명은 없는 것 같은데요...
쉽게 이해할수 있는 부연 설명이 있다면 부탁드리겠습니다.
2. 가변_왼쪽_html5.html 소스코드를 보다 보니
body 선택자에 font:normal 0.75em/1.5em "맑은 고딕", "돋움"; 와 같이 속성이 지정이 되어 있는데요.
여기에서 0.75em/1.5em 부분은 폰트의 크기를 어떻게 지정한다는 의미인가요?
#inner_wrap 선택자에 padding값을 7px 지정하고
nav 선택자에 대해서 top:-7px; left:-7px; margin:0 0 -7px 0; 이런 형태로 지정을 하고 있는데요.
왜 #inner_wrap에 padding값을 지정하고 다시 nav에 음수(-)값을 지정해서 구성해야만 되는건지
여러번 확인해 봐도 정확한 내용에 대해서 이해가 되지 않습니다.
책에도 자세한 설명은 없는 것 같은데요...
쉽게 이해할수 있는 부연 설명이 있다면 부탁드리겠습니다.
2. 가변_왼쪽_html5.html 소스코드를 보다 보니
body 선택자에 font:normal 0.75em/1.5em "맑은 고딕", "돋움"; 와 같이 속성이 지정이 되어 있는데요.
여기에서 0.75em/1.5em 부분은 폰트의 크기를 어떻게 지정한다는 의미인가요?
384페이지에서 보시면 inner_wrap 과 nav 의 속성에는 position 이라는 속성이 있습니다.
position 이라는 속성이 유일하게 CSS의 박스 모델을 겹치거나 상단(z-index 값을 이용하여)에 위치하게 할 수 있는 속성이 있습니다.
inner_wrap 부분에 padding 값이 있는 상태에서 nav 속성중 top:-7px 과 left:-7px을 제거해서 결과를 한번 보시기 바랍니다.
그리고 나서 top:-7px 과 left:-7px을 적용한 결과와 비교해 보시기 바랍니다.
음수값을 지정한 이유는 nav 부분이 패딩 값을 적용한 만큼 하단과 왼쪽에 위치해 버리기 때문에 위치를 교정하기 위해서 다시 음수 값을 통해
위치를 맞춘 것입니다. 이해 되시나요?
2. 0.75em/1.5em 의 속성은 폰트 크기가 0.75em 이고 line-height가 1.5 em 이라는 의미입니다.