[HTML] 에.꾸 : HTML 꾸미기 (색, 텍스트 포매팅, style, 인용, css, 주석)

HTML Display : HTML 코드가 어떻게 화면에 표시되는지

• 화면 크기에 따라 HTML 코드는 다르게 표시될 수 있으며, 한 칸을 초과하는 여백(space, Enter)은 HTML 표시 시 무시된다.
  ⇒ 줄바꿈 요소인 <br>을 입력하지 않는 한 두 줄 이상 띄울 수 X

• Preformatted text(사용자 지정 형식의 텍스트)를 적을 수 있는 <pre> element를 이용하면 줄바꿈과 띄어쓰기가 보존됨.

• ex :

  <h2>reformatted text</h2>
  <pre>
  This Mode
  Should be g.  O.  O. O. D. 
  To write Poems
  
         Right?
  </pre>

  

---

HTML Style (요소 꾸미기) :

• HTML Style : HTML 요소의 style 속성을 통해 색, 폰트, 크기 등과 같은 스타일을 조정할 수 있다.
• 기본 형식 : <tagname style=”property:value;”>
  → 쌍따옴표 안의 property:value는 CSS 언어를 작성하는 거라 볼 수 있다.
  
• 종류 :
  • 배경색 - “background-color:colorname;”
  • 글자색 - “color:colorname;”
  • 폰트 - “font-family:fontname;”
  • 글자 크기 - “font-size:100%;”
  • 글자 정렬 - “text-align:center;”

---

HTML 색깔 :

• 미리 지정되어 있는 색깔 이름(140개의 색상 이름 지원), 혹은 RGB, HEX, HSL, RGBA, HSLA와 같은 색상 코드 값으로 표시할 수 있다.

• style 속성을 통해 요소의 배경 색, 텍스트의 색, 그리고 테두리 색(ex. ”border:2px solid Tomato;” )을 설정할 수 있다.

• RGB : rgb(red, green, blue) 의 형식으로, 삼원색이 각각 강한 정도를 0~255 범위의 숫자로 나타내면 됨.

  • RGBA: rgba(red, green, blue, alpha) alpha 필드가 추가되었는데 불투명도를 0.0~1.0 범위의 값으로 지정해주면 됨.

• HEX: hexadecimal의 줄임말으로 색을 16진수로 나타내는 형식. #rrggbb 빨강, 초록, 파랑 삼원색의 정도를 00~ff 로 나타낸다.(십진수로는 0~255로 rgb와 본질은 같음)

