3일차
CSS 문법
Div {
Font-size:20px;
Color: red;
}
— 이해 —
선택자{
속성:값
속성:값
}
속성 과 값
div {
//속성 : 값 입니다
color : red;
font-size: 20px;
width: 300px;
margin: 20px;
padding: 10px 20px;
position : absolute;
CSS 선언 방식
인라인 선언방식
이 방법은 HTML 태그에 직접 작성하기 때문에 선택자가 필요하지 않습니다.
|
<div style="color: red;">태그에 직접 작성1</div> <!-- red --> |
(해석)
=div에 스타일을 적용하겠습니다 컬러는 레드로 적용할게요!
인라인 방식에는 선택자가 필요하지 않고 직접 삽입하는 방식이다
우리가 직접태그를 찾아서 그 태그의 값을 넣어줘야하는 방식이다
자바스크립트가 html 을 css를 강제로 삽입할때 쓰곤한다.
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> |
위에 헤드 부분에서 div 컬러는 레드로 선언을 해서
바디부분에서도 모두 삽입이 된다.
HTML 외부에서 불러오기 (LINK)
|
<head> <link rel="stylesheet" href="/css/main.css"> css 경로 </head> <body> <div> HTML에 외부에서 불러오기1 </div> |
css를 작성해서 외부에서 불러와서 link를통해 적용한다.
/* main.css */
div {
color : red <--- 외부의 css 파일을 링크를 통해서 선언되어있는 파일을 일괄적으로 적용
}
------------------------
선언을 한번 하고 여러군데에서 사용가능
예제해보기
선택자
위에서 설명했드 선택자는 HTML 의 특정한요소를 선택하는 사인(sign)입니다.
여러 종류가 있는데 우선 그중 2가지만 알아보겠습니다.
태그로 찾기
선택자를 입력하는 부분에 적용하려는(찾으려는 ) 태그의 이름을 입력합니다.
p {
color : red
}
<p>안녕</p> <--- 레드로출력
<h1>안녕</h1>
를 찾아준다
클래스로 찾기
좀 더 명확하게 원하는 요소를 찾기 위해서 ' 클래스 선택자 ' 라는 것이 존재합니다.
.title{
color : red;
}
앞에 점이 붙어 있다. dot
클래스 선택자라고한다
<h1 class="title">제목1</h1> 을 찾아서 레드로 바꿔줌
속성
크기 , 여백, 색상 같은 눈에 보이는 스타일을 지정할 수 있습니다.
크기
#Width(가로너비)
요소의 가로 너비를 지정합니다
단위는 px
div {
width: 300px;
}
#height(세로너비)
요소의 세로 너비를 지정합니다
div {
height: 300px;
}
#font size(글자 크기)
요소 내용(text)의 글자 크기를 지정합니다.
여백
#margin(요소의 바깥여백)
바깥 여백은 요소와 요소 사이의 여백(거리 , 공간)을 생성할 때 사용합니다.
|
div { |
요소바깥여백 : 여백값;
위 코드는 margin은 위 아래 좌 우 모두 20px의 여백을 지정하겠다는 의미입니다.
세분화하기 위해 아래와 같이 한 방향씩 지정할 수도 있습니다.
위 코드와 아래 코드는 같은 의미다.
|
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 } |
화면과 같이 2번 박스는 padding 을 넣어서 20씩 크기가 늘어난걸 볼수 있다. 위 아래 로 20씩 늘어나서 40 씩 총
추가가 되어서 240x340 px의 모습이다.
'Front' 카테고리의 다른 글
| 프론트엔드 6일차 (0) | 2021.04.19 |
|---|---|
| 프론트엔드 5일차 (0) | 2021.04.16 |
| 프론트엔드 4일차 (0) | 2021.04.16 |
| HTML , CSS , JAVA Script 개요 (0) | 2021.04.12 |
