CSS 파일 분리
이전에 다루었던 CSS 기초 문법 정리에서 태그 안에 css를 적용하는 방법 말고, 좀 더 편하게 css를 사용하는 방법이 존재한다고 했었죠. CSS 속성은 하나하나 태그에 넣기보다는 CSS파일을 따로 만들어 규칙을 정해 놓고 사용하는 걸 권장합니다.
.css 파일을 분리하기 위해 먼저 html 파일의 head 부분에 다음과 같은 코드를 추가해 줍니다.
<link rel ="stylesheet" href="style.css">
이렇게 하면 우리는 html 태그들을 직접 조작하지 않고, 동일 디렉터리 안의 .css 파일을 통해 페이지의 세부적인 부분들을 더 쉽고 직관적으로 조작할 수 있게 됩니다.
여기서 link는 우리가 잘 알듯이 외부 리소스를 문서에 연결할 때 사용되는 태그입니다. rel="stylesheet"은 연결된 리소스가 스타일 시트임을 의미합니다. 즉 이 파일은 이제 html문서의 스타일을 정의하는 데 사용될 것입니다. href="style.css"를 통해 연결되는 외부 리소스가 style.css임을 명시해 주면, 이제 우리는 style.css를 맛있게 사용할 준비를 마친 겁니다.
CSS 선택자
선택자는 CSS규칙에서 요소를 선택하는 데 사용하는 부분입니다. 다음과 같은 구조를 가집니다:
선택자 {
속성: 속성값;
속성: 속성값;
}
선택자의 자리에는 h1, div, p와 같이 html의 태그를 넣을 수 있고, 해당 태그의 모든 요소들에 속성을 활용한 스타일을 적용호합니다. 예를 들어 모든 h3태그의 글자 크기를 24px로 하려면 아래와 같이 씁니다.
h3 {
font-size: 24px;
}
아이디(id)
html 태그 한 개의 속성을 바꾸기 위해서 사용합니다. 한 페이지 안에서 중복으로 사용할 수 없으며, #아이디_이름과 같은 문법으로 씁니다. 아래 예시는 아이디 이름이 code 인 태그에 글자색을 넣는 과정입니다.
<!--html파일-->
<h3>VScode</h3>
<h3 id="code">blue thing</h3>
<h3>can create everything</h3>
/*CSS파일*/
#code {
color: #79c0ff;
}
클래스(class)
아이디는 여러 개의 요소에 중복해서 쓸 수 없기 때문에 클래스를 사용합니다. 맨 앞에 마침표를 붙여서. 클래스_이름과 같은 문법으로 씁니다. 예를 들어 클래스 이름이 place인 모든 태그에 글자 크기와 굵기를 넣으려면 아래와 같이 씁니다.
<!--html 파일-->
<h3 class="place">우도</h3>
<h3 class="place" id="hallasan">한라산 국립공원</h3>
<h3 class="place">성산 일출봉</h3>
<h3 class="place">군산 오름</h3>
/*css 파일*/
.place {
font-size: 16px;
font-weight: 400;
}
색상 단위
노란색을 나타내는 2가지 방법이 있습니다. 하나는 색상 코드, 하나는 RGB값인데요. 사용법은 아래와 같습니다.
/*색상코드*/
#FFFF00
/*RGB*/
rgb(255, 255, 0)
/*RGB를 사용할 때는 RGBA와 같이 알파값을 추가하여 색상의 불투명도를 조절할 수 있습니다.
알파는 0 ~ 1 사이의 소수 값을 가지며, 1에 가까울수록 불투명해지고 0에 가까울수록 투명해집니다.*/
rgba(255, 255, 0, 0.5)
크기 단위
지금까지 우리는 픽셀로 크기를 조절했었죠? 픽셀은 절대적인 단위이며, 화면을 표시하는 기준이 되는 크기입니다.
그런 픽셀 말고도 크기를 조절하는 상대적인 단위들이 존재합니다.
퍼센트%
부모 태그의 크기에 상대적으로 지정할 때 사용하는 단위입니다. 예를 들어 부모 태그인 height의 절반 값을 쓰고 싶다면, heoght: 50%처럼 쓸 수 있습니다.
<div id="parent">
저는 높이가 320px입니다.
<div id="child">
저는 높이가 160px이에요!
</div>
</div>
#parent {
background-color: #A655ED;
height: 320px;
}
#child {
background-color: #6942D6;
height: 50%;
}
em
em은 전통적으로 인쇄술에서 대문자 M의 크기를 나타내는 단위로 사용되어 왔습니다. CSS에서 em은 부모 태그 font-size의 크기입니다. 부모 태그의 글자 크기의 2배를 하고 싶다면, 2em처럼 사용하면 됩니다. 아래 예시를 보면 이해가 잘 될 겁니다
<div id="parent">
저는 16px입니다.
<div id="child">
저는 64px이에요!
</div>
</div>
#parent {
font-size: 16px;
}
#child {
font-size: 4em;
}
rem
rem은 root em이라는 의미의 단위입니다. rem은 부모 태그의 크기가 아닌, html 태그의 font-size 크기를 조작합니다. html을 제외한 부모 태그의 영향을 받지 않습니다.
<html>
<body>
저는 18px 입니다.
<div id="other">
저는 32px이에요!
</div>
</body>
</html>html {
font-size: 16px;
}
body {
font-size: 18px;
}
#other {
font-size: 2rem;
}'Development > CSS' 카테고리의 다른 글
| CSS 기초 문법 정리 (0) | 2024.03.04 |
|---|
댓글