Display 2

[CSS] 웹 페이지 레이아웃(feat. 박스 모델, 마진 병합)

※ 해당 글에서는 CSS의 선택자를 임의로 태그명을 호출하는 것처럼 작성했지만, 실제로는 선택자 작성 방법을 참고하여 호출할 것. 1. CSS 박스 모델 HTML과 CSS에서는 각 태그와 구역을 박스 모델로써 나타낸다. 그리고 여러 개의 박스 모델들이 각각 아래와 같은 구조를 가지며 차곡차곡 쌓인 것이 웹 페이지이다. 이 박스 모델은 margin, border, padding, content로 구성된다. 이 중 margin, padding은 구역의 넓이와 높이, 여백 등을 설정할 수 있는 속성으로, 상하좌우 설정이 가능하다. top, right, bottom, left 순서로 한 줄에 속성값 작성도 가능하다. /* 상하좌우 중 원하는 방향 속성만 지정 */ box { margin-top: 50px; ma..

[HTML] HTML의 태그 요약(feat. block 요소와 inline 요소)

이 글의 내용은 HTML5를 기준으로 공부한 내용을 정리한 글이다. 아래 태그 중에는 몇 가지 태그를 제외하고 HTML5 외 버전이나 브라우저에서 사용할 수 없는 태그도 존재함을 유의할 것. 태그 정리에 앞서 HTML에서 알아두면 좋은 내용 1. HTML 주석 기호: 2. VSC(Visual Studio Code)에서 작성하는 경우에 !(느낌표) 하나를 입력한 후, 탭(tap) 키를 누르면 VSC에서 기본적인 구조를 작성해준다. 3. HTML에서 한글을 사용하기 위해서는 : 문서와 관련된 요약 정보를 담는 태그 4) : 눈에 보이는 웹 사이트의 내용과 모든 구조의 설계 내용을 담는 태그 5) : character setting의 약자로, 모든 문자(한글 등)를 웹 브라우저에서 깨짐 없이 표시할 수 있게 ..