CSS
Cascading Style Sheets
스타일, 레이아웃을 통해 문서(HTML)를 표시하는 방법을 지정하는 언어
CSS 구문
- 용어정리
h1(선택자) {
color(속성): blue(값);
font-size: 15px; (선언)
}- CSS 구문은 선택자로 시작함
- 선택자를 통해 스타일을 지정할 HTML 요소를 선택
- 중괄호 안에는
속성 : 값, 하나의 쌍으로 이루어진 선언을 작성 - 각 선언은 선택한 요소의 속성, 속성에 부여할 값으로 구성된다.
- 속성(Property) : 어떤 스타일 기능을 변경할지 결정
- 값(Value) : 어떻게 스타일 기능을 변경할지 결정
CSS 정의 방법
- 다음과 같이 3가지 방법이 있다.
- 인라인
- 내부 참조
- 외부 참조 - 분리된 CSS 파일
CSS 정의 방법 - inline
- 해당 태그에 직접 style 속성을 활용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<h1 style="color: blue; font-size: 100px;">Hello</h1>
</body>
</html>CSS 정의 방법 - 내부 참조 (embedding)
- 임베딩 방식
- head 태그 내의
<style>에 지정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
h1 {
color: blue;
font-size: 100px;
}
</style>
</head>
<body>
<h1>Hello</h1>
</body>
</html>CSS 정의 방법 - 외부 참조 (link file)
- 외부 CSS 파일을
<head>내<link>를 통해 불러오기 - 여러 html 파일이 동일한 css 를 공유한다고 할 때 외부 참조를 사용하면 유용함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>Hello</h1>
</body>
</html>h1 {
color: blue;
font-size: 20px;
}CSS 속성(property)
- 모두 외워야 하나?
- 사용 빈도가 높은 것들 위주로 외우는 것이 좋다.
- 그 외의 것들은 필요할 때 검색을 통해 찾아서 쓰는 것이 효율적
CSS selector
선택자 (Selector)
- 기본 선택자
- 전체 선택자, 요소 선택자
- 클래스 선택자, 아이디 선택자, 속성 선택자
- 결합자 (Combinators)
- 자손 결합자, 자식 결합자
- 일반 형제 결합자, 인접 형제 결합자
CSS 선택자 정리
- 요소 선택자
- HTML 태그를 직접 선택
/* 요소 선택자 */
h2 {
color: orange;
}
h3, h4 {
color: red;
font-size: 20px;
}- 클래스(class) 선택자
- 마침표(.) 문자로 시작하며, 해당 클래스가 적용된 모든 항목을 선택
/* 클래스 선택자 */
.green {
color: green;
}- 아이디(id) 선택자
#문자로 시작하며, 해당 아이디가 적용된 모든 항목을 선택- 일반적으로 하나의 문서에 1번만 사용
- 동일한 id값을 여러번 사용해도 동작은 하지만, 단일 id를 사용하는 것을 권장
/* id 선택자 */
#purple {
color: purple;
}CSS 적용 우선순위 (cascading order)
- CSS 우선 순위를 아래와 같이 그룹을 지어볼 수 있다
중요도(Importance)
- !importance
- 사실상 사용하지 않는 것을 권장
우선순위(Specificity)
- 인라인 > id 선택자 > class 선택자 > 요소 선택자
- 사실상 id도 많이 활용 안함. 주로 class 로 style을 입힌다.
소스 순서
CSS 상속
- CSS는 상속을 통해 부모 요소의 속성을 자식에게 상속한다.
- 속성(property) 중에는 상속이 되는 것과 되지 않는 것들이 있다.
- 상속 되는 것 예시
- Text 관련 요소 (font, color, text-align), opacity, visibility 등
- 상속이 되지 않는 것 예시
- Box model 관련 요소 (width, height, margin, padding, border, box-sizing, display)
- position 관련 요소 (position, top/right/bottom/left, z-index)
<head>
<style>
p {
/* 상속됨 */
color: red;
/* 상속 안됨 */
border: 1px solid black;
}
span {
border: 1px solid blue;
}
</style>
</head>
<body>
<p>안녕하세요 <span>김민수</spans> 입니다.</p>
</body>CSS 단위
크기 단위
- px (픽셀)
- 모니터 해상도의 한 화소인 '픽셀'을 기준
- 픽셀의 크기는 변하지 않기 때문에 고정적인 단위
- %
- 백분율 단위
- 가변적인 레이아웃에서 자주 사용
- em
- 바로 위, 부모 요소에 대한 상속의 영향을 받음
- 배수 단위의 상대적인 크기를 가진다.
- 상대적인 위치를 기반으로 크기가 결정되기 때문에 문서의 길이가 길어지면 복잡해짐
- rem
- 바로 위, 부모 요소에 대한 상속의 영향을 받지 않음
- 최상위 요소(html)의 사이즈를 기준으로 배수 단위를 가짐
- 명확한 기준점이 있기 때문에 문서가 길어져도 문제가 없음
- viewport
- 웹 페이지를 방문한 유저에게 바로 보이게 되는 웹 컨텐츠의 영역
- 주로 스마트폰, 태블릿 디바이스의 화면을 일컫음
- 글자 그대로 디바이스의 viewport를 기준으로 상대적인 사이즈가 결정됨
vw,vh,vmin,vmax
<!DOCTYPE html>
<html>
<head>
<style>
.em {
font-size: 1.5em;
}
.rem {
font-size: 1.5rem;
}
</style>
</head>
<body>
<ul class="em">
test em
<li class="em">test 1.5em</li>
<li class="rem">test rem</li>
</ul>
</body>
</html>색상 단위
- 색상 키워드
- 대소문자를 구분하지 않음
- red, blue, black 과 같은 특정 색을 직접 글자로 나타냄
- RGB 색상
- 16진수 표기법 혹은 함수형 표기법을 사용해서 특정 색을 표현하는 방식
rgba()와 같은 함수형 표기법을 사용하여 명도도 표기할 수 있음
- HSL 색상
- 색상, 채도, 명도를 통해 특정 색을 표현하는 방식
p { color: black; }
p { color: #000; }
p { color: #000000; }
p { color: rgb(0, 0, 0); }
p { color: rgba(0, 0, 0, 0.5); }
p { color: hsla(120, 100%, 0); }Selector 심화
결합자(Combinators)
- 자손 결합자
- selectorA 하위의 모든 selectorB 요소
div span {
color: red;
}- 자식 결합자
- selectorA 바로 아래의 selectorB 요소
dib > span {
color: red;
}- 일반 형제 결합자
- selectorA의 형제 요소 중 뒤에 위치하는 모든 selectorB 요소를 모두 선택
p ~ span {
color: red;
}- 인접 형제 결합자
- selectorA의 형제 요소 중 바로 뒤에 위치하는 selectorB 요소를 선택
p + span {
color: red;
}'Web' 카테고리의 다른 글
| CSS Layout (0) | 2021.08.30 |
|---|---|
| Bootstrap & Grid box (0) | 2021.08.30 |
| CSS Display & Position (0) | 2021.08.30 |
| CSS box model (0) | 2021.08.30 |
| html 기본 (0) | 2021.08.30 |
댓글