오늘두 힘내보자! 얍얍!👉💜_💜👉
☀️ HTML
기본형태
열리고(open) 닫히는(close) 태그 구조를 가지고 있으며 이는 한 쌍
<h1>토끼와 거북이</h1>
<p>옛날 옛적에 토끼와 거북이가 살았습니다 ...</p>☀️ 속성과 값
태그(요소)의 기능을 확장하기 위해 ‘속성’을 사용
<img src="./my_photo.jpg" alt="내 프로필 사진" />
<div class="name">홍길동</div><이미지삽입 소스위치="./my_photo.jpg" 대체텍스트="내 프로필 사진" />
<의미없는분할 태그별명="name">홍길동</의미없는분할>image 태그는 닫히는 태그가 없다. 빈 태그(Empty Tag)
☀️ 부모와 자식 요소
부모요소 안에 자식요소 존재
<PARENT>
<CHILD></CHILD>
</PARENT><section class="fruits">
<h1>과일 목록</h1>
<ul>
<li>사과</li>
<li>딸기</li>
<li>바나나</li>
<li>오렌지</li>
</ul>
</section><section은 <li의 조상(상위) 요소, 반대로 <li는 <section의 후손(하위) 요소
☀️ 빈 태그
닫히는 개념이 없는 태그
/ 가 있는 태그, 없는 태그로 구분됨
<!-- `/`가 없는 빈 태그 -->
<TAG>
<!-- `/`가 있는 빈 태그 -->
<TAG/>
<TAG />
ex) <img />
☀️HTMl 문서의 범위
<!DOCTYPE html>
<html>
<head>
문서의 정보
</head>
<body>
문서의 구조
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="홍길동">
<meta name="description" content="우리 사이트가 최고!">
<title>내 사이트</title>
<link rel="stylesheet" href="./css/main.css">
<script src="./js/main.js"></script>
</head>
<body>
<section>
<h1></h1>
<div>
<ul>
<li></li>
<li></li>
</ul>
</div>
</section>
</body>
</html>☀️ HTML(전체 범위)
<html>는 HTML 문서의 전체 범위를 지정☀️ HEAD(정보 범위)
웹 브라우저가 해석해야 할 HTML 문서의 정보 범위를 지정
-> 웹 페이지의 제목, 웹 페이지의 문자 인코딩 방식, 연결할 외부 파일의 위치, 웹 페이지를 구조화하기 위한 기본 세팅 값
☀️ BODY(구조 범위)
웹 브라우저가 해석해야 할 HTML 문서의 구조 범위를 지정
-> 구조는 사용자가 화면을 통해서 볼 수 있는 내용(콘텐츠)의 형태나 레이아웃 등을 의미하며 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 입력창, 팝업, 광고 등 보이는 모든 것들이 구조에 해당)
☀️ DOCTYPE(DTD, 버전 지정)
현재의 표준 모드는 HTML5
☀️ TITLE(웹 페이지의 제목)
-> <head></head> 안에서 사용하는 태그들은 HTML 문서의 정보를 가지고 있음
-> 웹 브라우저의 각 사이트 탭에서 이름으로 표시
<head>
<title>네이버</title>
</head>
☀️ META(웹 페이지의 정보)
HTML 문서(웹페이지)에 관한 정보(표시 방식, 제작자(소유자), 내용, 키워드 등)를 검색엔진이나 브라우저에 제공
<head>
<meta charset="UTF-8">
<meta name="author" content="홍길동">
<meta name="description" content="우리 사이트가 최고!">
</head>
<!-- 다음과 같이 이해할 수 있습니다. -->
<문서의정보범위>
<정보 문자인코딩방식="UTF-8">
<정보 정보종류="사이트제작자" 정보값="홍길동">
<정보 정보종류="사이트설명" 정보값="우리 사이트가 최고!">
</문서의정보범위>''
☀️ LINK(CSS 불러오기)
외부 문서를 연결할 때 사용. 빈 태그
ex) CSS, icon, html
<head>
<link rel="stylesheet" href="./css/main.css">
<link rel="icon" href="./favicon.png">
</head>
<!-- 다음과 같이 이해할 수 있습니다. -->
<문서의정보범위>
<외부문서연결 관계="CSS" 문서경로="./css/main.css">
<외부문서연결 관계="사이트대표아이콘" 문서경로="./favicon.png">
</문서의정보범위>
rel - (필수)현재 문서와 외부 문서와의 관계를 지정(stylesheet, icon 등)
href - 외부 문서의 위치를 지정
☀️ STYLE(CSS 작성하기)
CSS를 외부 문서에서 작성하여 연결하는 것이 아니고 HTML 문서 내부에 작성할 때 사용
<style>
img {
width: 100px;
height: 200px;
}
p {
font-size: 20px;
font-weight: bold;
}
</style>☀️ HTML 문서의 구조
<body></body> 안에서 사용하는 태그들은 HTML 문서의 구조를
☀️ DIV(막 쓰는 태그)
- <div></div>의 ‘div’는 ‘division’으로 약자로 ‘분할’을 뜻하고 ‘문서의 부분이나 섹션을 정의’
- 특정 범위를 묶는(wrap) 용도로 사용☀️ IMG(이미지 넣는 태그)
- <img>는 HTML에 이미지를 삽입할 때 사용
- HTML에서 삽입(IMG)’/ ‘CSS에서 삽입(background)’
<body>
<img src="./kitty.png" alt="냥이">
</body>
<!-- 다음과 같이 이해할 수 있습니다. -->
<body>
<이미지 경로="./kitty.png" 대체텍스트="냥이">
</body>
src - (필수)이미지의 URL
alt - (필수)이미지의 대체 텍스트(alternate)를 지정
