id 선택자
- 웹 문서안의 특정 부분 스타일을 적용. (#)기호를 사용해서 id 속성을 가진 요소에 스타일을 적용
h2 { font-size: 30px;}
#hello { color: deeppink;}
/* h2#hello { font-size : 30px; color: deeppingk;}*/
<h2 id="hello">안녕하세요</h2>
<h2>반갑습니다</h2>
class 선택자
특정 집단의 요소를 한번에 스타일을 적용. (.)기호를 사용해서 같은 class 이름을 가진 요소에 스타일을 적용
.hello {font-size: 20px; color: deeppink;}
h2.hello{ font-weight: bold;}
<h2 class="hello">안녕하세요</h2>
<h2>반갑습니다</h2>
<p class="hello">하이</p>
<p>또 만났군요</p>
h2, p{text-align: center;}
<html>
<head> <body>
<title> <h2> <p>
제목 HTML의 구조 안녕하세요 <span>
<b> 를 알아볼게요
HTML 구조
자손 선택자
조상요소 하위의 모든 요소의 스타일을 적용. 자손은 자식을 포함
body p{ color: deepskyblue;}
자식 선택자
부모의 요소 하위의 자식요소의 스타일을 적용
body > p {color: deepskyblue;}
일반 형제 선택자
형제 관계를 갖는 요소 중에서 요소 다음에 나오는 모든 동생 요소의 스타일을 적용
h2 ~ p {color: deeppink;}
인접 형제 선택자
동일한 부모의 요소를 갖는 자식 요소들의 관계, 연속된 동생 요소의 스타일을 적용
h2 + p{color : deepskyblue;}
속성 선택자
HTML 요소에서 src, href, style, type, id, class.. 등 속성을 선택자로 지정해서 스타일을 적용
<img src="apple.png" alt="사과">
[src] {border: 3px solid red;}
[src="apple.png"]{border:3px solid red;}
가상 선택자
클래스를 추가할 필요없이 요소 중에서 순서에 따라 원하는 요소를 선택
<ul>
<li>김사과</li>
<li>반하나</li>
<li id="orange" class="orange">오렌지</li>
<li>이메론</li>
</ul>
#orange{ color: deepskyblue;}
.orange{ color: deepskyblue;}
<!-- 만약 반하나를 선택하고싶다면..? 김사과는?? -->
li:first-child
li 요소 중에서 첫번째 해당하는 요소의 스타일을 적용
li:last-child
li 요소 중에서 마지막에 해당하는 요소의 스타일을 적용
li:nth-child(n)
li 요소 중에서 n번째 요소의 스타일을 적용(예, 홀수 li:nth-child(2n+1): 첫번째요소부터 2번째 마다 선택)
2n, 2n+1, 2n+5 ..
li:nth-child(odd)
li 요소 중에서 홀수번째 요소의 스타일을 적용
li:nth-child(even)
li 요소 중에서 짝수번째 요소의 스타일을 적용
:link
하이퍼링크가 연결됐을 때 선택
:visited
특정 하이퍼링크를 방문한적이 있을 때 선택
:hover
특정 요소에 마우스를 올렸을 때 선택
:active
특정 요소에 마우스 버튼을 클릭하고 있을 때 선택
::before
특정 요소 앞에 텍스트 및 이미지등을 삽입
::after
특정 요소 뒤에 텍스트, 이미지등을 삽입
CSS의 컬러
1. 색상 이름으로 표현
deeppink, deppskyblue, red, blue ..
2.RGB 색상값으로 표현
rgb(0~255, 0~255, 0~255)
rgba(0~255, 0~255,0~255,0~1의 소수)
3. 16진수 색상값으로 표현
#0000ff(파랑)
#00 00 ff -> #00f
R G B
CSS의 텍스트
color
텍스트의 색상을 설정. 기본색은 검정색
letter-spacing
텍스트 내에서 글자 사이의 간격을 설정
안 녕 하 세 요. 오 늘 은 화 요 일 화 가 나 네 요.
word-spacing
텍스트 내에서 단어 사이의 간격을 설정
안녕하세요. 오늘은 화요일 화가 나네요.
text-align
텍스트 수평 방향 정렬을 설정
text-indent
단락의 첫 줄의 들여쓰기를 설정
line-height
줄 높이를 정하는 속성
- normal: 1.2
- px, %, 자연수
예) 글자크기가 40px일 때
line-height: 1.5 -> 줄 높이는 40의 1.5배인 60px -> 글자 크기는 40px이므로 글자 위와 아래에
각각 10px의 여백이 생김(줄 높이가 글자 크기보다 작으면 세로 방향으로 글자가 겹침)
✔ 브라우저 텍스트 크기
pc: 16px
mobile: 12px
text-decoration
텍스트에 여러가지 효과를 설정하거나 제거하는데 사용
- none, underln, line-throught, overline
text-transform
텍스트에 포함된 영문자에 대한 대소문자를 설정
- lowercase, uppercase, capitalize
font-variant
소문자를 작은 대문자로 변경
- small-caps
text-shadow
텍스트에 그림자 효과를 설정
선택자{ text-shadow: 가로거리 세로거리 변짐정도 색상;}
text-overflow
텍스트를 줄바꿈하지 않았을 때 넘치는 텍스트를 어떻게 처리할지를 결정하는 속성
- clip, ellipsis
clip은 자르기
ellipsis는 ... 을 붙이기
white-space
스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 결정하는 속성
- nowrap, pre, pre-wrap, pre-line
스페이스와 탭 줄바꿈 자동 줄바꿈
normal 벙합 병합 O
nowrap 병합 병합 X
pre 보존 보존 X
pre-wrap 보존 보존 O
pre-line 병합 보존 O
overflow
요소내의 컨텐츠가 너무 커서 모두 보여주기 힘들 때 어떻게 보여줄지 설정
- visible, hidden, scroll, auto
font-size
텍스트 크기를 설정
- 단위: px, %, em, rem
font-family
텍스트의 글꼴을 설정
✔ 글꼴을 선택하는 방법
1. 누구나 설치되어 있는 기본 글꼴 사용
2. 이미지로 처리
3. 웹 폰트를 사용
font-weight
텍스트의 굵기를 설정
- 기본 굵기: 400(범위 100~900)
CSS 배경
background-color
HTML 요소의 배경색을 설정
background-image
HTML 요소의 배경으로 나타날 배경 이미지를 설정
배경 이미지는 기본 설정으로 반복되어 나타남
background-image : url(파일경로)
background-repeat
배경이미지를 수평이나 수직방항으로 반복하도록 설정
repeat-x,repeat-y,no-repeat,
background-position
- 반복되지 않는 배경 이미지의 상대 위치를 설정
- %나 px을 사용해서 상대위치를 직접 설정할 수 있음
- 상대 위치를 결정하는 기준은 왼쪽 상단(left top)
left tep center top right top
left center center right center
left bottom center bottom right bottom
background-position: center bottom
background-position: 가로위치값 세로위치값;
background-position: 10% 100px;
background-attachment
- 위치가 설정된 배경 이미지를 원하는 위치에 고정시킬 수 있음
- 고정된 배경 이미지는 스크롤과 무관하게 화면의 위치에서 이동되지 않음
background-size
- 배경 이미지 크기를 설정
- px, %를 사용
- container
배경 이미지로 가로, 세로 모두 요소봐 작다는 조건하에 가능한 설정
가로,세로, 비율은 유지
배경 이미지의 크기는 요소의 크기보다항상 작거나 같음
- cover
배경 이미지의 가로, 세로, 길이 모두 요소보다 크다는 조건하에 가능한 설정
가로, 세로 비율은 유지
배경 이미지의 크기는 요소의 크기보다 항상 크거나 같음
background
배경 속성을 한번에적용
background 파일위치 반복여부 위치 사이즈 ...
무료 jpeg 사이트
https:// pixabay.com/ko/
과제
쇼핑몰의 상세페이지를 하나 선택하여 만들기
(본인의 웹사이트에 "상세페이지" 메뉴로 등록)
1.id선택자
<!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>
#container {
background-color:
padding: 20px;
width: 600px;
height: 300px;
text-align: center;
margin: 0 auto; /*가운데 정렬*/
}
#header {
background-color: deepskyblue;
width:200px;
height:200px;
text-align: center;
line-height: 200px; /*전체높이로 해주면 세로 가운데정렬됨*/
margin: 0 auto;/*세로 마진은 다른 윗쪽 요소와 세로겹침현상이 일어남 더큰놈으로적용*/
}
</style>
</head>
<body style="background-color: black; color:white;">
<h2>id 선택자</h2>
<!-- div# 이라고 입력하고 엔터 아이디까지 나옴 심지어 그냥 #만치고 엔터쳐도 div자동으로 나옴 -->
<div id="container">div첫번째 영역</div>
<div id="header">div두번째 영역</div>
</body>
</html>
2.class선택자
<!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>
.redStyle {color:red;}
.blueStyle{color:blue;}
#bigText {font-size: 25px;}
</style>
</head>
<body style="background-color: black ; color:white;">
<h2>class 선택자</h2>
<p>
<span class="redStyle" id="bigText">클래스 선택자</span>는 <span class="blueStyle">특정 집단</span>의 요소를 <span class="redStyle">한번에 스타일</span>을 적용. (.)기호를 사용해서 <span class="blueStyle"> 같은 class 이름</span>을 가진 요소에 <span class="redStyle">스타일을 적용</span>합니다
</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,p,h3,ul {text-align:center;}
h2{color:deepskyblue; font-size:50px;}
li {display: inline-block;margin-right: 30px; font-weight:bold;color:deeppink}
</style>
</head>
<body style="background-color: rgb(40, 40, 40);color:white;">
<h2>그룹 선택자</h2>
<p>여러개의 요소를 나열하고 (,)로 구분해 스타일을 적용</p>
<h3>선택자의 종류</h3>
<ul>
<li>전체 선택자</li>
<li>요소 선택자</li>
<li>아이디 선택자</li>
<li>클래스 선택자</li>
<li>그룹 선택자</li>
</ul>
</body>
</html>
4.자손선택자
<!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>자손/자식 선택자</title>
<style>
ul a { color: deeppink; text-decoration: none;}
ul > a{font-size : 25px;}
</style>
</head>
<body style="background-color: rgb(40, 40, 40);color:white;">
<h2>자손 선택자</h2>
<ul>
<a href="https://www.naver.com">네이버</a>
<li><a href="https://www.google.com">구글</a></li>
<li>다음</li>
<li><a href="https://www.nate.com">네이트</a></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>
h3 ~p {color: pink; background-color: deepskyblue ; font-size: 20px;}
p+ span{color:gold;background-color: deeppink;font-size:20px;} /*p바로옆에 span 있는 놈중 그 span에 적용*/
</style>
</head>
<body style="background-color: rgb(40, 40, 40);color:white;" >
<h2>형제 선택자</h2>
<div>
<h3>첫째</h3>
<p>둘째</p>
<a href="#">셋째</a>
<h4>넷째</h4>
<p>다섯째</p>
<span>여섯째</span>
</div>
</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>
[href]{text-decoration: none; color: deeppink;}
.attr {background-color: gold;}/* 클래스 선택*/
[class='attr']{font-size: 30px;}
[title]{text-align: center; font-size:50px;}
</style>
</head>
<body style="background-color: rgb(40, 40, 40);color:white;">
<h2 title="h2 요소의 title 속성">속성선택자</h2>
<p><a href="https://www.naver.com" traget="_blank">네이버</a></p>
<p class="attr">속성명과 속성값이 모두 일치하는 요소를 선택자로 지정</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>
.list > li:first-child {color: deeppink}
.list > li:nth-child(2){color: gold}
.list > li:nth-child(odd){background-color: greenyellow;}
.list > li:nth-last-child{color: deepskyblue}
a:link{ text-decoration:none;}
a:visited{text-decoration: none; color: deepskyblue;}
a:hover{text-decoration: underline; color: deeppink}
a:active {text-decoration: underline; color:gold;}
a::before{content: '❤'}
a::after{content: '❤'}
</style>
</head>
<body style="background-color: rgb(40, 40, 40);color:white;">
<h2>가상 선택자</h2>
<ul class="list">
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
<li>네번째</li>
</ul>
<p><a href="https://spring.io">스프링공식홈페이지로 이동</a></p>
</body>
</html>
8.CSS텍스트1
<!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>
.letter { letter-spacing : 5px; color: deepskyblue;}
.word {word-spacing: 7px; color: deeppink;}
</style>
</head>
<body>
<h2>CSS 텍스트 1</h2>
<p>letter-spacing</p>
<p><span class="letter">CSS의 letter-spacing 속성테스트</span></p>
<p>word-spacing</p>
<p><span class="word">CSS의 word-spacing 속성테스트</span></p>
</body>
</html>
9.CSS텍스트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>
<style>
p{
border : 3px solid red;
padding: 10px;
margin: 20px;
}
.align-left {text-align: left;}
.align-right {text-align: right;}
.align-center{text-align: center;}
.align-justify{text-align: justify}
#indent1 {text-indent: 20px;}
#indent2 {text-indent: 5%;}
#small-line{line-height:0.7;}
#big-line{line-height: 3;}
#px-line{line-height:30px;}
#per-line{line-height:35%}
</style>
</head>
<body style="background-color: rgb(40, 40, 40);color:white;">
<h2>css 텍스트2</h2>
<p class="align-left"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime consequatur at odio reprehenderit. Expedita eius et animi deleniti minima pariatur veniam doloribus, vitae perferendis illum quisquam illo, velit saepe laboriosam.</p>
<p class="align-right"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime consequatur at odio reprehenderit. Expedita eius et animi deleniti minima pariatur veniam doloribus, vitae perferendis illum quisquam illo, velit saepe laboriosam.</p>
<p class="align-center"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime consequatur at odio reprehenderit. Expedita eius et animi deleniti minima pariatur veniam doloribus, vitae perferendis illum quisquam illo, velit saepe laboriosam.</p>
<p class="align-justify"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime consequatur at odio reprehenderit. Expedita eius et animi deleniti minima pariatur veniam doloribus, vitae perferendis illum quisquam illo, velit saepe laboriosam.</p>
<hr>
<p id="indent1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium rerum officia veniam, exercitationem a in recusandae maiores voluptatibus commodi at ea nihil perspiciatis dolores voluptates provident. A minus tenetur ut.</p>
<p id="indent2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam dicta ab veritatis quae, quos quidem numquam temporibus corrupti mollitia nulla delectus inventore? Provident, amet! Quo consequuntur eligendi ex ea ad.</p>
<hr>
<p id="small-line">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Assumenda suscipit modi odio ipsum accusamus earum saepe illo illum, beatae magnam ipsam natus, obcaecati exercitationem incidunt nostrum quae eaque eligendi molestias!</p>
<p id="big-line">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Non dolor ad aperiam repudiandae molestias asperiores nemo, nulla amet eveniet nam impedit esse iste in accusantium. Alias optio pariatur delectus temporibus.</p>
<p id="px-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci neque iure omnis accusantium voluptatum, voluptas, natus pariatur odio quidem nam quod odit consequatur aliquid totam enim fugit labore impedit ipsum.</p>
<p id="per-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos asperiores minus assumenda voluptatum deleniti autem sequi perferendis exercitationem tempora. Aliquid cumque sit ratione facere rerum minima iste, voluptatum exercitationem quod!</p>
</body>
</html>
10.CSS텍스트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>
a:link{text-decoration: none;}
a:visited{ text-decoration: none;}
a:hover{text-decoration: underline;}
a:active{text-decoration: overline;}
h2 {font-size:50px;}
.through{text-decoration: line-through;}
.trans1{text-transform: uppercase;}
</style>
</head>
<body style="background-color: rgb(40, 40, 40);color:white;">
<h2>강아지</h2>
<p> 개의 새끼를 일컫는 순우리말이다. </p>
<p> <span class="trans1">소의 새끼 →</span>
송아지, 말 → 망아지의<span class="through"> 어법을 따라 만들어진 용어다</span>. 돝 + 아지 → 도야지 → 돼지도 있다. 영어로는 <span class="variant"></span> Puppy 혹은 Pup이라고 한다. 일본어로는 코이누(子犬, こいぬ), 혹은 왕짱(ワンちゃん)으로 한국과 비슷하다. 한국의 멍멍을 일본어로는 왕왕(ワンワン)으로 표기하기 때문이다.
개[kahj][1] + 작다는 뜻의 접두어 앚[2] + 명사전성어미 "이"가 합쳐져서 강아지가 됐다. 아지는 아기를 다르게 부르는 옛날 단어이다. 지방, 지역마다 조금씩 다르게 부르기도 한다.
강아지를 줄여 강쥐라고 부르는 경우도 존재한다.
요즘에는 어린이들이 새끼가 아니여도 강아지라고 부르는 경우가 많다.
강쥐와 비슷한 단어로는 강아지의 경상도 사투리로 간지라고 한다. 지금은 나이 지긋한 어르신들 사이에서도 이렇게 말하는 사람을 찾기 힘들다. 실제 사람들이 단어를 말할 때는 간→지↘. 이를 합쳐 간지 새끼로 부르기도 한다.[3]
한편 전라도 사투리로는 어원의 개+아지가 그대로 합쳐진 이름인 갱아지[4]라고 부른다. 다른 지역의 방언과 마찬가지로 어르신들만 이 명칭으로 부른다.</p>
<p><a href="https://namu.wiki/w/%EA%B0%95%EC%95%84%EC%A7%80">출처 : 나무위ㅋ</a></p>
</body>
</html>
11.CSS텍스트4
<!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>
h1{font-size:100px}
.shadow1 { color: deeppink; text-shadow: 10px 10px;}
.shadow2 { color: deeppink; text-shadow: 10px 10px 5px;}
.shadow3 {text-shadow: 10px 10px 5px #f00;}
.shadow4 {color:#fff;text-shadow: 10px 10px 5px #000;}
.shadow5 {text-shadow: 60px; color: #fff; text-shadow: 0 0 8px #000; }
</style>
</head>
<body>
<h1 class="shadow1">CSS Text_shadow 속성1</h1>
<h1 class="shadow2">CSS Text_shadow 속성2</h1>
<h1 class="shadow3">CSS Text_shadow 속성3</h1>
<h1 class="shadow4">CSS Text_shadow 속성3</h1>
<h1 class="shadow5">CSS Text_shadow 속성3</h1>
</body>
</html>
12.CSS텍스트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>
p{
display: inline-block;
width: 200px;
border: 1px solid red;
}
.tof1{
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
.tof2{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.of1{
height: 200px;
overflow: scroll;
}
.of2{
height: 200px;
overflow-x: hidden;
overflow-y: scroll;
}
.content{
border: 3px dotted blue;
width: 400px;
padding: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.content:hover{overflow:visible;}
</style>
</head>
<body style="background-color: rgb(40, 40, 40);color:white;">
<h2>CSS 텍스트 5</h2>
<p class="tof1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic magni dolores est voluptates aliquid deserunt, cumque quae labore eligendi odio numquam. Deserunt molestias deleniti velit mollitia animi accusantium molestiae praesentium?</p>
<p class="tof2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic magni dolores est voluptates aliquid deserunt, cumque quae labore eligendi odio numquam. Deserunt molestias deleniti velit mollitia animi accusantium molestiae praesentium?</p>
<p class="of1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam iusto architecto soluta, sunt, fugiat vitae unde error at labore ex doloribus cumque quidem molestias similique excepturi modi, voluptas cum saepe?</p>
<p class="of2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam iusto architecto soluta, sunt, fugiat vitae unde error at labore ex doloribus cumque quidem molestias similique excepturi modi, voluptas cum saepe?</p>
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium temporibus tempora porro, doloremque rem voluptas ea nam saepe ratione atque harum voluptatem quaerat velit. Delectus ratione blanditiis assumenda autem incidunt!</div>
</body>
</html>
13.CSS텍스트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>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
<style>
@font-face {
font-family: 'PyeongChangPeace-Bold';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChangPeace-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
p{font-size: 25px; line-height: 1.4; }
.gothic1{font-weight: 400;font-family: 'Nanum Gothic', sans-serif;}
.gothic2{font-weight: 700;font-family: 'Nanum Gothic', sans-serif;}
.gothic3{font-weight: 800;font-family: 'Nanum Gothic', sans-serif;}
.pyeongChang{font-family: 'PyeongChangPeace-Bold'}
</style>
</head>
<body>
<h2 class="nor">CSS 텍스트 6</h2>
<p>font-family: 여러개의 글꼴을 등록할 경우 웹 브라우저에서 순서대로 사용여부를 판단한 뒤 한가지만 적용</p>
<p class="gothic1">font-family: 여러개의 글꼴을 등록할 경우 웹 브라우저에서 순서대로 사용여부를 판단한 뒤 한가지만 적용</p>
<p class="gothic2">font-family: 여러개의 글꼴을 등록할 경우 웹 브라우저에서 순서대로 사용여부를 판단한 뒤 한가지만 적용</p>
<p class="gothic3">font-family: 여러개의 글꼴을 등록할 경우 웹 브라우저에서 순서대로 사용여부를 판단한 뒤 한가지만 적용</p>
<p class="pyeongChang">font-family: 여러개의 글꼴을 등록할 경우 웹 브라우저에서 순서대로 사용여부를 판단한 뒤 한가지만 적용</p>
</body>
</html>
14.CSS배경1
<!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>
body{ background-color: deepskyblue ;}
div { background-color: white; width: 60%; padding: 20px; border: 3px dotted red;}
</style>
</head>
<body>
<h2>CSS 배경 1</h2>
<div>
<h2>배경 적용하기</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse vero voluptate autem explicabo nemo possimus ratione at nam. Non ab quis ea, doloribus modi consectetur accusantium eum dolores doloremque enim.</p>
</div>
</body>
</html>
15.CSS배경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>
<style>
body{background-image: url(dog.png);
background-repeat:repeat-x;}
</style>
</head>
<body>
</body>
</html>
16.CSS배경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>
body{
background-image: url(./dog.png);
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
}
div{
width: 60%;
height: 300px;
border: 3px dotted deeppink;
padding: 10px;
margin-bottom: 20px;
background-image: url(./dog.png);
background-repeat: no-repeat;
}
.bg1{background-position: center bottom;}
.bg2{background-position: right bottom;}
.bg3{background-position: 20% 100px;}
</style>
</head>
<body>
<h2>css 배경 3</h2>
<div class="bg1">
<h2>background-position 1</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad amet eum dignissimos officiis dolores vero quo pariatur nemo earum culpa veritatis cum animi, omnis perferendis fugiat quos aperiam suscipit necessitatibus.</p>
</div>
<div class="bg2">
<h2>background-position 2</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus, repudiandae sequi iusto placeat nisi consectetur excepturi non architecto odit, sit eaque id quam ea quae fugit. Vel alias eligendi aperiam.</p>
</div>
<div class="bg3">
<h2>background-position 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, molestiae saepe asperiores exercitationem repellat natus aut dolorem esse, assumenda error illum vero voluptates, cum expedita officiis recusandae dicta modi cumque?</p>
</div>
</body>
</html>
17.CSS배경4
<!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{
background-image: url(./dog.png);
background-repeat: no-repeat;
width: 150px;
height: 150px;
border: 2px solid red;
margin-bottom: 20px;
}
.background1{ background-size: 50px 100px;}
.background2{ background-size: 500px 500px;background:center;}
.background3{ background-size: contain;}
.background4{
background-size: cover;
}
</style>
</head>
<body>
<h2>17 CSS배경4</h2>
<div class="background1"></div>
<div class="background2"></div>
<div class="background3"></div>
<div class="background4"></div>
</body>
</html>
18.CSS배경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>
html{
background: url(./early-morning.jpg) no-repeat center fixed;
background-size: cover;
}
</style>
</head>
<body>
</body>
</html>반응형
'웹 개발 > 🖥️ HTML&CSS' 카테고리의 다른 글
| HTML&CSS | 다단레이아웃,flex,미디어쿼리,em,rem (0) | 2022.10.27 |
|---|---|
| HTML&CSS | 패딩,테두리,마진,박스사이징,디스플레이,폼,상대위치,고정위치,절대위치,z-index,float,clear (0) | 2022.10.27 |
| HTML&CSS | CSS,스타일,선택자,상속 (0) | 2022.10.27 |
| HTML (0) | 2022.10.27 |
| HTML (0) | 2022.10.27 |
