프론트엔드/HTML, CSS
CSS 개념
개발자딥게
2022. 9. 12. 16:16
반응형
CSS (Cascading Style Sheet)
- HTML에는 정보가 들어있고, CSS는 디자인을 담당.
- 문서의 레이아웃과 스타일을 정의함.
- HTML로 작성된 정보를 꾸며주는 언어
CSS 구성 요소
- 선택자 : 디자인을 적용할 HTML 영역
- 속성 : 어떤 디자인을 적용할지 정의
- 속성값 : 어떤 역할을 수행할지 구체적으로 명령. 세미콜론; 필수 입력.
선택자 { 속성 : 속성값 }
CSS 연동
Inline Style Sheet – 태그 안에 직접 원하는 스타일을 적용
<body>
<h1 style="color: blue;">Hello World</h1>
</body>
Internal Style Sheet – <style> 태그 안에 CSS 코드를 작성합니다.
<head>
<style>
h1 { color: blue; }
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
External Style Sheet – <link> 태그로 CSS 문서를 불러옴
(1) index.html 파일
<!-- html 문서 -->
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>Hello World</h1>
</body>(2) index.css 파일
/* css 문서 */
h1 { color: blue; }
CSS 선택자
선택자
- Type : 태그
- Class : 태그의 별명
- ID : 태그 이름
Type 선택자 – 특정 태그에 스타일을 적용
<head>
<style>
h1 { color: blue ; }
</style>
</head>
<body>
<h1>Type Elice</h1>
</body>
Class 선택자 – .(점)으로 클래스 이름을 선언하고, 해당 클래스에 스타일을 적용
<head>
<style>
.coding { color: blue; }
</style>
</head>
<body>
<h1 class= "coding">Class Elice</h1>
</body>
ID 선택자 – #으로 ID를 선언하고, 해당 ID에 스타일을 적용
<head>
<style>
#coding { color: blue; }
</style>
</head>
<body>
<h1 id= "coding">ID Elice</h1>
</body>
실습
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 선택자</title>
<style>
h2 { color: red; }
.coding { color: green; }
#coding { color: yellow; }
</style>
</head>
<body>
<h2>Type Hello World</h2>
<h2 class="coding">Class Hello World</h2>
<h2 id="coding">Id Hello World</h2>
</body>
</html>
실습결과
Type Hello World
Class Hello World
Id Hello World
속성의 상속
부모 태그 <header> <footer>의 CSS 속성은 자식 태그 <h1> <p>가 상속 받는다.
반대로 자식 태그의 CSS 속성은 부모 태그에 영향을 미치지 않는다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 속성의 상속</title>
<style>
header {
color:red;
}
header h2{
color:blue;
}
footer p{
color:green;
}
</style>
</head>
<body>
<header>
<h2>header h2</h2> <!-- blue !-->
<p>header p</p> <!-- red !-->
</header>
<footer>
<h2>footer h2</h2> <!-- black !-->
<p>footer p</p> <!-- green !-->
</footer>
</body>
</html>
캐스케이딩
1. 순서에 의한 캐스케이딩
나중에 적용한 속성값의 우선순위가 높다.
<p> Hello world </p> <!-- blue !-->
p { color : red; }
p { color : blue; }
2. 디테일에 의한 캐스케이딩
구체적으로 지시할 수록 우선순위가 높다.
<header>
<p> hello world </p> <!-- red !-->
</header>
header p { color : red }
p { color : blue }
3. 선택자(id 또는 class)에 의한 캐스케이딩
style > id > class > type 순으로 우선순위가 높다
<h3 style="color:pink" id="color" class="color"> color </h3> <!-- pink !-->
#color { color : blue; }
.color { color : red; }
h3 { color : green; }
CSS 주요 속성
width, height
구체적인 영역 설정
font (글자)
<p class = "paragraph"> 즐거운 웹프로그래밍 </p>
.paragraph {
font-size : 50px; /* 글자 크기 */
font-family : Arial, sans-serif; /* 글꼴 */
font-style : italic; /* 글자 기울기*/
font-weight : bold; /* 글자 두께*/
}
border (테두리)
<p class = "paragraph"> 즐거운 웹프로그래밍 </p>
.paragraph {
witdh: 500px;
height: 500px;
border-style : solid; /* 실선(점선은 dotted) */
border-width : 10px; /* 테두리 두께*/
border-color : 10px; /* 테두리 색깔*/
/* 한번에 이어서 선언 가능*/
border: solid 10px red;
}
background (배경)
<p class = "paragraph"> 즐거운 웹프로그래밍 </p>
.paragraph {
background-color : yellow; /* 배경 색깔*/
background-image : url(이미지경로);
background-repead : no-repeat; /* x축으로 반복 repeat-x , y축으로 반복 repeat-y */
background-position : left; /* 배경이미지의 위치 top, bottom, center, left, right 등 */
}
실습
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 주요 속성 2</title>
<style>
.paragraph {
width: 500px;
height: 500px;
font-size; 50px;
font-weight: bold;
font-style: italic;
font-family: Arial, times, sans-serif;
border-style: solid;
border-width: 2px;
border-color: red;
background: yellow;
background-image: url(elice_logo.png);
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<h1 class="paragraph">Nice to meet you</h1>
</body>
</html>
실행결과
반응형