HTML

HTML 6

레이아웃 시멘틱 태그(header, nav, aside, section, footer)

웹사이트에서 레이아웃(layout)이란 단순하게 화면 구성(구조)을 뜻합니다. 어떤 웹사이트는 매우 현란하고 멋있게 구성이 되어 있으며 어떤 웹사이트는 아주 단순하게 구성되어 있어보이지만 사실 대부분의 웹사이트는 구조만 놓고 보자면 전혀 다양하지 않습니다. 대부분은 비슷한 구조로 되었있죠 집을 지을때를 생각 보겠습니다. 먼저 어디를 방으로 할지 어디를 화장실로 할지 어디를 창으로 할지 등 구조를 결정한뒤 뼈대를 만들고 내부를 만들고 그뒤에 최종적으로 도배와 장판을 진행합니다. 웹사이트도 이것과 비슷해서 먼저 구조를 결정하고 만든후 상세 디자인 작업을 진행하게 됩니다. 흔히 볼수 있는 웹사이트 레이아웃은 이러한 구조 입니다. 상단에 웹사이트명이 있으며 그아래로 컨텐츠를 연결할 메뉴들이 구성 되고 좌측 영역..

분할 태그 div

div는 division의 약자로 분할하다는 뜻이 있습니다. 이전에 단락태그 p처럼 사용할 수 있습니다. 단락 태그는 문장에 단락을 의미하는 반면 div태그는 단락의 의미가 없고 단순하게 영역을 나누는 역할을 합니다. 위와 같이 이문열 삼국지 소개 하는 문장에서 단락 태그 p로 영역을 나누었다면 전혀 다른 책을 소개하는 박경리 토지 부터는 단락 태그 p로 의미를 부여하는 것은 필요치 않습니다. 이렇게 이문열 삼국지와 박경리 토지의 영역을 의미 없이 독립적으로 나누는 역할을 하는 것이 div 태그입니다. 개발자도구로 기본사이즈를 보면 역시 블럭속성 입니다. 이문열 삼국지 1988년 출간된 이래 누적판매 2,000만 부라는 대기록을 세운『이문열 삼국지』가 출간 30여 년 만에 새롭게 출간된다. 나관중 판본을..

프레임 태그 iframe

iframe 태그는 나중에 다루려고 했으나 다음 강좌인 링크 태그 a를 설명하기 위해 다소 어렵게 생각하실 수 있지만 지금 알려 드리려고 합니다. 프레임의 사전적 의미는 틀, 액자, 틀에 넣다 라는 의미를 가지고 있습니다. 토론회등에 보면 프레임을 씌우려 한다라고도 많이 하지요. 사진 액자를 생각하면 쉽습니다. iframe 은 현재의 웹문서에 다르 웹문서 자체를 포함시킬 때 사용합니다. 가령 a.html 이라는 문서를 만들었는데 b.html 이라는 문서를 작성하다보디 a.html 문서 내용이 다시 나오게 해야 했습니다. 이 경우 a.html 문서를 다시 b.html 문서 내용에 코딩하는 것은 노동력 낭비가 될 것입니다. 이처럼 문서의 일부 내용을 가져오는 것이 아니라 하나의 틀을 만들고 그 틀안에 웹문서..

제목 태그 h1~h6와 폰트의 크기 em

h1, h2, h3, h4, h5, h6 태그는 문서나 특정 영역의 제목을 정의할 때 사용하는 태그입니다. 가장 주요한 제목은 h1을 사용하며 하부로 2번째 제목을 사용할 경우 h2, 그 하부로 또다른 제목이 필요하다면 h3을 사용합니다. 보통의 문서에는 그렇게 하부에 하부에 하부에... 로 들어갈 필요가 없기때문에 대부분은 h1, h2 정도에서 마무리가 되며 h3은 간혹 있을까 말까하는 정도 입니다. 개발자 도구로 h1~h6의 기본적인 사이즈 확인해 보면 h1 = block, margin top bottom 0.67em, font-size: 2em, font-weight:bold h2 = block, margin top bottom 0.83em, font-size: 1.5em, font-weight:b..

html tag 사용법

HTML tag는 tag 이름을 꺾쇠괄호()로 감싸서 표현합니다.사용방법 : 내용 블럭 타입단락 타입인라인 타입 기본적으로 tag는 시작 tag와 종료 tag의 쌍으로 이루어집니다.종료 tag는 tag명 앞에 (/)를 입력해서 종료태그임을 표시합니다. 일부 tag는 종료 tag가 없는 tag도 있습니다. 이러한 태그를 빈 tag(empty tag)라고 합니다.대표적인 빈 tag에서 , , 이 있습니다. tag는 위와 같이 tag로만 표시하기도 하지만 대부분은 속성이라는 것을 가지고 있습니다.속성은 공통으로 쓰이는 것도 있고 전용으로 쓰이는 것도 있습니다.전용으로 쓰이는 대표적인 태그는 , 등이 있으며 추가적인 정보를 제공합니다. 네이버 기본적인 사용법 : 내용  속성은 시작 tag 안에서 사용되며 반..