본문 바로가기

HTML 기본구조 - 시멘틱 태그 HTML 기본구조 - 시멘틱 태그 HTML5 화면구조 시맨틱 태그 HTML을 하기위해서는 기본적으로 시맨틱 태그의 화면 구조를 이해하고 넘어가야 되며 세부 요소로는 herder / section / footer가 있습니다. 시멘틱 태그가 사용된 HTML5의 문서 구조 인터넷상의 문서들을 살펴보면 서로 다른 듯 보이면서도 그 구조는 크게 다르지 않습니다. 사이트의 제목과 로고, 검색 창 등이 잇는 헤더(header) 부분과 여러 내용이 있는 콘텐츠(content) 부분, 본문 외의 내용을 나타내는 사이드 바(side bar), 그리고 저작권 정보와 제작자 정보를 표시하는 푸터(footer) 부분이 문서의 대부분이며, 사이트에 따라 한두 가지 영역이 추가 되곤 합니다. 위 그림에 보이는 것처럼 레이아웃을 만.. 더보기
HTML - <div>, <span> 태그 HTML - , 태그 영역을 나누는 태그 태그 태그는 division의 약자로 레이아웃을 나눌 때 주로 쓰입니다. 태그의 특성상 가로 크기가 영역에 꽉차게 설정되는데, CSS의 float 속성을 이용하면 내용에 꽉 붙게 설정할 수도 있습니다. 가로(width), 세로(height) 크기를 지정할수 있고 테이블 대체하며 레이아웃 배치 용도로 주로 쓰입니다 DIV 영역만 지정 단순히 영역만 지정 DIV 지정된 영역에 바탕색 지정 1) background: 색상 지정된 영역에 바탕색을 설정 DIV 가로 세로 크기 설정 1) width : 세로 크기2) height : 가로크기 가로 세로 크기 설정 DIV 영역 안쪽 여백 설정 1) padding : 여백의 순서는 윗쪽 오른쪽, 아래쪽, 왼쪽입니다 각각의 여백을.. 더보기
HTML - <br>태그, <p>태그 HTML - 태그, 태그, 태그 줄바꿈을 하는 태그 태그 태그는 line break 약자로 줄바꿈을 할때 사용합니다. 태그는 닫아주는 태그가 없는 빈 태그 입니다 하지만 xhtml에서는 태그로, 열고 다는 태그를 대신합니다. 예제) 더보기