-
CSS 적용하기Front-End/CSS 2024. 2. 22. 10:26728x90반응형
CSS
- Cascading Style Sheet의 약자.
- C가 Cascading의 약자인데, 상위 요소의 스타일 속성을 자손 요소들에게 상속시켜주는 모습이 마치 폭포수처럼 내려 가는 모습을 닮았기 때문이라고 한다.
다만 예외로 마진, 패딩, 보더 등의 박스모델 관련 속성은 상속되지 않는다.
물론 inherit 값을 줘서 강제로 상속시킬 순 있다.
적용
- HTML 요소(Element)에 CSS 스타일을 적용하기 위해 CSS 문법을 작성해향 함, CSS 문법을 작성하는 공간을 부여하기 위한 방법은 아래와 같다.
1. 스타일 태그 활용
HTML 문서에 있는 <head>의 자식이 되도록 style 태그를 만들어 해당 태그의 내부 내용에 CSS 문법을 작성하는 방법.
HTML 문서 내에 HTML 문법과 CSS 문법이 공존하게 됨, 원하는 코드를 찾기가 힘듬, 유지보수 어려움
2. 스타일 속성 활용
원하는 태그에 style 속성을 부여하여 CSS를 적용
반복되는 CSS 속성(Property)들에 대한 코드 재활용성이 떨어져 권장되지 않음
HTML 문서 내에 HTML 문법과 CSS 문법이 공존하게 됨, 원하는 코드를 찾기가 힘듬, 유지보수 어려움
3. 링크 태그를 활용한 CSS파일 분리
아래와 같이 <head> 태그의 자식이 되도록 <link> 태그를 작성하여, HTML 파일 외부에서 작성된 CSS 파일을 불러와 적용할 수 있다.<head> <link rel="stylesheet" href="[주소|경로]"> </head>
href : 불러올 CSS파일의 주소 및 경로
rel : 불러올 리소스의 형태. stylesheet는 이가 CSS파일임을 알림
<link> : 자동으로 닫는 태그인것 주의
HTML 문법이 작성된 HTML파일과 CSS문법이 작성된 CSS파일을 완전히 분리할 수 있어 개발 및 유지보수에 좋음색상
CSS에서 색상을 표현하는 주된 방법
1. 리터럴
리터럴 색상은 자주 사용하는 색을 이름으로 지정해놓은 방식. 빨강 red, 파랑 blue 등으로 지정해놓은 것들
2. RGB
RGB 색상은 rgb(r, g, b)함수를 통해 각 0부터 255까지의 적논청 인자의 값을 전달해 색상을 반환받는 방식.
숫자가 작을수록 어두움. rgb(0, 0, 0)은 검정, rgb(255, 255, 255)는 흰색
3. RGBA
RGBA 색상은 rgba(r, g, b, a)함수를 통해 색상을 표현하는 방식. 각 r, g, b는 rgb함수와 동일하나 a는 불투명도를 의미.
a는 0%(혹은 0.0)부터 100%(혹은 1.0)까지 지정가능, 0에 가까울수록 투명, 100에 가까울수록 불투명
4. HEX
#rrggbb혹은 #rrggbbaa 표현식을 통해 색상 지정, 각 rr, gg, bb값은 rgb함수의 인자 10진법 값을 16진법 값으로 표현한 것이다.
aa값 또한 rgba함수에서 사욯했던 알파값의 255에 대한 백분율의 10진법 값을 16진법으로 표현한 것이다.단위
- % : 비율 단위
- px : 픽셀 단위
- em : 요소 폰트 크기(Element Font Size)단위. 요소가 가지고 있는 폰트 크기(font-size) 속성 값을 1로 표현하는 단위.
- rem : 루트 요소 폰트 크기(Root Element Font Size)단위. 최상위 태그가 가지고 있는 폰트 크기(font-size) 속성 값을 1로 표현하는 단위.
- vw : 뷰포트 가로 크기(Viewport Width)에 대한 비율 단위. 100vW는 화면을 표시하고 있는 뷰포트(주로 브라우저나 모바일기기)의 가로 크기와 같다
- vh : 뷰포트 세로 크기(Viewport Height)에 대한 비율 단위. 100vh는 화면을 표시하고 있는 뷰포트(주로 브라우저나 모바일기기)의 세로 크기와 같다728x90반응형'Front-End > CSS' 카테고리의 다른 글
CSS 요소의 내부, 외부 여백 (0) 2024.02.22 CSS 요소의 위치 지정 (0) 2024.02.22 CSS 요소의 글꼴 지정 (0) 2024.02.22 CSS 요소의 크기 지정 (0) 2024.02.22 CSS 속성 부여 (0) 2024.02.22