html 개요

기본 문법

<태그>내용</태그>
= 요소 (Element)

태그 사이에 내용이 감싸져 있고 이것은 하나의 html코드로 동작하게 됨.
이것을 요소라고 함.

태그 안에 내용까지 요소라고 함.

<h1> hello </h1>

이것은 하나의 h1 요소

내용을 중심으로 앞태그, 뒷태그로 나위는데
앞은 시작,열린태그라 하고 뒤는 종료, 닫힌 태그

둘을 구분하는 가장 큰 특징은 종료태그 앞 /

태그 사이 내용은 요소의 내용. contents

---

부모와 자식 관계의 이해

<div> hello </div>

div 사이 hello는 요소의 내용. contents

<div class="hello"> hello
  <div> bye </div>
</div>

여기서 <div class="hello"> </div> 는 부모요소 이며
<div> </div> 자식요소이다

이것은 들여쓰기를 하면 구분하기 쉽다.
시각적으로 정리.

• 요소1 안에 요소2 안에 요소3의 경우

  요소3을 감싸는 요소2는 부모 관계
  그런 요소2를 감싸는 요소1은 요소2의 부모고 요소 3의 입장에서 상위(조상)요소라고 보면 됨.

  상위요소는 나(요소3)을 감싸는 모든 요소.

  요소1 안의 요소2는 자식요소
  요소2의 자식은 요소3
  이것은 하위(후손)요소라고 부르면 됨

  하위 요소는 나(요소1)이 감싸는 모든 요소.

---

빈 태그

 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <link rel="stylesheet" href="./main.css">
 <img src="" alt="">

위 태그들은 닫히는 태그가 존재하지 않음.

이런 태그들은 빈태그 라고 한다.

기본적인 태그는 <태그></태그> 로 열리고 닫히는 태그가 세트로 요소라는 개념으로 존재하는데

빈태그는 닫힌 태그가 없고 그 사이 내용이 들어가지 않으니 빈태그라고 한다.

작성방식은 두가지로 나뉘는데

1. <태그> 열리는 태그로 작성

   html 1~5버전.
   장 : 작성 편리함.
   단 : 열린 태그처럼 생겨서 요소가 빈 태그라는 걸 인지하지 못할 경우.......ㅜ 헷갈릴 수 있음

2. <태그/> 열리는 태그 뒤에 / 작성

   xhtml/html5
   엄격함. 명확하게 작성해야 해서 열린태그 뒤/ 붙여야 함.
   장 : 빈태그라는 것을 명확하게 인지. 안전하게 사용 가능.

<태그 속성 = "값">내용</태그>
<link rel="stylesheet" href="./main.css">

열리는 태그 안 속성, 그리고 값이 있음
link 태그의 경우 rel 이라는 속성에 stylesheet 라는 값 입력

이것은 태그의 기능을 확장해서 쓸 수 있게 해줌

• 기능의 확장이란?

  이 요소에 어떤 이미지를 삽입하려 하는데 어떤 이미지를 어떻게 붙일 건지.

  <img src=".cat.jpg" alt="고양이">

  src 라는 속성에 값인 삽입한 이미지의 경로를 입력하고, alt라는 속성에 값인 대체텍스트 이미지 이름인 고양이를 입력

열리고 닫히는 태그는 범위가 존재하고 범위 사이 내용을 담을 수 있는데
기능의 확장을 하지 않아도 태그 역할이 기본적으로 있고 내용을 담아 그 역할을 온전히 수행할 수 있는 여러가지 태그들이 있는데
그런데 빈태그는 역할만 가지고는 할 수 있는 일이 제한적임.
따라서 많은 경우 빈태그들은 속성과 값을 입력해서 것이 기본적인 사용법임.

• 필수속성
  img 의 경우 삽입할 이미지의 경로가 필수적임. 따라서 src같은 경우를 필수속성이라고 함.

  <input/>또한 빈 태그임
  사용자에게 어떤 데이터를 입력받는 요소
  어떤 데이터를 받을 건지 명확하게 알려줘야 하기 때문에
  <input type="text"/>
  이렇게 일반적인 텍스트를 입력 받을 거라고 명시해줘야함

  <input type="checkbox/>"
  를 입력하면 사용자에게 체크 여부를 입력받을 체크 박스가 나타남.

어쨌든 이러한 빈태그들은 각각의 역활을 명확하게 하기 위해 속성과 값을 이용해 추가적인 기능을 확장해서 사용해야 한다.!

---

글자와 상자

글자와 상자는 요소가 화면에 출력되는 특성을 말하며 크게 두가지로 구분된다.

1. 인라인 (inline) 요소 : 글자를 만들기 위한 요소들.
2. 블록 (block) 요소 : 상자(레이아웃)을 만들기 위한 요소들.

우리가 보는 웹사이트는 이미지를 제외하고 이 글자와 상자로 이루어져있다고 보면 됨.

1. 인라인 요소

대표적 요소로 span 이라는 요소(태그)가 있음.
본질적으로 아무것도 나타내지 않으며 콘텐츠 영역을 설정하는 용도로 사용된다.

기본적으로 요소가 왼쪽에서 오른쪽으로 수평으로 쌓임

줄바꾸기는 띄어쓰기가 될 수 있음.

가로사이즈와 세로사이즈는 포함한 콘텐츠 크기만큼 자동으로 줄어듬.

인라인 요소들에 style 이라는 속성 부여, 요소에다가 css내용 작성 가능.

<span style="width:100px;">hello</span>
<span style="height:100px;>world</span>

width 는 가로너비를 지정하는 css 속성
height 는 세로너비를 지정하는 css 속성

명시를 해주었음에도 아무런 반응이 없음.

이것은 글자를 취급하는 요소라서 글자는 가로 세로 사이즈를 가질 수 없기 때문에 반응이 없음.

<span style="margin:20px 20px;"> hello</span>
<span style="padding:20px 20px;"> hello</span>

hello hello

또한 여백을 줄 때 좌우는 사용할 수 있지만 상하는 불가


인라인 요소는 자식 요소로 블록 요소를 사용할 수 없다.
글자 안에 상자를 집어넣을 수 없기 때문에

(예외상황은 있지만 기본적으로)

<span>
	<div></div>
</span>

=> 불가

<span>
	<span></span>
</span>

=> 가능

2. 블록요소

대표적으로 div가 있음
본질적으로 아무것도 나타내지 않고 콘텐츠 영역을 설정하는 용도로 쓰임
블록 요소는 위에서 아래로 수직으로 쌓이는 특징이 있음

<div>hi</div>
<div>hello</div>

부모 요소의 크기만큼 영역이 늘어남. 가로는 최대한 늘어나도록 시도하며
세로너비는 자동으로 콘텐츠 크기만큼 줄어듦.

<div style="width:100px;">hi</div>
<div style="height:40px;">hello</div>

블럭요소는 가로사이즈와 세로사이즈를 지정할 수 있다.
따라서 잘 적용되는 것을 확인할 수 있음.

<div style="margin:10px;">hi</div>
<div style="padding:10px;">hello</div>

여백을 줬을 때도 상하좌우 잘 적용되는 것을 확인할 수 있음.

또한 블록요소는 자식요소로 블럭요소를 가질 수 있음
당연히 인라인요소도 자식요소로 가질 수 있음

<div>
	<div></div>
</div>

=>가능

<div>
  	<span></span>
</div>

=>가능