📂 목차
📚 본문
CSS 는 HTML 문서를 이쁘게 보여주는 스타일시트 언어이다.
CSS 적용방법
인라인 스타일
html tag 자체에다가 다음과 같이 style 옵션을 통해 줄 수 있다.
<p style="color: red; font-size: 16px;">인라인 스타일</p>이렇게 되면 style 이 굉장히 긴 코드에서는 유지보수가 어렵고, 눈빠지게 태그들을 들여다 봐야 한다.
내부 스타일시트
아래와 같이 head 태그 내부에 style 태그를 넣어서 문서 전체에 영향을 주는 스타일시트 코드들을 넣을 수 있다.
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>이 방법도 나쁘진 않지만, html 파일에는 html 구조와 관련된 코드만 있어야 하기 때문에 맞지 않다.
외부 스타일 시트
<head>
<link rel="stylesheet" href="styles.css">
</head>가장 좋은 방법은 파일을 따로 빼내서 style 과 관련된 코드들만 모아놓는 것이다.
CSS 기본 문법
(선택자) {
속성: 값;
}정도로 생각하면 된다. 선택자 블럭 내부에는 다수의 (속성: 값) 들이 올 수 있다.
선택자
기본 선택자
*: 전체 선택(tag): html 태그를 직접 입력해 해당 태그에 대한 스타일 입히기 가능.(class): 특정 클래스를 가진 요소들에게 적용 가능#(id): id 선택자로 태그 내에 id 옵션을 토대로 id 를 가진 요소에 적용 가능
그룹/결합 선택자
A, B: 여러 선택자를 한 번에 지정A B: A 안에 있는 모든 B 선택자들만 선택(하위 모든 계층의 것들)A > B: 자식 선택자 A의 바로 아래 B 선택자만 선택(하위 A 태그 밑의 바로 밑 계층 위와 다른 점은 하위 모든 계층에 대한게 아니라는 것)A + B: 인접 형제 선택, A 바로 뒤의 BA ~ B: 일반 형제 선택, A 뒤에 오는 모든 형제 B
속성 선택자
여기서 속성은 html 태그 내의 key=value 의 key 에 해당하는걸 속성이라고 한다.
가상 선택자
:hover: 마우스 올렸을 때:active: 클릭 중일 때:focus: 포커스가 있을 때:first-child / :last:child: 의미 그대로:nth-child(n) / :nth-of-type(n): 의미 그대로:not(selector): 특정 선택자가 아닌 모든 선택자
가상 요소 선택자
::before: 요소 내용 앞에 삽입::after: 요소 내용 뒤에 삽입::first-line: 첫 줄만::first-letter: 첫 글자만
p#unique.highlight[data-type="example"]:first-child:nth-child(1):not(.skip)::before::after::first-line::first-letter {위처럼 모든 걸 다 쓴 표현이다.
At-Rule
@로 시작하는 문법들을 앳 룰이라고 부르며, css 에게 특별한 지시를 내리는 규칙이다.
@font-face
@font-face {
font-family: 'MyFont';
src: url('fonts/myfont.woff2') format('woff2');
}
body {
font-family: 'MyFont', sans-serif;
}위와 같이 폰트 경로를 길게 늘려뜨려서 매번 정의해주면 힘들다. 따라서 MyFont 라는 별칭을 써서 적용시킬 수 있다.
@import
@import url('reset.css');
@import url('theme.css') screen and (min-width: 768px);다른 CSS 파일을 불러올 수도 있다.
@media
@media (max-width: 768px) {
body {
background-color: lightgray;
}
}미디어 쿼리라고도 하며, 화면 크기나 장치 조건에 따라서 스타일을 적용하겠다는 의미다.
@keyframes
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
div {
animation: slide 2s linear infinite;
}CSS 로 애니메이션처럼 요소를 움직이는 느낌을 주게 할 수 있다.
@supports
@supports (display: grid) {
div {
display: grid;
}
}브라우저마다 css 속성 지원 여부가 다르다. 이 여부에 따라 해당 태그를 적용시키게 할 수 있다.
Vendor Prefix
Vendor Prefix 는 브라우저 별로 실험적으로 제공되는 CSS 속성을 쓸 때 붙이는 접두어이다.
/* 벤더 프리픽스 (구형 브라우저) */
.gradient-compatible {
background: -webkit-linear-gradient(left, red, blue);
background: -moz-linear-gradient(left, red, blue);
background: -o-linear-gradient(left, red, blue);
background: linear-gradient(to right, red, blue);
}css 표준화가 아직 완전히 끝나지 않았거나 브라우저마다 구현방식이 다르다거나 미래에 표준이 될 기능을 미리 쓸 수 있게 하기 위해 나왔다. 대표적인 prefix 로는 다음과 같이 있다.
-webkit-: 크롬, 사파리, iOS 사파리, 안드로이드-moz-: 파이어폭스 전용-ms-: 인터넷 익스플로러, 엣지 구버전-o-: 오페라 구버전
Position
css 속성에는 position 이 있는데, static, relative, absolute, fixed 가 있다.
static
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Position 예시</title>
<style>
body {
height: 2000px; /* 스크롤 테스트용 */
padding: 20px;
}
.box {
width: 150px;
height: 80px;
color: white;
padding: 10px;
margin-bottom: 20px;
}
.static {
position: static;
background-color: gray;
}
.relative {
position: relative;
top: 20px;
left: 20px;
background-color: blue;
}
.absolute-container {
position: relative; /* 기준점 */
height: 150px;
background-color: lightgray;
margin-bottom: 20px;
}
.absolute {
position: absolute;
top: 10px;
right: 10px;
background-color: red;
}
.fixed {
position: fixed;
top: 10px;
left: 10px;
background-color: green;
}
.sticky-container {
height: 300px;
background-color: #f2f2f2;
margin-top: 20px;
}
.sticky {
position: sticky;
top: 0;
background-color: orange;
padding: 10px;
}
</style>
</head>
<body>
<div class="box static">Static</div>
<div class="box relative">Relative (top:20px, left:20px)</div>
<div class="absolute-container">
Absolute Container
<div class="box absolute">Absolute</div>
</div>
<div class="box fixed">Fixed (뷰포트 기준)</div>
<div class="sticky-container">
<div class="box sticky">Sticky (scroll에 따라 고정)</div>
아래로 스크롤 해보세요.
</div>
<p>스크롤 테스트용 내용...</p>
</body>
</html>이건 직접 써보면서 배우는게 가장 빠르다.