CSS 선언
1. 태그에 직접 입력하기 (인라인/inline)
<div style="color: red;">태그에 직접 작성1</div>
2. html문서에 포함하기 (내장/internal)
- Selector(선택자)로 css 속성을 줘야한다.
<head>
<style>
div {
color: red;
}
</style>
<script>
// script 태그 : javascript 영역
alert("안녕하세요");
</script>
</head>
<body>
<div>HTML에 포함1</div> <!-- red -->
<div>HTML에 포함2</div> <!-- red -->
<div>HTML에 포함3</div> <!-- red -->
</body>
2. html외부파일로 불러오기 (external)
(1) css외부파일로 불러오기 : link 태그
- rel 속성 : html 문서와의 관계를 표시
- href 속성 : 외부파일의 경로 작성
<link rel="stylesheet" href="./css/custom.css">
Selector(선택자)
- 선택자는 HTML의 특정한 요소를 선택하는 사인(sign)입니다.
선택자의 종류
요소명 선택자
-
HTML 요소를 선택한다
-
CSS선택자에 따로 id나 class명을 작성해주지 않으면 CSS 선택자로 적힌 요소전체에 대해 CSS속성이 적용된다.
<style>
/*
p요소의
1. 배경색을 검정색으로
2. 글자의 색상을 흰색으로
3. 글자의 크기를 30px로
4. 마진은 0으로 바궈 보세요
*/
p{
background-color: black;
color: white;
font-size: 30px;
margin: 0px;
}
</style>
class 선택자
- 클래스 선택자는 . 을 클래스 앞에 붙인다.
- 같은 class 속성을 갖고 있는 모든 html 요소에 적용 된다.
- class 속성하나에는 여러개의 값을 넣을 수 있다.
//예시
<style>
.bg-yellow{background-color: yellow;}
.bg-gray{background-color: #cecece;}
.big-font{font-size: 30px;}
.small-font{font-size: 10px;}
.box{
width: 100px;
height: 100px;
border-width: 1px;
border-style: solid;
border-color: red;
}
</style>
</head>
<body>
//html요소에 class속성 값을 여러개 부여하기
<div class="bg-yellow">div1</div>
<div class="bg-gray">div2</div>
<div class="bg-yellow big-font">div3</div>
<div class="box">div4</div>
<div class="bg-yellow big-font box">div5</div>
</body>
id 선택자
- HTML 요소에 id속성값은 하나만 부여할 수 있다.
- 아이디 선택자는 #을 아이디 앞에 붙인다.
//예시
<style>
/*아이디 선택자는 #을 아이디 앞에 붙인다.*/
#one{
color: blue;
}
</style>
자손, 자식 요소
- 자손요소 선택하기
.container p { }- 자식요소 선택하기
body > p{ }
<head>
<title>Step02_Selector3</title>
<style>
.container{
width: 768px;
/* 위아래 마진: 0, 좌우 마진 auto*/
margin: 0 auto; /*가운데 정렬*/
background-color: #cecece;
}
/*클래스명이 container인 요소의 [자손] 중에서 p 요소 선택*/
.container p{
color: #ffff00;
}
/*body의 [자식] 중에서 p요소 선택*/
body > p{
font-size: 30px;
}
</style>
</head>
<body>
<div class="container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate voluptatibus aliquam consectetur, animi modi consequatur nobis nulla? Tenetur, soluta dolorum corrupti mollitia alias voluptate eveniet perspiciatis nisi. Magnam, quod qui?</p>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi esse doloribus sed non soluta, veniam aperiam natus, quos consequuntur ex laboriosam maxime distinctio. Tempora, deserunt quos voluptatum eveniet magnam nam?</p>
</body>
전부다 선택하기
- *(별표)로 모든 요소를 선택할 수 있다.
*{ background-color: #cecece;}
다중 선택
- ,(컴마)를 이용해서 여러개의 엘리먼트를 선택할 수 있다.
h1, .my, .your{ color: blue; }
선택자의 가중치
- 선택자의 가중치가 같다면
나중에 정의한 css가 적용된다.
/*예시*/
//1번 코드
h1{color: blue;}
//2번 코드
h1{color: red;}
//결과 : 2번코드가 실행된다.
- 선택자의 가중치가 다르다면
더 디테일한 선택자가 적용된다.
CSS 가중치 : !important > inline css > id > class > 요소명
//예시1
<head>
.my-class{background-color: yellow;} //html 요소에 적용되는 것 css 코드
h1{color: blue;}
h1{
color: red;
background-color: #cecece;
}
</style>
</head>
<body>
<div class="container">
<h1>순서 없는 목록 입니다.</h1>
<ul>
<li>하나</li>
<li>두울</li>
</ul>
<h1 class="my-class">친구 목록입니다.</h1>
<ul id="one">
<li>김구라</li>
<li>해골</li>
</ul>
</div>
</body>//예시2
<head>
<title>Step02_Selector4</title>
<style>
#one li{
color:#00ffff;
} // li에 적용되는 것
.container li{
color: #ff00ff;
}
</style>
</head>
<body>
<div class="container">
<h1>순서 없는 목록 입니다.</h1>
<ul>
<li>하나</li>
<li>두울</li>
</ul>
<h1 class="my-class">친구 목록입니다.</h1>
<ul id="one">
<li>김구라</li>
<li>해골</li>
</ul>
</div>
</body>//!important 예시
<head>
<title>Step02_Selector6</title>
<style>
*{ /* 모두 다 선택 */
background-color: #cecece;
color: red !important;
}
h1, .my, .your{ /*여러개(다중) 선택*/
color: blue;
}
</style>
</head>
<body>
<h1>h1 요소입니다.</h1>
<p class="my">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur animi corporis pariatur facilis blanditiis saepe deserunt itaque excepturi atque tempora, doloribus dolores consequatur sit incidunt mollitia perferendis rem nihil tempore.
</p>
<p class="your">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab officiis labore error itaque, optio dolorem fugiat ullam. Tenetur incidunt, quasi et asperiores adipisci excepturi, sapiente iure architecto eligendi delectus id?
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit sapiente totam, voluptas atque, illum earum ut harum repellendus odio aperiam! Ipsum animi sapiente aut, hic ipsam cupiditate laudantium necessitatibus est.</p>
</body>
RGB 색상
16진수 색상표
1. 빛으로 만든 16진수(0123456789abcdef)의 컬러코드
2. #000000(검은색)~#ffffff(흰색) 까지 있다.
https://html-color-codes.info/Korean/
HTML 컬러 코드
HTML 컬러 차트 사각형 모양의 컬러버튼을 클릭하여 HTML 컬러 코드를 찾으세요. HTML 컬러 코드 이론 "이 이상한 기호와 숫자와의 조합이 어떤 의미가 있을까?" 하고 궁금하신가요. 그 답은 "예" 입니다. 다음의 설명을 참조하세요. :) HTML 코드 포맷 : 각각의 HTML 코드는 "#"와 6자리 숫자로 되어있습니다. 이 숫자는 16진법의 숫자 시스템입니다. 예를 들면 16진법에서 "FF"는 십진법에서의 숫자 25를 나타냅니다. 상징의 의미 :
html-color-codes.info
10진수 색상표
1. 10진수(0123456789)의 컬러코드
2.
'CSS' 카테고리의 다른 글
| 이미 만들어져 있는 css요소를 div에 적용해보기 (0) | 2019.11.19 |
|---|---|
| p 요소 변경하기 (0) | 2019.11.19 |
| 가상클래스 PseudoClass / 가상요소 PseudoElement (0) | 2019.11.19 |
| 속성(Properties)과 값(Value) (0) | 2019.11.19 |
| BoxModel (0) | 2019.11.19 |
