Ch 6. HTML 핵심 정리

🎯이번 챕터는

앞서 배웠던 HTML내용들을 실제로 실행시켜보는 과정이었다.

특히 전역속성과 그 정의 그리고 data속성은 매우 흥미로운 부분이었다.

data속성을 잘 기억하고 있어야겠다.

---

⭕01. 핵심 요소 정리

📌강의정리

• HTML의 요소들중 핵심요소를 알아보자.
• 자주 사용하는 요소들은 뭐가 있을까?
• div태그는 디비전의 약어로 블록요소에 해당한다.
• 레이아웃요소이며 특별한 의미가 없다.
• 구분을 위한 요소이므로 정말 많이 사용되고 있다.
• 구분 영역 을 잡을때, 의미를 묶을때 사용한다.
• h1태그는 제목을 의미하는 요소이다. heading
• 책을 사면 목차가 있는데 목차의 의미를 잘생각해보면 된다.
• p태그는 paragraph의 약어로 문장을 의미하는 요소이다.
• p태그는 div로 대체해도 되지만 p태그를 사용하면 문장을 뜻하는 구나 라는 것을 알 수 있고 블록 요소이다.
• img태그는 인라인태그로써 이미지를 삽입하는 요소이다.
• src라는 속성을 통해 경로를 지정해주고 이미지가 나오지않을경우
  나올 값을 alt속성으로 표현해주어야 웹표준에 맞출 수 있다.
• 엑박떴다라는 것도 이 alt속성값이 나오는것이다.
• h1의 heading태그는 1~6까지의 숫자로 이루어져 있으며 숫자가 작을 수록 더 중요한 제목을 의미한다.
• 제목을 쓸 때 1보다는 다른 적정선의 2~4를 쓰는 것이 좋다.
• ul태그는 블록요소로써 순서가 필요없는 목록의 집합을 의미한다.
• li태그는 블록요소로 목록 내 각 항목을 의미한다.
• 예를들면 사과 딸기 수박 오렌지는 순서가 필요없기 때문에 ul태그를 쓴다.
• 순서가 필요한 리스트는 ol태그를 쓰지만 별로 쓰지는 않는다.
• anchor는 닻이라는 뜻이다. a태그
• 인라인 요소로써 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소이다.
• 닻을거는 느낌이다. 링크URL의 표시(브라우저 탭)위치한다.
• 내용을 클릭하면 경로로 이동하게되며 이 경로는 href라는 속성에 값을 넣어 정의해준다.
• target이라는 속성에 _blank를 넣어주면 그 경로로 이동할때 새 탭으로 열리게 된다.
• span은 인라인요소로써 특별한 의미가 없는 구분을 위한 요소 로써 div와 많이 붙는다.
• 동해물과 백두산이 라는 문장에서 동해물을 강조하고싶을때
  span으로 묶어주고 span 태그를 CSS로 바꿔주면 동해물만 바꿀 수 있다.
• br태그는 break의 약어로 인라인 요소이다. 줄바꿈요소이다.
• 화면에 출력될때 줄바꿈이 된다. <br/> 로 쓸 수 있도록하자.
• input태그는 인라인요소이며 블록요소이다.
• 이는 inline-block라고 부르는데 인라인이면서 블록의 특징을 갖기 떄문이다.
• 가/세 여백이 특징인데 인풋은 수평으로 늘어나지 않지만 여백이 위 아래 늘어난다.
• 사용자가 데이터를 입력하는 요소이다.
• type이라는 속성에다 입력받을 데이터의 타입을 적어준다 예를 들면 text이다.
• value라는 속성은 사용자가 입력하기 전에 이미 적혀있을 값을 뜻한다. 미리 입력된 값(데이터)
• placeholder라는 속성은 사용자가 입력할 값의 힌트를 뜻하는 속성이다.
• 입력창에 흐리게 쓰여있다가 사용자가 입력하려하면 사라진는 값이다.
• disabled라는 값은 입력요소 비활성화의 속성이다. 회색처리되며 인풋창을 쓸 수가 없게 한다.
• type의 값으로 checkbox를 하면 네모칸이 나온다. 이때 뒤에다 뒤에다
  체크박스의 내용을 적어주고 이를 label으로 묶어주면 라벨가능 요소(input)의 제목을 해줄 수 있다.
