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

✍ 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 문법상 블록레벨 요소는 인라인 요소의 자식이 절대 안 되지만, 앵커 태그만 예외적으로 블록레벨 요소의 자식 허용 ⭕

 

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

• 'blockquote' 태그는 인용블록, 'q' 태그는 인용구
  
  • 'span' 태그는 줄바꿈없이 영역 묶기, 컨트롤을 위해서 id를 줄 때 사용, 이와 상반되는 'div' 태그는 줄바꿈 영역 묶기
  👉'div' 태그와 마찬가지로 최후 수단!
• <q>제발 그만 어려워져.. 이러다 나~~ 더 죽어!</q>

#3 . 콘텐츠 그룹 태그

• 'ol' 태그는 순서가 있는 목록
• 'ul' 태그*는 순서가 없는 목록
• 'li' 태그*는 각 항목 나열
• 👉 주로 메뉴 표현
• 'dl' 태그는 정의 목록
• 'dt' 태그*는 정의 용어
• 'dd' 태그*는 용어 설명
• 👉 사전처럼 정의

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

 

#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 국비지원 교육을 들었을 때보다 더욱 집중도 되고, 이해가 쏙쏙 되었다..!

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

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

 

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

 

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

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

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