Chapter 6.
Chapter 6-1
HTML Element(요소) (Hyper Text Markup Language)
Hyper Text : 다른 페이지로 이동할 수 있는 링크를 의미, 텍스트의 제목인지 문단인지 버튼인지 의미적인 내용을 부여하기도 텍스에 생명을 불어넣는 것과 같다(각각의 명칭과 태그를 통해서 이루어짐)
Markup : 앞서 설명한 작업들을 태그를 통해서 수행한다는 것을 의미한다
제일 위 텍스트 상태로는 HTML 세계에서는 어떤 역할을 하는지 알 수 없다 -> markup 작업을 통해 태그를 붙여줌 -> <p> 문장 내용 </p> 과 같이 태그를 붙여준다 -> 같은 태그로 감싸주고 여는 태그와 닫는 태그가 존재(예외도 존재) -> 닫는 태그가 제대로 설정되지 않으면 html의 제대로된 작동이 되지 않을 것이다
위 이미지와 같은 한 조작을 html element라고 한다
HTML Atrribute(속성)
여는 태그에서 한칸을 떄고 class="memo"이런 것을 속성이라고 한다.
기본적으로 속성이름="속성값"이런 형태로 구성
속성이 복수로 구성이 된다면 기존 속성에서 한칸씩 띄어서 입력하면 된다
HTML 주석
코드를 수정하거나 테스트할 떄 기존의 코드를 기존의 코드를 잠깐 살리고 싶지만 지웠다가 복구하는 과정은 난감하기에
작성은 되어있는 코드를 브라우져에 뜨지 않도록 무시하는 역할인 주석
<!-- <p>들어갈 내용...</p> --> 다음과 같이 주석을 사용한다 (드래그한 후 ctrl + /와 같은 단축키로 사용 직접 입력해서 사용하지는 않는다)
그러나 브라우져에 보이지 않는다고 남용하면 안된다
중요 내용의 노출과 같은 이슈가 있기에 태그에 의미를 명시하는 정도로 사용하는 것을 추천한다(개발시에는 상관없음)
HTML 문서구조
하나의 문서이기에 일정한 양식을 보인다. 프로그래밍에서 일정한 양식을 띄운다는 의미로 Boilerplate라는 단어 사용
이외에도 반복적인 구성을 보인다라는 의미로 단어를 통칭하여 사용하기도
html의 boilerplate 구조
이는 보통 직접 입력을 하기보다는 vscode의 단축키를 통해서 한번에 입력을 한다
크게 2가지 영역이 있다(html에서)
- 내부적인 메타데이터 설정정보 브라우져에 전달해야하는
<head>태그 - 브라우져의 실제 내용을 보여주는
<body>태그 <!DOCTYPE html>이는 html임을 선언하는 내용이 담긴 부분(html의 시작이 되는 첫줄에 입력)
Chapter 6-2
<!DOCTYPE html>
<html lang="ko"> #lang은 어떤 언어로 작성되었다라는 것을 명시 ko은 한국어, en은 영어
<head> #브라우져에 나타나지 않고 웹문서의 속성, 인코딩 방식, 외부 리소스 로드방법 설정과 같은 항목
<meta charset="UTF-8"> #meta 태그는 여러개일 수 있다 / 인코딩을 어떤식으로 해석할 지
#UTF-8은 전세계 모든 언어 문자를 해석할 수있는 인코딩 방법
<meta http-equiv="X-UA-Compatible" content="IE=edge"> #브라우져 호환성 설정하는 파트
<meta name="viewport" content="width=device-width, initial-scale=1.0"> #브라우져 너비를 설정하는 태그 / 초기 배율은 1배로 설정
<title>Title</title> #웹페이지의 탭에 표시되는 텍스트의 설정(표지의 제목과 같은 역할)
</head>
<body>
</body>
</html>Chapter 6-3
Block Element & Inline Element
우리가 쉽게 보는 웹페이지는 수많은 블록(Block)으로 구성이 되어있다.
블록요소 : 태그 자기자신 앞뒤에 라인을 구분하고 브라우져에서 하나의 면을 차지하는 요소를 블록 요소라고 한다
Block Element 설명 추가 각각 뭐인지?
<h1>, <h2>, <h3>
<p>
<ol>, <ul>
<li>
<div>인라인요소 : 줄을 바꾸지 않고 특정 텍스트 영역에만 영향을 미치는 태그가 인라인 요소다(선을 그린 것이라고 볼 수 있다)
Inline Element
<a> #링크를 거는 태그
<span> #텍스트의 일부를 범위를 지정하기 위한 태그
면의 성격을 가진 블록요소는 블록과 인라인 요소를 둘다 가질 수 있다
선의 성격을 가진 인라인 요소는 블록요소를 포함할 수 없다
Chapter 6-4
HTML<body>
헤드의 아래쪽에 위치해서 실제 브라우져에 보여지는 내용
<h1> heading tag
- 제목이나 표제를 의미한다 - 제목의 위계따라 폰트의 크기도 다름
- 6개의 계층을 지원(
<h1> ~ <h6>) <h1>은 대제목을 의미하기에 한개만 사용하는 것을 추천(글씨를 키우려는 목적으로 사용 X)
<p> paragraph tag
하나의 문단을 구성해서 글을 나타내는 역할, 같은 주제나 내용이면 하나의 p tag로 감싸서하고 다른 주제면 다른 p tag로 묶어준다
<br> line break tag
줄바꿈을 할 때 사용하는 태그 그냥 enter을 입력해도 html상에서는 인지하지 못함
<p>안녕하세요.
html&CSS 공부중 </p>
<p>안녕하세요.<br>html&CSS 공부중 </p>
#아래처럼 해주어야 줄바꿈이 정상적으로 작동된다
#단일 태그로 사용하는 예이다<ol>, <ul>, <li> list tag
- 순서를 매기는 태그는
<ol>, 그안에 하나하나의 요소들은<li>이렇게 하면<li>번호를 따로 지정하지 않아도 알아서 번호를 매겨준다 - 목록형식으로 보여주지만 숫자를 매기고 싶지 않다면
<ul>을 사용하고 내부요소에는<li>를 사용해서 요소를 markup 해주면 된다
순서를 매기는 <ol>
<ol>
<li>1주차 html</li>
<li>2주차 css</li>
<li>3주차 python 기초</li>
<ol>
목록 형식인 <ul>
<ul>
<li>1주차 html</li>
<li>2주차 css</li>
<li>3주차 python 기초</li>
<ul><a> anchor tag
- 다른 페이지로 링크를 거는 태그(하이퍼텍스트를 하는 가장 핵심적인 태그)
- 단독 사용보다는 다른 것에 포함되어 사용되는 경우가 많음
현재 페이지에서 연결링크를 여는 경우
<ol>
<li><a href="연결할 링크">1주차 html</a></li>
<ol>
새창에서 연결링크를 여는 경우
<ol>
<li><a href="연결할 링크" target="_blank">1주차 html</a></li>
<ol><span> span tag
- 텍스트 중에 일부만 선택해서 영향을 주는 경우
- 자체로는 텍스트의 역할이 무엇인지 의미를 부여하지는 않는다
- 이는 단독으로 사용하지 않고 class 속성을 사용해서 css나 js의 작업대상임을 명시한다
<p><span class=" ">안녕하세요.</span><br>html&CSS 공부중 </p>
#적용하고 싶은 범위만큼 span tag로 markup을 진행 <div> div tag
- 요소들을 묶어서 그룹화하는 역할
- span은 텍스트의 일부를 선택하지만 div는 html요소들을 묶어서 사용한다
- class를 주어서 css나 js의 작업대상임을 명시
<div class=" ">
<h2>백엔드 커리큘럼</h2>
<<p><span class=" ">안녕하세요.</span><br>html&CSS 공부중 </p>
<ol>
<li>...</li>
</ol>
</div>