• 미리 체크되어지게 하려면 checked라는 속성을 해주면 사용자가 체크하지않아도 미리 체크되어지게 보인다.
• 인풋의 타입이 radio이면 선택이지만 1개만 선택할 수 있게 한다.
• 이때 name이라는 속성에 그룹을 적어 줄 수 있다. 이 radio도 이름과 함께 label로 묶어줄 수 있다.
• table이라는 요소는 테이블요소인데 표요소로써 행과 열의 집합이다.
• 이 요소는 인라인도 블록도 아닌 테이블요소이다. 엄밀히는 블록이지만
  여러개로 나뉠수 있으므로 테이블로 구분될 수 있다.
• tr요소는 테이블 요소에서 행을 지정할 수 있다. table-row
• 표는 행이 먼저이고 열이 그 다음이다.
• td는 열을 지정하는 요소이다. table data
• HTML은 구조만 만들기 때문에 눈으로만 보이는 무언가를 만드려 하지 마라.
• HTML만하면 티가 잘 나지 않는다.

 

📌느낀점

HTML의 여러 태그들에 대해 배웠다.

계속 느끼는 거지만 상당히 실용적인 내용들이다.

실제 환경에서 어떻게 써야할지 벌써부터 감이

조금 잡히는 느낌이다.

---

⭕02. 핵심 요소 출력 연습

📌강의정리

• 앞서 배웠던 html의 요소들을 출력하며 연습해보자.
• html에 div태그를 만들어주고 h1태그를 만들어 오늘의 날씨를 적어보자.
• h2태그또한 하면 숫자가 커질수록 글씨는 작아진다.
• 중요도가 낮아진다는 뜻
• 글자크기가 중요한게 아니다. 몇px인지 모른다.
• html은 구조를 만들뿐이다.
• 기본 설정은 reset 할 것이다.
• 브라우저가 가지고 있는 기본 설정은 리셋하고 시작하자 코드펜은 css 설정에서 할 수 있다.
• h1태그는 h2보다 더 중요하다는 의미가 중요한 개념이다.
• html로 뭔가 예쁘게 만드려 하지 마라.
• 태풍 이미지를 검색하고 새탭으로 열어서 절대경로를 복사하여
  img의 src속성에 붙여넣기해주면 이미지가 나오게 된다.
• 경로에서 jpg가아닌 jp라고하면 alt에 있는 태풍이 나오게 된다.
• img태그는 src도 써야하지만 alt속성도 해야한다.
• ul>li*4를 하고 탭을 하면 li가 4개 만들어진다.
• 이걸 사과 딸기 수박 오렌지를 해주면 다 수직으로 쌓인다. 이는 블록 요소이기 때문이다.
• 이걸 reset을 다시 해제하고 확인하면 앞에 .이 붙게 된다.
• ul을 ol로 바꿔주면 순서가 필요해지므로 1.2.3.4.가 붙게 된다.
  이때 reset을 적용하면 1.2.3.4.가 사라지게 된다.
• 모든 브라우저에서 다 같게 나오게 하려면 reset하고 하는게 중요하다.
• a태그의 href속성에 경로를 적어주고 내용에 naver와 google을 해주면 a태그가 완성된다.
• css에서 body태그를 폰트사이즈 50px주면 글씨가 커진다.
• 이는 상속에서 더 잘알 수 있지만 조상을 바꾸면 밑에 내용이 다 바뀐다.
• vscode에서 작성해보자. style태그에서 body{fontsize50px}를 하면 된다.
• naver를 클릭하면 우리의 개발탭에서 naver로 이동한 것을 확인할 수 있다.
• 새로운탭에서 열리게 하려면 target=”_blank”를 해주면 새탭에서 naver가 뜨게 할 수 있다.
• 사용자입장에서는 컨트롤누른상태에서 누르면 새탭에서 열리게 할 수 있다.
• 애국가를 p태그로 감싸놨는데 우리나라만 빠르게 하려면
  우선 우리나라만 span태그로 묶어주고(Wrapping래핑) css에서 span만 color: red를 해주면 된다.
