* 이 글은 필자가 자신이 배운 내용을 정리하기 위한 것이며, 결코 Udemy 강의를 결제하지 않은 타인의 학습을 고려하여 작성되지 않았습니다.
* 이 글을 학습에 활용하기를 원하신다면, Udemy에서 '【한글자막】 The Web Developer 부트캠프 2024' 강의를 구매하시는 것을 권장드립니다.
와. 마참내. 드디어 css를 배운다!
css는 사실상 언어는 아니라고 한다. 언어 비슷한 무언가... 라고 하는데 잘은 모르겠다.
html이 명사라면, css는 형용사다. html을 보기 좋게 꾸며주고, 더 잘 배치할 수 있게 돕는다.
(javascript는 일종의 동사다. html과 css는 java script 없이는 거의 아무것도 하지 못한다.)
그러면 서론은 여기까지 하고, 본론으로 들어가보자!
css를 사용할 때에는 선택자, 중괄호, 특성, 콜론, 값, 세미콜론, 중괄호 순으로 배치해 양식을 만든다.
#code
h1 {
color : purple;
}
이렇게 말이다. 여기에서 h1은 선택자, color은 특성, purple은 값이 된다.
css는 세 가지 방법으로 사용할 수 있다.
첫째, css는 html 파일에 작성할 수 있다.
#code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<main>
<h1 style="color: purple;">Hello World</h1>
<button style="background-color: aqua;">I'm Button</button>
</main>
</body>
</html>
하지만 강의에서는 좋은 방법이 아니니 권장하지 않는다고 한다.
한 양식을 다른 곳에 적용시키기 어렵기 때문이다.
그래도 나중에 보게 될 웹사이트 중에 html과 css를 한 파일에 넣는 신기한 사이트가 하나쯤은 있을지도 모르니, 알아두도록 하자.
둘째, css를 html 파일의 head태그 안에 style 태그를 넣는 식으로 사용할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color: purple
}
button {
background-color: aqua;
}
</style>
</head>
<body>
<main>
<h1>Hello World</h1>
<button>I'm Button</button>
</main>
</body>
</html>
이런 방법도 있긴 하지만... 마찬가지로 권장하지 않는다. 실제로 자주 사용되는 방법은 세 번째 방법이다.
셋째, 외부 스타일 시트를 이용할 수 있다.
이때 파일 확장자를 .css로 해야함에 주의한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<main>
<h1>Hello World</h1>
<button>I'm Button</button>
</main>
</body>
</html>h1 {
color: purple
}
button {
background-color: aqua;
}
head안에 <link rel="stylesheet" href="(파일명)">을 넣고, 두 번째 방법의 style 태그 안의 내용을 css 파일 안에 작성하면...
짜잔!
이처럼 앞의 두 코드와 마찬가지인 이미지를 확인할 수 있다!
이렇게 스타일시트를 따로 제작하면... 음 구분되니까 좋을 것 같다.
python에서 class를 따로 나누어 기능별로 파일을 구분하는 것과 같은 맥락 아닐까?
지금부터는 css의 기본적인 함수? 속성? 을? 배워볼 것이다.
앞에서 사용했던 color라던가, background-color라던가 하는 것들 말이다.
color: 글자의 색을 지정한다.
background-color: 배경 색을 지정한다.
color 얘기가 나와서 그런지 강의에서는 rgb 관련 설명을 한다. css에 이름이 있는 색은 200개가 채 되지 않는다고 한다. rgb를 사용하면 1600만개 이상의 색(정확히는 16,777,216가지의 색)을 표현할 수 있으니, 다양한 색을 표현하려면 rgb는 필수이다.
rgb는 중학교 교육과정에도 있는 걸로 알고 있지만... 그래도 설명하자면 rgb는 0부터 255까지의 빨강red, 초록green, 파랑blue으로 색을 표현하는 방법이다. 이 방법은 빛을 이용한 것이므로 각 요소가 255라면 하얀색이 나온다.
rgb를 이용한 색 지정을 하려면, 그냥 rgb 순서대로 숫자를 적으면 된다. rgb(15, 23, 255)와 같은 식이다.
rgb를 16진법으로 사용할 수도 있다. 256은 16의 제곱이므로 0~F(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F)를 두 번 사용하면 한 색깔의 세기를 나타낼 수 있다. 그러므로 rgb를 이용한 색을 전부 표현하기 위해서는 6개의 문자만 있으면 된다. (00은 0, FF는 255를 뜻한다.)
16진법으로 rgb를 표현한 것을 헥스 코드라고 하는데, 헥스코드는 #FFFF00과 같은 식으로 작성한다. rgb는 따로 앞에 rgb를 적고 괄호까지 만들어 줘야하는 반면, 헥스 코드는 그냥 코드만 달랑 적어놓아도 색 표현이 가능하다.
hsl이라는 방법도 있는 것 같은데, 강의에서는 따로 다루지 않는다. 대신 자신의 유튜브에서 원한다면 확인할 수 있다고 하니, 원한다면 강사님 유튜브를 방문하도록 하자.
이 다음에는 텍스트를 정렬하는 법을 배운다.
text-align: 뒤에 center, right 등을 입력하면 가운데, 오른쪽 정렬 등이 된다.
이 외에도 텍스트 굵기를 정하기 위해서는 font-weight:과 normal, bold, lighter등을 사용할 수 있다.
숫자로도 글자의 굵기를 정할 수 있는데, 400이 일반적인 굵기이고 700이 굵은 글씨를 쓸 때 주로 사용하는 굵기이다.
(ppt등을 만들어본 사람은 알겠지만, 글자를 굵게 처리하는 것보다는 같은 글씨체의 굵은 버전(폰트 이름 자체가 다르다)을 사용하는 것이 미관상 더 좋다.
하지만 그런 것을 크게 신경쓰지 않는 편이라면, css의 기능을 사용하는 것도 나쁘지는 않은 선택이다.
아, 그리고 css로 굵기 조절이 불가능한 폰트도 있다. 참고하자.
text-decoration은 텍스트에 윗줄, 취소선, 밑줄 등을 추가할 때 넣을 수 있다. 그리고 하이퍼링크 등에 자동으로 추가되는 밑줄을 지울 때에도 text-decoration:none;이라고 할 수 있다.
line-height는 줄 사이의 간격을 지정할 때에 사용한다. 보고서를 작성할 때에 항상 붙는.. 줄간격은 130% (160%)... 라는 말을 여기에서도 적용시킬 수 있다! 난 160%를 선호하지만 사람마다 선호하는 줄간격은 다르니 그냥 적당히 보기 좋게 하자.
letter-spacing은 자간을 조정할 수 있다. 자간은 적당히 줄이면 문장이 예뻐지니(말 그대로 보기에 예뻐진다), 이것도 디자인 할 때 사용하면 좋을듯하다. 무엇보다 읽기에 좋다.
이 다음은 폰트를 조정하는 방법을 배운다.
먼저 폰트 크기는, 다양한 단위로 조정할 수 있다. px, em, rem, %... 그중 px(픽셀)은 가장 배우기 쉽지만, 반응형 웹사이트(나중에 배울 것이다)에 사용하기 적절하지 않으므로 자주 사용되지 않는다고 한다. 그런데 사용할 때도 있다고 하니... 글자 크기를 바꾸려면 font-size를 사용한다는 것 정도만 알아두도록 하자.
폰트의 종류를 바꾸기 위해서는 font-family를 사용한다. (사용자 지정 폰트가 아닌, 시스템 폰트로 지정하는 방법이다.) 이때 font-family 뒤에 한 개가 아닌 여러 개의 폰트를 넣으면 앞에서부터 1순위, 2순위... n순위 폰트가 되어 앞의 폰트가 없을 경우에만 뒷 폰트가 사용된다.
css 기초 강의 정리 끝.
'Programming > html,css' 카테고리의 다른 글
| Udemy The Web Developer Bootcamp Section 8 정리 | CSS 박스 모델 Box Model (0) | 2024.11.17 |
|---|---|
| Udemy The Web Developer Bootcamp Section 7 정리 | CSS 선택자 Selecter (0) | 2024.11.17 |
| Udemy The Web Developer Bootcamp Section 5 정리 | HTML 폼과 테이블 form and table (1) | 2024.11.17 |
| Udemy The Web Developer Bootcamp Section 4 정리 | HTML 시맨틱 (0) | 2024.10.04 |
| Udemy The Web Developer Bootcamp Section 3 정리 | HTML 기초 (1) | 2024.09.28 |