HTML 태그(글자, 콘텐츠, 미디어) 정리

허대훈·2021년 11월 6일

멋쟁이사자처럼 프론트엔드스쿨

✍ HTML 학습

#1 . HTML

VS Code에서 사용자 코드조각(emmet) 설정으로 'htmlko'를 입력 후 tab키를 누르면 !DOCTYPE 부터 필요한 태그 등을 자동으로 불러올 수 있다.
매번 html language를 'en'에서 'ko'로 수동 변경해야 되는게 많이 귀찮았는데, 너무 편한 셋팅이다..! 😋
$1, $2, $3는 자동 완성된 emmet 문서의 커서 위치👆를 지정할 수 있다.
Snippets 설정으로 생산성을 극대화할 수 있다는 것을 많은 html 문서를 작성하면서 체감할 수 있었다..
MDN 문서는 HTML의 각 구성부분이 웹 콘텐츠가 문단인지, 리스트인지, 헤드라인인지, 링크인지, 이미지인지, 멀티미디어 플레이어인지, 폼 요소인지 아니면 기타 사용 가능한 다른 요소들 중의 하나인지, 혹은 새롭게 정의한 요소인지를 명확하게 인지할 수 있도록 하는데 사용
기계가 이해하고, 인식할 수 있는 시맨틱(Semantic) HTML을 작성해야 되는데, 그래야 인덱스를 통한 검색, 유지보수, 협업에 도움이 된다.
시맨팁 웹 하니까 정보처리기사 실기 준비하면서 배운 '온톨로지'가 생각이 났다. 온톨로지는 세상에 존재하는 모든 사물에 대한 개념을 컴퓨터가 다룰 수 있는 형태로 표현하는 모델을 말한다. 이렇게 다시 개념 정리!💯

#2 . 글자 태그

'h' 태그는 헤딩 태그로 제목을 지정하기 위한 태그, 단순히 글자를 크게하거나 굵게 하기 위해 사용되지 않음
```
 <h1> 대제목  </h1>

 <h2> 소제목  </h2>
```
👉 'hgroup' 으로 대제목, 소제목을 나누기도 하지만 권장 ❌
'p' 태그는 단락을 표시하는 태그로, 내용을 집어 넣을 수 있음
'br' 태그는 줄바꿈 태그, 개행을 의미

👉 'wbr' 태그는 텍스트 박스 안에서 한 줄로 모두 표시가 안될 때에만 줄바꿈
'hr' 태그는 단락 구분, 따라서, 'p' 태그 안에서 사용 절대금지 ❌
👉 'br' 태그는 'p' 태그 안에서 사용 가능 ⭕
'a' 태그는 링크 설정할 때 사용, 경로는 절대경로와 상대경로가 있는데, 용도에 맞게 사용
앵커 태그는 인라인 요소, html 문법상 블록레벨 요소는 인라인 요소의 자식이 절대 안 되지만, 앵커 태그만 예외적으로 블록레벨 요소의 자식 허용 ⭕

<a href="https://www.naver.com">click</a>

👉 click

'b' 태그는 굵은 글꼴 표현,
'strong' 태그는 굵은 글꼴에 중요도를 더해 강조

👉 더욱 강조하고 싶으면, 'strong' 중첩
'i' 태그는 글꼴 기울임,
'em' 태그는 같은 글꼴 기울임이지만, 표현 강조
'mark' 태그는 텍스트 하이라이트 표시
'abbr' 태그는 준말, 약자 표현

'blockquote' 태그는 인용블록, 'q' 태그는 인용구

  <q>제발 그만 어려워져.. 이러다 나~~ 더 죽어!</q>

'span' 태그는 줄바꿈없이 영역 묶기, 컨트롤을 위해서 id를 줄 때 사용, 이와 상반되는 'div' 태그는 줄바꿈 영역 묶기

👉'div' 태그와 마찬가지로 최후 수단!

