css | Notion

CSS 기본 문법
- CSS의 문법은 선택자(selector)와 선언부(declaratives)로 구성
- 선택자는 CSS를 적용하고자 하는 HTML 요소
- 선언부는 하나 이상의 선언들을 세미콜론(;)으로 구분하여 포함
CSS 선택자
- HTML 요소 선택자
  - 예시) <style> h2 { color: teal; text-decoration: underline; } </style>. … <h2>이 부분에 스타일을 적용합니다.</h2>
- 아이디(id) 선택자
  - 아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택 ( #id명 사용)
    - html파일 내에서 id값은 유일
    - 예시) <style> #heading { color: teal; text-decoration: line-through; } </style> ... <h2 id="heading">이 부분에 스타일을 적용합니다.</h2>
- 클래스(class) 선택자
  - 클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용
    - html파일 내에서 class는 복수의 tag에 적용가능
    - 한 태그내의 복수의 class를 적용 가능(띄어쓰기를 통해 적용)
      - 모듈식 class 중첩 적용
      - <p class="normal big-text">font style과 font size 중첩적용</p>
  - 예시) <style> .headings { color: lime; text-decoration: overline; } </style> ... <h2 class="headings">이 부분에 스타일을 적용합니다.</h2> <p>class 선택자를 이용하여 스타일을 적용할 HTML 요소들을 한 번에 선택할 수 있습니다. </p> <h3 class="headings">이 부분에도 같은 스타일을 적용합니다.</h3>
CSS 적용 방법 및 우선순위
- 1. 인라인 스타일(Inline style)
  - HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법
  - 해당 요소만 적용 <body> <h2 style="color:green; text-decoration:underline"> 인라인 스타일을 이용하여 스타일을 적용하였습니다. </h2> </body>
- 1. 내부 스타일 시트(Internal style sheet)
  - <head>태그에 <style>태그를 사용하여 CSS 스타일을 적용
  - 해당 HTML 문서에 스타일을 적용 <head> <style> body { background-color: lightyellow; } #heading { color: teal; text-decoration: line-through; } .headings { color: lime; text-decoration: overline; } </style> </head>
- 1. 외부 스타일 시트(External style sheet)
  - <head>태그에 <link>태그를 사용하여 외부 스타일 시트를 포함
  - expand_style.css 외부 파일 body { background-color: lightyellow; } p { color: red; text-decoration: underline; }
  - 사용예제 <head> <link rel="stylesheet" href="/examples/media/expand_style.css"> </head>
텍스트 속성
- color
  - text 컬러를 지정하는데 사용되는 속성
  - 참고)상위 태그에 명시된 속성보다 하위 태그에 명시된 속성이 우선
    - <body>태그에 명시된 color 속성값은 웹 페이지 내의 모든 텍스트 요소에 적용
    - 각 요소별로 따로 명시된 color 속성값이 있다면, 해당 속성값이 우선 적용
    - 예시) <head> <style> body { color: red; } p { color: maroon; } </style> </head> <body> <h1>color 속성을 이용한 텍스트의 색상 설정</h1> <p>우선 적용</p> </body>
- 텍스트 간격 설정
  - letter-spacing 속성은 텍스트 내에서 글자 사이의 간격을 설정
  - word-spacing 속성은 텍스트 내에서 단어 사이의 간격을 설정
  - line-height 속성은 텍스트의 줄 간격을 설정
  - 예시) h1 { letter-spacing: 2px; /* 글자 간격 / word-spacing: 5px; / 단어간 간격 / line-height: 1.6; / 라인 높이 설정 */ }
- font 속성
  - font-style
    - 텍스트의 스타일(기울기)을 지정하는 속성. 일반적으로 이 속성은 텍스트를 이탤릭체나 보통체로 표시하는 데 사용
    - ex) .italic { font-style: italic; }
  - fond-family
    - 텍스트에 사용할 글꼴(폰트)을 지정하는 속성
  - font-size 속성은 텍스트의 크기를 설정
    - 절대적 크기
      - 픽셀 단위(px)
    - 상대적 크기
      - 이미지, 패딩, 마진, 너비, 높이 등 다양한 CSS 속성에 적용할 수 있는 상대적 단위
      - 모바일화면 같은 경우엔 화면의 크기의 편차가 심해 상대적 크기 많이 사용
      - em
        
        em 단위는 부모 요소의 글꼴 크기에 상대적인 크기를 배수식으로 제공
        
        만약 부모 요소의 글꼴 크기가 20px이면, 2em은 40px
      - rem
        
        rem은 루트 요소(<html>)의 글꼴 크기에 대한 상대적 크기를 설정
        
        html의 기본 px은 16px정도
      - % 사용
        
        % 단위는 부모 요소의 글꼴 크기에 상대적인 크기를 배율형식으로 제공
      - vw, vh 사용
        
        vw (viewport width): 뷰포트 너비의 백분율로 크기를 지정
        
        vh (viewport height): 뷰포트 높이의 백분율로 크기를 지정
        
        또는 아래와 같이 javascript를 통해 직접 화면의 너비와 높이를 구해 사용 const width = window.innerWidth; const height = window.innerHeight;
- text-align
  - 텍스트의 수평 방향 정렬을 설정
  - 예시) <head> <style> h2 { text-align: left; } h3 { text-align: right; } h4 { text-align: center; } </style> </head> <body> <h2>텍스트의 왼쪽 정렬입니다.</h2> <h3>텍스트의 오른쪽 정렬입니다.</h3> <h4>텍스트의 가운데 정렬입니다.</h4> </body>
padding, margin, border
- Margin은 요소의 외부 여백을 정의
  - margin: auto를 통해 요소를 중앙정렬 시킬수 있음
- Border
  - 요소의 내부와 외부 사이의 테두리를 정의
- padding
  - 요소의 내부 여백을 설정하는 속성으로 요소의 내용(content)과 테두리(border) 사이의 공간을 지정
  - margin과 border가 없다면, padding은 요소의 내용(content)과 바깥쪽 HTML 요소와의 거리를 직접 정의
  - padding-top, padding-bottom, padding-left, padding-right 속성을 통해 상하좌우 정의
  - 패딩 값에는 픽셀(px), 백분율(%) 등을 사용
- width, height
  - content박스 크기 지정
테이블 속성
- border를 통해 테이블의 테두리(border)를 설정
  - html 모든 속성은 기본 설정으로 빈 테두리
  - 테이블에 border 설정시 <th>태그와 <td>태그도 각각 자신만의 테두리를 가지므로 2줄로 표현
  - 만약 style에서 table 태그의 border만을 지정시에는 테이블 테두리만 1줄로 표현
- border-collapse 속성값을 collapse로 설정
- text-align 속성을 통해 테이블 요소(th, td) 내부에서 텍스트의 수평 방향 정렬
외부 스타일 시트(External style sheet) - ex)부트스트랩
실습)