/* The General Rule */
selector {
property: value;
another property: value;
}
Css 에서의 주석처리는 아래와 같이 작성한다.
/* 이것은 주석입니다 */
헤더에 link
로 css 파일을 연결한다.
<head>
<title>About Me</title>
<link rel="stylesheet" type="text/css" href="app.css">
</head>
# + String of 6 hexadecimal numbers(from 0-F)
ex) #ff0452
3 channels: Red, Green and Blue.
Each ranges from 0 - 255
rgb(0,0,0)
alpha(투명도 transparency) channel. Ranges from 0.0 - 1.0
reba(11, 99, 150, .4);
h1 {
color: #ff00ff;
border-color: purple;
border-width: 5px;
border-style: solid;
}
border를 넣기 위해서는 color, width, style 세가지가 모두 작성되어야 하는데, 아래와 같이 간단하게 작성할 수 있다.
h1 {
border: 5px solid purple;
}
화면의 배경에는 컬러값 대신에 사진을 넣을 수도 있다. 기본적으로 타일 형식으로 배경이 적용되는데, 아래와 같이 작성하면 화면에 딱 맞게 사진이 조정된다.
body {
background: url(https://이미지주소.jpg);
background-repeat: no-repeat;
background-size: cover;
}
Selector의 종류
li { }
.hello { }
#name { }
* { }
li a { }
/* li 안의 Element a */
li .hello { }
/* li 안의 Class hello */
h4 + ul { }
/* h4에 붙어있는 ul */
a[href="http://www.google.com"] { }
input[type="text"] { }
ul:nth-of-type(3) { }
<!-- html -->
<ul>
<li class="highlight">
<input type="checkbox" checked>
Walk Tori
</li>
<li class="highlight">
<input type="checkbox">
Yoga
</li>
<li id="special">
<input type="checkbox">
Finish CSS videos
</li>
</ul>
/* CSS */
li {
border: 2px solid red;
}
#special {
color: yellow;
background-color: black;
}
.highlight {
background: pink;
text-decoration: line-through;
}
em
과 rem
은 CSS에서 상대적인 크기를 정하는 단위이다. em
은 상위요소 크기의 몇 배인지 크기를 정한다. 예를 들어,
font-size: 3.5em;
위 코드는 폰트 사이즈를 상위 요소 크기의 3.5배로 하겠다는 것을 의미한다.
rem
은 문서의 최상위 요소인 html 요소의 몇 배 크기로 설정할지를 의미한다. 참고로 html 요소 크기의 기본값은 16px이다.
p.date {
font-weight: 400;
color: #3498db;
text-transform: uppercase;
letter-spacing: 0.5rem;
}
위코드는 자간을 html 요소의 0.5배로 설정한다는 것을 의미한다.