Ch 5. HTML 개요

🎯이번 챕터는

기본적인 태그들의 정의와 의미, 개념에 대해서 배웠다.

알고 있던 내용도 있었고 모르고 있던 내용도 있었지만 

하나같이 유익한 내용들이었다.

그동안 했던 HTMl마크업 작업에서의 의문도 해결이 되었다.

몰라도 코딩은 할 수 있지만 아는것이 백배 천배 더 좋다.

---

⭕01. 기본 문법

📌강의 정리

• HTML의 기본문법에 대해 알아보자.
• 기본적인 구조는 h1태그안에 hello world를 넣은 구조이다.
• <태그>내용</태그> 이고 요소element라고 한다.
• 즉 h1요소라고 할 수 있다.
• 앞쪽 태그는 열린 태그라고 한다.
• 뒷쪽 태그는 닫힌 태그라고 한다.
• 종료,닫힌태그는 /가 붙어있는다.
• 요소의 내용은 content라고 한다.

 

📌느낀점

기초적인 내용이었다.

용어의 정의를 했다.

---

⭕02. 부모와 자식 관계의 이해

📌강의 정리

• div태그 안에 Hello를 넣으면 Hello는 요소content라고 할 수 있다.
• 근데 div태그 안에 div태그를 넣을 수 있다. 이때 들여쓰기로 보기 쉽게 정리할 수 있다.
• 이러면 바깥쪽 div 안쪽div로 할 수 있다.
• 나중에 만든 div는 처음의 div와 어떤 관계를 갖는데 이게 부모와 자식 관계이다.
• 바깥쪽 태그 /태그 는 부모요소이고.
• 안쪽 태그 /태그는 자식요소라고 부를 수 있다.
• 그리고 그 안에 내용이 있다.
• 이 부모 자식관계는 상대적인 관계이다.
• 이럴때 정리하지 않으면 보기 힘들기 때문에
• 들여쓰기 와 내어쓰기를 통해 구분하기 쉽게 만든다.
• 내어쓰기는 쉬프트 탭이다.
• 코드를 나만 보는것이 아니기 때문에 객관적으로 보기 좋게 잘 관리 해야한다.
• 들여쓰기를 사용해서 정리하면 부모 태그가 어디서 시작하고 어디서 끝나는 지 알 수 있다.
• 만약 요소 안에 요소 안에 요소가 있다면 가장 안쪽 태그입장에서는 부모태그가 있고
  그 다음 태그는 상위요소 혹은 조상요소라고 한다.
• 이 상위,조상요소는 나를 기준으로 부모를 포함하여 바깥쪽으로의 모든 태그를 지칭한다.
• 가장 바깥쪽 태그 기준으로는 하위,후손요소가 있다.
• 하위,후손요소는 나를 기준으로 자식을 포함하여 안쪽으로 감싸고 있는 모든 요소를 지칭한다.

 

📌느낀점

부모와 자식관계를 배웠다.

이미 알고 있는 내용이었지만 코드를 깔끔하게 해야한다는 점을 다시 새겨들을 수 있었고

상위,조상요소와 하위,후손요소의 정의에 대해 알 수 있었다.

---

⭕03. 빈 태그

📌강의 정리

• vscode로 와서 html을 보면 meta태그나 link태그는 닫힌 태그가 없다.
• 이런 태그는 빈태그라고 한다.
• 빈 태그는 안에 내용을 집어 넣을 수가 없다.
• 이런 태그는 작성방식이 2가지이다.
• 내용을 안적거나, 태그/ 로 마무리를 하던가.
• XHTML에서 태그 / 같은 방식으로 사용된다.
• XHTML은 엄격한 이라는 용어가 붙는다. 좀더 명확하게 표현해야한다는 뜻이다.
• HTML5에서는 두가지 다 차용해서 둘 다 쓸 수 있다.
• /를 안붙이면 단순히 편리하긴하지만 개념을 정확히 알지 못하면 닫힌 태그를 찾으며 햇갈릴 여지가 있다.
• 태그 / 이면 닫힌태그를 찾지 않아도 되어서 안전하다.
• 즉 편리함 vs 안전함이다.
• 태그뒤에 / 를 붙이는 경우가 많다. 되도록이면 붙이려고노력하자 권장요소
• 태그에는 속성과 값을 줄 수 있다.
• charset이라는 속성에 UTF-8이라는 값 같이 말이다.
• 속성은 attribute , 값은 value, 라고 한다.
• 이들은 태그의 기본적인 기능의 확장이라 할 수 있다.
• img / 라는 태그를 생각해보자. 이 태그는 이미지를 삽입하는 요소이다.
  근데 어떤 이미지를 삽입해야하지???
