유형
실습문서
주제
웹개발첫걸음
순번
4
태그
설명
날짜
01. html5 기본 구조
‣
<!DOCTYPE> : 현재 문서가 HTML 문서 타입을 명시한다. (HTML5 문서 타입은 <!DOCTYPE html> 이다.)
<html> : HTML 문서의 루트(root) 요소를 정의한다.
<head> : HTML 문서의 메타데이터(metadata)를 정의한다.
- 메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미한다.
- 이러한 메타데이터는 <title>, <style>, <meta>, <link>, <script>, <base>태그 등을 이용하여 표현할 수 있다.
<title> : HTML 문서의 제목(title)을 정의하며, 다음과 같은 용도로 사용된다.
- 웹 브라우저의 툴바(toolbar)에 표시된다.
- 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 된다.
- 검색 엔진의 결과 페이지에 제목으로 표시된다.
<body> : 웹 브라우저를 통해 보이는 내용(content) 부분이다.
02. charset
<meta charset="utf-8"> 태그는 html 파일의 인코딩을 알려주는 태그입니다.
인코딩을 명확하게 알려주지 않으면 웹브라우저 설정 상황에 따라 자동으로 인코딩을 처리해주는데, 처리가 정확할 경우도 있지만, 그렇지 못하는 경우도 많습니다.
‣
‣
03. 제목 요소
h$*6
콘텐츠의 제목을 표시할때는 Heading을 의미하는 H 태그를 씁니다.
H태그는 제목의 중요도에 따라 1~6 단계로 나뉩니다.
- 문서에서 h1은 한개만 사용하세요
- 스크린 리더기에서는 제목의 수준으로 이동할수 있기 때문에 제목태그의 위계순으로 정의하는 것이 좋습니다.
설계단계에서 콘텐츠의 위계관계를 분류하고 그에 맞는 중요도의 요소로 마크업해야 합니다
‣
04. 엔티티코드
엔티티 코드란 Html 문서에서 특수 문자를 입력하기 위해 사용하는 코드
키보드 체계가 다른 나라에서도 같은 특수문자를 보여줄수 있어요
‣
05. 문단요소
문단을 표시하는
pparagraph
‣
작성한대로 표시하는
pre
‣
06. 주소요소
주소를 표시하는 address
HTML 문서의 소유자나 조직에 대한 연락처 정보를 정의할때 사용하는 태그
경기도 부천시 오징구 삼정동 297-5
이메일 : qwerew0@gmail.com
전화번호 : 000-674-5685 메시지보내기 : 000-674-5685‣
07. 텍스트 관련 태그들
텍스트 관련 태그
종류 | 의미 | 표시 |
blockquote | 인용문을 나타냅니다 | 들여쓰기 됨,
스크린리더기에서 인용문처럼 읽어줌 |
em | 강조 | 이탤릭체
스크린리더기에서 강조해서 읽어줌 |
i | 이탤릭체 | |
strong | 강조 | 굵은글씨
스크린리더기에서 강조해서 읽어줌 |
b | 굵은글씨 | |
mark | 형광펜으로 칠한 효과 | |
small | 주의사항, 법적제한, 저작권 | 작은글씨 |
sub | 아래첨자 | 아래첨자 |
sup | 위첨자 | 위첨자 |
hr | 수평선 |
‣
‣
‣
08. 하이퍼링크
‣
‣
_blank 속성을 사용하여 새창으로 링크 할때는 꼭 title="새창열림"을 이용하여 접근성을 높여주세요09. 이미지
‣
alt의 3가지 용법
- 접근성 향상
- 스크린리더기가 alt 속성을 음성으로 읽어줍니다
- SEO (search engine optimization)
- 검색엔진에 이미지의 정보를 알려줍니다
- 대체텍스트
- 이미지가 안뜰 경우 alt 속성이 대신 화면에 보입니다
💢 img 태그는 inline-block 속성입니다.
요소의 바깥은 inline 안쪽은 block 이므로 inline 요소 처럼 화면에 옆으로 표시되며 block 요소처럼 크기를 가질수 있습니다.
‣
10. 경로
😀예제파일
src.zip195.2KB
‣
‣
😜문제
path_test.zip1693.4KB
11. 목록요소
목록을 표시하는 태그
태그 | 설명 | 문법 |
Ordered List 의 약자 : 순서가 있는 목록 | 자식으로 li 만 허용 | |
ul | Unordered List 의 약자 : 순서가 없는 목록 | 자식으로 li 만 허용 |
dl | Description List 의 약자 : 설명목록 | ▪ dl>dt+dd
▪ dt,dd 는 최소 한쌍 |
Ol
‣
Ul
‣
투뎁스
‣
‣
Dl
‣
형성평가
아래의 텍스트를 활용하여 이미지와 같은 화면을 개발하시오
와인의 시음 방법
와인의 역사
와인 맛 보기
세계의 와인
이달의 와인
와인을 좀 더 맛있게 마시는 방법
와인에 알맞은 잔을 선택한다.
와인을 적당한 온도로 마신다.
필요하면 디캔더Decanter:와인 병 속에 담긴 와인을 옮겨 붓는 투명한 유리병에 따라 마신다.
와인 품종에 따른 글래스 선택
리즐링 글래스
글래스의 입구가 넓게 퍼지지 않은 잔으로 와인이 입속으로 부드럽게 들어 가도록 해 준다.
이 잔에 마시는 와인은 리즐링, 쇼비뇽 블랑, 피노 그라고 등이다.
샤도네 글래스
샤도네는 리즐링보다 알코올 도수나 향기가 강한 와인으로 리즐링보다는 큰 잔에 마셔야 한다.
이 잔에 마시는 와인은 알바리노, 버건디 화이트, 샤도네, 애미따지 블랑, 피노 블랑, 쇼비뇽 블랑등이다.
버건디 글래스
버건디 와인의 경우 산과 탄닌의 함량이 높아 입안에서 확 퍼지지 않도록 오므라든 글래스로 깊숙이 마시는 게 좋다.
이 잔에 마시는 와인은 바바레스코, 바롤로, 버건디 레드, 그라나샤, 에미따지 레드, 피노누아, 시라 등이다.
와인 쇼핑몰
추천 와인 사이트
세계의 와인
1999-2011 by WineStroy. All Rights Reserved.
