[CSS] CSS 기초

Front-End/HTML, CSS

[CSS] CSS 기초

유자맛바나나 2021. 10. 12. 03:56

정의

종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(style sheet language)로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. 레이아웃과 스타일을 정의할 때의 자유도가 높다. 마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다.

출처: 위키피디아

웹사이트 Styling에 적용되는 세 가지

웹사이트에 적용되는 스타일링은 아래와 같이 세 가지가 있다. 이 때 스타일링은 Author style > User style > Browser style 순의 우선 순위로 적용된다. 즉, Author style이 있다면 Author style를, Author style가 없다면 User style을 적용하는 방식이다.

CSS의 첫 글자 Cascading은 연속, 폭포처럼 흐르는 등의 뜻을 갖고 있는데 아래와 같이 연속적으로 적용되는 것을 의미하는 것이다.

1. Author style

개발자가 작성하는 CSS 파일.

2. User style

웹사이트 유저가 사용하는 커스텀 스타일(예: 다크모드)

3. Browser style

브라우저에서 기본적으로 지정된 스타일. 크롬, 익스플로러 등 기본 폰트와 레이아웃 등이 다른 이유다.

[참고] !important

위의 세 가지 스타일링의 우선 순위를 끊을 수 있는 유일한 방법이다. 하지만 권장되지 않는 방법이며 흔히 Bad smell의 하나로 본다.

CSS 적용 하기

1. 내부 스타일 시트(Internal Style Sheet)

HTML 문서 내부에 CSS를 직접 작성하는 것. <head> 태그 안에 <style> 태그를 만들어 작성할 수 있다.

2. 외부 스타일 시트(External Style Sheet)

확장자가 .css인 별도의 파일을 만들어 CSS를 작성하는 것이다. HTML 파일과 외부 CSS 파일을 연결시켜주기 위해 <head> 태그에 <link> 태그를 만들어 CSS 파일의 정보를 입력한다. 현업에서는 주로 외부 스타일 시트 방식을 사용한다.

2.1. <link>

*출처: TCP School

href: 링크될 외부 리소스(external resource)의 URL를 명시함(CSS 파일의 위치를 명시)
rel: 필수 속성으로, 현재 문서와 외부 리소스 사이의 연관 관계를 명시함. CSS 파일의 경우 stylesheet로 명시

예시)

3. 인라인 시트

HTML 태그의 속성으로 직접 작성하는 것을 말한다. HTML 태그 안에 style 키워드의 속성으로 작성할 수 있다.

예시)

CSS 기본 문법

선택자: 스타일링할 HTML 태그를 선택
예) p, a, ol, ul, ...
선언부: 스타일링할 내용(속성과 값)을 작성하는 영역
예) font-size:40px;

자주 사용하는 텍스트 속성

1. color

color 속성의 속성값으로 컬러 명, RGB, HEX 세 가지 단위가 사용된다.

1.1. 컬러 명

문법

선택자{color: 컬러명;}

color명은 말 그대로 color 이름을 입력하는 것이다.
예시) p{color: red;}

1.2. RGB

1.2.1. RGB

문법

선택자{color: rgb(R, G, B);} (단, RGB: 0~255)

RGB 값으로 색상값을 적용할 수 있다. 속성값 부분에 rgb(Red number, Green number, Blue number) 형태로 작성한다. RGB number는 0~255의 값으로 설정한다.
예시) p{color: rgb(255, 0, 0);}

1.2.2. RGBA

문법

선택자{color: rgba(R, G, B, A);} (단, RGB: 0~255, A: 0~1)

rgb 대신 a를 붙여 rgba로 작성할 수 있다. a는 alpha를 첫 글자를 의미하며 opacity(투명도)를 조절하는 값이다.
a 값은 0~1 사이의 값으로 설정하며 0에 가까울수록 투명해진다.
예시) p{color: rgba(255, 0, 0, 0.5);}

1.3. HEX(16진수)

문법

선택자{color: #RRGGBB;}

R, G, B 자리에 16진수 값을 넣어 적용하는 방식이다. 속성값 부분에 #RRGGBB 형태로 작성한다. R, G, B 각 문자에 16진수 값으로 설정한다. 16진수의 값은 0~f로 이뤄져 있다.
예시) p{color: #ff0000;}

2. font-size

font-size 속성의 크기 단위

2.1. px

px은 pixel의 약어로 해상도에서 1개의 점을 나타낸다. 웹에서 사용되는 가장 기본적인 크기 단위이다. 보통 '고정적인' 크기를 보여주고 싶을때 사용한다.

예시) p{font-size: 16px;} → <html> 태그 폰트 사이즈의 2배를 적용

