HTML, CSS

[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] HTML/CSS 관련 북마크

HTML / List & Table https://poiemaweb.com/html5-tag-list-table HTML5 Tag - List & Table | PoiemaWeb 목록(List)와 표(Table) 형식 표현을 위한 태그 순서없는 목록 (Unordered List) 순서있는 목록 (Ordered List) 중첩 목록 테이블 poiemaweb.com CSS / flex 연습 https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com CSS / Grid Layout https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout CSS 그..

[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를 가진 태그를 선택해서 제어한다.

[HTML5] HTML태그에 나만의 커스텀 속성 추가하기

HTML 태그는 태그의 선언과 속성들로 구성된다. 이때 태그의 속성(attribute)이라는 것은 현대 태그에 추가적인 정보를 제공하는 일종의 메타데이터(Metadata)이다. ​ 이전의 HTML은 태그에 정해진 속성 외에 다른 속성을 지정하는 것은 HTML의 표준을 위반하는 것이었으나, HTML5에서는 특정 요소와 연관되어 있지만 데이터에 대한 확장 가능성을 염두해 두고 data-* 속성을 이용해서 다른 조작을 하지 않고도 의미론적 표준 HTML요소에 추가 정보를 저장할 수 있게 하였다. 자바스크립트 또한 표준화된 DOM 메서드로 데이터셋 속성에 접근할 수 있다. ​ "data-" 속성은 HTML 5 에서부터 사용되기 시작한 속성이지만, 대부분의 웹브라우저에서 사용할 수 있다. HTML5 커스텀 데이터..