Css 란?
Css는 'cascading style sheets' 의 약자
더보기
< 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다.
문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다. >
- 네이버 지식백과 -
- Css는 웹 페이지에 "디자인"이라는 시각적 가치를 부여하기 위한 언어
- HTML문서의 레이아웃과 스타일을 정의
- W3C에서 표준안을 만들어 내고 있으며 1996년 Css1 이후 2.1를 거쳐 현재 Css3까지 보급
Css 연결하기
HTML에 Css 디자인 작업을 하는 방법은 External / Internal 두가지
(embed, inline 방법 등으로 나누기도 하는데 나는 이렇게 구분함)
1. External (외부파일 연결)
- <link>를 이용하여 연결 - 가장 권장되는 연결방법
글을 둘러보다 보면
더보기
<link rel="stylesheet" type="text/css" href="경로">
추가하라고 되어있는데 필수사항은 아님
- <style></style>안에 @import('url') 연결
두가지 방법 다 HTML의 <head>안에 사용
2. Internal (HTML문서 내에서 Css작업)
- <style></style> 태그 직접 사용
<head></head>안에 <style>태그를 선언해준 뒤 css시트에서 작업하는 방식과 동일하게 작성
상황에 따라서는 <body>안에 사용할 때도 있음
- inline 요소에 직접 사용
태그에 직접 코드를 정의하는 방식으로 Css 적용 우선순위가 가장 높으나,
코드 하나하나에 매번 반복적인 작업을 해야함으로 주로 쓰이는 방식은 아님
Css 서식
선택자 { 속성 : 값
속성 : 값
속성 : 값 }- selector (선택자) : 스타일을 적용하는 대상
- property (속성) : 스타일의 종류
- value (값) : 속성이 가지는 값
Ex)
- selector (선택자) : P
- property (속성) : width, height, border
- value (값) : 150px, 5px solid orange
'Css > 지식 정리' 카테고리의 다른 글
| [css 선택자] ::after, ::before 가상 선택자와 content 추가하여 태그에 border 만들기 (0) | 2022.05.30 |
|---|---|
| [css 변수 지정하기] css에서 root, var을 활용하여 변수값 지정 (0) | 2022.05.25 |
| [css 접근성] a요소 text 작성 / text-indent 적용 (0) | 2022.05.24 |
| [css 접근성] hover, active, focus 가상선택자 활용법 알아보기 (0) | 2022.05.23 |
| CSS 선택자와 사용법 알아보기 (0) | 2022.03.08 |