* 이 글은 필자가 자신이 배운 내용을 정리하기 위한 것이며, 결코 Udemy 강의를 결제하지 않은 타인의 학습을 고려하여 작성되지 않았습니다.
* 이 글을 학습에 활용하기를 원하신다면, Udemy에서 '【한글자막】 The Web Developer 부트캠프 2024' 강의를 구매하시는 것을 권장드립니다.
아마 html과 css 부분은 정보 나열일 예정이라, 지금 당장 이해하지 않아도 큰 상관 없는 이론 부분은 정리를 스킵하고 (나중에 이해에 지장이 간다면 다시 복습하면 되니까) 이해하거나 활용해야 하는 부분만 기록할 것이다.
무엇보다도 내가 이론 이해를 잘 못하겠다. 이렇게 보면 python 보다 어려운 것 같기도 하다... 전 글에서 쉽다고 한 말 취소.
그리고 이 포스트의 제목이 시맨틱이긴 한데 포스트의 중간부터 시멘틱을 다루니, 시맨틱 내용이 급하다면 ctrl+f를 사용해 검색하길 바란다. (tmi지만 순간 ctrl+f4로 찾기 기능 단축기를 착각한 바람에 블로그 글이 날라갔다. 다행히도 바로 복구되었지만...)
html에는 block 요소와 inline 요소가 있다. block 요소는 다른 줄로 나눠진 것, inline 요소는 한 줄에 있지만 서로 나눠진 것이라고 생각하면 될 것 같다.
블록 요소는 추가하면 바로 줄이 바뀐다. 그러니까, <p>~~</p><p>~~</p>를 쓰면 두 쌍의 p 태그가 다른 줄로 표시된다. 하지만 anchor(a) 태그는 둘을 같이 써도 한 줄에 표시가 된다.
이건 p 태그는 블록 요소이고, a 태그는 인라인 요소이기 때문이다.
p 태그와 같은 블록 요소는 혼자서 줄 하나를 차지한다. 그렇다면 p 태그 안에 p 태그가 들어가면 어떻게 될까?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
hi
<p>
hey
</p>
nice to meet you
</p>
</body>
</html>
이런 식으로 말이다.
이럴 경우에는
이렇게 된다. 아마 블럭 요소 위아래로 enter 키를 눌렀다고 생각해도 될 듯하다. 위아래 요소를 '밀어낸다'라고 생각해도 좋다.
(따로 강의에 이런 예제가 있는 건 아닌데, 내가 궁금해서 해봤다. 중요한 내용은 아니다.)
강의에서는 제네릭 컨테이너라는 이름도 복잡한 것들을 소개한다.
첫 번째로 소개하는 제네릭 컨테이너 요소는 (이 표현이 맞는지는 모르겠다만) div이다.
div는 블럭 요소로 특정 구간에 있는 것들을 한 블럭으로 묶고 위아래 것들을 밀어낸다.
그냥 divide(나누다)에 불과한 요소인데, 왜 필요한 걸까?
바로 css 때문이다. 여러 종류의 초밥을 한 접시 위에 놓으면 가지런하고 예쁘다. 무엇보다, 그 초밥이 한 메뉴에 포함되어 있음을 알 수 있다.
초밥들을 회전초밥마냥 개별 접시에 놓을 수도 있지만, 그렇다면 사람들은 그 초밥이 개별 메뉴라고 생각할 것이다.
내가 이해한 게 맞다면 공통된 특징을 부여할 것들을 하나로 묶어서 생각하자! 라는 게 아마 div의 존재 의의인듯 하다.
span은 div 비슷한 건데 대신 inline 요소이다. 블럭 안에서 묶을 한 줄을 정하는 느낌이다.
span으로 묶으면 여러 요소에 동일한 속성을 지정할 수 있지만 div와는 달리 블럭 하나를 차지하지 않는다.
기타 요소 몇개를 소개하자면
<hr> : 가로 줄 추가 (영역 구분용 선)
<br> : 줄 바꿈
<sup> : 윗 첨자 (지수 등을 표현할 때 사용)
<sub> : 아랫 첨자 (화학식에서 원자비를 표현할 때와 같은 상황에서 사용)
그 다음에 소개하는 것은 엔티티 코드이다.
내가 내용 나열만 너무 하고 있는 것처럼 보이는데, 강의에서 내용 나열만 해서 그렇다. 그런데 설명을 잘 해주니 꼭 공식 사이트에서 저작권자에게 정당한 대가를 주고 구매해 학습하길 바란다. (할인하면 단돈 15,000원 밖에 안 한다.)
엔티티 코드는 특수 기호를 작성할 때 사용할 수 있다.
모든 엔티티 코드는 '&'으로 시작해 ';'으로 끝난다.
'>', '<', '&' 를 쓸 때에는 엔티티 코드를 사용하는 것을 권장하니, 이 기호들을 쓸 일이 있다면 꼭 엔티티 코드를 사용하도록 하자.
엔티티 코드는 인터넷 검색을 하면 나오는데, 높은 확률로 엔티티 이름과 엔티티 번호를 함께 볼 수 있을 것이다.
그렇다면 뭘 사용해야 할까? 정답은, 원하는 걸로 사용해도 된다. 그런데 엔티티 이름으로 사용하면 코드를 봤을 때 "아! 이게 그 기호군!"하고 예측하기 쉬우니 이름을 사용하면 좋을 것 같다.
이젠 본격적으로 이 포스트의 중심인 시맨틱 마크업로 들어가보려고 한다. (왜 이제 와서야 이 내용을 다루냐면, 강의 순서가 그렇다.)
시맨틱 마크업을 6분 정도 동안 설명하는데, 요약하자면 div랑 비슷한데 이 부분은 어떤 기능을 가지고 있어~ 하고 설명해주는 요이다.
이제부터 주요 시맨틱 마크업을 살펴보자.
<main>
메인은 주요 내용을 다룬다. 중요한 점은, 메인 요소에 반복되는 내용이 포함되면 안 된다는 것이다.
예를 들어, 요아정 공식 홈페이지의 브랜드 부분에 들어가면 위에 여러 메뉴들과 요아정 로고가 나온다.
이런 식인데, 위에 있는 브랜드, 메뉴&매장 같은 메뉴나 로고는 내가 브랜드 란을 보고 있던, 창업 란을 보고 있던 계속 보인다.
그리고 우리는 이것들의 공통점을 알 수 있는데, 바로 페이지의 '주요 내용이 아니'라는 것이다. 이 페이지는 요아정에 대해 설명하는 것이 주 목적이다. 그런데 브랜드나 창업 같은 부분이 지금 당장 중요할까?
또 이것들의 다른 공통점을 찾아보면,
요아정의 메인 화면에서 창업 화면으로 들어가도 화면 위의 메뉴나 로고 등이 계속 있다! 이게 바로 내가 앞에서 말했던 '반복되는 내용'이다.
이런 메뉴들은 메인 요소에 들어가선 안 되니, 구분하도록 하자.
<nav>
네브는 네비게이션의 약자인데, 이걸 클릭하면 어디로 가요! 하고 알려주는 표지판의 역할을 한다. 다른 사이트로 연결을 해도 되고, 해당 페이지의 특정 부분으로 이동하게 해도 된다. 그건 당신의 자유. 안은 원하는 내용으로 적당히 채우자. (표지판의 역할을 해치지 않는 선에서)
<section>
섹션 요소는 디브와 비슷하지만 다르다. 디브는 아무곳이나 붙일 수 있다. 하지만 섹션은 '독립적인' 부분이어야 한다.
한 가지 주제로 엮인 부분이어야 하지만, 전체 맥락과 관련이 아예 없지는 않은... 그정도로 생각하자.
사실 나는 잘 모르겠지만, 너무 독립적인 것처럼 생긴 부분은 섹션을 붙이도록 하자. 나는 초보자니까 여기는 섹션 여기는 디브 이런 걸 엄격하게 나눌 필요는 없다고 생각한다. (원래 사람은 자신한테 적당히 관대할줄 알아야한다.)
<article>
알티클 요소도 독립된 부분에서 사용될 수 있다. 뭐? 그러면 섹션이랑 뭐가 다른건데?
알티클은 아예 페이지 내용에서 독립된 내용을 주로 다룬다. 그러니까, 예를 들어 요아정 사이트에 오늘의 날씨나 지금 시각같은 게 적혀 있다면 그건 아예 독립된 내용일 것이다. 그런 게 바로 article의 사용처가 될 수 있다.
<aside>
부가 요소를 작성할 때 쓰인다고 한다. 자세히 설명하지는 않는 걸 보니 그렇게까지 중요하지는 않은 듯...
<header>
머리말이다. 네비게이션 요소를 포함할 때가 있다. 간단한 소개 같은 걸 넣으면 좋다는 것 같다.
<footer>
꼬리말이다. 안에 뭘 넣는지는 사이트의 용도마다 다르니, 자신이 만들 웹페이지의 용도를 고려해 작성하도록 하자. (강의에서는 자세히 다루지 않는다.)
<time>
시간을 나타내는 인라인 요소라는데, 이것도 딱히 자세히 설명하지 않는다. 너무 훅훅 넘어가는 것 같은데
<figure>
독립된 요소를 나타내는데, 좀 특별한 의미를 가진 요소여야 한다. 중요하고 캡션이 달릴만한... 것들에 사용하는 것 같다.
네레이터(스크린 리더)를 사용해서 시멘틱과 제네릭 컨테이너의 차이를 알려주길래 나도 한 번 시도해봤는데, 노트북에 귀신 들린 것 같아서 바로 껐다. 존재만 알아두자... 존재만 (원하는 사람은 한 번 정도 시도해보는 건 나쁘지 않을 듯 하다.)
이거 말고도 emmet이라는, 단축키 모음 같은 것도 알려주는데, 신기하다. 전문적으로 웹프로그래밍을 할거라면 유용할 듯 하다. 나는 취미로 배우는 거라 이걸 외우거나 쓸 일이 있을까 싶지만.
홈페이지에 가면 다운로드 버튼이 있는데, vs코드에 내장되어 있으니 굳이 깔지 않아도 괜찮다.
https://docs.emmet.io/cheat-sheet/
Cheat Sheet
Download cheat sheet as printable PDF A5
docs.emmet.io
emmet을 이용하면 '>'로 자식 요소를, +로 형제 요소를, *로 같은 요소 반복을 할 수 있다. $를 사용하면 반복할 때 자동으로 숫자를 매긴다.
main>(ul>li*5)+nav
를 입력하면
<main>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<nav></nav>
</main>
가 나온다.
이 외에도 태그 안에 글자를 넣으려면 대괄호를, 태그 사이에 글자를 넣으려면 중괄호를 쓸 수 있다. 이건 스스로 문서를 찾아보는 걸 추천한다! (절대 설명하기 귀찮은 게 아님)
오늘 글은 여기서 끝. 더 쓸 기력도 없다.
사실 강의 들으면서 블로그 글까지 쓰는데 2시간 가량 정도 밖에 들지 않았지만, 오늘 카페인 과다복용 이슈로 작업 속도와 함께 체력 고갈 속도도 같이 올라갔다.
날이 선선하다 못해 쌀쌀해지는데 감기 조심하길 바라면서. 오늘도 좋은 하루 보내고 자기 블로그 홍보 댓글은 바로 삭제하고 있으니 달지 말았으면 좋겠다. 내가 말한다고 해도 어차피 본문 안 읽고 달겠지만.
'Programming > html,css' 카테고리의 다른 글
| Udemy The Web Developer Bootcamp Section 7 정리 | CSS 선택자 Selecter (0) | 2024.11.17 |
|---|---|
| Udemy The Web Developer Bootcamp Section 6 정리 | CSS 기초 (0) | 2024.11.17 |
| Udemy The Web Developer Bootcamp Section 5 정리 | HTML 폼과 테이블 form and table (1) | 2024.11.17 |
| Udemy The Web Developer Bootcamp Section 3 정리 | HTML 기초 (1) | 2024.09.28 |
| Udemy The Web Developer Bootcamp 시리즈를 시작하기 앞서... (0) | 2024.09.27 |