Section 4: HTML: Next Steps & Semantics
2022.05.01 01:33 AM ~ 02:55AM
Section 4: HTML: Next Steps & Semantics
＊ 글속 태그들 < >는 ( )로 대체
<< Block(블록) & Inline(인라인) 요소들 >>
-> 1. Block 요소 : 한 줄을 잡아먹음. 옆에 나란히 놓는게 아니라 층이 나눠짐
-> 2. Inline 요소 : 줄바꿈 및 한 줄 다 잡아먹지 않음. 다른 것들과 나란히 어울림
<< Div & Span 태그 >>
-> 1. Div : 물건을 담거나 요소를 그룹화하는 일반적인 컨테이너.
(Division) (+ Block 요소라 자리를 차지함)
-> 2. Span : Inline 요소 임.
컨테이너지만 텍스트나 같은 span등 다른 요소와 나란히 어울림.(ex: Roasted Chicken img(회색 배경에 테두리 둥근 표시로) )
(+ 스타일을 지정해줄 수 있음)
<< Hr, Br, Sup & Sub 태그 >>
-> 1. (hr) : 화면을 가로질러 선 하나를 만들음.
닫는 태그 없음. ( ㅡ 이런거)
(+ 주제나 단락 나눌 때 사용. 표시 스타일을 바꿀 수 있음)
-> 2. (br) : Line Break. 줄 바꿈을 해줌. 닫는 태그 없음.
-> 3. (sup)(/sup) : "SuperScript"
위 첨자 태그. a의 "2 (제곱)"을 특수문자 입력이 아닌 태그로 표현 시켜줌(위키피디아에서 어떤 글자 위에
[2] 이런 참조 같은 것도 이것으로 표현)
-> 4. (sub)(/sub) : "SubScript"
화학 식처럼 글자 아래에 기호가 붙는 것을 태그로 표현 시켜줌.( "H2(아래첨자)O" 같은)
<< Entity Code (엔터티 코드) >>
참고: https://dev.w3.org/html5/html-author/charref
※ HTML에서 특수기호를 불러내는 코드.
-> &(앰퍼샌드)로 시작, ;(세미콜론)로 끝남.ex: 1 < 3 : 1 < 3이라는 뜻.
♠ : ♠
<< Semantic MARK UP >>
ex: 의미없이 div만 남발되어 있는 페이지가 아니라
main>, header>, content>, footer> 등으로 의미를 주는 것.
그러면 Screen Reader를 사용하는 분들을 도울 수 있다.
ex2: section>, article>, nav>, aside>, summary>, details>....
모두 "Div"와 같은 "Container"이며,
"Block 요소"임. 그냥 div에 의미있는 이름을 준 것.
-> (nav)/nav) : 기능은 따로 없음.
다만 하위 자식태그들이 다른 문서로 연결해주는 일을
할 거란 걸 알려주는 것.
-> (section>(/section) : 소제목과 문단들을 묶어 구역 짓는 것.
주변 테두리에 색을 두르고 싶다거나, 배경 색을 지정하고 싶다거나...
(article></article) : 독립된 기사들?
-> (aside>(/aside> : 보통 옆에 있는 메뉴라던가,
영화 리뷰 등에서 자주 보이는 첫 글 옆에 공간에 들어간 글이라던가 그런걸 지칭.
-> (header>(/header> : 머리말.
보통 사이트 로고 및 다른 페이지로 이동하는 메뉴들을 포함
-> (footer>(/footer> : 꼬리말.
일반 페이지들 맨 아래 색상 다른 공간에 작은 하위 메뉴들 있는 곳
-> (figure>(/figure> : 그림이 들어간 div를 설명
-> (time>(/time> : inline 요소. 작동 기능도 없음. 그러나 컴퓨터한테 시간적인 요소라고 알려주는 것
<< EMMET (에멧) >>
※ VSCODE 확장 플러그인.
https://docs.emmet.io/ex: main>section>h1 : "메인"이라는 부모 태그와 "섹션"이라는 첫번째 자식태그,
"h1"이라는 두번째 자식태그가 순서대로 생성됨.ex1: h1+h2+h3 : 서로 종속되지 않는 단독 태그들 여러개 만듬
ex2: ul>li5 : ul 속에 li 태그 5개를 만듬.
ex3: nav>ul>li5>a$ : nav 속 ul, ul속 li 5개,
li 속에 각각 a1, a2, a3, a4, a5란 이름 붙인 자식태그 생성
ex4: 위의 태그에서 a [href="www.$.com"] 하면, 자동으로 뒤에 href 속성 붙여줌.
그리고 www.1.com~ www.5.com 순서대로 생김.
ex5: a{Click Me} : Click Me 처럼 안에 텍스트를 넣는 것임
