SEC 4. HTML : Next Steps & Semantics
| Crucial! | important | Nice to Have |
| Understanding what HTML5 Actually is | VSCode Tip : Emmet | |
| Block Vs. Inline Elements | <sub> elements | |
| <span> and <div> elements | <hr> elements | |
| Semantic Elements | <sup> elements | |
| <br> elements |
What Exactly Is HTML5?
HTML5 is the latest evolution of the standard that defines HTML.
browser를 만드는 회사에서 설정하기 때문에 유저가 HTML 버전을 낮추거나 하는건 불가..
그냥 최신의 HTML 스탠다드라고 생각하면 될듯..
HTML 파일을 에디터할때 표준규격(boilerplate)이 가장 앞에
<!doctype HTML> 을 쓰는데 이건 HTML파일이라는 깃발, 선언에 가깝고, 실질적으로 문서에 영향을 주는건 없다. 바꾼다고해서(HTML 4.01 ~~) 버전이 달라지는것, 변경되는것도 없고 그저 명시해놓는것에 가까움.
Block vs. Inline Elements - Divs and Spans
inline element : on-line , in-line ex) <a>. <span>
block level element : own-line, take own block ex) <div>
지금(HTML을 배우는 단계)은 중요하지 않을지 모르지만 CSS에서 많이 쓰인다고함.
div같은 경우에는 특히 CSS를 적용하기 전엔 컨텐츠에 아무런 영향을 주지 않음. (span도 비슷)
div
developer.mozilla.org/en-US/docs/Web/HTML/Element/div
span
developer.mozilla.org/en-US/docs/Web/HTML/Element/span
An Odd Assortment of Elements: HR, BR, Sup, & Sub
MDN에서 HR, BR , Sup, Sub 용법 찾아보면 자세한 예시가 나와있음
중요한 비중을 차지하지는 않는 요소들인것 같다.
HR(horizontal rule)은 구분선, self tag
developer.mozilla.org/en-US/docs/Web/HTML/Element/hr
BR(break)은 Break line 줄 띄어쓰기,, 줄 띄어쓰기가 필요한 이유는 에디터안에서 줄 띄어쓰기를 해도 html 자체에서는 그냥 이어서 인식하기 때문에
a line break in text
developer.mozilla.org/en-US/docs/Web/HTML/Element/br
Sup(Superscript) 은 지수표현하는 느낌으로 철자하나를 위로 올림,, 위키에 주석을 달때도 자주 쓰이는 요소
developer.mozilla.org/en-US/docs/Web/HTML/Element/sup
sub(subscript)은 분모나 분자 구조표현할때 쓰는 느낌으로 철자 하나를 아래로 내림,, 분모 표현할때 좋을거 같다.
developer.mozilla.org/en-US/docs/Web/HTML/Element/sub
Entity Codes
레퍼런스들
dev.w3.org/html5/html-author/charref
ex ) google search - html entity less than
entity : 독립체
잘 쓰이지 않거나 키보드로 타이핑하기 어렵거나 html 문서가 헷갈려하는 기호들을 표현할때 쓰는 코드.
에디터에선 이상하게 보일지모르나 브라우저에서는 엔티티코드를 인식하고 렌더링해준다
보통 &(ampersand)로 시작하고 ;(semi-colon)으로 끝난다.
ex) © €
코딩 연습 4: Snowman Logo Exercise
entity code 사용법과 sup 요소 이용하는 연습
? : 등록 상표 기호(登綠商標記號, Registered Trademark Symbol, ®)은 특정 국가 및 지역에서, 어떤 단어나 문구, 기호가 등록된 상표 또는 서비스 마크 임을 알리기 위해 사용하는 심볼 마크이다. 동그라미 안에 '등록 상표'(Registered Trademark)'를 뜻하는 "R" 문자가 기입된 모양을 띈다. by wiki
Intro to Semantic Markup
semantic : 의미의, 의미론적인
Semantic markup, the term semantic itself, independent of code or HTML just means something relating to meaning.
semantic markup is meaningful markup or markup that relates or pertains to the meaning of the content of that element.
div 같은 경우는 그냥 컨테이너로써의 요소.. 의미가 없다.
semantic markup은 a요소나 img 요소같은 눈에 딱 보이는 효과를 주지는 않지만 요소에 의미를 부여한다.
이게 메인이다. 이게 네비게이션이다. 이게 하단부(footer)다 이런것
이런 구분없이 div로만 떡칠한다면 정보를 모으는 주체(google 등등)는 정보를 모으는데 헷갈릴 수 있다.
그리고 호환성의 문제(screen reader user)도 있고 마지막으로 개발을 하는데 있어서 개발할 부분들을 쉽게 찾고 구분할 수 있다.
그래서 non-semantic markup(div)보다 semantic markup(main, nav, footer)등을 사용하는게 더 좋다.
->
section , main, nav, header, footer
Header footer, nav section, article main.
They all behave just like divs, except they have some meaning.
So that's one reason making your code more clawable, more friendly to other applications or to other code.
The second reason has to do with accessibility and making your code more accessible to people, using
screen readers to people who cannot see the rendered content or may not be able to fully see it or might
elect to use a screen reader.
Those screen readers can look for things like a nav element or a header or a footer or an article,
a main section.
It can use those as hooks.
And then the third reason that's important is that it just makes your your own code, your markup more
navigable for yourself and for other developers.
So adding meaning into our markup is the idea behind writing semantic markup.
There's nothing new about them except that they add meaning to the markup.
You use an article or a section or a main instead of divisive div.
Playing With Semantic Elements
그냥 div를 쓰는것보다 semantic한 markup을 쓰자..
div는 그냥 컨테이너적인 역할을 하는것이고
의미가 있는 markup을 함으로써 우리가 그것이 실질적으로 무슨 의미인지 더 빠르게 이해할수 있고 검색최적화와 호환성및 스크린리더유저의 사용에 더 좋게 만들수 있다.
section 요소는 그저 섹션을 나누는 .. 그냥 의미적인 요소에 불과하지만 div보다는 훨씬더 의미가 있다.(이런게 semantic하다고 하는것일듯)
figure time footer section article nav main header footer aside summary
MDN으로 찾아보는것도 나쁘지 않을거같다.
Screen Reader Demonstration
스크린 리더 사용 동영상
스크린 리더유저의 시점으로 웹을 사용하는것을 보여준다.
sematic markup을 기준으로 정보들을 읽어주기때문에 숙련이 된다면 숏컷과 함께 빠르게 정보를 찾는것도 가능하다.
또한 스크린 리더 유저를 위해서 semantic markup 사용을 권장하는것...
VSCode Tip: Emmet
emmet은 그냥 html 코드를 쓰는데 도움을 주는 툴이다.
VSCode 안에 내장되있기도한데 코드를 빠르게 짜는데 도움이 된다.
치트시트에 간략하게 사용법이 요약되어 있다.
보통 자주쓰는건 child, sibiling, mutiply정도?
그 이외에도 html 요소들을 빠르게 코딩하게 숏컷하게 해주는 툴...
'TIL(today I learned)' 카테고리의 다른 글
| 2020-10-21 TIL (0) | 2020.10.21 |
|---|---|
| 2020-10-20 TIL (0) | 2020.10.20 |
| 2020-10-19 TIL(2) (0) | 2020.10.19 |
| 2020-10-18 TIL(2) (0) | 2020.10.18 |
| 2020-10-18 TIL(1) (0) | 2020.10.18 |