홍카나의 공부방

HTML VScode의 Live server로 html 문서를 작성한 후, 실시간으로 웹 문서를 확인하는 과정을 거쳤다. 는 문서의 정보가 담기는 영역이라는 것과, , , : script.js의 내용을 include하는 코드 는 이냐 이냐 구분이 된다. ( 자매품 : inline-block ) 쉽게 이야기하면 block 요소인 를 이용하면 한 줄을 다먹고, inline 요소인 을 이용하면 그 원소의 크기 만큼만 공간을 차지하게 된다. , , 도 오랜만에 보는 태그들이었다. 구역을 나누는 데 사용되는 태그들이다. 은 한 번만 사용한다. 은 구역을 나누는 태그인데, 나는 그냥 에 id나 class 속성명을 줘서 구분하며 사용한 경우가 더 많았다. 시맨틱하게 작성하기 위해 , , 등은 사용했다. : 문서에 이..

배치의 중요성 - CSS 우겨 넣으면 유지보수가 어렵고, 변경사항 있으면 대응하기 어렵다. - 반응형 만들 때도 배치를 잘못 잡으면 엄청나게 어렵다. 그러면 HTML 구조와 레이아웃은 어떻게 잡으면 좋을까? 배치 쉽게 하는 방법 - 먼저 가로 방향으로 가상의 구역을 나눠본다. 항상 가로 먼저. - 가로로 나눈 가상의 구역에서 또 가로로 나눌 수 있는 구역을 생각해본다. - 더 이상 가로로 나눌 수 없으면 세로 방향으로 잘라서 레이아웃 배치를 진행한다. 시맨틱 태그(Semantics) - div 태그만으로는 어떤 역할을 하는지 알 수 없다. - 그래서 이런식으로 역할을 알려줬었다. - HTML5가 들어오면서 id="header", id="footer" 이런식으로 많이 쓰다보니까, 그냥 를 만들어줬다. - ..