티코의 코딩로그
210325 html 기본기 본문
코딩 유튜버 분들의 프론트엔드 영상을 도장깨기중..!
오늘은 드림코딩 엘리님의 영상들을 정주행했다.
워니님, 조코딩님의 영상을 보면서 무작정 페이지를 하나 완성했었다.
근데 그 뒤에 엘리님 영상으로 짧은 개념 영상을 봤더니 더 구조가 잘 이해됐다.
어제 무작정 썼던 코드를 오늘은 이래서 썼구나.. 하고 알게되었달까..!
HTML 페이지를 박스별로 나눠보자!
오늘 영상에서 가장 꿀팁.
모든 웹페이지를 볼 때 마다 header, nav, main, aside... 등의 구조로 나눠보라는 것!
다른 웹페이지를 보면서 이건 어떻게 만들었을까.. 막막했었는데
이렇게 구조를 보는 연습을 하고 났더니 대충 감이 오는 것 같다.
큰 틀에서 점점 세분화 되는 매력이 있다.
html 위키 백과 화면을 분할해본 사진이다.
위쪽 헤더, 양 옆 사이드바, 바디가 있고
각각은 또 세세하게 나눠진다.
Inline / Block
어제 사이트를 만들어보면서 span 태그가 잘 이해되지 않았다.
inline과 block 개념이 와닿지 않았달까..!
오늘은 엘리님 영상을 보면서 이해했다.
Inline → ㅁ ㅁ
Block → ㅁ
ㅁ
이렇게 같은 블럭을 만든다고 가정할 때,
Inline 태그는 공간이 있으면 새로운 블록을 기존 블록 옆에 배치한다.
하지만 Block은 공간이 있어도 아랫줄에 블록을 배치한다.
'TIL' 카테고리의 다른 글
반응형 웹 내 취향으로 만들어보기 (0) | 2021.04.09 |
---|---|
반응형 웹 만들어보기 (0) | 2021.04.01 |
CSS-display, position (0) | 2021.03.31 |
210327 CSS 정리 (0) | 2021.03.27 |
210324 html/css로 구글 페이지 만들어보기 (0) | 2021.03.24 |