반응형 헤더 만들기
실습 시작 - 강의를 보면서
html, css 기본 이해 강의를 듣고나서 반응형 헤더 만들기 실습을 해 보았다.
html 구조는 짤 수 있겠지 ! 했는데 그것마저 감이 안와서 좌절 ㅠㅜ
영상을 먼저 보면서 실습한 후, 혼자 실습해 보는 것으로 노선을 변경했다.
실습을 하면서 html은 정말!! 박스로 생각하는게 중요하구나 !! 를 다시 한 번 깨닫게 됐고, 생각보다 css는 엄청 신경 쓸 부분이 많다고 느껴졌다.
예제를 마치고 다시 혼자 실습을 진행하였다.
실습 시작 - 강의를 보지않고, 혼자
강의 들을 때는 분명 이해했다고 생각했는데 (css부분!) 막상 혼자 하려니 여기서 내가 뭘 어떻게 해야 하는거지 ? 라는 의문이 자꾸 들었다.
모르는건 구글링해야지 어째 ...
그래도 드림코딩 강의를 들으면서 모르는 부분을 공식 문서로 확인하는 습관이 생겼다!
flexbox
- 부모 요소(container) 내부에 포함된 블록 콘텐츠를 중앙 정렬하거나
- 자녀 요소(item)의 크기에 상관없이 동일한 간격/크기로 배치하거나
- 동일한 높이로 놔두기
를 편하게 구현할 수 있는 메서드이다.
container에 대한 속성값과, 각각의 item에 대한 속성값이 존재한다.
flexbox를 사용하기 위해서는 container의 display 속성을 flex로 설정해야 한다.
flexbox는 기본 축(main axis)과 교차축(cross axis)가 존재하는데, flex-direction으로 기본 축을 설정할 수 있다.
flex-direction의 기본값은 row이다.
padding
패딩은 아주 기초적인 부분이지만 ... 솔직히 4개 속성값을 주지 않는 경우 어떤 식으로 값이 설정되는지 몰랐다.
- 한 개의 값 : 모든 네 면의 여백 설정
- 두 개의 값 : 위아래, 왼오
- 세 개의 값 : 위, 왼오, 아래
- 네 개의 값 : 위, 오 , 아래, 왼 (시계방향)
미디어쿼리(media query)
미디어 쿼리는 장치, 특성, 수치에 따라 웹 스타일을 수정할 때 사용한다. 따라서 반응형 레이아웃(fluid layout)에 유용하게 사용된다.
이번 실습에서는 웹페이지 너비를 특정 수치 이하로 줄였을 때, 미디어 쿼리가 실행되도록 설정하였다.
미디어 쿼리를 설정하는 구문은 아래와 같다.
@media screen and (max-width:768px){
.navbar {
flex-direction: colum;
}
}
이렇게 미디어쿼리까지 설정하고, 간단한 자바스크립트도 작성한 다음, 실행했는데 자바스크립트가 작동하지 않았다.
구문을 다 살펴봤는데 이상한 부분도 없었는데 .. 딱하나 !!! 자바스크립트 파일을 <script>로 포함할 때 defer 속성을 작성하지 않았던 것이었다 ..^^
script 태그의 속성, defer
브라우저가 스크립트를 문서 분석 이후에, 그러나 DOMContentLoaded 발생 이전에 실행해야 함을 나타내는 불리언 속성입니다.
defer 속성을 가진 스크립트는 자신의 평가가 끝나기 전까지 DOMContentLoaded 이벤트의 발생을 막습니다.
- https://developer.mozilla.org/ko/docs/Web/HTML/Element/script
<script> 태그의 defer 속성은 페이지가 모두 로드된 후에 해당 외부 스크립트가 실행됨을 명시합니다.
defer 속성은 불리언(boolean) 속성으로 명시하지 않으면 false 값을 가지게 되고, 명시하면 true 값을 가지게 됩니다.
이 속성은 <script> 요소가 외부 스크립트를 참조하는 경우에만 사용할 수 있으므로, src 속성이 명시된 경우에만 사용할 수 있습니다.
- http://www.tcpschool.com/html-tag-attrs/script-defer
여차저차 완성한 반응형 헤더!!!! 처음 실습했을 때 폰트를 통일하니까 너무 정신없어서 메뉴 폰트는 다른 것으로 수정했다.
로고랑 아이콘도 필요없을 것 같아서 뺌 .. 근데 이렇게 화면을 보니까 좁은 여백이 너무 고통스러워 보인다!!
여담 : 티스토리 글 쓰는 것도 생각보다 시간이 많이 든다 ^_ㅠ 꾸준히 글 올리시는 분들 리스펙 ...