제목과 단락태그
-
제목 태그:
태그 이름은 heading을 줄여서 h로 쓴다.
<h1>~<h6>까지 있다. -
단락 태그:
paragraph 를 줄여서 p로 쓴다.
<p></p> -
개행:
개형을 위해서 쓰이는 태그가<br>(linebreak를 줄여서 쓴다.)
닫기 태그와 내용이 존재하지 않는 빈 태그.
-
bold 태그:
<b>: 글자를 굵게 표현하는 태그. -
italic 태그:
<i>: 글자를 기울여서 표현하는 태그. -
underline 태그:
<u>: 글자의 밑줄을 표현하는 태그. -
strike 태그:
<s>: 글자의 중간선을 표현하는 태그.
anchor 태그:
- href 속성:
링크를 만들어 주는 속성. hypertext reference 속성을 가지고 있어야한다. href 속성의 값은 URL.
- target 속성.
링크된 리소스를 어디에 표시할지를 나타내는 속성.
속성값으로는 _self, _blank, _parent, _top
_self는 현재 화면에 표시. target 선언이 없다면 기본적으로 self.
_blank는 새로운 창에 표시. 외부페이지.
_parent, _top은 거의 안쓰임.
- 내부링크
내부링크를 통해 내부의 특정 요소로 이동. id값을 넣고 연결해주면 된다.
컨테이너 요소:
의미없는 요소를 묶기 위한 태그.
스타일을 주거나 서버에 보내는 데이터를 담기 위한 용도로 이런 의미 없는 요소들이 사용된다.
- div태그:
블록 레벨 태그. 기본적으로 한 줄을 생성해서 내용표현. - span태그:
인라인 레벨 태그. 블록 레벨 요소의 한 줄 안에서 표현되는 요소.
※p는 블록, b, i, u, s는 인라인.
리스트
-
ul태그:
unordered list, 순서가 없는 리스트. -
ol태그:
ordered list, 순서가 있는 리스트. -
dl태그:
definition, description list, 용어와 그에대한 정의를 표현할 때 사용.
<dl>은 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조
<dt>: 용어를 나타내는 태그
<dd>: 용어에 대한 정의 또는 설명을 나타내는 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>된장찌개</li>
<li>미역국</li>
<li>시래기국</li>
</ul>
<ol>
<li>수학</li>
<li>과학</li>
<li>국어</li>
</ol>
<dl>
<dt>설명</dt>
<dd>무엇을 설명해드릴까요?</dd>
</dl>
</body>
</html>
<ol>
<li>수학시험범위</li>
<ul>
<li>함수</li>
<li>미적분</li>
</ul>
<li>과학시험범위</li>
<ul>
<li>지구과학</li>
<li>물리</li>
</ul>
</ol>
이미지
- img 태그:
문서에 이미지를 삽입하는 태그. 닫는 태그가 없다. - scr 속성
이미지 경로를 나타내는 속성. - alt 속성
이미지의 대체 텍스트. 웹 접근성 측면에서 중요한 속성. src와 더불어 반드시 들어가야하는 속성. - width/height 속성
이미지의 가로/세로 크기를 나타내는 속성. - 상대경로와 절대경로
상대경로는 현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로이고,
절대경로는 실제 그 이미지가 위치한 곳의 전체 경로입니다.
<!-- 상대경로 -->
<img src="./images/pizza.png" alt="피자">
<!-- 절대경로 -->
<img src="C:/users/document/images/pizza.png" alt="피자">
<img src="http://www.naver.com/pizza.png" alt="피자">- 이미지 파일형식
gif : 제한적인 색을 사용하고 용량이 적으며 투명 이미지와 애니메이션 이미지를 지원하는 형식
jpg : 사진이나 일반적인 그림에 쓰이며 높은 압축률과 자연스러운 색상 표현을 지원하는 형식(투명을 지원하지 않는다.)
png : 이미지 손실이 적으며 투명과 반투명을 모두 지원하는 형식
꼭 웹 퍼플리셔가 될거에요