기초 CSS 문법
div {
font-size: 20px;
color: red;
}
/* 다음과 같이 이해할 수 있습니다. */
선택자 {
속성: 값;
속성: 값;
}
선택자의 역할
선택자(Selector)는 HTML에 CSS를 적용하기 위해 HTML의 특정한 요소를 선택하는 사인(Sign)
"빨간 글자색(CSS, color: red)을 제목(HTML, <h1></h1>)에 적용하겠어!"
"파란 글자색(CSS, color: blue)을 본문(HTML, <p></p>)에 적용하겠어!"
같이 적용할 스타일을 속성(color) 값(red, blue)로 나타내고 적용할 대상(H1, P)을 선택잘 나타낸다.
<div>
<h1>제목..</h1>
<p>본문..</p>
</div>h1 {
color: red;
}
p {
color: blue;
}
속성(Properties)과 값(Value)
속성과 값은 글자색은 무엇, 너비는 얼마, 여백은 얼마 같은 스타일을 지정할 때 사용한다.
div {
color: red; /* 글자색은 빨강 */
font-size: 20px; /* 글자 크기는 20px */
width: 300px; /* 가로 너비는 300px */
margin: 20px; /* 바깥 여백은 20px */
padding: 10px 20px; /* 안쪽 여백은 위아래 10px, 좌우 20px */
position: absolute; /* 위치는 부모 요소 기준, 흠.. 이게 무슨 뜻일까? */
}속성과 값은 많이 아는 것이 중요하다.
CSS 선언 방식
CSS 적용 방식
태그에 직접 작성하기(인라인)
HTML 태그에 직접 작성하기 때문에 선택자가 필요하지 않다
<div style="color: red;">태그에 직접 작성1</div> <!-- red -->
<div style="color: red;">태그에 직접 작성2</div> <!-- red -->
<div style="color: red;">태그에 직접 작성3</div> <!-- red -->
<div style="color: red;">태그에 직접 작성4</div> <!-- red -->
단점 : 직접 태그를 찾아서 그 태그의 속성으로 값을 넣어줘야 하기 때문에 일일이 찾아서 적용해야 하며, 수정이 불편하다.
HTML에 포함하기(내장(embeded) 선언 방식)
CSS만 따로 작성하기 때문에 선택자가 필요
CSS 코드가 HTML의 <style></style> 안에 포함되어 있다.
<head>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>HTML에 포함1</div> <!-- red -->
<div>HTML에 포함2</div> <!-- red -->
<div>HTML에 포함3</div> <!-- red -->
</body>
HTML에 외부에서 불러오기
분리된 하나의 CSS 파일을 여러 HTML 파일이 불러와서 사용할 수 있다.(link 태그 사용)
<!-- HTML 1 -->
<head>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<div>HTML에 외부에서 불러오기1</div> <!-- red -->
</body><!-- HTML 2 -->
<head>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<div>HTML에 외부에서 불러오기2</div> <!-- red -->
</body>/* main.css */
div {
color: red;
}
- href의 경로는 상대 경로와 절대 경로가 있다.
- 앞에 /(슬래쉬)가 있으면 절대 경로를 의미함
선택자
HTML의 특정한 요소를 선택하는 사인(sign)
태그로 찾기
선택자를 입력하는 부분에 적용하려는 태그 이름 입력
/*<h1>은 글자색이 빨강이야!*/
h1 {
color: red;
}
/*<p>는 글자색이 파랑이야!*/
p {
color: blue;
}<h1>제목1</h1> <!--red-->
<h1>제목2</h1> <!--red-->
<p>본문1</p> <!--blue-->
<p>본문2</p> <!--blue-->
단점 : 원하는 부분을 정확하게 찾긴 어렵다
클래스로 찾기
좀 더 명확하게 원하는 요소를 찾기 위해서 '클래스 선택지'라는 것이 존재한다.
/*class="title"은 글자색이 빨강이야!*/
.title {
color: red;
}
/*class="main-text"는 글자색이 파랑이야!*/
.main-text {
color: blue;
}<h1 class="title">제목1</h1> <!--red-->
<h1>제목2</h1>
<p class="main-text">본문1</p> <!--blue-->
<p>본문2</p>class라는 HTML 속성에 원하는 별명을 입력한다.
제목1에는 title을 본문1에는 main-text라는 별명을 지정하고
선택자 앞에 .이 붙는다.
.은 클래스를 나타내며 CSS의 .title = HTML의 class="title"
.이 없는 선택자 title은 태그 <title>을 의미하며 전혀 다른 뜻으로 인식 된다.
속성
크기, 여백, 색상 같은 눈에 보이는 스타일을 지정할 수 있다.
크기
- width(가로 너비)
요소의 가로 너비 지정
단위는 px(pixels)를 사용한다.
div {
width: 300px;
요소가로너비: 너비값;
}
- height(세로 너비)
요소의 세로 너비를 지정
div {
height: 150px;
요소세로너비: 너비값;
}
- font-size(글자 크기)
요소 내용(Text)의 글자 크기를 지정
div {
font-size: 16px;
글자크기: 크기값;
}
여백
- margin(요소의 바깥 여백)
요소의 바깥 여백을 지정
바깥 여백은 요소와 요소 사이의 여백(거리, 공간)을 생성할 때 사용
div {
margin: 20px;
요소바깥여백: 여백값;
}
위 코드는 margin은 요소의 위, 아래, 좌, 우 모두 20px의 여백을 지정하겠다는 의미
세분화하기 위해 아래와 같이 한 방향씩 지정할 수도 있다. (총 5개)
div {
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
요소바깥여백-위쪽: 여백값;
요소바깥여백-오른쪽: 여백값;
요소바깥여백-아래쪽: 여백값;
요소바깥여백-왼쪽: 여백값;
}
- padding(요소의 내부 여백)
요소의 내부 여백 지정
내부 여백은 자식 요소를 감싸는 여백을 의미
div {
padding: 20px;
요소내부여백: 여백값;
}
margin과 같이 한 방향씩 지정할 수 있다.
div {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
요소내부여백-위쪽: 여백값;
요소내부여백-오른쪽: 여백값;
요소내부여백-아래쪽: 여백값;
요소내부여백-왼쪽: 여백값;
}
색상
- color(글자 색상)
요소 내용(Text)의 글자 색상 지정
font-color, text-color같은 속성은 없다
div {
color: red;
글자색상: 빨강;
}
- background(요소 색상)
요소의 배경 색상을 지정
color는 글자의 색만 지정할 수 있으며, 요소의 배경색을 바꾸려면 background-color가 필요하다.
div {
background-color: red;
요소배경: 빨강;
}
'Front-End' 카테고리의 다른 글
| HTML 콘텐츠 구분 / 문자 콘텐츠 (0) | 2021.01.22 |
|---|---|
| HTML 태그 (0) | 2021.01.20 |
| HTML / 개요, 요소 - 주요범위 & 메타데이터 (0) | 2021.01.03 |
| HTML (0) | 2020.12.27 |
| HTML, CSS, JavaScript (0) | 2020.12.27 |
