CSS(Cascading StyleSheet)는 HTML 문서에 시각적 효과를 주기 위한 언어이다. HTML에서 직접 style 속성에 CSS 속성을 추가할 수 있지만, 웹 표준에서 권장하지 않는 방식이다.
CSS를 작성하기 위해서는 세 가지 방식이 있다. 하나는 HTML 문서의 head 태그 안에 style 태그를 추가하고 그 안에 CSS를 작성하는 방식, 다른 방식은 외부에 CSS 파일을 만들고 HTML 문서에서 link 태그로 불러오는 방식이다. 또 다른 방식은 style 태그 안에 @import 키워드를 사용하는 것이다.
첫 번째 방식은 다음과 같다.
<html>
<head>
<title>...</title>
<style>
<!-- CSS 작성 위치 -->
</style>
</head>
<body>
...
</body>
</html>두 번째 방식은 다음과 같다. 외부 CSS 파일 style.css를 html 문서와 같은 디렉터리에 저장했다고 가정한다.
<html>
<head>
<title>...</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
...
</body>
</html>세 번째 방식은 다음과 같다.
<html>
<head>
<title>...</title>
<style>
@import url(style.css);
</style>
</head>
<body>
...
</body>
</html>
외부 CSS 파일(예 - style.css)
/*
외부 CSS 파일인 style.css에 CSS 내용을 입력하면 된다.
*/CSS의 주석문에는 한 줄 주석이 없고 블록 주석만 있는데, 블록 주석은 자바와 똑같이 '/*'와 '*/' 사이에 주석문을 넣어 주면 된다.
/*
블록 주석
*/스타일시트는 다음과 같은 방식으로 작성한다.
셀렉터 {
프로퍼티1(property 또는 속성): 값;
프로퍼티2: 값;
.
.
.
프로퍼티3: 값;
} 셀렉터는 태그 이름이나 태그에 지정한 id, class를 가리킨다. 그리고 프로퍼티는 태그의 스타일 속성 이름들이며 약 200개 정도가 존재한다. 값은 프로퍼티의 값을 가리킨다. 셀렉터에 id를 사용하려는 경우 '#id'와 같은 형식으로, class를 사용하려는 경우 '.class'와 같은 형식으로 입력하면 된다.
즉, 태그 전체나 특정 태그들을 셀렉터를 통해 선택하고 해당 태그들에 대하여 스타일 속성 값을 설정해 주는 것이다.
각각의 프로퍼티들에 대해서는 열거하기보다 필요할 때 참고하는 것이 좋을 것 같아 링크를 남겨 놓는다.
https://www.w3schools.com/cssref/
CSS Reference
grid A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties
www.w3schools.com
자주 쓰는 프로퍼티로는 color(글자 색), background-color(배경 색), margin(부모 요소와 자신과의 여백), padding(자신과 자식 요소 간의 여백), font(폰트 스타일, 글자크기, 글꼴을 한 번에 담는 프로퍼티), border(테두리의 위, 오른쪽, 아래, 왼쪽 굵기와 선 종류, 색을 담는 프로퍼티) 등이 있다.
값을 줄 단위를 입력해야 하는 경우가 있다. CSS의 단위에는 em, %, px, cm, mm, in, pt, pc, 각도가 있다.
em은 부모 요소의 값 대한 배수이다. 만약 부모 요소의 폰트가 10px이라면 1.5em은 15px이 된다.
%는 부모 요소에 대한 비율을 나타낸다. 예를 들어 50%로 값을 설정한다면, 부모 요소의 반을 차지하게 된다.
px은 컴퓨터의 화소, cm은 센티미터, mm는 밀리미터, in는 1인치이다.
pt는 1인치의 1/72 크기이며 pc(피카소)는 12pt이다.
deg는 1도이다. 회전 등 각도의 단위가 필요할 때 사용한다.
'🕸웹 > CSS' 카테고리의 다른 글
| 주요 CSS 프레임워크 - 예쁜 웹디자인, 프론트엔드 템플릿 찾기 (0) | 2021.12.04 |
|---|---|
| [20210616] CSS 기초3 (0) | 2021.06.16 |
| [20210615] CSS 기초2 (0) | 2021.06.15 |