• 우리나라를 div로 묶어주면 줄바꿈이 되어 나온다.
• 글자의 구조가 깨지는 것을 확인 할 수 있는데 div는 블록요소이며
  가로크기를 제일 크게 잡으려 하기 때문이다.
• css에서 div의 백그라운드 검정으로 하면 가로를 가장 크게 잡으려 한다.
• span또한 백그라운드를 하면 가로를 가장 적게 잡으려 한다.
• p로 묶었을때 html상에서 엔터를 했어도 출력에서는 줄바꿈이 반영되지 않는다.
• 이때 <br/> 를 써주면 줄바꿈이 되는것을 알 수 있다.
• input태그를 보면 속성 type에 text와 checkbox두개를 확인해보자.
• text에 value가 heropy이면 먼저 적혀있게 할 수 있다.
• placeholder값도 준다면 힌트가 보이게 할 수 있다.
• disabled를 해주면 사용할 수 없는 input태그가 된다.
• checkbox는 checked를 통해 먼저 체크되어 있게 할 수 있다.
• Apple checkbox를 만들때 label로 묶어주면 apple이라는 요소는 체크박스와 아무관계없었지만
  이제는 의미가 있어진다.
• label두개로 묶어주면 apple, banana로 총 두개 만든다.
• 이때 radio를 해주면 동그라미로 변할뿐 차이가 없는것 같지만 그룹을 만들어 주어야 한다.
• 이때 사용되는 속성이 name이며 이 값을 fruit로 해주면 하나가 선택되면 다른 하나는 선택해제가 된다.
• table로 2행2열 표를 만들어보자.
• tr태그를 2개 만들어주고 그 각각의 행안에 들어가 tb태그를 만들어주어 A를 삽입해준다.
• 엔터이후 다시 td를 통해 B를 넣어주고 이를 반복하면 table을 만들 수 있다.
• 이는 표처럼 안보일수도있지만 html은 구조만 잡는 것이므로 css로 td를 border로 1px solid red를 해주면
  표를 만들 수 있다.
• colspan으로 표를 병합할 수 있지만 이걸 굳이 쓰는 게 아닌 다른 여러 방법으로
  css 레이아웃을 잡을 수 있으므로 table을 통해 구조를 잡지 않는것이 좋다.

 

📌느낀점

전 시간에 배웠던 태그들을 실제로 실습해보았다.

눈으로 직접 보니 좀 더 기억에 잘 남을 것 같다.

---

⭕03. 주석

📌강의정리

• 애국가의 일부를 p태그로 감쌌는데 이때 이 p태그의 메모를 적고싶은데 이때 주석을 사용한다.
• 이때 <!—애국가—>를 해주면 된다.
• 이렇게 하면 개발자가 메모를 적어 설명을 써놓은 것이다.
• 이 내용은 브라우저가 해석하지 않기 때문에 내용이 표시되지 않는다.
• 단축키는 ctrl / 이다.
• 이 주석키는 html이 다르고 css가 다르고 js가 다르다 따라서 단축키를 외우는 것이 편하다.
• 꼭 메모가 아니더라도 잠시 화면에서 안보이게 하는 것도 주석이 쓰인다.
• css에서도 원하는 줄에서 단축키를 써주면 똑같이 주석을 쓸 수 있다.

 

📌느낀점

평소 자주 쓰는 주석 관련 내용이었다.

단축키가 있는건 유용할 것 같다.

---

⭕04. 전역 속성

📌강의정리

• 전역속성을 알아보자.
• html의 기능을 확장해주는것을 속성이라 했다.
• a태그의 href는 img의 src대신 쓸수 없다.
• 하지만 전역속성은 body태그의 어떤 태그들에서도 쓸 수 있는 속성이다.
• a태그의 title이라는 속성을 네이버로 이동으로 적어주면 어디에 뜰까?
• 브라우저에서 a태그에 마우스를 올려주면 설명이 뜨는 이게 title속성이며
  전역속성이라 모든 태그에 쓸 수 있다.
