20.08.09 CSS 레이아웃 기초

deokyeong1020·2020년 8월 9일
0

CSS레이아웃 기초잡기

첫 개발 일지 글이 될 것 같다.
사실 조금 익숙해져잇는 노션을 통해 일일 기록을 하는 것이 더 편하다고 생각했는데,
뭔가 새로운 것에 적응하는 것도 나쁘지 않다고 생각해 개발일지는 Velog로 진행하기로 하였다.

❗️레이아웃을 배우기 전에 HTML의 값들은 기본적으로 디자인 요소를 갖는 것들이 있다. 내가 원하는 방향으로 레이아웃을 배치해주기 위해서는 이러한 값들을 모두 0으로 만들어 줄 필요가 있다. 다음 링크는 그것에 도움을 줄 것이다.

CSS 리셋관련 링크

예전에는 *(유니버셜 태그)를 이용해 CSS Reset을 하였다고 한다. 그런데 요즘은 이런 방식이 랜더링에 악영향을 준다는 인식이 있어서 인지 이런식으로 하지 않는다고 한다.

Display의 기본요소 (4가지)

  • (Default) block : 부모영역만큼 차지 → 크기(width,height)조정 가능. 내부영역= Wid+padding+보더
  • inline : 텍스트 영역만큼만 차지 → 크기 조정이 불가능.
  • inline-block: inline과 block의 속성을 동시에 갖는다.
  • none ⇒ 외에도 flex,grid가 있지만 그건 추후에...

❗️레이아웃을 만든다는 것은 어쩌면 이러한 디스플레이 블록을 잘 처리한다는 말이 아닐까하는 생각이든다.
block와 inline의 속성을 잘 파악하고 적재적소의 위치에 블록을 위치시키는 연습이 필요할 것이다.
ex)
HTML 블록요소) h1~h6, p, div, section, article, header, footer, nav, main, aside 등
인라인 요소) span, a, input 등 이 외에는 요 링크를 참고해서 알아보면서 작업하자.
블록, 인라인요소 참고 링크

Box-sizing

박스 사이즈 크기에 따라 레이아웃이 기준 규격을 넘어가기도하니 주의!


profile
일일 개발 기록 블로그

0개의 댓글