이다닷

'의미론적인 HTML 태그 문서 작성'이라는 뜻을 가진 시멘틱 마크업은 => 의미를 잘 전달할 수 있도록 HTML 태그 문서를 작성하는 일을 한다. 시멘틱 마크업이란? 시멘틱 마크업을 사용하는 이유 웹 접근성에 효율적 코드 가독성에 따른 유지 보수 용이 검색엔진 최적화에 유리 시멘틱 마크업의 종류 header : 소개 및 탐색에 도움을 주는 콘텐츠, 제목, 로고, 검색 폼 등의 요소가 포함된다. nav : 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 내비게이션이다. 메뉴, 목차, 색인 등에 사용된다. main : 문서 의 주요 콘텐츠를 나타낸다. article : 문서, 페이지, 애플리케이션 또는 사이트 안에서 독립적으로 구분되는 요소에 해당된다. section : 문서나 애플리케이션 영역을 ..

display 속성이란 요소 크기를 어떻게 결정 할건가를 결정하는 속성이다. display 속성 display 속성값의 종류 none block inline inline-block DOCTYPE html> None Block Inline Inline-block body div { font-size: large; margin-bottom: 50px; } .none_div { display: none; background-color: #000000; } .block_div { display: block; background-color: aqua; } .inline_div { display: inline; width: 500px; background-color: chartreuse; } .inline-bloc..

HTML 요소(element)를 원하는 위치에 배치하기 위해서 사용하는 속성이 position 속성이다. position 속성 CSS에서 position 속성은 HTML 문서 상에서 요소를 배치할 수 있다. position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용된다. position: static - 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없다. absolute - 절대 좌표와 함께 위치를 지정할 수 있다. relative - 원래 있던 위치를 기준으로 좌표를 지정한다. fixed - 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정한다. inherit - 부모 태그의 속성값을 상속받..

웹 페이지에서 사용하는 margin(마진)과 padding(패딩)은 여백 공간을 의미한다. margin과 padding을 잘 활용하면 웹 페이지에서 원하는 공간에 콘텐츠를 삽입할 수 있게 된다. - 웹 페이지에 요소를 삽입하면 다음과 같은 구성을 보이게된다. - 콘텐츠가 있고, 그 밖을 padding이, 콘텐츠의 테두리 와 다른 요소와의 공백은 margin 영역이라고 한다. margin(마진) margin(마진)은 현재 요소 주변의 여백 공간을 의미한다. margin을 조절하면 현재 요소와 다른 요소간의 공간을 조절할 수 있다. margin 속성 margin: 사방의 마진 영역을 조절한다. margin-top: 상단 마진 영역을 조절한다. margin-bottom: 하단 마진 영역을 조절한다. margi..