쌍용 강북 교육센터 국비학원 Day 42일차
여백설정
margin, padding
margin - 바깥여백을 의미
padding - 안쪽여백을 의미
px이나 %로 값을 입력하며 한개의 값만 입력하면 모든방향에서의 여백설정이고, 2개의 값은 상, 하, 4개의 값을 모두설정하면 값의 순서는 시계방향으로 돌아간다. (상 -> 우 -> 하 -> 좌)
float 속성
float 는 단어는 원래 ‘뜨다’ 라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성이다.
- inherit - 부모 요소에서 상속
- left - 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름.
- right - 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름.
- none - 요소를 부유시키지 않음
left와 right를 통해 부유속성을 지정시 display 속성은 무시된다. (none은 제외) 또한 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라진다.
경로설정
절대경로 - 맨 앞에 ' / ' 로 시작할 때
예) - <link rel ="stylesheet" href="/HTML5/ch02_display/css/mainPage.css">
상대경로 - 맨 앞에 ' / ' 가 없을 경우 ' ./ ' 는 현재경로를 뜻한다 (생략가능)
예) - <link rel ="stylesheet" href="./css/mainPage.css">
HTML4에서 사용하던 태그
| 태그 | 속성 |
| <acronym> | 영문 축약형 사용시 (예 NATO, NASA, GUI 등) |
| <applet> | 임베디드 애플릿 사용 시 |
| <basefont> | 글꼴의 형태 정의 |
| <big> | 글꼴의 크기 지정 |
| <center> | 텍스트 위치 중앙 정렬 |
| <dir> | 디렉토리 리스트 |
| <font> | 글꼴 |
| <frame> | 프레임 |
| <frameset> | 프레임 부속 태그 |
| <noframes> | 프레임 부속 태그 |
| <strike> | 글꼴 효과(글 취소 효과) |
| <tt> | 글꼴 효과(타자기 효과) |
| <u> | 글꼴 효과 언더라인 |
| <xmp> | pre 태그와 동일 효과 |
HTML5에서 새롭게 추가된 태그
| 태그 | 속성 |
| <article> | 웹 페이지의 본문을 정의할 때 사용 (내용이 많을 경우 여러 개의 <article> 요소로 나눌 수 있음) |
| <aside> | Artice의 내용을 보충해 주는 역할을 하는 컨텐츠를 넣을 때 사용. 주로 서브 메뉴를 만들 때 사용 (문서의 주요 내용 외의 내용들을 넣어 문서의 주영역 주변에 배치) |
| <audio> | 오디오를 재생할 때 사용 |
| <canvas> | 그래픽을 보여줄 때 사용(스크립트 언어를 사용해서 구현) |
| <command> | 명령 버튼을 만들 때 사용 |
| <datalist> | 드롭다운 리스트를 만들 때 사용 |
| <details> | 상세한 내용을 보여줄 때 사용 |
| <embed> | 플로그인이나 플래시 요소를 보여줄 때 사용 |
| <figcaption> | <figure>와 함께 사용되며, <figure>의 캡션을 추가할 때 사용 |
| <figure> | 이미지나 사진, 코드 등을 보여줄 때 사용됨 |
| <footer> | 푸터를 정의할 때 사용 (작성자 정보나 저작권 정보, 또는 관련 문서 링크 등 부가 정보들을 담고 있음 주로 문서 하단에 배치) |
| <header> | 헤더를 정의할 때 사용 (사이트에 대한 소개 정보나 메인 메뉴, 사이트 로고 등이 포함됨) |
| <hgroup> | H1부터 H6의 그룹을 만들 때 사용 (제목과 부제목을 묶는 역할) |
| <keygen> | 폼에서 사용되며, 로컬상에 보안키를 저장하고 공개키는 서버로 보냄 |
| <mark> | 텍스트에 마크펜으로 칠한 효과를 줌 |
| <meter> | 길이를 나타내줌. 시각적으로 어느 정도의 길이를 나타내는지 보여 줌 |
| <nav> | 메인 메뉴 및 서브메뉴를 정의할 때 사용 (사이트의 메뉴나 링크 같은 내비게이션 요소들이 포함) |
| <output> | 계산된 결과를 나타낼 때 사용 |
| <progress> | 다운로드 길이 몇 %가 남아있는지 표시할 때 사용 |
| <section> | 섹션을 정의할 때 사용 (실제 문서 내용이 들어감) |
| <source> | 오디오 또는 비디오 태그와 같이 사용되며, 소스를 나타낼 때 사용 |
| <summary> | details 태그와 같이 사용되며, 상세한 내용의 요약을 나타냄 |
| <time> | 문서 내부에 시간을 정의할 때 사용 |
| <video> | 비디오를 재생할 때 사용 |
| <wbr> | 문서의 내용이 길어서 다음 라인으로 표시될 때, 영문인 경우 같은 라인에 문장을 표시해야 하는 경우 사용 |
목록 리스트(list) 관련 태그
관련된 태그들은 텍스트나 이미지 등을 목록화하여 정리하며 카테고리 등을 표현하기 위해서도 자주 사용되는 중요한 태그 중 하나이다.
<ul>, <li> 태그
<ul> (unorder list) 태그는 순서가 없는 목록 을 만들 때 사용되며, <ul> 내부에 <li> 요소(list item)를 포함하여 각 항목을 표시한다. 대부분의 브라우저에서 리스트에는 원과 같은 모양이 표현된다.
<ol>, <li> 태그
<ol> (order list) 태그는 순서 있는 목록을 만들기 위해서 사용되며 <ul>과 같이 내부에 <li>를 포함한다. 대부분의 브라우저에는 리스트가 숫자(기본값) 로 표현되며 속성을 지정하여 변경이 가능하다. <ol>에는 type, start, reserved와 같은 속성을 사용할 수 있으며 속성은 아래와 같다.
type - 목록에 사용될 마커를 지정한다.
start - 목록의 시작 순번을 지정한다.
reserved - 항목을 역순으로 표시
<dl>, <dt>, <dd> 태그
<dl>태그는 제목과 설명이 한 쌍인 설명 목록(description list) 을 만들 때 사용한다. <dt>와 <dd>와 함께 사용되며, <dt>는 제목을 표시하며 <dd>는 설명(내용)을 표시한다. 그리고 다른 태그들과 같이 중첩하여 사용이 가능하다. 즉, <ul> 내에 <ol>을 포함하거나 또 다른 <ul> 등 여러 요소들을 포함하여 사용하는 것이 가능하다.
Semantic 태그
Semantic은 '의미를 갖는다'는 뜻으로, 각 태그가 스스로 의미를 지닌다는 뜻으로 div나 span과 같이 의미가 없는 태그는 태그 이름만 보고는 어떤 내용인지 전혀 유추할 수가 없는 반면 form, table, article 등 의미가 있는 태그는 내용을 명확하게 정의한다.
header
- 페이지의 제목과 같은 소개 내용을 포함한다.
- 일반적으로 heading 태그나 로고 또는 아이콘, 저작권 정보, 검색 양식, 작성자 이름 등을 포함한다.
보통 메뉴, 목차 등에 사용된다.
aside
- 간접적으로 문서와 관련된 내용을 나타낸다.
- 사이드바 또는 콜아웃 상자로 사용된다.
main
- 지배적인 콘텐츠 영역을 나타내는 태그이다.
section
- 구체적인 시맨틱 태그가 없는 문서의 독립적인 영역을 나타낸다.
- 섹션에는 매우 소수의 예외를 제외하고 항상 제목이 있는 것이 일반적이다.
article
- 그 자체로 의미가 있는 웹사이트의 부분이며, 독립적으로 배포 또는 재사용되도록 의도 된 문서이다.
- 게시물, 잡지 또는 신문 기사, 블로그 작성글, 제품 카드, 사용자가 제출한 댓글, 대화형 위젯 등이 있다.
-일반적으로 섹션의 작성자에 대한 정보, 저작권 데이터 또는 관련 문서에 대한 링크를 포함한다.
