TIL

Day55

jackpods 2023. 3. 31. 15:33

1.<address>

HTML <address> 요소는 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타냅니다.

<p>Contact the author of this page:</p>

<address>
  <a href="mailto:jim@rock.com">jim@rock.com</a><br>
  <a href="tel:+13115552368">(311) 555-2368</a>
</address>

<address> 요소의 콘텐츠가 제공하는 연락처 정보는 현재 맥락에 적절한 아무 형태나 취할 수 있으며, 물리적 주소, URL, 이메일 주소, 전화번호, SNS 식별자, 좌표 등 어떠한 정보라도 포함할 수 있습니다. 반드시 포함해야 하는 정보는 연락처가 가리키는 개인, 조직, 단체의 이름입니다.

<address>는 다양한 맥락에서 사용할 수 있습니다. 사업체 연락 방법을 페이지 헤더에 배치할 때도 쓸 수 있고, <article> 내부에 배치해서 글의 작성자를 나타낼 수도 있습니다.

 

2.<dt>

HTML <dt> 요소는 설명 혹은 정의 리스트에서 용어를 나타냅니다. <dl> 요소 안에 위치해야 합니다. 보통 <dd> 요소가 뒤따르지만, 여러 개의 <dt> 요소를 연속해 배치하면 바로 다음 <dd> 요소로 한꺼번에 서술할 수 있습니다.

뒤따르는 <dd> 요소가 <dt>로 지정한 용어의 정의와 기타 관련 글을 제공합니다

 

3. button 타입

<button class="favorite styled"
        type="button">
    Add to favorites
</button> 

button 타입을 밝혀준다.

 

4.DOM트리 구조

https://aboneu.tistory.com/460

 

[HTML/CSS/JS] #1. HTML 기본 구조 및 DOM 트리 구조

HTML 이란? HTML (Hypertext Markup Language,하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언

aboneu.tistory.com

HTML 문서는 전체가 html 요소를 기준점(루트)으로 하는 계층 구조로 되어 있습니다.
이러한 구조를 '트리 구조(나무 구조)'라고 합니다.

5.의사 클래스

CSS :root 의사 클래스는 문서 트리의 루트 요소를 선택합니다 HTML의 루트 요소는 <html> 요소이므로, :root의 명시도가 더 높다는 점을 제외하면 html 선택자와 똑같습니다.

 

명시도란 브라우저가 어느 요소와 가장 연관된 속성을 찾는 수단으로, 이렇게 찾은 속성이 해당 요소에 적용됩니다. 명시도는 여러 종류의 CSS 선택자로 구성된 일치 규칙에 기반합니다.

 

CSS 참고서 - CSS: Cascading Style Sheets | MDN

CSS 참고서를 이용해 알파벳 순서로 정리한 모든 표준 CSS 속성, 의사 클래스, 의사 요소, CSS 자료형과 @규칙을 찾아보세요. 또한 유형별로 정리한 CSS 선택자와 주요 CSS 개념도 찾아볼 수 있습니다.

developer.mozilla.org

 

6.letter-spacing

letter-spacing CSS 속성은 글자 사이의 간격을 조절합니다.

 font-weight

normal

보통 폰트 가중치. 400 과 같음.

bold

굵은 폰트 가중치. 700 과 같음.

lighter

(가능한 폰트 가중치 중) 부모 요소(element) 보다 얇은 폰트 가중치.

bolder

(가능한 폰트 가중치 중) 부모 요소 보다 굵은 폰트 가중치.

100, 200, 300, 400, 500, 600, 700, 800, 900

normal 과 bold 이외를 제공하는 폰트를 위한 숫자형 폰트 가중치.

 

7. text-transform

text-transform은 대문자로 또는 소문자로 바꾸는 속성입니다.

  • 기본값 : none
  • 상속 : Yes
  • 버전 : CSS Level 1

한글에서는 의미가 없는 속성입니다.

문법

text-transform: none | capitalize | uppercase | lowercase | initial | inherit
  • none : 입력된 그대로 출력합니다.
  • capitalize : 단어의 첫번째 글자를 대문자로 바꿉니다.
  • uppercase : 모든 글자를 대문자로 바꿉니다.
  • lowercase : 모든 글자를 소문자로 바꿉니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.
 

vscode를 열고  Command(Ctrl) + Shift + p 를 단축키를 누르고