[HTML] 질의응답을 통한 HTML 기본 학습

📌 질문을 통한 HTML 공부

---

🤣🤣🤣 질문1: style tag는 why head 안에 선언되나요?
😊😊😊 대답1: 처음 읽는 곳이 head body에 접근시 소스코드가 긴 경우 rendering시 읽는데 지연이 될 수 있으므로

---

🤣🤣🤣 질문2: style 태그 우선순위?
😊😊😊 대답2: tag < class < id < inline style tag (태그 안 style 표시)

---

🤣🤣🤣 질문3: 개발자들이 약속해놓은 관습은 뭐가 있을까요?
😊😊😊 대답3: id는 개발자끼리 정해놓은 약속으로 고유하게 한개만 사용하기로 약속

• 한 html문서에서 id는 한번만 고유하게 사용한다고 약속.
• id를 여러개 했을때 html에서 잘 동작할 수 있으나 자바스크립트에서 문제를 발생 야기

// javascript  
 var id = document.getElementByID("");      //단 하나만 선택된다.  
 var class = document.getElementByClass("");//여러개의 태그가 할당된다.

---

🤣🤣🤣 질문4: class는 어떻게 여러개로 구현할 수 있나요?
😊😊😊 대답4: 스페이스를 통해 ""(쌍따옴표)안에 여러개를 구현합니다.

---

🤣🤣🤣 질문5: id에도 class처럼 여러개 구현해주나요?
😊😊😊 대답5: id는 고유하기에 id 하나의 모든 style을 적용합니다.

---

🤣🤣🤣 질문6: 개발자는 하나의 파일에 하나의 역할을 하는 걸 좋아한다고 하는데 그 예시가 뭔가요?
😊😊😊 대답6: html과 css를 구분해 style css부분을 따로 만든다. -> style에 link를 주어 분리

---

🤣🤣🤣 질문7: 태그가 몇천개일 때 어떤 css를 선택했는지 확인하는 법
😊😊😊 대답7: css peek 사용하여 ctrl+e (바로가기키에서 바꿔서 사용)

---

🤣🤣🤣 질문8: 태그들의 역할을 알려주세요.
😊😊😊 대답8:

• 본문태그
  • p태그: 문단의 시작, p태그의 공백은 space 한칸으로 된다.
    • <>는 태그의 시작과 끝을 알리기에 escape 문자 (특수문자임을 알리는 문자)
    • <>로 적으면 태그로 인식한다.
• html entities (escape 문자)
  • 꺽새  < :&lt;  
  • 꺽새  > :&gt;  
  • 공백: &nbsp, &amp
  • 줄바꿈: <br>을 넣어야 한다.  
• 제목태그
  • h태그: 제목을 표현할 때 쓴다. (개발자들의 약속 p태그로 조작할 수 있다.)
    • 숫자가 h1 ~ h6로 갈수록 점점 글자크기가 작아진다. (중요순)
    • sementic tag (의미론적으로 제목이라고 약속한 것): 툴팁 역할을 해주는 역할(약어) (자주 쓰임)
      9) nav 태그 : 우리 중요한 태그들이 모여있는 곳
• 목록태그
  • 특징: 목록태그 안에 새로운 목록 태그를 만들 수 있다. 
    
    • ol : 순서 목록  
    • ul : 순서가 없는 목록  
    • li : 목록의 내용
• 폰트스타일을 위한 태그:    디자인을 위한 태그를 사용하는 것 보다 css 이용 권장
  • <b> 태그: 글자를 두껍게 
  • <i> 태그: 글자 이태릭체로  
• sementic tag:  특명한 의미를 가진 태그 (랜더링되면서 디자인 태그로 착각하기 쉬운 태그) 
  • u태그: 고유명사, 철자가 틀렸을때 하는 건데 디자인 태그로 착각하기 쉽다.   
  • s태그: 문서의 내용이 틀렸을 때   
  •  del : 예전 버전에는 있었는데, 최신 버전에는 삭제된 내용   
  • strong: 문서에서 중요한 단어   //SEO에 도움이 될 수 있다. 네이버 검색엔진에서   
  •  em : 글자를 강조   
  •    : 윗 글자(자주 쓰임)  
  •    : 아랫 글자(자주 쓰임)  
  •  <abbr></abbr>: 툴팁 역할을 해주는 역할(약어) (자주 쓰임) 
  •  nav 태그 : 우리 중요한 태그들이 모여있는 곳  
• 브라우저에서 경로를 표시하는 방법  
  • 절대 경로: 인터넷, url로 접속가능한 경로  
  • 상대 경로: (통상적으로) 개발 환경에서 시작되는 경로   
    • . : 현재파일이 위치한 경로  
    • .. : 이전경로/상위 경로  
    • / : 구분
• 이미지 태그  
  • <img src=""></img>  
• html 멀티미디어
  • 이곳에서 오디오, 비디오 삽입 되는 것을 본다. 

---

🤣🤣🤣 질문9: 요즘 비디오나 용량이 큰 것들을 어떻게 넣나요?  

😊😊😊 답변9:   

• iframe 사용: 새로운 html을 사용하는 방법으로 사용   <iframe></iframe>  

---

🤣🤣🤣 질문10: 레이아웃을 나누는데 어떻게 사용하나요?

😊😊😊 답변10:   div 태그, span 태그   

• div태그: Division / 가상의 경계, 가상의 레이아웃 
  • 특징
    • disply-block 속성을 가지기에 자동으로 줄바꿈 기능
    • 똑같은 속성을 div 태그에 묶어줘 사용
    • 공통적인 영역을 나누는데 있어 가장 중요한 태그이다.  
    • 웹페이지를 만들때 div로 생성 
• span 태그: 줄바꿈없이 단순히 감싸주는 태그 

---

        span 태그: 줄바꿈없이 단순히 감싸주는 태그