-
CSS 기본 내용개발일지/웹프로그래밍 2021. 12. 22. 20:39
CSS 란?
Cascading Style Sheets 의 약자로 웹사이트를 꾸며줄 때 사용하는 언어이다.
지난글의 HTML은 구조를 뜻하면 CSS는 만들어진 구조를 이쁘게 다듬는 역할이라고 생각한다.
CSS의 기본문법은 크게 어렵지않고 우선 html의 어떤 요소를 꾸며하는지 지정해야하기 때문에
html애서 태그를 특정하는 Class 와 id를 활용한다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button> 버튼 1</button> <button> 버튼 2</button> <button> 버튼 3</button> <button> 버튼 4</button> </body> </html>해당 html 코드에서 2번재 버튼을 꾸며 주기 위해선 2번째 <button>을 가리켜야하는데 이때 필요한게 class 와 id 이다.
Class, id 외에도 <>를 선택하는 를 Selector 라고 한다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body class="wrap"> <!-- class 자식(내부)은 class가 적용되지 않으면 같은 스타일이 적용된다. --> <button class="first"> 버튼 1</button> <!-- class끼리는 같은 스타일 적용--> <button class="second"> 버튼 2</button> <!-- class가 다르면 다른 스타일이 적용--> <button class="first" id="button3"> 버튼 3</button> <!-- class 는 중복이 가능하지만--> <button class="first" id="button4"> 버튼 4</button> <!-- id는 중복 안됨--> </body> </html>Class와 id를 설정했다면 html코드의 <head> 부분에 <style>태그를 추가하여 CSS를 적용해주면 된다.
첫번째 방법으로는
<button class="first" style="margin-top: 20px"> 버튼 1</button>각 태그의 속성마다 적용하는 방법이 있다.
태그의 내부에 style=' ( 꾸며줄 속성 ) ; ( 속성값 ) ;' 이라 작성하면 해당 태그가 꾸며진다 .
하지만 이는 button이 4개만 늘어나도 복잡하게 된다.
따라서 다른 방법을 이용해야하는데
다른방법으로는 head태그를 이용하는 것이다.
html에서 정리한 것처럼 <head>에는 설정할 수 있는 값들이 들어가기 때문에 css를 한꺼번에
<head>안에 <style>을 통해 <body>에 있는 구성품들을 모두 한꺼번에 정의할 수 있다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- CSS 작성시작 --> <style> .wrap{ <!-- dictionary 형식으로 작성을 한다. --> margin: 20px; <!-- 변경하고자하는 것 : 변경해야할 속성값 --> background-color: aliceblue; } .first{ <!-- class를 선택하려면 . --> background-color: aquamarine; } #button3{ <!-- id를 선택하려면 # --> background-color: beige; } </style> </head> <body class="wrap"> <button class="first"> 버튼 1</button> <button class="second"> 버튼 2</button> <button class="first" id="button3"> 버튼 3</button> <button class="first" id="button4"> 버튼 4</button> </body> </html>지금은 코드가 간단해서 Selector를 지정하는게 당연한 거지만
코드가 길어지면 길어질수록 내가 원하는 태그만 바꾸기란 쉽지가 않다.
그래서 Selector를 선택하는 다양한 방법들이 있는데 이건 이후에 정리하도록 하겠다.
또한 가만히 생각해보면 html 의 head에 CSS를 추가해서 사용하는데 위에 보면 알겠지만 간단히 3개만 작성을 해도
10줄이나 차지하는 것을 볼 수 있다. 그 이야기인즉슨 html의 구성요소가 많아지면 많아질수록 코드가 매우 길어져 보기 힘들 수 도 있고 이전에 웹사이트를 만들어본 경험으로는 매우 힘들다. 따라서 파일분리가 거의 필수 불가적으로 필요하다.
그래서 마지막 방법을 통해 주로 사용하는데
마지막 방법으로는 css라는 파일을 만들어 현재 html문서에 불러와 쓸수 있도록 연결하는 것이다.
HTML 의 확장자는 .html 인것처럼 css 파일의 확장자는 .css이다. 해당 파일을 html이 담겨있는 폴더에 넣고
<link>를 통해 head파일에서 불러서 연결하면된다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- CSS 파일 연결 --> <link rel="stylesheet" href="../static/test_style_sheet.css"> </head> <body class="wrap"> <button class="first"> 버튼 1</button> <button class="second"> 버튼 2</button> <button class="first" id="button3"> 버튼 3</button> <button class="first" id="button4"> 버튼 4</button> </body> </html><link> 태그의 속성 - rel : 특성 - href : 파일 경로참고로 파일위치에 따라 달라지며 지금 사용된 예제는 css 파일 위치가
이런식으로 구조가 되어있기 때문에 html의 폴더 기준으로
./ 의 미는 상위폴더로 이동한다는 뜻이다.
CSS 파일이 들어있는 css 파일은 project 폴더로 이동해야하기 때문에 두번 상위볼더로 이동해야한다.
그래서
../ >> Project 폴더
../static >> Project 폴더/static
../static/test_style_sheet.css >> Project 폴더/static/test_style_sheet.css 선택!
따라서 경로에는 ../static/test_style_sheet.css 가 들어간다. 이는 상대경로, 절대경로를 정리할 때 다시 정리해야겠다.
정리하자면 CSS는 구조인 html을 꾸며주기위한 방법이며
사용법은 3가지
- 태그 내부에서 작성 style=" (속성 내용) : ( 속성 값); "
- <style>를 통해 <head>에 작성
- <link> 를 이용하여 파일을 분리가능 (가장 깔끔)
'개발일지 > 웹프로그래밍' 카테고리의 다른 글
JavaScript 기본 (0) 2021.12.22 HTML 기본 개념 (0) 2021.12.22