오늘의 공부목차
- HTML의 기본구조
- HTML의 기본문법
- 텍스트 표시하기
- 태그의 유형
- 컨테이너 & 전역속성
- 이미지 표시하기
- 과제 - 프로필 만들기
1. HTML의 기본구조
<태그명 속성 = "값"> 콘텐츠 </태그명>
<!DOCTYPE html>
<html>
<head>
문서의 정보
</head>
<body>
화면에 표시될 내용
</body>
<html>2. HTML의 기본문법
<p>
- 문단요소를 나타내는 태그.
- 문단과 문단사이에는 여백이 생긴다.
<H1> ~ <H6>
- 제목 요소를 나타내는 태그
- 숫자가 클 수록 글자의 사이즈가 크다.
<hr>
- 수평선을 표시하는 태그
3. 텍스트 표시하기
- HTML 코드 속 텍스트 특징
- 스페이스를 이용한 공백을 한 번씩만 허용한다.
<br />: 줄바꿈을 표시하기 위한 태그
- 엔터를 이용한 줄바꿈은 무시한다.
: 공백을 두 번이상 표현하고자 할 때 사용
- 스페이스를 이용한 공백을 한 번씩만 허용한다.
4. 태그의 유형
<블록레벨요소 />: 자기가 속한 영역의 너베를 모두 차지하여 블록을 형성한다.<인라인요소 />: 자기에게 필요한 만큼의 공간만 차지한다.블록레벨요소 안에 인라인 요소를 넣을 수 있다.
(반대의 경우는 안됨)
5. 컨테이너 & 전역속성
컨테이너
- 콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할을 하는 요소
<div></div>: 블록레벨 컨테이너<span></sapn>: 인라인 컨테이너
전역속성
- 모든 HTML 태그에서 공통으로 사용할 수 있는 속성
- id
- class
- style
- title
6. 이미지 표시하기
<img src = "url" alt = "설명" />src: 표시할 이미지의url: 위치정보alt: 대체속성width,height: 크기조정
- 이미지가 같은 폴더에 위치해 있으면 '이미지 이름'만 적으면 된다.
- 이미지가 하위폴더에 위치해있으면 '이미지가 속한 폴더의 이름/이미지 이름'
- 상위폴더에 있으면 '../~' 해주면 된다.
7. 과제 - 프로필 만들기
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>말티즈 하니의 프로필</title>
</head>
<body>
<h1>
하 니
</h1>
<img
src="images/KakaoTalk_20231107_222129707.jpg"
alt="더워하느라 헥헥 대고 있음"
width="200"
/>
<div id="introduce">
<p>
저는 여수에 살고있는 암컷 강아지
<strong style="color: blue">하니</strong> 입니다.
</p>
<p>저는 낯을 잘 가리지 않아 사람을 너무 좋아합니다.</p>
<p>얼마 전 이빨이 아파서 병원을 다녔습니다 ㅜㅜ</p>
</div>
<hr />
<div id="favorite">
<h2>너 무 좋 아</h2>
<p>
1. 제가 제일 좋아하는 장난감은 <mark>당근모양 인형</mark>입니다. <br />
2. 저는 주인님이 주시는 <mark>간식</mark>이 너무 좋습니다. <br />
3. 저는 주인님과 함께하는 <mark>산책</mark>을 너무 좋아합니다. <br />
</p>
</div>
<hr />
<span>© 하 니 </span>
</body>
</html>
어제의 ock보다 성장한 오늘의 ock_FE 개발자