210325 html 기본기

코딩 유튜버 분들의 프론트엔드 영상을 도장깨기중..!

오늘은 드림코딩 엘리님의 영상들을 정주행했다.

 

워니님, 조코딩님의 영상을 보면서 무작정 페이지를 하나 완성했었다.

근데 그 뒤에 엘리님 영상으로 짧은 개념 영상을 봤더니 더 구조가 잘 이해됐다.

어제 무작정 썼던 코드를 오늘은 이래서 썼구나.. 하고 알게되었달까..!

 

 

HTML 페이지를 박스별로 나눠보자!

오늘 영상에서 가장 꿀팁. 

모든 웹페이지를 볼 때 마다 header, nav, main, aside... 등의 구조로 나눠보라는 것!

 

다른 웹페이지를 보면서 이건 어떻게 만들었을까.. 막막했었는데 

이렇게 구조를 보는 연습을 하고 났더니 대충 감이 오는 것 같다.

큰 틀에서 점점 세분화 되는 매력이 있다.

 

 

 

슥슥 박스를 나눠보자

html 위키 백과 화면을 분할해본 사진이다.

위쪽 헤더, 양 옆 사이드바, 바디가 있고

각각은 또 세세하게 나눠진다.

 

 

 

Inline / Block

어제 사이트를 만들어보면서 span 태그가 잘 이해되지 않았다.

inline과 block 개념이 와닿지 않았달까..!

 

오늘은 엘리님 영상을 보면서 이해했다.

Inline → ㅁ ㅁ

Block → ㅁ

            ㅁ

 

이렇게 같은 블럭을 만든다고 가정할 때, 

Inline 태그는 공간이 있으면 새로운 블록을 기존 블록 옆에 배치한다.

하지만 Block은 공간이 있어도 아랫줄에 블록을 배치한다.