05. 웹 표준 사이트 만들기 (전체영역이 들어간 사이트!)

이번시간은 '웹 표준 사이트 만들기' 5번째 강의 입니다. 2강~4강은 1강의 연장선 연습 느낌이라 빠르게 넘겼습니다.

 

https://www.youtube.com/watch?v=48qTMCD69Uk&list=PL4UVBBIc6giKixok-bC7XVEx0ZFsngr5Z&index=5 

 

 

아래와 같은 현대백화점인터넷면세점 사이트 같은 좋은 예가 있습니다. 링크에 접속해서 사이트의 크기를 넓히고 줄여도 계속 늘어나는 전체영역과 어떤 크기라도 꼭 보여야하는 가운데 부분으로 나뉘어집니다.

 

- 강의에서는 가운데 부분을 Container라고 칭합니다.

 

https://www.hddfs.com/shop/dm/main.do

현대백화점인터넷면세점

 

링크로 들어가서 웹의 크기를 줄여보면 빨간 선으로 표시한 부분이 전체영역이고 파란선으로 표시한 부분이 고정된 가운데영역의 container부분인 것을 확인 할 수 있습니다. 

 

 

[전체영역 구현하기]

먼저, 전체영역 부분을 구현한 모습입니다. 크기를 늘렸다가 줄여도 저 색칠한 영역은 전체영역을 차지합니다.

하지만 미리보기를 통해 화면에 띄워보면 테두리에 간격이 있는걸 확인할 수 있습니다.

 

이 간격을 표시한 한줄의 코드를 통해 지워주면 됩니다. 

 

 

[전체영역 중 가운데부분 구현하기]

 

다음은 고정된 가운데 영역인 container 부분이며 위와 같이 wrap안에 div를 넣습니다.

style 부분에서 margin은 0 auto를 주면 container 부분이 가운데로 오게 됩니다.

위의 코드를 추가해준 화면입니다.

 

[완성 코드]

 

 

할당된 영역에 폰트를 준 전체 코드입니다.

 

달라진 점은 아래와 같습니다.

- 자식 스타일 속성에 height가 있으면 부모의 height는 생략해도 된다는 점

- 기본 width값이 원래 100%값이기에 위 코드에서 삭제는 해주지 않았지만 삭제가능하다는 점

 

 강의를 들을수록 정말 유익한 것 같습니다ㅎㅎ 꼭 완강해서 저만의 레이아웃으로 구현하고 싶습니다!