2.2. rem

root em의 약어다. root는 <html> 태그를 의미하는데, <html> 태그의 font-size를 기준으로 몇 배수를 할 것인지를 의미한다. 웹 사이트마다 <html>에 적용한 기본 폰트 사이즈는 다를 수 있으며, 크롬의 기본 <html> 폰트 사이즈는 20px이다.

예시) p{font-size: 2rem;} → <html> 태그 폰트 사이즈의 2배를 적용

2.3. em

rem에서 root(<html>)을 제외한 태그로 <html> 태그 대신 부모 태그의 font-size를 기준으로 배수를 적용한다.

예시)

<p> 태그는 부모 태그 <div>의 font-size 값인 10px에 3배를 적용해 30px로 설정된다.

<body>
  <div style="font-size:10px;">
    <p style="font-size:3em;">Citron Banana</p>
  </div>
</body>

2.4. vw

vw는 viewport width의 약어로 화면의 가로 크기와 관련있는 단위다. 1vw는 화면 가로 크기의 1/100을 의미한다. 따라서 웹 브라우저 창의 가로(width) 크기를 줄이고, 늘릴 때마다 폰트 크기도 함께 변경된다.

예시) p{font-size: 2vw;}

2.5. vh

vw는 viewport height의 약어로 화면의 세로 크기와 관련있는 단위다. 기준이 가로→세로 인 것의 차이를 제외하고 vw와 모두 동일하다.

예시) p{font-size: 2vh;}

3. font-family

문법

선택자{font-family: 글꼴1, 글꼴2, 글꼴3, ..., 글꼴유형;}

font-family는 font의 글꼴을 지정할 때 사용한다. 적용하고 싶은 글꼴을 글꼴1, 2, 3, ... 와 같이 순차적으로 나열하는데 이는 글꼴1을 불러오지 못했을 때 글꼴2를, 글꼴2를 불러오지 못했을 때 글꼴3을 차례대로 불러오기 위함이다.
글꼴유형은 generic-family라고 부르기도 하며, 내가 지정한 글꼴 전부를 불러오지 못했을 때 불러올 '글꼴 유형'을 지정하는 것이다. 글꼴 유형에는 serif, sans-serif, cursive, fantasy, monospace가 있으며, 이 중 한 가지를 불러온다. font-family까지 적용해줘야 내가 지정한 폰트를 불러오지 못했을 때를 대비할 수 있다.
예시) p{font-family: 'Times New Roman', Times, serif;}

4. font-weight

문법

선택자{font-weight: 굵기 단위;}

font-weight는 텍스트의 굵기를 변경할 때 사용하는 속성이다.
100~900까지의 숫자 값 또는 normal, bold, bolder, lighter 와 같은 키워드를 사용할 수 있다. 일반적으로 웹에서는 키워드를 이용한다.
font-weight는 해당 폰트에서 지원해야 사용가능하다.

5. line-height

문법

선택자{line-height: 크기 단위 or 배수;}

line-height는 글자의 줄 간격을 지정하는 속성이며, 속성값으로 px과 배수를 사용할 수 있다.
크기 단위: px과 같이 크기 단위를 사용할 수 있다. 주의할 점은 font-size보다 크게 해야 각 줄의 폰트가 겹치지 않는다는 것이다.
배수: 실수값을 사용하며, font-size의 배수로 적용된다. 크기 단위를 적용할 경우 font-size보다 작아질 수 있는 상황이 존재하므로 일반적으로 배수를 사용한다. 1 이상의 값을 사용하면 적어도 font-size보다 크거나 같기 때문이다.
예시) p{font-size: 20px; line-height: 1.5;} → 줄 간격은 font-size: 20px의 1.5배인 30px이 적용된다.

저작자표시

'Front-End > HTML, CSS' 카테고리의 다른 글

[CSS] Flexbox 개념과 적용 (0)	2021.12.03
[CSS] CSS 기초 3. Layout(display, position) (0)	2021.12.02
[CSS] CSS 기초2. Selector (0)	2021.12.02
[HTML] 기초(2) Document and website structure (0)	2021.10.13
[HTML] HTML 기초 (0)	2021.10.11

현재글[CSS] CSS 기초

유자맛바나나의 Dev-log

[CSS] CSS 기초

정의