태그에 직접 작성하기(인라인)
선택자가 필요없이 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에 포함하기(내장)
CSS만 따로 작성하기 때문에 선택자 필요
CSS코드가 HTML의 안에 포함 되어있음
일괄 수정에 용이
<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파일이 불러와 사용할수있음
<!-- 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>예제)
파일저장; command + s
./ ; 현파일을 기준, 내주변으로 파일을 찾겠다는 의미
<link rel="stylesheet" href="./main.css">
선택자
HTML의 특정한 부분을 선택하는 sign
태그로 찾기
선택자를 입력하는 부분에 적용하려는 태그의 이름을 입력
원하지않아도 태그를 찾게됨
h1태그를 찾아서 빨간색으로 변경
P 태그를 찾아서 파랑색으로 변경
/*<h1>은 글자색이 빨강이야!*/
h1 {
color: red;
}
/*<p>는 글자색이 파랑이야!*/
p {
color: blue;
}
클래스 찾기
명확하게 원하는 요소를 찾기 위해 클래스 선택자가 존재
.title ; 클래스 선택자
타이틀이라는 별명을 가지고 있고
title이라는 선택자를 가지고 있는 요소를 찾아서 글자색상을 빨간색으로 지정
.main-text ;
/*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>-> 색상 변경되지 않음
<h1>제목2</h1>
<p>본문2</p>속성1
크기,여백,색상 같은 눈에 보이는 스타일 지정 가능
크기
- width(가로 너비)
요소의 가로너비를 지정, 단위는 px 사용
가로 x, 세로y
div {
width: 300px;
요소가로너비: 너비값;
}- height(세로 너비)
요소의 세로 너비를 지정
div {
height: 150px;
요소세로너비: 너비값;
}command+ option + I ; 개발자 도구
해제시 재입력
- font size
글자 크기를 지정
아무것도 지정하지 않을 시 글자크기는 16px로(default)로 설정 됨
속성2
여백
- margin(요소의 바깥 여백)
요소의 바깥 여백을 지정
요소와 요소 사이의 여백(거리,공간)을 생성할 때 사용
div {
margin: 20px;
요소바깥여백: 여백값;
}-> 아래,좌,우 모두 20px의 여백을 지정하겠다는 의미
; 단축 속성
div {
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
요소바깥여백-위쪽: 여백값;
요소바깥여백-오른쪽: 여백값;
요소바깥여백-아래쪽: 여백값;
요소바깥여백-왼쪽: 여백값;
}-> 세분화를 위해 한 방향씩 지정 가능
;개별 속성
- padding(요소의 내부 여백)
요소의 내부 여백을 지정
div {
padding: 20px;
요소내부여백: 여백값;
}-> 안쪽으로 자식요소를 감싸는 여백을 의미
;단축 속성
div {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
요소내부여백-위쪽: 여백값;
요소내부여백-오른쪽: 여백값;
요소내부여백-아래쪽: 여백값;
요소내부여백-왼쪽: 여백값;
}-> 세분화를 위해 한 방향씩 지정 가능
;개별 속성
속성3
- color(글자 색상)
글자 색상 지정
div {
color: red;
글자색상: 빨강;
}- background(요소 색상)
요소의 배경 색상 지정
div {
background-color: red;
요소배경: 빨강;
};단축 속성
이제 개발을 시작하시는분 같군요!
블로그 올리시는거 잘 보고 있습니다.
기초내용부터 탄탄히 잡아가시는 모습 너무 보기 좋아요!
앞으로도 화이팅입니다!!