• HSL: hsl(hue, saturation, lightness)← 색, 채도, 밝기를 값으로 넣어주는 형식. 색은 색깔 종류로 0(빨강)에서 360 사이, 채도는 색의 강도로 퍼센티지 값. 밝기도 퍼센티지.

  (출처 : https://en.wikipedia.org/wiki/HSL_and_HSV)

• HSLA: rgb와 rgba와 마찬가지로, 투명도를 나타내는 alpha값이 추가된다.
  
  

⬇️ 색 사용 예시 :

<h1 style="background-color:Tomato;">This is tomato color</h1>
<p style="color:DarkOliveGreen; font-size:150%">Dark Olive Green is good</p>

<h2 style="border:5px solid #0A400C; background-color:#819067;
text-align:center;">
<br>#819067<br><br>
</h2>

---

HTML text formatting (글자 꾸미기) :

• HTML은 글.꾸(글자꾸미기)를 위한 여러 'formatting elements'가 존재한다. (style과 달리 속성으로 설정하는게 아니라, 따로 요소 안에 꾸밀 텍스트를 넣어주는 식으로 사용해야 한다.)

• 종류 :
  - <b> : bold text, 볼드체
  - <strong> : important text, 중요한 글(주로 볼드체랑 같음)
  - <i> : italic text, 이탤릭체
  - <em> : emphasized text, 강조되는 글(주로 이탤릭체랑 같음)
  - <mark> : 글씨에 형광펜 쳐줌
  - <small> : 글씨 작게 함
  - <del> : 글자에 취소선
  - <ins> : 삽입된inserted 글, 밑줄
  - <sub> : subscript text (글을 밑으로 내림 - 예시에서 확인)
  - <sup> : superscript text (글을 위로 올림 - 예시에서 확인)
  
  

• 사용 예시 :

  <h1><em>emphasis</em> is similar to <I>italics</I></h1>
  이건 중요하니까 <mark>밑줄쳐</mark> <br>
  근데 이건 안중요해서 <small>작게쓰자</small>
  <br> <del>취소선</del>
  <br> <ins>밑줄</ins>
  <br> 섭스크립트<sub>subscript</sub>
  <br> 수퍼스크립트<sup>superscript</sup> 

  

---

HTML 인용 요소들 :

• <blockquote> : 통으로 한 문단을 인용한다. 보통 인용하는 문단을 들여쓰기 하는 식으로 표시됨. 출처를 표시할 수 있는 cite 속성이 있는데, 스크린리더(청각 지원) 기능에서 주로 사용되고 따로 가시적으로 드러나지는 않는다.

  <p>책 블로그 홍보합니다:</p>
  <blockquote
  cite="[https://blog.naver.com/xersxe_y/223936326577](https://blog.naver.com/xersxe_y/223936326577)">
  고통과 문제상황 자체를 들여다보고 그것의 속절없음을 직시하며 마음의 아픔을 내어주는 것이 바로 공감이라고 생각한다.
  </blockquote>

  

• <q> : 짧은 한 문장을 문단 내에서 인용한다. 보통 따옴표로 인용구를 둘러싸는 형식으로 표시된다.

• <cite> : 작품의 제목을 나타내는 요소로 보통 이탤릭체로 안의 텍스트를 표시함.

  <p>
  <cite>아프다는 것에 관하여 - 앓기, 읽기, 쓰기, 살기</cite>
  의 저자는 자신의 책에 대해 
  <q>이 책은 병condition이 삶에서 특정한 조건/상황/한계condition가 되었을 때 그 안에서 살아가며 배우고 생각한 것을 적은 책이다.
  </q>라고 이야기한다.
  </p>

  
  

• <abbr> : 긴 용어의 축약(abbreviation)을 표시해주는 요소로, title 속성에 원문을 작성하면 웹페이지에서 요소에 마우스를 갖다대면 원문이 표시되게 할 수 있다.

• <bdo> : 안의 텍스트 방향을 바꿀 수 있다. dir=”rtl” 속성과 함께 하면 좌→우 방향에서 뒤집어 우→좌 방향으로 입력되게 할 수 있다.

  <p>
  밴드 커버 곡으로 좋다고 생각하는 노래 중 하나는 아이들의 
  <abbr title="나는 아픈 건 딱 질색이니까">아딱질</abbr>
  이다. 제목을 반대로 하면 <bdo dir="rtl">나는 아픈 건 딱 질색이니까</bdo>이다.
  </p>

  
  

• <address> : 이메일 주소, 실제 장소 주소, 휴대폰 번호, sns 아이디 등의 연락처 정보를 표시하는 요소.

  요소 앞뒤로는 자동적으로 줄바꿈이 추가된다.

  <address>
  허서연 작성 <br>
  Take a look at my project: <br>
  https://github.com/h-seo-n/Scream-Jar <br>
  </address>

  

---

HTML 주석 (Comment) :

• 형식 : <!--how to write comments-->
  시작에 느낌표가 있지만 끝에는 없음, 적고자 하는 내용을 <!-- --> 로 감싸주어야 함.
  → 코드 설명 혹은 주의할 점을 주석으로 적을 때, 혹은 작성한 HTML 코드를 숨길 때 이용한다.

  <p>Gonna hide some elements</p>
  <!--
  <h1>Like this oversized title</h1>
  -->
  <p>You can't see it <!--or this--> now.</p>

  

---

HTML CSS

• cascading - 위에서 아래로 내려온다는 뜻, 즉 부모 요소(parent element)에 적용한 스타일이 자식 요소(child element)까지 적용되므로 더 편하게 스타일링 가능.
• 이용 방식 :
  • Inline : HTML 요소 안의 style 속성 사용 (위에서 본 대로)
  • Internal : HTML 파일 상단의 <head> 태그 안에 <style> 요소를 넣어줌
    • 하나의 html 페이지 전체에 적용되는 스타일을 정의.
  • External: <link>요소를 사용하여 외부 CSS 파일을 연결해줌

• 예시 :

  <!DOCTYPE html>
  <html>
  
  <head>
  **<style>**
  body {text-align: center;}
  h1 {background-color: SeaGreen; color: PapayaWhip;} 
  p {background-color: #FAFAD2; color: #20B2AA;}
  **</style>**
  </head>
  
  <body>
  <h1>This is heading style</h1>
  <p>This is a paragraph</p>
  </body>
  </html>