HTML: hyper text markup language의 약자로 웹문서를 기술하는 언어이며 웹문서를 표현하기 위해 태그들로 구성되어 있다.
html 문서구조
!DOCTYPE html은 문서를 html로 선언하겠다는 의미이다.
head에는 설정 값과 스타일시트, 자바스크립트 관련 환경설정들이 들어간다.
body 안에는 전달하고자 하는 정보를 담는 곳이다.
태그란 html 문서를 구성하고 있는 요소이다. 태그에는 이름과 속성이 있다.
<>는 열린 태그 </>는 종료태그이며 서로 쌍을 이루는 태그가 있고 열린 태그만 존재하는 것도 있다.
h1~h6는 제목 태그로 숫자가 커질수록 제목의 글자크기는 작아진다.
p(paragraph)태그는 본문에 사용되고 하나의 단락이다.기본적으로 16px
a는 앵커태그로 href=""의 속성을 가지고 경로를 지정해 다른 페이지로 이동할 수 있다.
그리고 target="_blank"는 새로운 창을 띄우고 target="_self"는 현재 페이지를 바꾼다.
i는 이태릭채로 기울이며 sup는 위첨자 ins는 아랫줄, del는 중간에 줄을 긋는 태그이다.
br은 줄 바꿈 태그로 닫는 태그가 없다.
리스트 태그에서 ul은 unorderd list로 순서가 없는 태그, ol는 ordered list로 순서가 있는 태그이다. 그 안에는 li 태그를 집어넣어 리스트를 채운다.
메뉴 리스트인 dl 태그는 dt는 리스트의 상단 제목을 의미하고 그 안에 dd가 리스트를 담당한다.
hr 태그는 가로 줄이다.
표를 나타내는 태그인 table는 한계성 때문에 사용빈도가 줄었다.
tr은 행, td는 열이고, 두 개의 칸을 차지하고 싶으면 td rowspan="2"
또는 td colspan="2"
img 태그에서 alt 속성은 이미지가 없을 경우 글로 나타내주는 것이므로 웹 접근성에 맞게 내용을 채워줘야 한다. 경로를 로컬(컴퓨터 내) 또는 원격으로 연결할 수 있다.
audio 태그도 src 속성을 넣어서 경로를 지정해주고 controls는 영상을 조절할 수 있는 속성, autoplay는 자동 재생, loop는 반복을 지정해주는 속성이다.
위와 같은 내용을 토대로 커피 프랜차이즈 목록을 간단하게 만들었다. ```
커피 프랜차이즈 |
스타벅스
투썸플레이스
이디야커피 결과 이미지