• title은 요소의 정보나 설명을 지정하는 html속성이다. 전역속성.
• style속성 또한 어디서든 쓸 수 있는 전역속성이다. 요소에 적용할 스타일(CSS)을 지정한다.
• link로 main.css가져오기 head에 스타일 적기, 태그에 스타일 적기 등 여러가지가 있다.
• class라는 전역속성이 있다. class는 요소를 지칭하는 중복 가능한 이름이다.
• 하나의 요소에 왜 이름을 부여할까?
• CSS선택자라는 요소가 있다. 애국가에서 우리나라를 span으로 묶어주고 꾸밀 수 있다.
• 근데 작업하다보니 동해물도 span으로 묶어주면 동해물도 레드로 꾸며진다.
• 정확한 위치를 잡으려면 태그만으로는 힘들다 이때 우리나라만 빨갛게 하려면
  span class=”red”를 하면 span태그중 red라는 이름을 가진 클래스의 span태그만 빨갛게 할 수 있다.
• 이때 CSS에서는 .red{color: red}를 하면 그 태그만 꾸미는 것이 가능하다.
• 백두산에는 span class=”red”를 또 해주면
• 동해물, 백두산,우리나라 다 span이지만 클래스가 red인 백두산과 우리나라만 빨갛게 할 수 있다. 중복가능
• id라는 전역속성도 있다. 이것도 요소를 지칭하지만 고유한 이름이다. 고유하다는 특징이 있다.
• 동해물에 id=”abc”를 해주면 우리나라에는 id는 쓸 수 있지만 “abc”를 쓰면 안된다.
• 쓸 수는 있지만 웹표준에 어긋나기 때문에 쓰면안된다.
• id는 css에서 #abc {color: blue}로 하면 파란색으로 바뀐다.
• id는 핵심적인 내용,중복되면 안될때 사용해준다.
• data라는 전역속성은 어렵지만 조금 해볼것이다.
• 요소에 데이터를 저장하는 속성인데 문자데이터를 저장한다.
• 이렇게 저장한 데이터를 JS에서 사용한다.
• div data-fruit-name=”apple”을 해주면 data가 저장된 것이다.
• data-fruit-name=”banana” 또한 데이터를 저장한것이다.
• 이때 JS에서
  

  const els = document.querySelectorAll('div')
  els.forEach(el => {
  console.log(el.dataset.fruitName)
  })
  ​

• 어떤 그릇을 만들껀데 els라는 이름이며 document 에 div를 다 찾을건데
  이것을 반복해서 다 끄집어내며 출력할것이다? 라는 뜻이다.
• data속성은 data를 저장하여 JS에서 활용한다.
• vscode에서 main.js에 아까의 내용을 적어주고 script를 통해 JS파일을 연결해주었다.
• 이때 브라우저에서 확인하면 console창에서 안뜨는데
• main.js에서는 document를 통해 찾게되는데 우리는 body위의 script에서 실행되므로
  body를 찾아야하는데 실행되는환경이 밑에부분이 해석이 안된다.
• 그러므로 script에서 defer라는 속성을 추가해주면 모든 html요소를 확인하고
  js가 실행되게 할 수 있으며 정상적으로 동작된다.

 

📌느낀점

전역속성 또한 전에 코딩을 하면서 정의가 되지 않았던 개념이었다.

그냥 막연히 쓰던 개념을 이렇게 정의하고 보니 더 사용하기 쉬워진것같다.

특히 class와 id의 사용법이 확실해진게 좋다.

무난하게 끝나는 줄 알았는데 data라는 전역속성이 조금 어려웠다.

아무래도 JS와 연관되어서 그런것같은데 우선 여기서 나온내용까지만 잘 이해하고

뒤에 다시 나올때 확실하게 사용할 수 있도록 다시 이해해야 되겠다.