[CSS][국비교육] Day 37

Ga02·2023년 2월 17일
CSSeclipse국비교육

국비교육

목록 보기
35/82

🔍 CSS, Cascading Style Sheets

마크업 언어(Marup Language)가 화면으로 표현되는 방법(스타일, 모양)을 기술하는 언어

  • HTML문서에 작성된 태그들이 화면에 보여질 모양을 지정
  • 부모태그(상위태그)에 스타일 시트를 적용하면 자식태그(하위태그)에도 해당 스타일이 적용됨 👉🏻 스타일 상속, Cascading

➰ CSS를 HTML 코드에 적용하는 방법 3가지

1. 인라인(inline) 방식
HTML태그의 style속성을 이용하여 스타일을 지정

  • 장점
    태그 코드를 보면서 보여질 스타일을 지정할 수 있음
  • 단점
    각각의 태그에 스타일을 적용해야하므로 관리가 힘듦

2. 임베디드 방식(embedded) 방식

  • <style>태그를 생성하고 그 안에 스타일을 작성
  • CSS선택자(CSS Selector)를 이용하여 스타일 적용할 HTML태그들을 선택
  • 장점
    선택자로 선택된 태그들을 한꺼번에 공통 스타일로 관리할 수 있음
  • 단점
    태그코드와 스타일코드가 따로 작성되어있어서 스타일 적용 결과 예측이 힘듦

3. 별도의 CSS 파일을 HTML파일에서 로드하는 방식

  • 스타일 시트 작성해둔 별도의 파일을 관리하는 방식
  • HTML파일에서 CSS파일을 로드하여 적용 👉🏻 @import, <link> 방식
  • CSS파일은 확장자를 주로 .css로 둠
  • 장점
    스타일을 부여하는 기능(목적)에 따라서 파일을 분리할 수 있음
    공통 스타일이 적용되는 범위를 파일로 조절
    main.css, board.css, login.css, common.css, shop.css, ...
  • 단점
    관리해야하는 파일이 많아짐

💡 기능으로 나누는 파일로드 방식, 그 안의 공통부분을 관리하는 임베디드 방식, 그 안에서 세분화하여 개별적으로 적용하는 인라인 방식

💡 HTML에서 사용되는 특수문자 키워드
& ; 두 기호 사이에 예약 키워드를 적용

" - &quot;	 
' - &apos;
< - &lt;
> - &gt;
& - &amp;
# - &num;
; - &semi;
^ - &Hat;
copyright - &copy;

💡 아스키코드를 이용한 특수기호 표현
& ; 두 기호 사이에 #으로 시작하는 ASCII CODE를 적음

" &#34;
! &#33;

❆ &#10054;

🔍 MIME 타입

Multipurpose Internet Mail Extension

  • 전송하는 문서(데이터)의 형식을 상대방에게 알리기 위해 사용되는 표현방식
  • 웹 서비스에서는 Content-Type 헤더값으로 사용되는 형식
    👉🏻 Content-Type은 상대방에게 전달하는 데이터의 형식을 표현
maintype/subtype
maintype/subtype; charset=문자셋

text.html	텍스트 기반의 HTML문서
text/html; charset=UTF-8	텍스트 기반의 HTML문서, 한글 인코딩 UTF-8 적용

text/plain	단순 텍스트

image/jpge
image/png	이미지 파일, 표현(압축)방식에 따라 보조타입이 작성됨

application/json	JSON형태의 데이터

application/javascript
text/javascript		자바스크립트 형태의 데이터

application/octet-stream	바이너리(이진) 파일 -> 모든 파일에 대응하는 일반 형식

🔍 CSS 색상 단위

➰ 색상 이름, Color Name

black, white, red, blue, green, gray, tomato, ...

➰ RGB

Red, Green, Blue 색상의 조합을 이용하여 색상을 표현

  • R, G, B 해당하는 색상의 값을 각각 0~255 또는 0%~100%로 설정
  • rgb(R, G, B) 형식으로 표현
    ex) rgb(255, 0, 0) ➡ RED / rgb(0%, 0%, 100%) ➡ BLUE

➰ RGBA

RGB 표현법 + Alpha(투명도)

  • 투명도(Alpha)값은 0.0(투명)~1.0(불투명) 수치로 표현
  • rgb(R, G, B, A) 형식으로 표현됨
    ex) rgb(0, 255, 255, 0.5) ➡ 반투명 CYAN

➰ 16진수 표현법, Hexademical, HEX

RGB에 해당하는 각 수치(0~255)를 16진수(0X00~0XFF)로 변환하여 한번에 표현하는 방법

  • 맨 뒤에 2자리 16진술 추가하여 Alpha(투명도)표현 가능 but, 잘 사용되진 않음
  • #RRGGBB 또는 #RGB 방식으로 표현 👉🏻 RR, GG, BB가 각각 같은 16진수로 구성되었을 때 한자리로 축약 가능
    ex) rgb(255, 0, 2255) ➡ #FF00FF(MAGENTA) / #779900 ➡ #790

