4. CSS 관련 모음집
2024. 10. 28. 09:19ㆍ파이썬(python)의 HTML
1. CSS
<!DOCTYPE html>
<html lang="en">
<link>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<link rel="stylesheet" href="./CSS/css.css">
<style>
h2 {text-align:center; font-size: 40px; color: deepskyblue; }
span { color: red;}
</style>
</head>
<body>
<!--CSS는 웹 페이지의 특정 요소 또는 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는언어-->
<p style="text-align: center; font-size: 25px; color: deeppink;">안녕하세요</p>
<h2>안녕하세요</h2>
<span style="color: aqua;">안녕하세요</span>
</body>
</html>-->
결과 화면
2. 선택자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택자</title>
<style>
h2 {color: deeppink;}
/* 세부 항목이 선택된 선택자는 전체 선택지에서 제외 */
/* color 속성은 상속이 되나, 전체 선택자가 우선 */
/* * {color: deepskyblue;} */
/* #container 작성시 자동 생성 */
p { color: gold;}
#container {
background-color: deepskyblue;
width: 200px;
height: 100px;
text-align: center; /* 텍스트 가운데 정렬 */
line-height: 100px;
margin: 50px auto; /* div 가운데 정렬 */
}
.smallText { font-size: 12px;}
.redText { color: red; }
h3, h4 { font-size: 30px; }
ul > a {font-size: 30px} /*자식 선택자 */
ul a {color: deepskyblue;} /* 자손 선택자 */
p + span {text-decoration: underline;}
h3 ~ p {color: green; font-weight: bold;}
[title] {background-color: aqua;}
</style>
</head>
<hr>
<h2 class="smallText">선택자</h2>
<!--전체 선택자-->
<ol>
<li>스타일을 모든 요소에 적용함</li>
<li>* 기호를 사용하여 표현함</li>
<li>너무 많은 요소가 있는 HTML붐서는 부하를 줄 수 있음</li>
</ol>
<!--p의 span도 상속되어 적용-->
<p>p 요소<span>span 요소</span></p>
<p>p 요소<strong>span 요소</strong></p>
<p>p 요소<ins>span 요소</ins></p>
<hr>
<!--id 선택지-->
<!--#container-->
<!--id : 현재 html 문서에 단 하나의 이름만 사용 할 수 있음-->
<div id="container">div 영역</div>
<!--class 선택자-->
<p><span class="smallText redText">특정 집단의 요소를 한번에 스타일 적용</span></p>
<p><span class="smallText">class 속성을 가진 요소에 스타일을 적용</span></p>
<hr>
<!--그룹 선택자-->
<h3>그룹 선택자</h3>
<h4>그룹 선택자</h4>
<hr>
<!--자식/자손 선택자-->
<ul>
<a href="https://www.naver.com">네이버</a>
<li><a href="https://www.google.com">구글</a></li>
<li>네이트</li>
<li><a href="https://www.daum.net">다음</a></li>
</ul>
<hr>
<!--형제 선택자-->
<div>
<h3>첫째</h3>
<p>둘째</p>
<a href="#">셋째</a>
<h4>넷째</h4>
<p>다섯째</p>
<span>여섯째</span>
</div>
<!--속성 선택자-->
<h1 title="h1요소의 title 속성">속성 선택자</h1>
</body>
</html>
-->
결과 화면
3. 텍스트 스타일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 스타일</title>
<style>
@font-face {
font-family: 'TTBookendBatangR';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2410-2@1.0/TTBookendBatangR.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}
p {border: 3px solid red; padding: 10px;}
#align-left { text-align: left;}
#align-right { text-align: right;}
#align-center { text-align: center;}
#align-justify { text-align: justify;}
.under {text-decoration: underline;}
.through {text-decoration: line-through;}
a:link {text-decoration: none;}
a:visited {text-decoration: underline; color: gold;}
a:hover {text-decoration: underline;}
a:active {text-decoration: underline; color: deeppink;}
h1 {font-size: 100px;}
#shadow1 {text-shadow: 10px 10px 5px red;}
#shadow2 {color:white; text-shadow: 10px 5px black;}
#shadow3 {color:white; text-shadow: 0px 0px 8px black;}
/*웹 폰트를 주로 쓴다*/
/* p {font-family: 'Comic Sans MS';} */
P { font-family: TTBookendBatangR}
</style>
</head>
<body> <!--class under는 밑줄-->
<p id="align-left" class="under">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit alias ut quidem ratione impedit dolorum hic maxime autem dignissimos commodi, accusantium mollitia, quia eaque doloremque quibusdam vitae animi nostrum. Quaerat?
</p>
<p id="align-right" class="through">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit alias ut quidem ratione impedit dolorum hic maxime autem dignissimos commodi, accusantium mollitia, quia eaque doloremque quibusdam vitae animi nostrum. Quaerat?
</p>
<p id="align-center" class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit alias ut quidem ratione impedit dolorum hic maxime autem dignissimos commodi, accusantium mollitia, quia eaque doloremque quibusdam vitae animi nostrum. Quaerat?
</p id="align-justify" class="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit alias ut quidem ratione impedit dolorum hic maxime autem dignissimos commodi, accusantium mollitia, quia eaque doloremque quibusdam vitae animi nostrum. Quaerat?
</p>
<hr>
<p><a href ="http://www.nate.com"> 네이트</a></p>
<p><a href ="http://www.naver.com"> 네이버</a></p>
<hr>
<h1 id="shadow1">CSS Text-Shadow</h1>
<h1 id="shadow2">CSS Text-Shadow</h1>
<h1 id="shadow3">CSS Text-Shadow</h1>
</body>
</html>
-->
결과 화면
4. 배경 스타일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배경</title>
<style>
html { background: url("./winter1.png") no-repeat fixed center/cover;}
/* body { background-color: deepskyblue;} */
/* repeat; repeat-x, repeat-y, no-repeat */
/* body {background-image: url(./winter1.png);
background-repeat: repeat-y;} */
div {
/* background-color: gold;*/
width: 50%;
padding: 30px;
background-image: url(./winter1.png);
border: 3px dotted red;
margin-bottom: 30px;
background-repeat: no-repeat;
}
#bg1 {background-position: center;}
#bg2 {background-position: 50px 50px;}
#bg3 {background-position: right bottom}
/* contain: 배경보다 배경 이미지가 작다면 가로/세로 같은 비율로 증가시켜 맞춰줌*/
#bg4 {width: 200px; height: 150px; background-size: contain;}
/* 배경보다 배경이미지가 크다면 가로/세로 같은 비율로 줄여서 맞춰줌 */
#bg5 {width: 100px;
height: 60px;
background-size: cover;
background-position: bottom center;
}
</style>
</head>
<body>
<div id="bg1">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab odio excepturi doloremque eos itaque, commodi necessitatibus ipsum laudantium similique ipsa sint voluptatum debitis vero incidunt
mollitia, distinctio consequatur ut molestias.</p>
</div>
<div id="bg2">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab odio excepturi doloremque eos itaque, commodi necessitatibus ipsum laudantium similique ipsa sint voluptatum debitis vero incidunt
mollitia, distinctio consequatur ut molestias.</p>
</div>
<div id="bg3">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab odio excepturi doloremque eos itaque, commodi necessitatibus ipsum laudantium similique ipsa sint voluptatum debitis vero incidunt
mollitia, distinctio consequatur ut molestias.</p>
</div>
<div id="bg4">
</div>
<div id="bg5">
</div>
</body>
</html>
-->
결과 화면
728x90
LIST
'파이썬(python)의 HTML' 카테고리의 다른 글
| 6. HTML 방식 (2) | 2024.10.29 |
|---|---|
| 5. HTML 위치 지정방식 (0) | 2024.10.29 |
| 3. HTML 태그 (0) | 2024.10.25 |
| 2. VS Code(Visual Studio Code) 설치 (16) | 2024.10.24 |
| 1. HTML(HyperText Mark-up Language) (3) | 2024.10.24 |