1️⃣ 폴더 및 파일 만들기
바탕화면에서 [폴더] 만들기 > [폴더]에서 [frontend 폴더] 만들기 > [frontend 폴더] 안에 [tags.html 파일] 만들기
2️⃣ HTML과 CSS의 개념
HTML은 뼈대, CSS는 꾸미기
- HTML은 웹의 뼈대를 잡아주는 구역을 나타내는 코드! 웹의 전반을 HTML을 통해서 작성할 수 있다!
- CSS는 HTML을 통해 작성된 뼈대의 속성을 선택해 예쁘게 꾸며주는 코드!
- HTML 내 style 속성으로 꾸미기를 할 수 있지만, 긴 세월동안 이것을 한데 모아 볼 수 있는 CSS 파일이 생기게 된 것. HTML 코드 내에 CSS 파일을 불러와서 적용.
- 또한 CSS를 잘 사용할 줄 아는 것과, '예쁘게' 만드는 것은 다른 영역이기 때문에 많은 경우 웹디자이너나 퍼블리셔에게 의존하게 된다.
3️⃣ HTML 기초
- VS Code에서 [tags.html 파일]을 만들고 > 코드를 적는 공간에 html이라고 적는다 > 자동완성 항목에 html:5 클릭!
html 기본 뼈대 자동완성 [저장] > 코드화면에서 [오른쪽 클릭] > Open with live server 클릭 > 코드가 적용된 화면
HTML은 크게 head와 body로 구성, head안에는 페이지의 속성 정보를 담고 body안에는 페이지의 내용을 담는다.
✅ head 안에 들어가는 대표적인 요소들: meta, script, link, title 등(CSS, Javascript도 haed에 들어간다.)
head에서는 페이지의 속성을 정의하거나, 필요한 스크립트들을 부르는데 사용된다. (즉, 눈에 안 보이는 필요한 것들을 담는 곳.)
✅ body 안에 들어가는 대표적인 요소들: div, h1, span, button 등
⛔ 코드 정렬의 중요성 : 코드의 정렬이 제대로 되어있지 않으면, 코드의 생김새를 파악할 수 없어 오류를 해결하기가 무척 어려워진다. VS Code에서 Shift + Alt + F (맥은 Shift + Option + F) 로 자동정렬한다!
🌐 tags.html-HTML기초 >>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1X/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</html>
'Web development' 카테고리의 다른 글
| 로그인 페이지 만들기_ CSS 기본 (0) | 2023.07.10 |
|---|---|
| 로그인 페이지 만들기_1. html (0) | 2023.07.10 |
| VS Code(Visual Studio Code) (0) | 2023.07.08 |
| 웹(web) 개발 (0) | 2023.07.08 |
| fetch / 포스트 리스팅 API 붙이기 / 별 붙이기 (0) | 2023.07.02 |
