vscode에서 web-study 폴더 안에 todo-list폴더를 만들고 main.html, main.css 파일 생성
<div> </div>html은 태그로 이루어져 있다. 대부분의 태그는 여는 태그와 닫는 태그로 쌍을 이루고, 닫는 태그는 앞에 /가 붙는다.
<div style="color: red;"></div>태그 안에는 이렇게 속성을 추가할 수 있는데 속성이름="속성값" 이런식으로 추가가 가능하다.
예시에서 속성이름은 style, 속성값은 color: red이다.
vscode에서는 html:5를 자동완성으로 입력하면 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>
</body>
</html>맨 위의 <!DOCTYPE html>은 html언어로 작성중이라는 것을 의미
두 번째 줄의 html태그의 lang="en"이라는 속성은 영어로 작성된다는 뜻인데 없어도 상관없다
html은 태그가 서로 감싸며 계층적 구조를 가진다. 위의 예시 코드에서도 html코드 안에 head 태그와 body 태그가 있다.
head태그 안의 meta태그는 웹페이지의 성격을 나타낸다. charset="UTF-8"은 인코딩 방식을 의미하고
name="viewport" 는 pc화면과 모바일 화면에서 각각 화면이 잘 조정되어 나오게 해준다.
title태그는 웹페이지의 이름을 지정해준다.
그리고 body태그 안에는 실제 화면을 그려주는 코드를 작성한다.
html태그들
1. <h>태그
h태그는 h1, h2~h6까지 있으며, 제목을 나타내는 태그이다.
h1에서 h6으로 갈수록 크기가 작아진다.
2. <div>태그
div태그는 영역을 나타내는 태그이다.
영역을 지정해서 스타일을 입히는데 사용되기도 하고 웹페이지 내에서 특정 영역을 지정해 주는 태그이기 때문에
다양한 방식으로 활용된다.
3. <p> 태그 & <span> 태그
p태그는 긴 문장을 작성할 때 사용되는 태그이다.
p태그 안에서 문장을 쓰다가 특정 몇 단어만 스타일을 다르게 하고 싶으면 span태그를 사용할 수 있다.
4. 리스트 태그
목록을 나열하는데 사용되는 리스트 태그로는 <ul>태그와 <li>태그를 많이 사용한다.
ul태그 안에 li태그를 넣어서 같이 사용해야 한다.
5. 띄어쓰기 태그
영역 사이의 간격을 늘리고 싶을 때는 br태그와 hr태그를 사용한다.
br태그는 그냥 간격을 늘려주고, hr태그는 수평선을 긋고 간격을 늘려준다.
br태그와 hr태그는 열고 닫는게 따로 있지 않고 한 태그 안에 들어가 있다.
6. 사용자 입력 태그
사용자의 입력을 처리하는 태그는 기본적으로 input 태그와 button 태그가 있다.
input 태그는 속성을 이용해서 숫자, 문자열 등 어떤 값을 입력하게 할지 지정해 줄 수 있다.
7. 이미지 태그
이미지는 img 태그를 이용해서 넣을 수 있다.
<img src="~~" />src 속성을 이용해 이미지 주소를 넣어주면 이미지를 웹페이지에 표시할 수 있다.
'웹개발' 카테고리의 다른 글
| MySQL-Sequelize (0) | 2023.10.15 |
|---|---|
| Node.js (0) | 2023.10.11 |
| JavaScript (0) | 2023.10.11 |
| Css (0) | 2023.10.11 |
| 깃허브 기초 사용법 (0) | 2023.10.11 |
