📓 분할(Division)
컨텐츠나 레이아웃에 영향을 주지 않는 tag
브라우저에 표시될 때 아무런 영향을 받지 않으며 다른 요소들을 그룹으로 묶어서 관리하기 용이하다.
html에서 웹 페이지의 내용을 구분하는데 사용한다.
<div style="background-color: red;">
하나의 영역
</div>
하나의 영역
div의 속성들
style
width : 가로 크기를 정해준다.
픽셀(px)단위, 비율(%)단위로도 정할 수 있다.
height : 세로 크기를 정해준다.
픽셀(px)단위, 비율(%)단위로도 정할 수 있다.
border : 테두리의 굵기를 정해준다.
숫자가 클수록 굵기가 굵어진다.
background-color : 배경색상을 정해준다.
float : 좌, 우를 정렬해주는 속성, 가운데 정렬은 안된다.
margin : div의 정렬기준 끝에서부터 여백을 주는 속성.
margin-top, margin,-bottom, margin-left, margin-right📓 이미지 (image)
웹페이지에 이미지를 삽입하는 tag, 단일 태그이다.
<img src="https://cdn.eyesmag.com/content/uploads/sliderImages/2022/02/18/thehyundai-seoul-reresacfreitas-exhibit-04-3398834b-21d8-45e5-8a78-9287a6fd310e.jpg" alt="테레사 프레이타스의 사진" width="300">
- src 속성에 문제가 있을 때
img 속성
src : 이미지의 경로, 필수적으로 삽입해야한다.
1. 상대경로
현재 위치한 페이지(파일)기준으로 찾아가는 경로
./ : 현재 폴더(ex : "./beer.png" == "beer1.png")
../ : 상위 폴더로
folder/beer.png : 하위 폴더
2. 절대경로
어떤 페이지에 있던 간에 최상위 경로부터 하나씩 써 놓아서 찾아갈 수 있게 작성한 경로
절대 경로에 드라이브 경로는 작성할 수 없음
이미지의 주소를 사용하여 이미지를 넣을 수 있음
width : 가로 크기를 정해준다.
height : 세로 크기를 정해준다.
크기 속성 미사용시 이미지 원본 크기대로 표시해준다.
alt : 이미지가 표시되지 않거나 잘못된 경로일 때 출력되는 메세지를 표시해준다.
어떤 사진인지 알려주는 용도로 쓰는 것이 좋다.
필요 없을 경우 alt="" 로 표시해준다.
title : 이미지 소개를 위한 말풍선을 표시해준다. 📓 Hyperlink
다른 html 파일로 찾아갈 수 있도록 링크를 걸어줄 때 사용한다.
<a href="https://velog.io/@xtiocla/HTML1" target="_blank"> 내 벨로그의 첫 게시물! </a>img 속성
href : 링크한 문서나 사이트의 주소 입력, 전화번호나 메일주소 등 지정 가능
<a href="tel:전화번호">문자열 또는 이미지</a>
<a href="mailto:메일주소">문자열 또는 이미지</a>
target : 현재 창 or 새 창 지정
속성 값
_blank : 링크가 새 창 또는 새 탭에서 열린다
_self : 기본값. 현재 창에서 열린다
_parent : 현재 창의 부모 창에서 열린다
(존재하지 않으면 _self와 동일하게 행동)
_top : 최상위창에서 열린다
(존재하지 않으면 _self와 동일하게 행동)
download : 링크를 보여주는 것이 아니라 다운로드 하기
rel : 현재 문서와 링크한 문서의 관계를 알려준다
hreflang : 링크한 문서의 언어를 지정해준다
type : 링크한 문서의 파일 유형을 알려준다📓 목록
목록 (연관 있는 항목(item)들을 나열한 것을 의미) tag
순서가 없는 목록 (Unordered List) : ul
순서가 있는 목록 (Ordered List) : ol
type : 숫자 외에도 다른 타입으로 바꿔줄 수 있다
1, 2, 3...
a, b, c...
A, B, C...
i, ii, iii...
I, II, III...
reversed : 항목을 역순으로 표시 (boolean type)
start : 중간 번호부터 시작 가능 항목을 나타내는 태그 (List) : li
<ul>
<li>아메리카노</li>
<li>카페라떼</li>
<li>바닐라라떼</li>
<li>아인슈페너</li>
</ul>- 아메리카노
- 카페라떼
- 바닐라라떼
- 아인슈페너
<ol type="i">
<li>아메리카노</li>
<li>카페라떼</li>
<li>바닐라라떼</li>
<li>아인슈페너</li>
</ol>- 아메리카노
- 카페라떼
- 바닐라라떼
- 아인슈페너
📓 설명 목록
설명 목록 만드는 tag (정의, 설명 목록)
반드시 dl태그 안에는 dt, dd태그만 위치할 수 있다.
<dl> 용어를 설명하는 목록 (단어/정의, 질문/답) Definition List
<dt> 목록의 제목 표시 Definition Term
<dd> 목록의 설명 표시 Definition Description
<dl>
<dt>바닐라라떼</dt>
<dd>바닐라 시럽이 들어간 라떼</dd>
<dd>핫보단 아이스가 맛있다. </dd>
</dl>📓 표
<table> //table 태그에 border 속성을 주면 표 테두리가 생성된다. 기본값은 '없음'
<tr> // 표의 행
<th>태그</th> //표에 제목 셀 만들기, <td> 대신 삽입.
<th>설명</th> //다른 글자보다 굵게 표시되고, 셀의 중앙에 위치한다.
</tr>
<tr>
<td>tr</td> // 표의 열
<td>표의 행</td>
</tr>
<tr>
<td>td</td>
<td>표의 열</td>
</table>
<hr> <!-- 설명과 예시를 구분 -->
<table>
<tr>
<th>태그</th>
<th>설명</th>
</tr>
<tr>
<td>tr</td>
<td>표의 행</td>
</tr>
<tr>
<td>td</td>
<td>표의 열</td>
</table>| 종류 | 설명 |
|---|---|
| 아메리카노 | 에스프레소와 물 |
| 카페라떼 | 에스프레소와 우유 |
📓 입력
사용자로부터 값을 입력받을 수 있는 대화형 컨드롤(또는 '필드')을 나타낸다.
input 태그는 type이라는 속성의 값에 따라 입력 요소의 형태나 입력 데이터 유형 등이 달라진다. 사용 가능한 type은 20여 가지이며, 기본값은 text이다.
type 속성값
text : 텍스트를 입력할 수 있는 입력 요소
추가 가능 속성
placeholder : text 입력 전 화면에 나타나는 안내 메세지
maxlength : 글자 갯수 제한
button : 버튼을 누를 수 있는 입력 요소
value : 버튼에 값을 넣어줄 수 있다
color : 색을 선택할 수 있는 입력 요소
range : 값의 범위를 지정할 수 있는 입력 요소
max : 최댓값
min : 최솟값
step : 적용한 숫자만큼 움직인다
date : 날짜를 선택할 수 있는 입력 요소
등 ...
input 태그에 name 식별자를 추가할 수 있다.
여러개의 같은 속성값의 input 태그에 각각 name 식별자를 추가해 구분해준다. <input placeholder="여기에 입력하세요!">
</input> <br>
<input type="button" value="PUSH!">
</input> <br>
<input type="date">
</input>📓 선택
다수의 선택지를 포함할 수 있는 tag, select
메뉴 안에 포함되는 선택지(옵션)은 option 태그를 사용해 표시한다.
<select>
<option>아메리카노</option>
<option>카페라떼</option>
<option>바닐라라떼</option>
</select>
select의 속성
multiple : option을 한 번에 보여주며 다수의 항목을 동시에 선택할 수 있다.