개발자 도구(<F12> or 웹에서 우클릭 -> 검사): 웹사이트 코드 구성을 볼 수 있음
웹에서 <ctrl + shift + c> 영역 선택해 구성요소를 보고 수정 할 수 있음
우선 html의 시작은 html 태그로 열고 닫아야 한다.
<html>
</html>html은 head와 body섹션으로 나뉜다.
<html>
<head>
</head>
<body>
</body>
</html>#head 섹션: html의 문서 정보를 명시해준다. (이하 기능들은 head섹션 안에 입력)
-문서의 타이틀: 탭에 뜨는 이름 표시
<title>나의 사이트</title> -링크 태그(head 섹션)*: 다른 곳에 저장된 파일들을 html 문서에 불러옴
<link href="style.css" rel="stylesheet" type="text/css" /> href는 파일의 위치, rel과 type은 파일의 성질을 설명
-메타 태그: 웹사이트의 더 자세한 정보를 태그/ 웹이 외부에 공유될 때 뜨는 정보
<meta name="description" content="나의 문서"> 이 외에도 다양한 입력 가능
메타 태그 참조 -> https://webclub.tistory.com/354
-스타일 태그: 스타일 태그 안에서 CSS코드를 사용할 수 있게 해줌
<style>
</style>링크 태그에서 “style.css”를 불러오면 style.css파일로 넘어가 따로 CSS입력 가능
(코딩이 지저분해 지는 것을 방지)
#body 섹션:
Element
-기본 태그 <div></div>
-속성 class=“ ” -> class 속성을 이용해 CSS스타일링을 할 수 있다.
<div class="box">안녕!</div>-버튼 태그 <button></button>
태그를 연달아 달거나 태그 안의 세부 태그를 만들 수 있다.
<body>
<div class="nav">
<div class="nav-item"> 메뉴1 </div>
<div class="nav-item"> 메뉴2 </div>
<div class="nav-item"> 메뉴3 </div>
<div class="nav-item"> 메뉴4 </div>
</div>
<div class="main">
<div class="title">
</div>
<div class="subtitle">
</div>
</div>
<script src="script.js"></script>
</body>body 섹션의 태그들을 더 알아보자!
1. 텍스트 관련 태그
-헤딩 태그: 글씨 크기 조정 (숫자가 클수록 크기가 작음)
<h1>안녕하세요</h1>
<h2>안녕하세요</h2>
<h3>안녕하세요</h3>
<h4>안녕하세요</h4>
<h5>안녕하세요</h5>
<h6>안녕하세요</h6>-굵기, 기울기 태그
<b>굵은 글씨</b
<i>기울은 글씨</i> -문단 나누기 태그
<p>다음 줄로</p>2. 미디어 관련 태그
-이미지 태그 <img src="(이미지 주소)"/> src는 소스(출처 주소)를 의미
<img src="https://upload.wikimedia.org/wikipedia/ko/thumb/1/19/Yee_Oro.PNG/220px-Yee_Oro.PNG" />이미지 주소는 ‘우클릭 -> 이미지 주소 복사’로 얻을 수 있음
-비디오 태그 <video src="(비디오 주소)" controls /> controls-> 재생키 구현
(유튜브 동영상 url주소 복사 https://www.videosolo.com/ko/online-video-downloader/에서
mp4형태 주소로 변환해 입력)
3. 링크 태그(body 섹션) 외부 링크를 태그 할 수 있다!
<a href = "(링크 주소)">링크 이름</a>
<a href = "https://www.google.co.kr/">구글 열기</a>target을 추가하면 링크를 새 창으로 띄우며 이동한다. target="_blank"
<a href = "https://www.google.co.kr/" target="_blank" >구글 열기</a>
4. 태이블 태그: 테이블 표를 만든다.
table 태그를 열고 thead와 tbody를 나눈다.
<table>
<thead>
</thead>
<tbody>
</tbody>
</table>thead에는 table의 컬럼 수와 이름을 정의하고 tbody에서는 컬럼 표의 내용을 입력
<table>
<thead>
<tr>
<td>이름</td>
<td>나이</td>
</tr>
</thead>
<tbody>
<tr>
<td>YEE</td>
<td>500살</td>
</tr>
<tr>
<td>봙봙이</td>
<td>5살</td>
</tr>
</tbody>
</table>border로 표에 테두리를 만들 수 있다.
<table border="1">5. 목록 태그: 목록을 만든다.
-넘버 리스트가 필요한 경우 <ol> = ordered list
<ol>
<li>토끼</li>
<li>개구리</li>
</ol>-숫자 없이 포인트 리스트가 필요한 경우 <ul> = unordered list
<ul>
<li>토끼</li>
<li>개구리</li>
</ul>6. 기본 태그: 구역 나누기, class를 적용해 스타일링 가능
-<div></div>: 한 줄 전체 공간을 차지(block element)
-<span></span>: 자기 내용물 만큼만의 공간만 차지(inline element)
7. 인풋 태그: 유저에게 정보를 받을 때 사용 ex)로그인
-텍스트 인풋: 텍스트 입력 창
<input type="text" />-체크 박스 인풋
<input type="checkbox" />-라디오(동그라미 체크 박스) 인풋
<input type="radio" />-색깔 인풋
<input type="color" />-여러 문장을 받고 싶을 때
<textarea></textarea>-드랍다운
<select name="name">
<option value="1">1번</option>
<option value="2">2번</option>
</select>
*로그인 창 만들기(응용)
<input type= "email" placeholder="이메일" />
<input type="password" placeholder="비밀번호" />
<button type="submit">로그인</button><form>: 정보를 전송하는 태그
Codecademy HTML 연습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>The Brown Bear</h1>
<div id="introduction">
<h2>About Brown Bears</h2>
<p>The brown bear (<em>Ursus arctos</em>) is native to parts of northern Eurasia and North America. Its conservation status is currently <strong>Least Concern</strong>.<br /><br /> There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.</p>
<h3>Species</h3>
<ul>
<li>Arctos</li>
<li>Collarus</li>
<li>Horribilis</li>
<li>Nelsoni (extinct)</li>
</ul>
<h3>Features</h3>
<p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.</p>
</div>
<div id="habitat">
<h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations</h3>
<ol>
<li>Russia</li>
<li>United States</li>
<li>Canada</li>
</ol>
<h3>Countries with Small Brown Bear Populations</h3>
<p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p>
</div>
<div id="media">
<h2>Media</h2>
<img src="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg" alt="A Brown Bear"/>
<video src="https://content.codecademy.com/courses/freelance-1/unit-1/lesson-2/htmlcss1-vid_brown-bear.mp4" width="320" height="240" controls>
Video not supported
</video>
</div>
</body>
</html>'Front-end > HTML, CSS' 카테고리의 다른 글
| [코뮤니티/한 입 웹개발(H,C)] #2일차 - HTML, CSS 본격 시작하기 (0) | 2021.03.18 |
|---|---|
| [코뮤니티/한 입 웹개발(H,C)] #1일차 - 웹 개발 이해하기 (0) | 2021.03.17 |
| CSS 기초 (2) | 2021.02.14 |
| 웹 개발 가이드라인 (2) | 2021.02.14 |
| 템플릿으로 웹 만들기 (0) | 2021.02.14 |