#3 . 콘텐츠 그룹 태그

'ol' 태그는 순서가 있는 목록
'ul' 태그는 순서가 없는 목록
'li' 태그는 각 항목 나열

👉 주로 메뉴 표현
'dl' 태그는 정의 목록
'dt' 태그는 정의 용어
'dd' 태그는 용어 설명

👉 사전처럼 정의
'div' 태그는 레이아웃 나눌 때

👉 컨텐츠 내용 변경 ❌, 하위 요소 묶어 스타일 꾸미기
👉 내용이 하나의 독립된 컨텐츠 = 'article' 태그
'figure' 태그는 이미지에 캡션(자막, 설명)

#4 . 미디어 태그

'img' 태그는 html 페이지에 이미지 삽입
👉 'src' 속성은 파일 위치, 파일명 보여줌(필수)
👉 'art' 속성은 이미지가 안 보일때, 적힌 텍스트 보여줌
```
예시 -> <img src="img/a.jpg" alt="문구">
```
👉 'srcset' 속성은 다양한 크기의 이미지를 2개 이상 사용할 때, 브라우저에게 선택권 위임

'iframe' 태그는 한 페이지 안에서 또 다른 페이지 보여주고 싶을 때
👉 사용자 임의로 크기 조절 ❌

#5 . 단축키

Ctrl + \ : 토글 보이기
Ctrl + O : 파일 열기
Ctrl + P : 프로젝트 검색
Ctrl + F : 열려 있는 파일 내에서 검색
Ctrl + Shift + F : 열려 있는 전체 프로젝트 내에서 검색
Ctrl + , : Settings
Ctrl + N : 새로운 파일
Ctrl + S : 파일 저장
Ctrl + Shift + S : 다른 이름으로 저장
Shift + del : 라인 지우기
Ctrl + 클릭 : 여러 줄 입력

🦛 HTML 첫 수업..!

처음 제주코딩베이스캠프의 이호준 대표님과 HTML의 기본부터
배웠는데 프론트 엔드의 전반적인 느낌, 관련 태그에 대해서 짧지만 임팩트있게 배울 수 있어서 너무 좋았다!😊 패스트캠퍼스에서 Java 국비지원 교육을 들었을 때보다 더욱 집중도 되고, 이해가 쏙쏙 되었다..!

공부를 함에 있어서 적정선의 긴장감은 필수라고 생각하는데,
실시간으로 강의가 진행하면서 첫 수업이기도 했고, 진도에 최대한 뒤쳐지지 않으려고 바짝 긴장하면서 듣게 되다보니 그런 것 같다..

무엇보다 같이 수업을 듣는 우리 미래님들의 열정🔥에 감동받아 동기부여를 가득 받게 되었고, 정말 사소하면서 난처할 수 있는 질문에도 격려해주고 이끌어주시는 강사님의 세심한 배려,, 다 같이 성장할 수 있는 분위기를 위해 애써주시는 매니져님,, 각자의 해결하지 못한 부분과 팁을 위해 정성을 다해 조언해주시는 멘토님까지..!

"나 이거 신청안했으면 어떡할 뻔 했지..?"

처음 배우는 내용이라 진도 따라가는 것도 바쁘고, 남들과 비교하면서 조급한 마음까지 드는 건 사실인데, 같이 성장할 수 있는 이 분위기에서 나만의 속도와 학습 리듬을 유지하는게 제일 중요한 것 같다.

교육 듣기 전 '내가 개발자로서 성장하는데 첫 걸음을 위 프로그램을 통해 올바른 방향으로 나아가는데 도움이 되고 싶어서 지원하게 되었다.' 라고 말했었다.

내 선택은 틀리지 않았고, 이미 올바른 방향으로 나아가고 있다는 것을 알고 있기에 최종 목적지까지 도달하면서 중간에 침몰하지 않도록 완급 조절하며 나만의 페이스 유지하기..! 👊🏻