반드시 있어야 하는 html tag들
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body></body>
</html>설치해야 하는 vsc 확장 프로그램
- Live Server
- html 파일을 우클릭
- Open With Live Server
- vsc 저장하면, 웹브라우저 새로고침 할 필요없이 수정하면, 바로 적용된다.
- Prettier - Code formatter
- 잘못된 코드 작성후 vsc 저장하면, 틀린부분을 고쳐서 저장한다.
- Material Icon Theme
- html, css, js 등등 아이콘을 이쁘게 만든다.
- Material Theme
- vsc의 배경 테마를 이쁘게 설정할 수 있다.
- Community Material Theme
- Material Theme Icons
제목 tag
<h1>유투브로 시간 낭비 하지말자</h1>단락 tag
<p>
오늘 병원에 갔다. 나 말고 다른 사람들은 하루하루를 바쁘게 살아가는 것을
느꼈다. 지금까지 시간을 낭비하였다는 것을 깨닫게 되었다. 난 항상 '유튜브 1시간만
보고 공부해야지 또는 자야지'라고 말하지만 지킨 적은 없는 것 같다. 나는
자기 절제가 약하기 때문에 아예 시도조차 하지 말아야 한다.
</p>링크 tag
<a href="https://boostcamp.connect.or.kr/program_wm.html">boostcamp</a>이미지 tag
//이미지 파일 다운로드 했을 때,
<img src="boostcamp.jpeg" />
//이미지 주소 복사
<img src="이미지 주소 복사" />리스트 tag
//점 리스트
<ul>
<li>항목1</li>
<li>항목2</li>
</ul>
//숫자 리스트
<ol>
<li>항목1</li>
<li>항목2</li>
</ol>이미지 링크
<a href="https://boostcamp.connect.or.kr/program_wm.html">
<img src="boostcamp.jpeg" />
</a>버튼 tag
<button>버튼</button>html을 style 속성으로 꾸미기
<img src="img/lion.png" style="width: 250px; margin-left: 50px" />width: 250px;처럼 끝에는 ;부여하기
화면상의 가운데 배치하기
- 핵심
- display: block; 이거나 display: flex;를 먼저 설정해야한다.
<span></span>처럼display: inline;이면margin: 0 auto;만 설정하면, 가운데 배치가 안된다.
display: block; margin: 0 auto;display: block; margin-left: auto; margin-right: auto;
글자 css 설정하기
- font-size: 20px;
- 글자 크기 바꾸기
- font-family: gulim;
- 글자체 바꾸기
- color: black;
- 색깔 바꾸기
- letter-spacing: 5px;
- 글자 사이 간격 바꾸기
- h a p p y
- text-align: center;
- 글자를 가운데 배치 시키기
- font-weight: 500;
- 글자 굵기
단락의 일부분만 꾸미고 싶다
<p>다시 <span style="color: yellowgreen;">마음</span>을 잡았습니다.</p>다시 마음을 잡았습니다.
dev