개발 공부 기록하기

Section 4. HTML의 다음 단계(1) 본문

프밍/HTML

Section 4. HTML의 다음 단계(1)

태영(泰伶) 2022. 11. 15. 23:47

이번 섹션에 포함된 강의명은 다음과 같다.

(강의에서 제공된 번역 내용을 기반으로 작성하지만, 간혹 오역으로 판단될 경우에는 내 해석으로 대체할 수 있음..!!)

순서 강의명 소요 시간

중요도

(필수crucial/중요important/선택nice to have)
01 HTML5가 정확히 무엇인가
What Exactly Is HTML5?		 6' 27" 필수
02 블록 vs. 인라인 요소 ─ <div>와 <span>
Block vs. Inline Elements ─  Divs and Spans		 8' 42" 필수
03 기타 요소 모음: <hr>, <br>, <sup>, <sub> 요소
Other Elements: <hr>, <br>, <sup>, <sub> elements		 6' 18" 선택
04 엔티티 코드
Entity Codes		 6' 01" 필수
05 코딩 연습 4: Snowman Logo Exercise
Coding Practice 4: Snowman Logo Exercise		 - -
06 시맨틱 마크업의 개요
Intro to Semantic Markup		 9' 01" 필수
07 시맨틱 요소 사용법
Playing with Semantic Elements		 12' 18" 필수(양 많음)
08 스크린 리더 데모
Screen Reader Demonstration		 3' 33" -
09 VSCode 팁: 에밋
VSCode Tip: Emmet		 6' 12" 선택

 

