공부하는 안씨의 기록
chapter 06. HTML 기초 (구성, 요소 및 실) 본문
* 본 포스팅은 테킷 프론트엔드 온보딩트랙 강의(조경민 강사님)를 참고하였으며,
그 외의 자발적 학습 활동을 진행한 것을 토대로 작성되었습니다.
| 목차
1. HTML 구성
1. (1) HTML이란?
1. (2) HTML 요소(element)
1. (3) HTML 속성(attribute)
1. (4) HTML 주석(comment)
1. (5) HTML 문서구조(document type)
2. HTML <head>
2. (1) <!DOCTYPE html>
2. (2) <html lang="ko">
2. (3) <head> ... </head>
3. 블록 요소(Block Element)와 인라인 요소(Inline Element)
4. HTML <body>
5. HTML 실습
이번 챕터에서는 위와 같은 HTML의 요소 및 기초에 대해서 공부하기로 한다.
1. HTML 구성
1. (1) HTML이란?
- Hyper Text Markup Language
- HyperText: 정적인 활동에서 벗어나 다른 페이지에 접속할 수 있는 ‘링크’
- Markup: 텍스트의 구조 혹은 의미를 부여하는 것
1. (2) HTML 요소(element)
- 텍스트에 생명을 불어넣는다! - > 태그를 통해 이루어짐. (markup)
- 멋쟁이 사자처럼입니다 : )
- html 요소 (html element)
- <p>멋쟁이사자처럼입니다 : )</p> (markup)
- 여는태그 내용 닫는태그 (닫는 태그가 없는 단일 태그 또한 존재함!)
- →웹페이지에서 ‘문단’의 형식을 띠게 된다.
1. (3) HTML 속성(attribute)
- <p class=”memo”>멋쟁이사자처럼입니다 : )</p> (markup)
- 다양한 속성 분류, 역할이 존재.
- 속성이름=”속성값”
- 여러개의 속성이름=”속성값” 이 존재 시 스페이스 바 한칸으로 구분
- 속성이름=”속성값” 속성이름=”속성값” 속성이름=”속성값”
1. (4) HTML 주석(comment)
- 작성은 되어있는 코드를 브라우저에 뜨지 않도록 무시.
- <p>임금님 귀는 당나귀 귀!</p>
- <! — <p>임금님 귀는 당나귀 귀!</p> —> (단축키 설정하는게 편함)
- 하지만 주석을 너무 많이 쓰면 좋지 않음. → html 파일을 웹브라우저로→ 주석이 포함된 모든 내용을 받아오게 됨. → 개인 정보 등이 노출될 수 있으므로.
1. (5) HTML 문서구조(document type)
<!DOCTYPE html>
<html lang="ko">
<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<title>
</head>
<body>
...
</body>
</html>2. HTML <head >
위의 1. (5)에서의 html 코드의 각 줄에 적힌 내용이 어떤 의미인지 알아보자.
2. (1) <!DOCTYPE html>
: html 문서임을 선언
<!DOCTYPE html>
2. (2) <html lang="ko">
: 문서의 내용이 어떤 '언어'로 작성되었는지 명시. 이때 "" 안에 작성할 것. ko는 한국어(korean)로 작성되었다고 명시한 것이다.
<html lang="ko">
2. (3) <head> ... </head>
: 웹문서의 속성, 인코딩 방식, 외부 리소스 로드 등의 항목이 작성됨. (이는 브라우저 화면에는 직접적으로 표시되지 않는 속성이다.)
<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</title>
</head>- meta tag→ character set : 인코딩-컴퓨터에서 어떻게 해석해야 할 지 알려줌.(언어가 깨지는 현상 방지. 문자를 모두 지원)
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- 브라우저 호환성 설정(어떤 버전에 맞춰서 해석할지를 명시)
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- 브라우저 너비를 설정하는 meta tag (디스플레이 스크린 너비가 일정하지 않음)
- 디바이스의 너비에 맞춤
- <title>Title<title>
- 웹브라우저의 탭에 표시되는 텍스트를 설정.
- 해당 태그에서는 'Title' 이라는 텍스트가 웹브라우저의 탭에 표시될 것임.
3. 블록 요소와 인라인 요소
- 블록 요소(Block Element)
- 영역-블록 형태→ 앞뒤로 새로운 줄을 만드므로, 줄바꿈이 일어난다.
- 태그 자기자신 앞뒤의 line을 구분하고, 브라우저에서 하나의 면을 차지하는 요소→ 블록요소
- 인라인 요소(Inline Element)
- 줄을 바꾸지 않고 텍스트 영역에만 영향을 끼치는 요소
- 선을 그렸다고 볼 수 있음.
4. HTML <body>
: <h1> , <p> , <ol>, <ul>, <li>, <a>, <span>, <div>
- <h1> heading
- <h1>~<h6> 제목, 부제, …
- <h1>모두를 위한 코딩 강의 - 테킷<h1>
- 해당 태그를 글씨를 키우려는 목적으로 사용하지 않을 것
- <p> paragraph
- 하나의 문단으로 감싸 표현
- <p>멋쟁이사자처럼 스쿨이 여러분을 환영합니다.</p>
- <p>멋쟁이사자처럼 스쿨이<br>여러분을 환영합니다.</p>
- <br> → 줄바꿈 (닫는태그가 없는 '단일태그'임)
- list
- <ol>: Ordered List - 순서를 매기는 태그(1,2,3,...)
- ol : 구조, li : 각각의 항목 요소
- 아래와 같이 작성하면 각각의 list에 순서 번호가 매겨진 채 브라우저에 표시된다. ( 1. ch.02 web의 동작원리 2. ...)
- <ol>: Ordered List - 순서를 매기는 태그(1,2,3,...)
<ol>
<li>ch.02 web의 동작원리</li>
<li>ch.03 웹페이지를 이루는 삼총사</li>
<li>ch.04 개발환경 세팅</li>
<li>ch.05 Git & Github</li>
</ol>
- list
- <ul>: Unordered List - 순서번호를 매기지 않고 그대로 표시
- 위의 <ol> 태그와는 달리 순서번호가 매겨지지 않고 그대로 표시된다.
- <a>
- anchor. 다른 페이지로 이동할 수 있는 장치
- 사용법은 아래와 같다.
<ol>
<li><a href="연결할 링크">어쩌고저쩌고</a></li>
</ol>위와 같이 작성하면, 1. 어쩌고저쩌고 라는 리스트가 생성되며 해당 리스트를 클릭하면 a 태그에서 작성해둔 "연결할 링크"에 작성해둔 링크로, 즉 다른 페이지로 이동할 수 있다.
이때 새 창에서 페이지를 열고 싶으면 아래와 같이 코드 target="_blank"를 a 태그에 추가하면 된다. (앞에서 언급한 바와 같이, 띄어쓰기로 구분한다.) 위와는 달리 기존의 페이지가 유지되면서 새 창에서 페이지를 오픈할 수 있다.
<ol>
<li><a href="연결할 링크" target="_blank">프론트엔드 스쿨</a></li>
</ol>
- <span> : 텍스트 중 일부만 선택하여 영향을 줄 수 있음
- class와 함께 씀. 문자열단위(인라인 요소 단위??)
- <div>: 여러개 요소를 묶어 그룹화함
- 요소 단위(블록 요소 단위??)
5. HTML 실습
본격적으로 웹페이지를 만들어보기 전에, 실습을 하기 위해 VSCode에서 폴더를 불러와 사용할 것인데, 주의해야 할 점이있다. html을 사용하여 웹을 만들 때 git을 활용하게 되는데, 기존에 쓰던 문서파일이 함께 들어있는 폴더를 사용하면 처음에 초기화 설정 시 다른 중요한 파일들에도 영향을 주거나, 외부 저장소에 업로드 시 중요한 정보가 노출되는 문제가 있다.
따라서 개별적으로 오픈되어도 괜찮은 프로젝트 파일용 폴더를 따로 만드는 것을 추천한다.
나는 c drive에 Techit_Frontend라는 이름의 폴더를 만들고 index.html 파일을 만들었다. 파일을 생성할 때에는 vscode에서 파일을 추가하는 방식이 편리하다. (찾아보니 깃허브에서 웹페이지 배포 기능을 사용할 경우 html 파일 이름이 index.html이 아니면 웹페이지 생성에 오류가 생기는 경우가 있다고 하므로 주의하자.)
앞의 소제목에서 공부한 내용을 바탕으로 아래와 같이 html 코드를 작성해보았다.
<!DOCTYPE html>
<html lang="ko">
<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>
<h2>카테고리: 테킷 프론트엔드 온보딩트랙 강의</h2>
<p>7월 10일부터 8월 19일까지 수강한 내용을 바탕으로<br>정리한 포스트 목록입니다.</p>
<!-- <p>7월 20일 오늘 일정: 티스토리에 공부한 내용 정리하기!</p> -->
<ol>
<li>ch.02 web의 동작원리</li>
<li>ch.03 웹페이지를 이루는 삼총사</li>
<li>ch.04 개발환경 세팅</li>
<li>ch.05 Git & Github</li>
</ol>
</body>
</html>위와 같이 vscode에서 코드를 작성한 후 파일 탐색기에서 해당 폴더를 들어가 index.html파일을 더블클릭하면 웹페이지가 어떻게 나타나는지 확인해볼 수 있다.
이 방식으로 위의 코드가 어떻게 적용되었는지 살펴보면, 아래와 같다.
위 코드에서 조심해야할 점이 있다면 바로 <!-- ... --> 로 작성된 부분이다. 이는 주석처리 기능인데, 웹페이지에 표현되지 않는 대신에 위 웹페이지에서 개발자도구 기능을 사용하면 그대로 주석표시된 부분까지 보이므로 중요한 개인정보나 개발 정보 등이 포함되지 않게 유의해야 한다.
'웹 프로그래밍 > 테킷 프론트엔드 온보딩 트랙(230710~230819)' 카테고리의 다른 글
| chapter 08. CSS Beginner (1) (css 적용, 구성-구조, 선택자, 주석-, 특성) (1) | 2023.09.06 |
|---|---|
| chapter 07. HTML (OG tag, 레이아웃, Github pages 배포) (0) | 2023.07.26 |
| chapter 05. Git & Github (2) 원격 저장소(remote repository), 협업, 병합 충돌,GUI (0) | 2023.07.20 |
| chapter 05. Git & Github (1) 터미널 사용법, 로컬 git 저장소 생성 (0) | 2023.07.18 |
| chapter.04 개발 환경 세팅 (0) | 2023.07.18 |