➰ HSL

Hue(색상), Saturation(채도), Lightness(명도) 조합으로 색상을 표현

  • hsl(H, S, L)형식으로 적용
  • 색조, Hue : 0~360, 색 각도
    0 또는 360 ➡ RED / 120 ➡ GREEN / 230 ➡ BLUE
  • 채도, Saturation : 0% ~ 100~
    0% ➡ 무채색, 회색 빛 / 100% ➡ 유채색, 본연의 빛
  • 명도, Lightness : 0% ~ 100% 👉🏻 50%가 적당한 빛
    0% ➡ 어두운 빛, black / 100% ➡ 밝은 빛, white

➰ HSLA

HSL 표현법 + Alpha(투명도)

  • hsl(H, S, L, A) 방식으로 표현됨

🔍 웹 안전 색상, Web Safe Color

시스템의 환경에 상관없이 모두 표현 가능하도록 정해놓은 표준 색상

  • RGB기준으로 표현 가능한 색상의 조합은 16,777,216종류 👉🏻 각 0~255까지 256종류
  • RGB조합의 모든 색상을 웹에서 나타내도록 하기에는 현실적인 어려움이 있음 👉🏻 색상을 간소화하여 웹 표준 안전 색상을 정함
  • 0~255 수치 중 0x00, 0x33, 0x66, 0x99, 0xcc, 0xff만 사용하여 조합된 색상을 표현 👉🏻 RGB 조합 : 각 6씩 216종류
  • 16진수 두 자리를 한 자리로 간소화하여 0, 3, 6, 9, c, f로 사용 가능
    ex) #ccc / #f93 / #960

🔍 CSS 크기 단위

➰ 고정크기 단위

속성이 자신만의 일정한 크기를 유지하는 단위
부모요소의 크기에 영향받지 않고 일정한 크기를 유지

  • px, 픽셀 : 화소단위, 정확한 크기와 위치 등을 설정할 때 사용
  • in, 인치 : 미리 설정되어있는 화소 개수로 인치를 사용 👉🏻 보통 96px
  • pc, 파이카 : 1pc = 1/6in = 16px
  • pt, 포인트 : 1pt = 1/12pc = 1/72in
  • cm, 센티미터 : 2.54cm = 1in / 1cm = 37.8px
  • mm, 밀리미터 : 1/10cm

💡 현실 크기와는 다르며, 모니터 해상도에 따라 픽셀의 크기도 달라짐

➰ 가변(상대)크기 단위

부모요소의 크기에 비례한 상대적인 크기를 지정하는 단위
설정되는 CSS속성이 같을 때 상대적인 크기가 지정됨

  • %, 퍼센트 : 부모요소의 속성에 지정된 크기에 대한 비율로 지정됨
  • em, 이엠, Element : 부모요소의 속성에 지정된 크기에 배율로 지정됨
    • 💡글자와 관련된 상대 크기를 지정할 때 em단위를 많이 사용
      ex) 1em = 100% / 1.5em = 150% / 2em = 200%
  • rem, 루트 이엠, Root Element : 최상위 부모요소<HTML>의 크기에 대한 배율로 지정
  • ex, 이엑스, Element X-Height : 소문자 'x'의 높이에 대한 배율로 지정 👉🏻 거의 사용x

➰ CSS스타일의 기본 속성값

  • initial : 기본 설정값으로 적용하기 👉🏻 스타일의 초기값으로 설정
    ✔ 직접 initial 설정값을 적용하지 않는 것이 좋음
  • inherit : 부모의 설정값을 상속받아 적용

🔍 태그의 id, class 속성

두 속성 모두 Global Attribute(공용 속성) 👉🏻 모든 태그들이 사용할 수 있는 속성

➰ id 속성

HTML문서에서 요소들을 서로 구분하기 위해 사용하는 속성 👉🏻 문서 내에서 고유한 값으로 부여해야 함

  • CSS를 적용할 때 id 속성값을 활용할 수 있음
  • Javascript를 적용할 때 특정 HTML태그를 지정하여 반영할 수 있음 ➡ 중복값을 가진 id가 있으면 1개에만 코드를 반영
  • # 기호와 함께 사용

➰ class 속성

같은 class 속성값을 부여한 태그들끼리 같은 그룹으로 편성

  • CSS스타일, Javascript코드를 적용할 때 여러 태그에 공통적으로 반영할 수 있음
  • . 기호와 함께 사용
  • 클래스 속성값을 여러개 부여할 수 있음 👉🏻 각각의 값을 띄어쓰기로 구분하여 하나의 문자열로 작성
<p class="item red menu">테스트</p>
➡ .item / .red / .menu 세 클래스값 모두에 적용됨
profile
Ga02
IT꿈나무 댓츠미
이전 포스트

[HTML][국비교육] Day 36

다음 포스트

[CSS][국비교육] Day 38

0개의 댓글