CSS3

[HTML5] main 요소와 섹셔닝 컨텐츠 (Sectioning contents)

들어가며 사이드 프로젝트 마크업을 하다가 문득 의문이 들었다. main 요소 내부를 두 개의 섹션으로 쪼개고 싶은데, main 요소 안에 section 요소가 들어가도 되는가? 가능하다면, main 요소 안에 동등한 자격을 가진 section 요소 두개를 넣는 것이 좋은가? 아니면 지금 main으로 잡아둔 영역을 섹셔닝 요소 두 개로 분리하여, 하나를 main으로 나머지는 section으로 마크업해야 하는가? 그리고 이 의문은 곧 오늘 공부의 시작점이 되었다. 나도 시맨틱 태그를 사용하고 있기는 하지만, 일하면서 어깨 너머로 터득한 지식에 불과하는지라 각각의 요소가 어떤 식으로 관계를 맺고 있는지 정확하게 알지 못한다. main 요소와 section 요소의 정의를 다시 한 번 살펴보고 위와 같은 의문에 ..

[HTML/CSS] 박스 모델 - Box model

박스 모델이란? 모든 HTML 요소(Element)는 박스 형태로 이루어져 있다. 웹 브라우저에서 HTML 요소를 구성할 때 각각의 요소가 차지하는 박스 공간을 정의한 모델을 박스 모델이라고 부른다. 이 박스 공간은 각각 Content & Padding & Border & Margin 으로 이루어져있다. CSS 속성(Property)을 이용해 각각의 HTML 요소가 차지하고 있는 박스 모델의 공간을 정의하고, 스타일을 지정하고, 정렬을 컨트롤하는 것이 웹디자인과 웹퍼블리싱의 핵심이다. Content 텍스트나 이미지 등 해당 요소의 내용이 위치하는 부분. width와 height 속성을 이용해 규격을 지정할 수 있다. box-sizing이 content-box일 경우, 규격을 지정하는 기준이 된다. P..

[HTML/CSS] 필요 개념 정리

1. HTML이란? Hyper Text Markup Language 2. 요소(Element) 내용 하나의 태그로 완성된 라인를 요소(Element)라고 부른다. 각각의 태그는 약속된 명령어로, 고유한 기능을 가지고 있다. 3. DOM (Document Object Model) DOM을 이용해 javascript로 html을 동적으로 제어할 수 있음. document.getElementById('tadID').InnerText HTML 파일로 가서 'tagID'라는 id를 가진 태그를 선택해서 제어한다.