본문 바로가기

728x90
반응형

HTML

(39)
[HTML] Contents 구분(2) - main, article, section, aside ▶ 문서 내부의 핵심적인 Contents를 지칭할 때 사용. - 내의 주요 Contents를 나타냄. 주요 Contents 구역은 문서의 핵심 주제나 애플리케이션의 핵심 기능성에 대한 부연, 또는 직접적으로 연관된 Contents로 이루어짐. - 예로 블로그에서 사이드, 광고, footer 등의 부분을 제외하고 핵심 포스트 부분이 main에 해당. 은 hidden 속성이 사용된 것을 제외하고 문서당 하나만 존재해야 함. Internet Explorer에서 지원하지 않음. Block level 요소. ▶ 독립적으로 구분되거나 재사용 가능한 영역을 설정. , , 태그는 문서의 헤더, 푸터, 메인(핵심)을 지정해 범위를 설정은 매거진, 뉴스 기사, 블로그 등에 사용됨. 일반적으로 ~를 포함하여 식별. 작성일자..
[HTML] Contents 구분(1) - header, footer, h1 ~ h6 ▶ 소개나 탐색을 돕는 그룹 일반적으로 사이트 가장 상단 부분에 bar가 있으면 header라고 지칭. 로고, 메뉴, 검색 바, 로그인/로그아웃, 회원가입 버튼 등으로 구성. 내에는 다른 나 가 자손으로 올 수 없음. 또한 , , 다른 의 자손이 될 수도 없음. 브라우저 호환성은 Full Support. Block level 요소. ▶ 사이트 하단에 회사 정보, 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담음. 내에는 , 가 자식 요소로 올 수 없음. 브라우저 호환성은 Full Support. Block level 요소 ※ , 와 , 는 로 대체해 사용할 수 있음. 하지만 , 는 각각 header와 footer라는 영역을 지칭하겠다는 의미를 가짐. 의미를 가진다는 것은 브라우저, 검색 엔진, ..
[HTML] Block 요소와 Inline 요소 ▶ Block 요소 - , , 등 1. 사용 가능한 최대 가로 너비를 사용함. - 가로 너비를 지정하지 않았으나 화면의 왼쪽부터 오른쪽 끝까지 배경색이 모두 출력됨. 2. 크기를 지정할 수 있음. - 지정된 px만큼의 너비와 높이를 가지는 영역이 됨. 3. width: 100%, height: 0px에서 출발 - 이 값에서 출발해서 요소가 완성되는 것. - block 요소가 늘 이 값을 가진다는 건 아니라는 점에 유의. - 이전 예와 비교해 height를 지정하지 않으면 내용의 높이만큼만 영역을 가지게 됨. 4. 수직으로 쌓임. - 블록요소는 왼쪽 상단을 기준으로 위에서 아래로 수직으로 쌓임. 5. margin, padding 속성의 상하좌우 여백을 온전하게 사용 가능. - block 요소는 상하좌우 여..
[HTML] 메타데이터(2) - <meta> ▶ 는 HTML 문서(웹 페이지)에 관한 정보(표시 방식, 제작자, 문자 인코딩 방식 등)를 검색 엔진이나 브라우저에 제공함. , , , 에서 나타낼 수 없는 기타 모든 정보들을 표시. 속성 - charset 문자 인코딩 방식(텍스트가 출력되는 방식)을 설정. HTML 문서 내에 작성된 모든 문자들이 화면에 어떻게 출력될지 정의함. UTF-8, EUC-KR 등. 이전에는 EUC-KR이 많이 사용되던 추세였으나 최근에는 UTF-8을 선호함. 문자 인코딩 방식을 설정하는 것이기 때문에 charset 속성을 나타내는 는 보통 보다 앞에 작성함. - content http-equiv 또는 name 속성의 값을 작성. - http-equiv 서버/사용자의 작동방식을 변경할 수 있는 지시사항을 명시(지시사항은 co..
[HTML] 메타데이터(1) - title, link, style, MIME Type, base 내에서 사용하는 태그들은 HTML 문서의 정보를 담고 있음. ▶ HTML 문서, 즉 웹 페이지의 제목을 정의함. 웹 브라우저의 각 사이트 탭에 이름/제목으로 표시됨. HTML 문서의 구조화보다는 정보를 나타내는 태그로 페이지 정보가 브라우저 탭 영역에 출력되기는 하나, 출력을 목적으로 작성하는 것은 아님. ▶ 현재 HTML 문서 외부에 있는 문서를 연결하기 위해 사용. - 특히 HTML 문서 외부에서 작성된 stylesheet(css 문서, .css)를 읽어와 연결시킬 때 가장 많이 사용됨. - 파비콘(favicon) 연결 시에도 사용. 속성 - rel : relationship의 약어. 현재 문서와 외부 문서와의 관계를 명시. 필수 속성. rel은 임의로 작성하는 것이 아니라 정해진 규약 내에서 작성해..
[HTML] HTML 문서의 주요 범위 ▶ !DOCTYPE DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의함. 이는 웹 브라우저에 제공될 HTML 문서가 어떤 버전으로 해석된 후 출력될지 정의. HTML은 크게 1, 2, 3, 4, XHTML, 5의 6가지 버전으로 분류됨. 현재의 표준 모드는 HTML 5 버전. ▶ HTML 문서의 전체 범위를 지정함. 웹 브라우저가 해석해야 할 HTML 문서의 전체 영역, 즉 시작과 끝 지점을 알려 주는 역할. ▶ 웹 브라우저가 해석해야 할 HTML 문서의 정보 범위를 지정함. 여기서 '정보'란 웹 페이지의 제목, 문자 인코딩 방식, 연결되는 외부 파일의 위치, 웹 페이지를 구조화하기 위한 기본 세팅 값 등을 의미. ▶ 웹 브라우저가 해석해야 할 HT..
[HTML] Empty tag(빈 태그) ▶ Empty tag(빈 태그) 일반적으로 태그는 열리고 닫히는 범위가 존재함. ... Empty tag의 경우 닫히는 태그가 별도로 없음. 따라서 비어 있다(empty)고 표현함. 또는 Self closing tag라고 해서 스스로 닫히는 형식으로 쓰이기도 함. 열리는 동시에 스스로 닫아버리는 것. ▶ Empty tag(빈 태그)의 두 가지 방식 '/'가 없는 empty tag - HTML 1, 2, 3, 4에서 사용 가능. '/'가 있는 empty tag - XHTML에서 사용 가능. HTML5에서는 두 가지 방식 모두 사용 가능함. ▶ 사용 시 유의 사항 XHTML 버전이나 Lint 환경 혹은 프레임워크 세팅에 따라 '/'을 사용하는 것이 필수가 될 수 있음. 개발 환경에 따라 '/'을 사용하거나 ..

728x90
반응형