CSS(Cascading Style Sheets)
웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어
CSS 문법
HTML 문서 <head> 요소 안에 <style> 요소를 사용하여 CSS 문법을 적용
선택지 { 속성면1: 속성값; ...}
P { text-align: center;}
---- ---------- -------
선택자 속성명 속성값
주석문
/* ~ */ 사이에 내용을 입력
CSS를 적용하는 방법
1. 인라인 스타일
HTML 요소 내부에 style 속성을 사용하여 적용하는 방법
<p style="text-align: center; font-size: 50px; color: deepskyblue;"> dkssud</p>
2. 내부 스타일
HTML 문서의 <head> ~</head> 사이에 <style> ~</style> 요소를 사용하여 적용하는 방법
<style>
h2{
text-align: center;
font-size: 50px;
color: deepskyblue;
}
p{
text-align: center;
font-size: 20px;
}
</style>
3. 외부 스타일
웹 사이트 전체의 스타일을 하나의 파일에서 변경
<link rel="stylesheet" href="css 파일 경로">
✔ rel
현재 문서와 링크된 문서 사이의 연관관계를 명시
indent-rainbow(익스텐션)
:들여쓰기를 컬러화시킨 익스텐션
선택자
1. 전체 선택자
스타일을 모든 요소에 적용
* { padding: 0; margin: 0; }
✔ 개별적으로 적용한 스타일은 전체 선택자에 적용한 스아틸보다 우선
2. 요소 선택자
특정 요소가 쓰인 모든 요소에 스타일을 적용
✔ 상속
부모 요소의 속성값이 자식 요속에ㅔ게 전달된
과제
본인의 홈페이지에 아래와 같이 적용
index.html : 대문
index.html 메뉴 [홈(index.html) 인터넷기사(news.html) 이력서(resume.html) 즐겨찾기(favorite0)]
즐겨찾기
본인이 자주 가는 웹사이트 3개이상 소개하는 페이지
(iframe 적용)
1.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2{
text-align: center;
font-size: 50px;
color: deepskyblue;
}
p{
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<h2>CSS</h2>
<p>웹 페이지의 특정 요소 또는 요 소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어</p>
</body>
</html>
2.인라인스타일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2 style=" text-align: center;
font-size: 50px;
color: deepskyblue; ">인라인 스타일</h2>
<p style=" text-align: center;
font-size: 20px;">웹 페이지의 특정 요소 또는 요 소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어</p>
</body>
</html>
3.내부스타일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2{font-size: 50px; } /* h2 요소의 사이즈를 50px로 설정 */
p{font-size: 25px;}
ul{list-style:none; }
li{color: deeppink; font-weight: bold; display:inline-block; margin-right: 30px}
/*display:inline: 인라인 기능으로*/
/*dispaly:inline-block : 면의 기능을 추가하면서 인라인 기능*/
</style>
</head>
<body>
<h2>내부스타일</h2>
<p>CSS를 적용하는 방법</p>
<ul>
<li>인라인 스타일</li>
<li>내부 스타일</li>
<li>외부 스타일</li>
</ul>
</body>
</html>
4.외부스타일(css&html)
/*
style.css
작성자: 이재원
내용: CSS를 적용하는 방법(외부 스타일)
*/
h2{font-size: 50px; } /* h2 요소의 사이즈를 50px로 설정 */
p{font-size: 25px;}
ul{list-style:none; }
li{color: deepskyblue; font-weight: bold; display:inline-block; margin-right: 30px}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h2>내부스타일</h2>
<p>CSS를 적용하는 방법</p>
<ul>
<li>인라인 스타일</li>
<li>내부 스타일</li>
<li>외부 스타일</li>
</ul>
</body>
</html>
5.전체선택자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2{color: deepskyblue; font-size:50px ;}
* {color: gray;}
</style>
</head>
<body>
<h2>전체 선택자</h2>
<p>전체 선택자는 * 기호를 사용해서 표현</p>
<ol>
<li>전체 선택자는 한 번에 많은 요소를 선택</li>
<li>너무 많은 요소가 있는 HTML문서에서 사용할 경우 클라이언트에 부하를 줄 수 있음</li>
</ol>
</body>
</html>
6.요소선택자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2{font-size: 50px;}
p(color: deepskyblue;)
</style>
</head>
<body>
<h2>요소 선택자</h2>
<p>특정 요소가 쓰인 모든 요소에 스타일을 적용함</p>
<p>span 요소</p>
<p>strong 요소</p>
<p>ins 요소</p>
<p><mark> mark 요소</mark></p>
</body>
</html>
7.상속
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
color:deeppink;
border: 3px dotted gold;
padding: 30px;
}
</style>
</head>
<body>
<h2>상속</h2>
<div>
div 영역
<h3>상속이란</h3>
<p>부모 요소의 속성값이 자식 요소에게 전달되는 속성</p>
</div>
</body>
</html>반응형
'웹 개발 > 🖥️ HTML&CSS' 카테고리의 다른 글
| HTML&CSS | 패딩,테두리,마진,박스사이징,디스플레이,폼,상대위치,고정위치,절대위치,z-index,float,clear (0) | 2022.10.27 |
|---|---|
| HTML&CSS | 선택자,텍스트,배경 (1) | 2022.10.27 |
| HTML (0) | 2022.10.27 |
| HTML (0) | 2022.10.27 |
| HTML (0) | 2022.10.27 |
