이 글은 코딩 자율학습 HTML+CSS+JS(저자 : 김기수)의 책 내용과 유튜브 영상을 개인적으로 정리하는 글입니다.
CSS의 특징
기본 스타일 시트
hn 태그는 단순히 태그만 사용했는데도 웹 브라우저에는 텍스트가 다양한 크기와 굵기로 표시됐다.
HTML 태그는 태그 자체에 꾸밈을 담당하는 역할이나 기능이 없다.
그렇지만 웹 브라우저 자체에 기본 스타일 시트가 내장되어 있기 때문에 위와 같은 모양으로 표현될 수 있는 것이다.
기본 스타일 시트
기본 스타일 시트란 글꼴이나 크기, 색상, 굵기, 문단 설정과 같은 스타일이 미리 정의된 파일 또는 문서 양식을 말한다.
기본 스타일 시트에 정의된 스타일 속성보다 사용자가 정의한 스타일 속성이 우선 적용된다.
적용 우선순위와 개별성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>적용 우선 순위와 개별성</title>
<style>
p{color:red;}
p{color:blue;}
p{color:orange;}
</style>
</head>
<body>
<p>specificity</p>
</body>
</html>
위와 같이 p 태그에 여러 스타일을 사용하고 있다면 개별성 규칙 점수가 모두 같기 때문에 가장 나중에 적용된 오렌지 색상이 적용된다.
같은 태그의 선택자가 여럿일 때도 한 속성만 적용되는 이유는 CSS가 단계적으로 적용되는 스타일을 뜻하는 언어이기 때문이다.
여기서 말하는 단계적 적용은 같은 태그에 여러 스타일이 적용되더라도 단계적으로 적용되어 결국 마지막에 영향을 주는 하나의 스타일만 적용된다는 뜻이다.
이때 어떤 스타일이 마지막에 영향을 주는지 CSS 개별성 규칙에 따라 결정된다.
개별성 규칙 점수사용된 선택자 종류를 파악해 점수를 계산하는 방식인데, 아래 그림처럼 선택자를 분류해서 개수를 세고 점수를 곱해 합을 구하면 된다. 추가적으로 !important라는 특별한 문법이 있다. 이 문법의 점수는 10,000점이다.
CSS의 선택자를 지정할 때 일일이 개별성 규칙 점수를 계산하는 건 현실적으로 매우 어렵다.
그래서 실무에서는 선택자를 최대한 자세하게 적을수록 점수가 더 높다고 생각하고 선택자를 지정한다.
<div id="main"> <div class="sub"> <p>lorem</p> </div> </div>위와 같은 HTML 태그 구조가 있다고 가정하면,
p 태그를 선택할 때 단순하게 p{}라고 지정하는 것 보다는 .sub p{}라고 지정하는 것이 점수가 더 커서 우선순위가 높다.
그리고 .sub p{}보다 #main .sub p{}가 훨씬 더 우선순위가 높다.
따라서 하나의 태그를 선택할 때는 부모 선택자부터 하위 선택자나 자식 선택자 조합으로 자세하게 적으면 우선순위가 높아지게 된다.
상속
또 다른 CSS 주요 특징으로 상속이 있다.
상속은 부모 요소에 적용된 스타일을 자식 요소가 그대로 물려받아 적용되는 현상을 말한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>상속(inherit)</title>
<style>
div{
color:red;
}
</style>
</head>
<body>
<div>
<p>inherit</p>
</div>
</body>
</html>
텍스트에 빨간색이 적용되는 것을 볼 수 있다.
텍스트를 직접 감싸는 p태그에 적용한 스타일이 아닌데도 텍스트에 스타일이 적용되는 이유는 상속되기 때문이다.
p 태그에는 color 속성이 없지만, p 태그의 부모인 div 태그는 color 속성이 있다.
이럴 때 자식인 p 태그는 부모인 div 태그의 스타일을 그대로 물려받는다.
이처럼 css 속성은 상속된다.
다만, 모든 속성이 전부 상속되지는 않는다.
단위
CSS 속성에는 다양한 단위의 값을 사용할 수 있는데, 단위는 절대 단위와 상대 단위로 나뉜다.
- 절대 단위 : 어떤 환경이라도 동일한 크기로 보이는 단위
- 상대 단위 : 부모 요소 또는 웹 브라우저의 창 크기에 따라 상대적으로 결정되는 단위
절대 단위
절대 단위는 px(pixel) 한 가지로, 모니터의 화면을 구성하는 사각형 1개의 크기를 의미한다.
CSS에서 사용할 수 있는 크기 단위 중 가장 기본이다.
웹 브라우저에서 다른 단위로 값을 지정하더라도 결국 px 단위로 환산되어 계산된다.
상대 단위
| 단위 | 설명 |
| % | 해당 속성의 상위 요소 속성값에 상대적인 크기를 가짐 |
| em | 부모 요소의 텍스트 크기에 상대적인 크기를 가짐 |
| rem | html 태그의 텍스트 크기에 상대적인 크기를 가짐 |
| vw | 뷰포트의 너비를 기준으로 상대적인 크기를 가짐 |
| vh | 뷰포트의 높이를 기준으로 상대적인 크기를 가짐 |
%
% 단위는 부모 요소의 속성값에 따라 상대적인 크기를 가진다.
그래서 어떤 속성을 사용했는지에 따라 기준이 다르게 잡힌다.
만약 다음과 같이 자식 요소의 font-size 속성값을 80%라고 지정했다면 자식 요소는 부모 요소 font-size 속성값의 80%에 해당하는 크기로 설정된다.
em
em 단위는 부모 요소의 텍스트 크기(font-size)를 기준으로 상대적인 크기를 가진다.
% 단위는 사용되는 속성에 따라 기준이 달라지지만, em 단위는 오로지 텍스트 크기를 기준으로 삼는다.
만약 값을 2em으로 지정했다면 자식 요소의 크기는 부모 요소의 font-size 속성값의 2배가 된다.
rem
rem 단위는 html 태그의 텍스트 크기에 대한 상대적인 값으로, 1 rem은 html 태그의 텍스트 크기의 1배이다.
현대적인 웹 브라우저는 모두 html 태그의 텍스트 크기가 16px이라서 1 rem은 16px과 같다.
vw
vw 단위는 뷰포트 너비를 기준으로 상대적인 크기를 가진다.
뷰포트는 간단히 말해 코드가 보이는 대상이라고 생각하면 된다.
따라서 웹이나 모바일에서는 웹 브라우저 창의 너비가 뷰포트 너비가 된다.
1vw는 뷰포트 너비의 1/100 크기를 의미한다.
vh
vh 단위는 뷰포트 높이를 기준으로 상대적인 크기를 말하며, 1vh는 뷰포트 높이의 1/100 크기를 의미한다.
색상 표기법
키워드 표기법
키워드 표기법은 색상의 영문명을 속성값으로 사용하는 방법이다.
css에서 사용할 수 있는 색상 키워드의 종류는 150여 개 이상이다.
RGB 색상 표기법
RFB 색상 표기법은 빨간색, 초록색, 파란색을 이용해 특정 색을 표현하는 방법이다.
여기에 추가로 색의 투명도를 의미하는 알파값을 사용할 수도 있다.
rgb나 rgba 형식은 RGB 값을 256개 숫자(0~255)로 표기한다.
알파 값은 0.1처럼 0부터 1 사이의 소수점으로 표기한다.
낮은 값일수록 투명화 정도가 더 높아진다.
이때 앞의 정수 부분 0은 생략할 수 있어서 .1로 표기해도 된다.
HEX 표기법
HEX 표기법은 red, green, blue에 해당하는 값을 각각 16진수로 변환해 00~ff로 나타내는 표기법이다.
16진수 표기법이라고도 하며, 실무에서 가장 많이 사용하는 색상 표기법이다.
HEX 표기법은 앞에 #을 붙이는 것이 특징이다.
00이 가장 낮은 값이고 ff가 가장 높은 값이어서 #ff0000은 빨간색, #00ff00은 초록색, #0000ff는 파란색을 의미한다.
그리고 R, G, B에 해당하는 16진수가 같다면 줄여서 표기할 수도 있다.
예를 들어 #ff0000은 #f00으로 표기할 수 있고, #335533은 #353으로 표기할 수 있다.
텍스트 속성으로 텍스트 꾸미기
font-family 속성
font-family 속성을 사용하면 글꼴을 지정할 수 있다.
속성값으로는 글꼴명을 적으면 되는데 쉼표로 구분하고 1개 이상의 글꼴을 나열해 지정한다.
이때, 한글로 된 글꼴이나 공백이 있는 글꼴명은 큰따옴표로 항상 감싸야한다.
바탕체 글꼴과 타임스 뉴 로먼 글꼴을 적용하고 싶다면 위와 같이 작성하면 된다.
이처럼 여러 글꼴을 쉼표로 구분해 나열하면 맨 앞에 작성한 글꼴부터 적용 가능 여부를 판단한다.
이러한 특징 때문에 font-family 속성으로 명시한 글꼴을 불러오지 못할 경우를 대비해 불러오려고 한 글꼴과 가장 유사한 형태의 글꼴 유형을 마지막에 항상 지정해야 한다.
가장 마지막에 오는 폰트를 글꼴 유형이라고 하며, 글꼴 유형은 글꼴의 개념이 아니라 글꼴의 형태를 의미한다.
따라서 다른 글꼴처럼 못 불러온다는 개념이 없다.
글꼴 유형의 종류는 아래와 같다.
font-size 속성
font-size 속성은 텍스트 크기를 변경하고 싶을 때 사용하는 속성이다.
속성값으로는 단위를 포함한 크기를 넣는다.
웹 브라우저의 기본 스타일 시트에 따로 텍스트 크기가 지정된 경우(hn 태그)가 아니면 일반적인 텍스트 크기는 16px이다.
font-weight 속성
font-weight 속성은 텍스트의 굵기를 지정하는 데 사용한다.
굵기를 나타내는 속성 값에는 숫자 표기법과 키워드 표기법을 사용할 수 있다.
숫자 표기법
숫자 표기법은 숫자 100 단위로 텍스트 굵기를 표기하는 방법으로, 100부터 900까지의 값을 사용한다.
100이 가장 얇고 900이 가장 굵게 표시된다.
하지만 해당 글꼴이 얼마까지 굵기를 지원하는지 확인해야 하고, 해당 글꼴이 지원하는 굵기를 초과한 값을 지정하면 해당 글꼴에서 가장 굵기가 적용된다.
키워드 표기법
텍스트 굵기를 키워드로 표시하는 방법인데, 여기서는 lighter, normal, bold, bolder를 의미한다.
normal은 숫자 표기법에서 400과 같은 굵기고, bold는 700과 같은 굵기이다.
lighter와 bolder는 상대적인 값으로, lighter는 부모 요소의 굵기보다 얇게 지정되고, bolder는 부모 요소의 굵기보다 굵게 지정된다.
실무에서는 normal이나 bold를 주로 사용한다.
font-style 속성
font-style 속성은 글꼴의 스타일을 지정할 때 사용한다.
italic은 글꼴에서 지원하는 이탤릭체를 적용한 값이고, oblique은 단순히 글자를 기울여서 보여주는 것이다.
font-variant 속성
font-variant 속성은 영문 텍스트를 크기가 작은 대문자로 변경할 때 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>font-variant</title>
<style>
.variant {
font-variant: small-caps;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit.</p>
<p class="variant">Lorem ipsum dolor sit.</p>
</body>
</html>
color 속성
color 속성은 텍스트의 색상을 지정할 때 사용한다.
속성값에는 색상을 표현하는 값을 적으면 된다.
text-align 속성
text-align 속성은 텍스트를 정렬할 때 사용한다.
텍스트를 오른쪽으로 정렬하려면 아래와 같이 작성한다.
속성 값 중에서 justify는 양쪽 정렬을 의미하는데, 아래의 내용을 살펴보면 이해가 될 것이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>텍스트 정렬(text-align)</title>
<style>
p{
text-align:justify;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, error! Id dolore officiis commodi est ad enim earum magnam possimus assumenda velit qui dignissimos eos nihil mollitia distinctio.</p>
</body>
</html>
정렬 기준이 양쪽이다 보니 웹 브라우저 크기에 맞춰 텍스트와 텍스트 사이의 간격을 임의로 늘려서 표시한다.
text-decoration 속성
텍스트를 꾸며 주기 위해 사용한다.
여기서 꾸민다는 것은 텍스트에 선을 긋는 것을 말한다.
a 태그를 이용하여 링크를 걸면 기본으로 텍스트 아래에 선이 그어지는 이유가 이 속성의 값이 underline이 되어 있기 때문이다.
따라서 밑줄을 제거하려면 해당 속성의 값을 none으로 바꿔주면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>text-decoration</title>
<style>
a{
text-decoration:none;
}
</style>
</head>
<body>
<a href="#">링크</a>
</body>
</html>
letter-spacing 속성
자간을 조절할 때 사용한다.
자간은 글자 사이의 간격을 말하며, 속성값으로 normal 또는 크기를 넣을 수 있다.
normal을 사용하면 웹 브라우저에서 정한 기본값을 적용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>letter-spacing</title>
<style>
p{
letter-spacing:15px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, porro adipisci?</p>
</body>
</html>
line-height 속성
텍스트 한 줄의 높이를 지정할 때 사용하는 속성이다.
속성 값은 아래와 같이 정의할 수 있다.
웹 브라우저에 표시되는 텍스트는 아래와 같이 구성된다.
우리가 알고 있는 font-size 속성은 말 그대로 글자 자체의 크기를 지정한다.
그러나 모든 텍스트는 웹 브라우저에 표시될 때 위쪽과 아래쪽으로 일정 크기의 여유 공간을 가지고 있다.
이러한 여유 공간을 전부 포함한 글줄 사이의 간격을 행간이라고 하며 line-height 속성으로 제어할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>line-height</title>
<style>
p{
line-height:10px; /* 텍스트 크기보다 작게 지정 */
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam corrupti sunt inventore distinctio earum quod ea labore nisi accusamus commodi repellat nihil ullam ad in hic, laboriosam incidunt minima eius.</p>
</body>
</html>
'HTML & CSS > CSS' 카테고리의 다른 글
| [CSS] CSS 필수 속성(배경 속성, 위치 속성, 애니메이션 속성) (1) | 2024.01.07 |
|---|---|
| [CSS] CSS 필수 속성(박스 모델) (1) | 2024.01.06 |
| [CSS] CSS 선택자 (1) | 2024.01.04 |
| [CSS] CSS 기초 문법 (1) | 2024.01.03 |
댓글