gwooden_코린이
VSCODE를 사용한 HTML 해보기 본문
728x90
html5
웹 표준 유효성 검사
- 크로스 브라우징
- IE <-- 지원종료된 브라우저 사용 비추천
- 크롬
- 엣지
- 파이어폭스
- 사파리
- 브레이브(쿠키, AD 모두 기본 차단)
http
INDEX란?
홈페이지 처음 들어가면 나오는 메인 화면을 보통 INDEX라고 부른다.
<!-- HTML5를 의미-->
<!DOCTYPE html>
<!-- <태그>로 이루어짐, 보통 시작과 끝이 존재 -->
<html lang="ko"> <!-- 한글로 작업을 위해서는 ko 언어로 변경 -->
<!-- head는 정보를 넣어주는 공간 -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 모바일과 PC에 뷰크기 차이가 존재해서 최소한의 수치를 설정한 것
또한, 디바이스 마다 크기도 다르다 보니 그에 맞춰 최소한에 크기도 설정한 것 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello</title>
</head>
<!-- body는 실제 클라이언트에게 보여지는 부분에 대한 정보를 넣는 곳 -->
<body>
Hello HTML
여기는 body 태그입니다.
</body>
</html> <!-- </> 슬레쉬가 있으면 해당 태그 종료를 뜻함 -->
<p>는 단락을 나눠주는 태그
<p>여기는 p태그 </p> <!-- <p>는 단락을 나눠주는 태그 -->
<p>body에 있는 p태그</p>
<br> 줄바꿈 태그
<p>
asd <br> <!-- <br> 줄바꿈 태그 -->
asdadasddadas
asdasdasdasdasdasdas
asdadasddadas
asdasdasdasdasdasdas
</p>
<pre> 태그
<pre>
안녕하세요. 반갑습니다. 오늘 배울
내용은 무엇 무엇 입니다~
끝! 종료
</pre>
<h1~6> 태그
(제목을 쓸 때 사용)
브라우저를 통해서 예를 들어서 '바지'를 검색할때 태그에 있는 메타데이터에서 검색엔진에 우선순위는 제목태그인 <h1>이 제일 우선으로 노출되어 요소에 맞게끔 코드를 구축해줘야 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>h1태그</h1>
<h2>h2태그</h2>
<h3>h2태그</h3>
<h4>h2태그</h4>
<h5>h2태그</h5>
<h6>h2태그</h6>
</body>
</html>
<b> / <i> / <em> / <code> / <sup> / <sub> / <s> / <u> / <q> / <strong> / <big> / <small>
<mark>
<body>
<P>꾸미기 없음</P>
<P><b>b태그 글꼴 진하게</b></P>
<p><i>i태그</i></p>
<p><em>em태그 텍스트 강조</em></p>
<p><code>code태그 코드임을 강조</code></p>
<p>
윗첨자<sup>sup태그</sup>
아래첨자 <sub>sub 태그</sub>
</p>
<p><s>s태그는 취소선</s></p>
<p><u>u태그는 밑줄</u></p>
<p>q태그 <q>인용문표시</q></p>
<p><strong>strong 태그는 진하게</strong></p>
<p>-- 크기 설정 안함 --</p>
<p><big>big태그 큰글자</big></p>
<p><small>small태그는 작은 글자</small></p>
<p><mark>mark는 하이라이트</mark></p>
</body>
<-- 공백을 넣고 싶을때 <pre> 태그 보다 많이 사용
<p>공 백</p> <-- 개당 스페이스 한
< 는 '<'
> 는 '>'
<p>< p ></p>
" 는 ' " " '
<p>" 따옴표 "</p>
& 는 ' & '
<p>&nbsp; 이거는 스페이스바 하나입니다.</p>
- 간단히 활용 해보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>검색 사이트</title>
</head>
<body>
<h1>다양한 검색 사이트들</h1>
<p><strong>인기 검색 사이트 <mark>TOP 3</mark></strong></p>
<h2>Google</h2>
<p>주소 : google.com</p>
<h2>Naver</h2>
<p>주소 : naver.com</p>
<h2>Daum</h2>
<p>주소 : daum.com</p>
</body>
</html>
- 이미지 넣기
<img src="이미지 경로" width="이미지 넓이" height="이미지 높이">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="imageFu/pepe.jpg" alt=""이미지가 없습니다" width="200" height="200">
<!-- 이미지 경로가 잘못 됐을때 -->
<img src="imageFu/pee.jpg" alt=""이미지가 없습니다" width="200" height="200">
<!-- 비율에 따라서 조절도 가능 -->
<img src="imageFu/gifpepe.gif" width="30%" height="20%">
</body>
</html>
- 임시 이미지 주소 사용하기
<body>
<h2>임시 이미지 주소</h2>
<img src="https://via.placeholder.com/200">
</body>
- 임시 이미지에 텍스트 첨부해보기
<body>
<img src="https://via.placeholder.com/200x100?text=aaa">
</body>
- 임시 이미지에 색상 넣어보기
<body>
<img src="https://via.placeholder.com/200x100?text=aaa"><br>
<img src="https://via.placeholder.com/200x100/000000">
</body>
- 임시 이미지에 색상 + 글꼴색?text=내
<img src="https://via.placeholder.com/200x100/000000/ffffff?text=image">
- 링크 넣기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>검색 사이트</title>
</head>
<body>
<h1>다양한 검색 사이트들</h1>
<p><strong>인기 검색 사이트 <mark>TOP 3</mark></strong></p>
<h2>Google</h2>
<p>주소 : <a href="http://www.google.com">google.com</a></p>
<h2>Naver</h2>
<p>주소 : naver.com</p>
<h2>Daum</h2>
<p>주소 : daum.com</p>
</body>
</html>
- target="_blank" <-- 새창에서 열고 싶을떄
- _parent : 부모 창에 새 페이지를 열어줌
- A라는 창이 있고 여기서 링크를 클릭 -> B라는 창으로 넘어감
- -> B라는 창에서 C를 열려고 함(_parent)
- ->A에서 C가 열림
- _top : 현재 창 단, 모든 프레임 취소 (부모 창에서 열림)
<h2>Naver</h2>
<p>주소 : <a href="http://www.naver.com" target="_blank">naver.com</a></p>
- 원하는 위치에 있는 <p>태그로 링크 이동을 걸때
<body>
<h1>다양한 검색 사이트들</h1>
<p id="up">시작 부분</p>
<!-- id를 지칭하는건 # -->
<p>아래로 <a href="#down"> 이동</a></p>
<h2>Google</h2>
<p>주소 : <a href="http://www.google.com">google.com</a></p>
<h2>Naver</h2>
<p>주소 : <a href="http://www.naver.com" target="_blank">naver.com</a></p>
<h2>Daum</h2>
<p>주소 : daum.com</p>
<p>testasdasdasd</p>
<p>testasdasdasd</p>
<p>testasdasdasd</p>
<p>testasdasdasd</p>
<p>testasdasdasd</p>
<p>testasdasdasd</p>
<p>testasdasdasd</p>
<p>testasdasdasd</p>
<p>testasdasdasd</p>
<p>testasdasdasd</p>
<p>testasdasdasd</p>
<p>testasdasdasd</p>
<p>testasdasdasd</p>
<!--해당 <p> 태그에 id를 down으로 지정-->
<p id="down">마지막 부분</p>
<p>위로 <a href="#up"> 이동</a></p>
</body>
- 이미지에 링크 넣기
<h2>Daum</h2>
<a href="http://www.daum.net" target="_blank">
<img src="imageFu/daum.png" width="30%">
</a>
<p>주소 : daum.com</p>- 목록 작성 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--순서를 매길 경우-->
<ol>
<li>google</li>
<li>Naver</li>
<li>Daum</li>
</ol>
<!-- 순서 없이 도형 -->
<ul>
<li>google</li>
<li>Naver</li>
<li>Daum</li>
</ul>
</body>
</html>
번호 타입을 바꾸고 싶을때는 type을 넣어준다. (html에서 설정 권장 안함, css 처리 권장)
- 피규어 태그
<figure> : 이미지랑 텍스트를 같이
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<figure>
<img src="imageFu/gifpepe.gif" width="20%">
<figcaption>
설명~~~~~~
</figcaption>
</figure>
</body>
</html>ex) 이미지에 대한 부연설명을 할때
- 이미지 좌표 설정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="imageFu/list.jpg" usemap="#list">
<map name="list">
<area target="_blank" alt="다음" title="daum" href="http://www.daum.net" coords="104,115,38,49" shape="rect">
</map>
</body>
</html>
- 사운드 적용해보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio src="sound/프리스타일-Y.mp3" autoplay controls loop muted>
브라우저 지원 못함
</audio>
</body>
</html>
<audio autoplay controls>
<source src="sound/프리스타일-Y.mp3" type="audio/mp3">
<source src="sound/프리스타일-Y.wav" type="audio/wav">
지원안됨
</audio>보통은 위 처럼 코드 작성해서 사용
- 동영상 적용해보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video autoplay controls width="50%">
<source src="video/nike.mp4" type="video/mp4">
</video>
</body>
</html>
iframe 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>iframe</p>
<iframe src="asd.html" width="70%">
</iframe>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>iframe 유튜브 링크 퍼오기</p>
<iframe width="1242" height="699" src="https://www.youtube.com/embed/3zWGbiYjm3c"
title="미래에서 온 재벌집 막내아들이 S그룹을 후루룩짭짭 하는 방법"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</iframe>
</body>
</html>
- 표 만들기
<table>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<th>이름</th>
<th>국어</th>
<th>영어</th>
<th>수학</th>
</tr>
<tr>
<td colspan="4">ddddd</td>
</tr>
<tr>
<td colspan="2">dd</td>
<td colspan="2">dd</td>
</tr>
<tr>
<td rowspan="2">행합</td>
<td colspan="3">dd</td>
</tr>
<tr>
<!-- <td>홍길동</td> -->
<td>100</td>
<td>90</td>
<td>70</td>
</tr>
<tr>
<td>AAA</td>
<td>80</td>
<td>90</td>
<td>70</td>
</tr>
</table>
</body>
</html>
▼ 추가 작업 해보기
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<P><center>성적표</center></P>
<p>
<center>
<table border="1">
<tr>
<th colspan="4">1학년 1반</th>
</tr>
<tr>
<th> 이름 </th>
<th> 전공 </th>
<th> 국어 </th>
<th> 영어 </th>
</tr>
<tr>
<td><center>가나다</center></td>
<td rowspan="2"><center>컴공</center></td>
<td><center>100</center></td>
<td><center>90</center></td>
</tr>
<tr>
<td><center>AAA</center></td>
<td><center>50</center></td>
<td><center>60</center></td>
</tr>
<tr>
<td><center>BBB</center></td>
<td><center>시디</center></td>
<td><center>65</center></td>
<td><center>65</center></td>
</tr>
</table>
</center>
</p>
</body>
</html>
블록 h1~6, p
인라인
- <div> : 블록
- <span> 인라
- 비주얼 스튜디오(VSCODE) 세팅 및 라이브러리 설치해보기
Live Server 설치
저장한 풀더내에 html을 웹으로 열어서 작업할 경우 수정된 내용이 있을때 항상 새로고침을 해야되지만 Live Server가 설치되어 있으면 VSCODE에서 만들어둔 HTML 작업 파일을 마우스 우클릭으로 Open with Live Server로 열게 되면 실시간으로 수정된 파일에 대한 프리뷰를 확인해 볼 수 있다.
html 코드는 들여씌기가 엄청 들어가다 보니 Tab Size는 4가 아닌 2로 줄여야 좋다.
Auto Rename Tag를 설치하면 첫 번째 태그에 숫자만 바꿔도 끝나는 지점 태그 숫자도 같이 변경되게 해주는 라이브러리다.
728x90
'프론트엔드 > html' 카테고리의 다른 글
| CSS 색상 투명도 조절 및 배경이미지 활용 (0) | 2022.12.15 |
|---|---|
| CSS 파비콘 적용해보기 (0) | 2022.12.15 |
| CSS 목록 만들어보기 (0) | 2022.12.15 |
| CSS 폰트 사용 해보기 (0) | 2022.12.15 |
| CSS 태그 스타일 작업 해보기 (0) | 2022.12.15 |
'프론트엔드/html' Related Articles
more
Comments