이 글은 부스트코스에서 제공하는 비전공자를 위한 HTML / CSS 강의를 듣고 작성한 글입니다.
Hyper Text
: 텍스트를 초월 => 단순한 텍스트를 넘어 웹 페이지의 특정 부분과 연결할 수 있는 기능을 가진 텍스트 => 링크를 뜻함.
Markup Language
: 정보를 구조적, 계층적으로 표현 가능.
https://ko.wikipedia.org/wiki/%EB%A7%88%ED%81%AC%EC%97%85_%EC%96%B8%EC%96%B4
마크업 언어 - 위키백과, 우리 모두의 백과사전
마크업 언어 위키백과, 우리 모두의 백과사전.
ko.wikipedia.org
태그(tag)
태그는 '무언가를 표시하기 위한 꼬리표, 이름표'라는 의미가 있으며, HTML에서도 이와 비슷한 의미로 해석된다.
한글은 '자음'과 '모음' 이 모여서 하나의 단어를 만들고 문장을 만들어 낸다.
태그도 각각의 태그들이 모여, 하나의 요소를 만들고, HTML 문서를 만들어 낸다고 생각하면 된다.
요소(Element)
내용을 포함한 태그 전체를 요소(Element)라고 한다.
요소(Element) = 시작태그(Opening) + 내용(Contents) + 종료태그(Closing)
속성이란?
속성은 태그에 추가로 정보를 제공하거나 태그의 동작이나 표현을 제어할 수 있는 설정값을 의미한다.
속성은 이름과 값으로 이루어져 있다.
시작 태그에서 태그 이름 뒤에 공백으로 구분 후 속성 이름="속성값"으로 표현한다.
속성값은 홑따옴표(')와 쌍따옴표(")로 감싸 표현한다.
<h1 id="title">Hello, HTML</h1>속성의 선언 순서는 태그에 영향을 미치지 않으며 class를 id보다 먼저 선언해도 결과는 같습니다.
속성의 종류
속성은 종류에 따라 모든 태그에 사용할 수 있는 글로벌 속성과 특정 태그에서만 사용할 수 있는 속성으로 구분된다.
또한, 선택적으로 쓸 수 있는 속성과 특정 태그에서 필요한 필수 속성으로 구분됩니다.
위의 예시에서 쓰인 id와 class 속성은 글로벌 속성입니다.
태그의 중첩
태그 안에 다른 태그를 선언할 수 있다.
태그를 중첩해서 사용 시 중첩되는 태그는 부모 태그를 벗어나서는 안된다.
<h1>Hello, <i>HTML</i></h1>
빈 태그란?
태그는 기본적으로 시작 태그와 종료 태그 2개가 1쌍으로 이루어져 있으며,그 사이에 내용이 들어가게 된다.
하지만 태그 중에는 그렇지 않은 태그가 존재하기도 한다.
이러한 태그를 내용이 없는 빈 태그라고 한다.
- <br>
- <img src="">
- <input type="">
위는 빈 태그의 예시입니다.
빈 태그는 내용이 없어서 종료 태그가 필요하지 않습니다.
빈 태그의 특징
태그의 중첩이 불가하다.
빈 태그는 내용만 비어있을 뿐 속성을 통해서 화면에 나타내거나 화면에 표시되지
않더라도 다른 용도로 사용되는 태그입니다.
빈 태그의 대표적인 경우는 브라우저가 직접 화면에 내용을 그려줘야 하는 경우입니다.
이런 태그는 브라우저가 내용을 대체한다고 하여 replacement 태그, 대체되는 태그라고 합니다.
빈 태그에 대체되는 태그만 있는 것은 아니며 실제로 화면에 출력될 내용이 없어 다른
용도로 쓰이는 태그도 존재합니다.
위 예시 코드의 <br>이 바로 이 경우입니다.
HTML에서의 공백
기본적으로 HTML은 두 칸 이상의 공백을 모두 무시한다.
<h1>Hello, HTML</h1>
<h1>Hello, HTML</h1>
<h1>
Hello,
HTML
</h1>HTML은 두 칸 이상의 공백과 개행을 모두 무시하기 때문에 위 세가지 모두 같은 텍스트가 화면에 나타나게 된다.
HTML 문서구조
웹 페이지를 만들기 위한 가장 기본이 되는 정보는 HTML 문서 구조이다.
브라우저는 HTML 문서 구조를 통해 HTML 버전, 문서의 제목, 정보, 내용 등을 파악한다.
HTML의 기본 구조는 웹 문서를 작성할 때 반드시 들어가야 하는 기본적인 내용으로 크게는 문서 타입 정의와 <html>요소로 구분합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>Hello, HTML</h1>
</body>
</html>
1. 문서 타입 정의
문서 타입 정의는 보통 DTD(doctype)라고 부릅니다.
이 문서가 어떤 버전으로 작성되었는지 브라우저에 알려주는 선언문이며 반드시 문서 내 최상단에 선언되어야 한다.
이것을 제대로 선언을 해주지 않는다면 비표준 방식으로 브라우저는 이해를 한다.
2. <html>요소
문서 타입 선언 후에는 <html>태그가 나와야 하고, 자식으로는 <head>태그와 <body>태그가 있다.
<html> 태그의 lang 속성은 문서가 어느 언어로 작성되었는지를 의미한다.
<head>태그에 위치하는 태그들은 브라우저 화면에 표시되지 않는다.
대신 문서의 기본 정보 설정이나 외부 스타일 시트 파일 및 js 파일을 연결하는 등의 역할을 한다.
<meta> 태그의 charset 속성은 문자의 인코딩 방식을 지정한다.
<body>태그에는 실제 브라우저 화면에 나타나는 내용이 들어가며, 앞으로 우리가 다루는 태그들 대부분이 모두 여기에 해당이 된다.
위 코드는 가장 기본적인 문서 구조로, 보통은 이보다 더 많은 태그가 들어가게 된다.
헷갈린 문제
이번주 미션
1번 - 빈칸 채우기
HTML은 _____________의 약자로 웹을 이루는 가장 기초적인 구성 요소입니다. 웹페이지의 모양을 꾸미는데 쓰는 CSS와 기능, 동작을 구현하는데 쓰는 JavaScript와 함께 쓰입니다.HTML 요소는 __를 사용해서 다른 텍스트와 구분합니다. __는 여는 홀화살괄호(<>)로 감쌉니다.프론트엔드 개발자는 ____, ___, __________를 사용해 웹을 만듭니다.Hyper Text Markup Language
태그
HTML, CSS, JavaScript
2번
HTML 태그엔 __을 추가할 수 있습니다. __은 태그에 추가 정보를 제공하거나 태그의 동작이나 표현을 제어할 수 있게 해줍니다.
속성은 이름과 값으로 이루어져 있습니다. 속성값은 ____와 ____로 감싸 표현합니다.
한 태그에 여러 속성을 선언할 수 있는데, 여러 속성을 선언할 때는 __으로 구분해서 사용합니다.
속성
홑따옴표(')와 쌍따옴표(")
공백
3번 - 수정해보기
-이름만 굵은 색으로 표시하고, 제목과 텍스트 사이에 빈 줄을 넣고 싶음.
<!-- 대한민국 국민 이보라 자기소개 -->
<h1>자기소개</h1>
<span>
<br>
안녕하세요. 대한민국에 사는 <strong>이보라입니다.
</br>
</span></strong><!-- 대한민국 국민 이보라 자기소개 / 수정 후 -->
<h1>자기소개</h1>
<hr>
<span>
<br>
안녕하세요. 대한민국에 사는 <strong>이보라</strong>입니다.
</br>
</span>
4번- 태그 확인하기
https://nid.naver.com/nidlogin.login
1.위쪽의 NAVER 로고
<a href="https://www.naver.com" class="logo">
<h1 class="blind">NAVER</h1>
</a>2.아이디와 비밀번호를 입력하는 네모 상자
<div class="input_row" id="id_line">
<div class="icon_cell" id="id_cell">
<span class="icon_id">
<span class="blind">아이디</span>
</span>
</div>
<input type="text" id="id" name="id" placeholder="아이디" title="아이디" class="input_text" maxlength="41" value="">
<span role="button" class="btn_delete" id="id_clear" style="display: none;">
<span class="icon_delete">
<span class="blind">삭제</span>
</span>
</span>
</div>div 태그 / input 태그 / span 태그
3.초록색 로그인 버튼
<button type="submit" class="btn_login" id="log.login">
<span class="btn_text">로그인</span>
</button>
새로 배운 점.
1. Hyper Text에서 텍스트를 초월한다는 것이 링크를 뜻하는 것.
2. 요소 = 시작태그 + 내용 + 종료태그
3. 속성의 선언 순서는 태그에 영향을 미치지 않는다는 점.
4. 속성 중에서 모든 태그에 사용할 수 있는 속성을 '글로벌 속성'이라고 한다.
5. 빈태그 => 내용이 없어서 종료 태그가 필요없다. = represent 태그라고도 함.
'네이버 부스트코스 > 비전공자를 위한 HTML & CSS 스터디' 카테고리의 다른 글
| 2주차 라이브 (2022.05.19) (0) | 2022.05.19 |
|---|---|
| 2주차 (0) | 2022.05.17 |
| 라이브 강의 1회차 (2022.05.12) (0) | 2022.05.12 |