What is CSS? 🤷🏻♂️
CSS(Cascading Style Sheets, 종속형 스타일 시트)는 브라우저에서 웹페이지의 외형을 결정하는 선언형 언어입니다. 브라우저는 선택한 요소에 CSS 스타일 선언을 적용해 화면에 적절히 표현합니다. 하나의 스타일 선언은 속성과 그 값으로 이루어져 있습니다.
CSS는 HTML, JavaScript와 함께 웹의 3대 핵심 기술을 이룹니다. 보통 HTML 요소의 스타일을 결정하지만, SVG와 XML 등 다른 마크업 언어에도 사용할 수 있습니다.
- HTML로 만든 내용을 이쁘게 꾸며주는것!
How to use? 🤔
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Basics</title>
<style>
h1 {
color: rgb(0, 0, 0);
}
</style>
</head>
<body>
</body>
</html>따로 css를 불러올 수도 있지만 <head>안에 <style>을 넣어주고 그 안에서 필요한 동작을 하면 된다.
Colors 🌈
위의 예는 모든 <h1>의 색깔을 바꾸게 하는것으로 rbg옆 괄호에는 (Red, Green, Blue) 색 조합을 해서 색을 만들어내거나, black, white, green, blue 등 색의 이름을 직접 넣어줄 수도 있다.
h1 { color: white; } h2 {color: rgb(123, 42, 12)}
배경 색은 어떻게 바꿔야 할까?
해당 페이지의 보여지는 내용은 모두 <body>속으로 들어간다. 그러므로 배경 색은 다음과 같이 설정해 줄 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Basics</title>
<style>
body {
background-color: rgb(97, 250, 255);
}
</style>
</head>
<body>
</body>
</html>특정한 태그만 선택하려면? 🤏🏻
h1, h2, p 등 태그의 이름을 쓰면 모든 태그에 스타일이 적용된다.
이 문제를 해결할 수 있는게 id이다. 3개의 <p> 태그 중 두번째 <p>태그만 색깔을 바꿔보자.
<p id="first-paragraph">가나다라마바사</p>
<p id="second_paragraph">아자차카타파하</p>
<p id="third paragraph">치키차카초코초</p>id는 공백이 있으면 안된다- 공백 대신
-이나,_를 사용해야한다. - 대소문자를 구분한다. (항상 소문자를 쓰면 실수를 줄일 수 있음)
- 모든
id는 달라야한다. - 그러므로
third paragraph는 사용할 수 없음!
#second_paragraph {
background-color: green;
}id는#로 선택할 수 있다.
Class로 선택하기
어느 특정한 한 문단 말고 여러 문단의 배경색을 바꾸고 싶으면 어떻게 해야할까?
위와 같이, 모든 문단에 아이디를 정해주고 배경색을 일일이 지정해 줄 수도 있다.
하지만 문단이 많아질 수록 아이디의 개수도 늘어나게 될 것이고 코드에 적어야하는 줄도 늘어나게 된다.
이런 문제를 해결해주는 것이 class 이다.
<p class="cool_paragraph">가나다라마바사</p>
<p class="cool_paragraph">아자차카타파하</p>
<p class="cool_paragraph">치키차카초코초</p>id와 마찬가지로 공백은 사용하면 안되고 대소문자를 구분한다.
.cool_paragraph {
background-color: yellow;
}class의 경우에는.로 선택할 수 있다.
csszengarden
위의 링크는 같은 html만 가지고 css로 어떻게 다르게 변할 수 있는지 보여주는 샘플페이지다.
Font
p {
color: rgb(191, 0, 255);
font-family: sans-serif;
}폰트는 위와 같이 바꿔줄 수 있다.
브라우저에서 Sans-Serif 는 각 컴퓨터의 기본 Sans-Serif 인 보통 Ariel나 Helvetica이다.
보는 사람의 컴퓨터마다 보이는 서체가 다를 수 있기 때문에 특정 서체로 지정해줄 수 있다. 하지만, 보는 사람의 컴퓨터에 없는 폰트라면 지정된 폰트로 보이지 않기 때문에 백업 폰트를 지정해서 이 문제를 해결할 수 있다.
p {
color: rgb(191, 0, 255);
font-family: Helvetica, sans-serif;
}Font Size
페이지 내의 모든 폰트 사이즈를 바꿔보자.
body {
font-size:12px;
}폰트 사이즈의 단위에는 여러가지가 있지만 픽셀로 적용해보면 폰트사이즈가 변경되는것을 볼 수 있다.
하지만 <h1>, <h2>처럼 헤딩의 크기는 조금 더 큰 모습을 볼 수 있다. 이건 헤딩의 사이즈는 픽셀로 지정되어 있지 않고 em으로 지정되어 있기 때문이다.
em은 비율로 변화하는데 1em이 10px이라고 한다면 2em은 20px이 된다.
폰트사이즈가 12px이고 <h2>의 사이즈가 2em이니, 24px의 크기로 적용된 것을 볼 수 있다.
Font Style
TIL.No 1 - HTML 에서 <b>,<strong>,<i>,<em>을 소개했었다.
한 문단 전체에 볼드나 이탤릭체를 적용하기 위해 전체를 다 감싸 줄 수도 있겠지만 좋은 방법은 아니다.
이 경우에는 다음과 같이 적용할 수 있다.
.cool_paragraph {
background-color: yellow;
font-family:culsive;
font-size:14px
font-style:italic;
font-weight:bold;
}font-family:tantasy; font-size:14px font-style:italic;font: italic 14px fantasy;
위의 코드 둘 다 같은 결과를 가져온다.
하지만 스타일, 크기, 폰트이름 등 순서를 헷갈릴 수도 있으니 직관적인 첫번째 방법을 쓰도록 해야겠다.
Line Height
글 사이의 간격을 조정해준다.
.cool_paragraph {
line-height: 1.5em;
}간격은 픽셀로 지정해 줄 수도 있지만 폰트 사이즈에 비례하게 적용시키려면 em을 쓰는 것이 편할것 같다.
Text Align
텍스트의 정렬 위치를 바꿀 수 있게 해준다.
.cool_paragraph {
line-height: 1.5em;
text-align: center;
}center, right, left 등으로 설정해줄 수 있다.
이 외에도 엄청나게 많은 프로퍼티들이 있지만 블로그에 다 적을 순 없으니 직접 웹을 만들고 적용하면서 조금씩 찾아보고 정리해야겠다.