• 이미지 이름은 뭐지??
• 이런 경우에 src라는 속성에 cat.jpg라는 값을 넣어주고
• alt라는 속성에 “고양이”라는 값을 준다.
• 기능의 확장이 없어도 태그 안에 내용을 넣어줘서 태그의 역할을 수행할 수 있다.
• 하지만 빈태그는 태그안에 내용을 넣을 수 없어 매우 많은 경우에 속성과 값이 붙는다.
• input이라는 태그 type이라는 속성이 붙는다.
• input이라는 태그를 통해 무언가를 삽입할 것 인데 그게 text이다. 라는 뜻이다.
• br이라는 태그는 줄바꿈을 하는 빈태그이다. 이런 몇개의 태그는 속성이 필요없지만
  다른 많은 빈태그들은 속성과 값이 필요하다.
• input태그는 type=”text”/ 으로 빈태그임을 보여주고 이를 통해 통상의 검색창같은 기능을 사용할 수 있다.
• checkbox또한 input이라는 빈태그를 이용해서 사용할 수 있다.

 

📌느낀점

빈태그에 대해서 배웠는데 가려운 부분을 긁어주는 내용이었다.

태그들이 어떤건 닫히고 어떤건 열려있는데 정확한 정의를 몰랐지만

이제는 태그의 구성이 어떻게 되어있는지 어떤게 어떤태그인지를 명확히 알게 되었다.

알고나니 살짝 재미도 있는 것 같다.

---

⭕04. 글자와 상자

📌강의 정리

• 요소가 화면에 출력되는 특성을 말한다. 글자와 상자는
• 인라인과 블록으로 나뉜다.
• 인라인은 글자를 만들기 위한 요소들
• 블록은 상자(레이아웃)를 만들기 위한 요소들을 말한다.
• 우리가 보는 웹사이트는 크게 두가지 인라인요소와 블록요소로 나뉜다고 볼 수 있다.
• 글자와 상자는 요소가 화면에 출력되는 특성이다 이는 CSS와 밀접한 관련이 있다.
• 인라인과 블록의 기본적인 개념을 알아두는 것이 좋다.
• 인라인 요소는 span이 대표적인 요소가 있다.
• 본질적으로는 아무 의미가 없다. 구분을 위해서 쓰임
• span 태그는 화면에 나오는데 인라인 요소는 요소가 수평으로 쌓이게 된다.
  hello world가 줄바꿈이 안되는 것을 보면 알 수 있다.
• span은 띄어쓰기로 된다.
• CSS에서 span을 늘리면 띄어쓰기가 커지지는 않지만 body를 늘리면 띄어쓰기도 커진다.
• span이라는 요소는 글자로 취급되기 때문에
• span/span span/span으로 하면 띄어쓰기가 없어진다.
• 가로사이즈와 세로사이즈가 콘텐츠 크기만큼 자동으로 줄어든다. 글자,인라인요소들은 줄어들려한다.
• span의 속성은 CSS요소들을 추가할 수 있다.
• style=”width: 100px;” style=”height: 100px”인데 변화가 없다.
• 왜냐하면 인라인요소는 글자를 취급하는 요소라서 span도 글자이고
  그래서 가로세로사이즈를 지정할 수 없다.
• span에 margin속성으로 요소의 외부여백을 지정하는 CSS속성,
  padding속석으로 내부여백을 지정하는 CSS를 사용했다.
• 인라인요소는 내부든 외부든 위아래 여백은 작동하지않지만 좌우여백은 작동된다.
• 내부는 위아래가 사용되는 듯이 보여지지만 정상적이지 않다.
• 인라인요소에는 자식요소로 블록요소를 쓸 수 없다.
• 글자안에는 상자를 집어넣을 수 없다.
• 글자안에는 글자를 넣을 수 있다.
• 이제 블록요소를 알아보자. div는 대표적인 블록요소가 있다.
• 본질적으로는 아무것도 나타내지 않는 콘텐츠영역을 설정하는 용도이다.
• 요소가 인라인과 다르게 위에서 아래로 수직으로 쌓이는 성질을 가지고 있다.
• 블록요소는 부모요소의 크기만큼 자동으로 늘어나는 특징을 가진다.
• 포함한 콘텐츠 크기만큼 세로너비가 자동으로 줄어든다.
• div태그안에 속성으로 너비와 높이를 CSS로 지정하면 잘 적용된다.
• 또한 div에 외부여백과 내부여백또한 CSS속성으로 잘 적용되는 것을 알 수 있다.
• 블록요소는 div안에 div를 또 넣을 수 있으며 div안에 span도 넣을 수 있다.
  블록안에 블록도 블록안에 인라인도 가능하다.

 

📌느낀점

블록과 인라인은 처음 들어보는 개념이었다.

단순히 의미로 추론하나는 개념이었는데

이렇게 정확한 정의의 설명을 들으니까

그동안 어떤 태그는 어떻게 작동하고 또 다른 태그는 그렇게 작동했는지 알겠다.