01. HTML5가 정확히 무엇인가

     HTML5 = HTML을 정의하는 가장 발전된 표준. 새로운 요소, 속성, 행동 양식을 가진 새로운 버전의 HTML 언어.

 

     HTML은 다운로드 받는 공식 파일이 따로 없다. 왜냐면, HTML이라는 것의 작동 방식에 대한 지침일 뿐이라 그렇다.

     

    HTML spec ( https://html.spec.whatwg.org/ )이라는 곳에서 HTML의 작동방식을 자세하게 확인할 수 있다.

       하지만... 위의 사이트에 접속해서 스크롤만 내려도, 뭐 하나를 누르기만 해도 Chrome이 이유는 알 수 없었지만 '응답 없음'을 띄우며,

      무한 로딩 원이 돌아가고 결국은 강제종료를 당해야지만 조용해졌다. 강제 종료에 대한 여파로 지금 몇 번째 이 글을 다시 쓰고 있는지 모른다....ㅂㄷㅂㄷ......😩

 

     HTML 문서를 작성할 때 가장 먼저 보이는

     <!DOCTYPE html>의 역할이

     브라우저에게 이 문서가 HTML5 문서 표준을 따른다는 사실을 알려주는 것이다.

     

 

 

 

 

02. 블록 vs. 인라인 요소 ─ <div> & <span>

     주어진 요소가 문서의 콘텐츠 흐름에 들어가게 하는 방법으로 ① 블록 수준 요소, ② 인라인 수준 요소가 있다.

 

     블록 수준 요소는 <p>, <h1>, <h2>...처럼 그 요소가 사용된 한 줄 전체를 혼자 차지해버리는 요소를 말한다.

 

     반대로, 인라인 수준 요소는 한 개의 요소가 그 한 줄 전체를 혼자 차지하지 않고,

     다른 1개 이상의 요소와 함께 그 줄을 사이좋게 공유하는 요소를 말하며,

     이들은 자신이 차지하는 최소한의 공간만 차지한다.

 

     CSS를 통해서 블록 수준 요소를 인라인 수준 요소로, 인라인 수준 요소를 블록 수준 요소로 바꿔줄 수 있다.

     (2022.11.07. 작성한 DAY 12. 웹 문서 내용을 박스 형태로 정의하기 (with CSS) (1) - 블록 레벨 요소, 인라인 레벨 요소, 박스 모델 포스팅 참)

 

DAY 12. 웹 문서 내용을 박스 형태로 정의하기 (with CSS) (1) - 블록 레벨 요소, 인라인 레벨 요소, 박

1. 블록 레벨block-level 요소 & 인라인 레벨inline-level 요소 ! 잠깐 복습 TIME : 태그tag vs. 요소element 태그(tag) 로 묶인 명령어. ex, , , , , , , 등. 요소(element) 태그를 이용해서 만들어낸 웹 페이지 구성 요

from-ms-to-developer.tistory.com

 

     <div>

     div = division = 분할

     <div>는 무언가를 잡아두는, 또는 요소를 그룹화하는 포괄적인 그릇generic container의 개념으로 생각하면 된다.

     블록 레벨 요소에 해당!

 

     그래서 소스 코드 중간에 <div>를 넣는다면, 얘가 그 부분 한 줄의 전체 블록을 차지하고, 위 아래의 콘텐츠를 밀어낸다.

 

     CSS를 적용할 범위를 여기부터 여기까지로 지정해서 콘텐츠를 그룹으로 묶고 하나의 스타일을 정할 때

     많이 사용하는 tag이다.

 

 

     <span>

     <span>은 <div>와 동일하게 포괄적인 그릇generic container이지만, 인라인 수준 요소이다.

     콘텐츠를 그룹화하지만 한 줄 전체 공간을 차지하지 않기 때문에, 부분적으로 스타일을 적용할 때 많이 사용된다.

 

     텍스트나 콘텐츠를 <span>으로 감싸면 역시 하나의 그룹으로 묶어서 CSS로 스타일을 정할 수 있다.

 

     

 

 

 

03. 기타 요소 모음: <hr>, <br>, <sup>, <sub>

     <hr>

     horizontal rule의 약자. 닫는 tag는 별도로 없다.

 

     <hr> tag에는 다른 콘텐츠나 속성을 부여할 필요가 없다.

 

     화면을 가로지르는 수평 가로줄 을 하나 만드는 기능을 한다.

 

    이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 의미한다 - MDN 설명 참조.

     

     CSS를 이용하여 모양도 마음대로 바꿀 수도 있다.

 

 

 

 

     <br>

     break의 약자. 원하는 곳에서 정확하게 내용의 줄을 바꾸어 주는 태그다.

     

     

 

 

     <sup>

     *superscript의 약자.

          * superscript: 어깨 글자의

     위첨자나 출처를 표시할 때 자주 사용된다.

 

 

 

 

     <sub>

     subscript의 약자.

          * subscript: 아래에 기입한, 아래에 적은 문자

     아래첨자나 화학 방정식 등에 자주 사용된다.

 

     예시.

     I like H2O.

     1/2 + 1/2 = 1

 

 

 

 

04. 엔티티 코드

     엔티티 코드 = HTML 엔티티

       HTML 대신 쓸 수 있는 특별한 코드 or 시퀀스.

       이걸 사용하면 다른 글자가 표시된다. 타이핑하기 어려운 글자들도 엔티티 코드에 있다.

       &copy;         ⇒      ©

       &diams;       ⇒      ♦

       &#8224;       ⇒      †

       &rarr;           ⇒      →

 

     강사님이 소개해 준 첫 번째 엔티티 코드 모음은 HTML spec이라고 내 인내심을 굉장히 많이 시험했던 사이트에 있는 것이었다.

     그래서 내가 따로 찾아보다가 알게된 다른 페이지를 링크해 두는 편이 낫겠다고 생각했다.

     https://copypastecharacter.com/all-characters

 

Copy Paste Character

A website for copying the 'hidden' characters that comes with the computer's typefaces.

copypastecharacter.com

 

     아래 것은 강사님이 알려 준 다른 사이트이다.

     https://entitycode.com/

 

Entity Code - A Clear and Quick Reference to HTML Entities Codes

About EntityCode The idea came from my constant need to add those hard to remember HTML entity codes, such as the copyright symbol ( © ), every time I’m developing a new website or writing a new article. Usually, I either open one of my previously done

entitycode.com

 

그리고 생활코딩 강의를 들으면서 '이스케이핑(escaping)' 이라는 개념을 공부한 적이 있다.

여기서도 엔티티 코드를 다룬 적이 있어서 그때 쓴 포스팅도 아래에 링크해 두었다.

https://from-ms-to-developer.tistory.com/entry/15%EA%B0%95-%EC%9D%B4%EC%8A%A4%EC%BC%80%EC%9D%B4%ED%95%91escaping

 

15강. 이스케이핑(escaping)

escape = 도망가다, 피신하다 왜 이런 이름이 붙었지?? html 코드 = 보통 tag = browser가 일정하게 해석하도록 약속한 문자들 예제. 코드 안에 을 쓰면 '줄바꿈'으로 인식하지 ' ' 자체로 인식하지 않는다

from-ms-to-developer.tistory.com

 

 

 

05. 코딩 연습 4: Snowman Logo Exercise

이것을 만들어내는 것이 과제이다.

 

엔티티 코드는 구글에서도 쉽게 찾아볼 수 있다.

 

그래서 내가 쓴 답은..

<!DOCTYPE html>
   <html>
      <body>
         <h1>&#9731;Snowman Productions&reg;</h1>
      </body>
   </html>

였다ㅎㅎ

저작자표시 비영리 변경금지

'프밍 > HTML' 카테고리의 다른 글

Section 5. 폼(Form)과 테이블(table)(1)  (0) 2022.11.20
Section 4. HTML의 다음 단계(2)  (0) 2022.11.17
Section 3. HTML 기초(3)  (0) 2022.11.12
Section 3. HTML 기초(2)  (0) 2022.11.12
Section 3. HTML 기초(1)  (0) 2022.11.11
'프밍/HTML' Related Articles more
Comments