HTML - 웹구성
HTML 입문서
HTML(Hypertext Markup Language,하이퍼텍스트 마크업 언어)
프로그래밍 언어가 아닌 마크업 언어이며,
HTML 요소는 대소문자를 구분하지 않는다.
Element(요소)
Element(요소) : Opening tag(여는 태그) + Content(내용) + Closing tag(닫는 태그)
Empty elements(빈요소) : Single tag(단일 태그)
Attributes(속성) : 요소는 속성을 가질 수 있다
속성값은 작은따옴표나 큰 따옴표상관없이 쓸 수 있으나 섞어쓰면 안된다.
*기본속성
속성 기입방법 : 속성=”속성값”
<input type="text" placeholder="내용을 기입해주세요"/>
HTML
복사
* Boolean attributes(참과 거짓 속성) : 속성의 이름과 동일한 하나의 값만을 가질 수 있다.
<!-- 불리언 속성종류 -->
<!--
allowfullscreen, async, autofocus, autoplay, checked, controls, default,
defer, disabled, formnovalidate, inert, ismap, itemscope, loop, multiple,
muted, nomodule, novalidate, open, playsinline, readonly, required, reversed, selected
-->
<input type="text" disabled />
HTML
복사
멀티미디어와 임베딩
head : 페이지에 대한 여러 정보 표시
문자(charset), 언어(lang), 페이지 정보관련 제목(title)/저자(name)/설명(content), 파비콘(favicon), 스타일시트(css), 스크립트(script)
semantics : 의미있는 태그
의미를 잘 전달할 수 있도록 태그문서 작성
header, footer, datails, aside, article, main, nav, section, summary 등
의미있는 태그와 스타일 태그태그 | 스타일 | 의미 | 스크린 리더 |
strong | 굵은 글꼴 | 중요성,심각성,긴급성을 표현하는 요소 | 강조되서 읽힘 |
b | 굵은 글꼴 | x | x |
em | 기울임 글꼴 | 컨텐츠 특정 부분의 강조 | 강조되서 읽힘 |
i | 기울임 글꼴 | x | x |
하이퍼링크 : 문서를 연결한다
태그 | 속성 | 설명 |
a | href | 페이지 링크 URL |
target | 링크 여는 방법(위치) | |
download | 다운로드 |
이미지
*이미지 종류
래스터 이미지 | 비트맵(.bmp), PNG(.png), JPEG(.jpg), GIF(.gif) |
벡터 이미지 | SVG(.svg) |
HTML 테이블
table. caption, thead, tbody, tfoot, tr, th, td, colgroup, col
colspan | 가로로 합병 |
rowspan | 세로로 합병 |
scope | 헤더 셀과 데이터 셀을 연결하는 방법 |
