<!DOCTYPE html>
<html lang="ko">
<!-- 1. head 작성 -->
<head>
<!-- meta tag : metadata(정보에 대한 정보) 제공
화면에 표시되지는 않지만 검색 엔진/브라우저에 읽힘 -->
<meta charset="UTF-8">
<!-- IE 브라우저에서 최신 표준 모드를 선택하는 문서 모드 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 뷰 포트 : 화면 상의 화상 표시 영역
데스크탑 화면과 모바일의 뷰 포트는 차이가 있음. 너비를 디바이스에 맞춤. 기본 배율 1. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 사이트에 대한 설명 -->
<meta name="description" content="Full Screen Practice">
<title>1_full-screen실습</title>
<!-- CSS -->
<!-- 브라우저별로 디폴트로 적용된 CSS에 차이(여백, 폰트 크기 등)가 있어
CSS가 별도로 지정 되지 않은 요소는 브라우저별로 다르게 보일 수 있으므로
만들어져 있는 리셋 css 활용 -->
<!-- ress.css (https://github.com/filipelinhares/ress)-->
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<!-- favicon (Real Favicon Generator 활용) -->
<link rel="icon" type="image/x-icon" href="../resources/images/khfavicon.ico">
<!-- 외부 스타일 시트 -->
<link href="../resources/css/style.css" rel="stylesheet" type="text/css">
<!--구글 웹 폰트-->
<link href="https://fonts.googleapis.com/css2?family=Syne+Tactile&display=swap" rel="stylesheet">
</head>
<body>
<!-- 화면을 꽉채우는 이미지 배치 -->
<div id="home" class="big-bg">
<!--2. header 만들기-->
<header class="page-header wrapper">
<!--로고 클릭시 다시 본인 페이지로 로드-->
<h1><a href="1_full-screen실습.html"><img class="logo" src="../resources/images/logo.jpg" alt="Home"></a></h1>
<nav>
<ul class ="main-nav">
<li><a href="2_column실습.html">News</a></li>
<li><a href="3_grid실습.html">Menu</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<!--3. 콘텐츠 부분 만들기-->
<div class="home-content wapper">
<h2 class="page-title">Full Screen Practice</h2>
<p>
풀 스크린이란 이미지 또는 동영상을 메인으로 화면 전체에 출력하는 레이아웃입니다.
</p>
<a class="button" href="#">메뉴 보기</a>
</div>
</div>
</body>
</html>
css
@charset "UTF-8"; /* 인코딩 문자 깨짐 방지 */
html {
/* 사용자 설정 문자 크기 그대로 반영 되도록 */
font-size : 100%;
}
body {
line-height: 2.0;
color : #432;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
/* header ---------------------------------------------- */
/* 로고 크기 및 여백 */
.logo {
width: 210px;
margin-top : 14px;
}
/* nav 메뉴 장식 */
.main-nav {
display: flex;
list-style: none;
text-transform: uppercase;
font-size: 1.25em;
margin-top: 34px;
}
.main-nav li {
margin-left : 36px;
}
.main-nav a {
color : #432;
}
.main-nav a:hover {
color : #0bd;
}
/* 로고 내비 가로 정렬 */
.page-header {
display: flex;
justify-content: space-between;
}
/* 콘텐츠의 최대 출력 너비 설정 */
.wrapper {
max-width: 1100px;
margin : 0 auto;
padding : 0 4%;
}
/* home ----------------------------------------- */
/* 배치 및 여백 설정 */
.home-content {
text-align: center;
margin-top: 10%;
}
.home-content p {
font-size: 1.125em;
margin : 10px 0 42px;
}
/* 제목 */
.page-title {
font-size: 5em;
text-transform: uppercase;
font-weight: normal;
font-family: 'Roboto Serif', sans-serif;
}
/* 버튼 */
.button {
background: #0bd;
color : white;
padding: 15px 32px;
border-radius: 5px;
font-size: 1.375em;
}
/* 큰 배경 이미지 */
.big-bg {
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}
#home {
background-image: url("../images/main-bg.jpg");
min-height: 100vh;
}
<body>
<!-- 화면을 꽉채우는 이미지 배치 -->
<div id="home" class="big-bg">
<!--2. header 만들기-->
<header class="page-header wrapper">
<!--로고 클릭시 다시 본인 페이지로 로드-->
<h1><a href="1_full-screen실습.html"><img class="logo" src="../resources/images/logo.jpg" alt="Home"></a></h1>
<nav>
<ul class ="main-nav">
<li><a href="2_column실습.html">News</a></li>
<li><a href="3_grid실습.html">Menu</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
@charset "UTF-8"; /* 인코딩 문자 깨짐 방지 */
html {
/* 사용자 설정 문자 크기 그대로 반영 되도록 */
font-size : 100%;
}
body {
line-height: 2.0;
color : #432;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
/* header ---------------------------------------------- */
/* 로고 크기 및 여백 */
.logo {
width: 210px;
margin-top : 14px;
}
/* nav 메뉴 장식 */
.main-nav {
display: flex;
list-style: none;
text-transform: uppercase;
font-size: 1.25em;
margin-top: 34px;
}
.main-nav li {
margin-left : 36px;
}
.main-nav a {
color : #432;
}
.main-nav a:hover {
color : #0bd;
}
/* 로고 내비 가로 정렬 */
.page-header {
display: flex;
justify-content: space-between;
}
/* 콘텐츠의 최대 출력 너비 설정 */
.wrapper {
max-width: 1100px;
margin : 0 auto;
padding : 0 4%;
}
<!--3. 콘텐츠 부분 만들기-->
<div class="home-content wapper">
<h2 class="page-title">Full Screen Practice</h2>
<p>
풀 스크린이란 이미지 또는 동영상을 메인으로 화면 전체에 출력하는 레이아웃입니다.
</p>
<a class="button" href="#">메뉴 보기</a>
</div>
/* home ----------------------------------------- */
/* 배치 및 여백 설정 */
.home-content {
text-align: center;
margin-top: 10%;
}
.home-content p {
font-size: 1.125em;
margin : 10px 0 42px;
}
/* 제목 */
.page-title {
font-size: 5em;
text-transform: uppercase;
font-weight: normal;
font-family: 'Roboto Serif', sans-serif;
}
/* 버튼 */
.button {
background: #0bd;
color : white;
padding: 15px 32px;
border-radius: 5px;
font-size: 1.375em;
}
/* 큰 배경 이미지 */
.big-bg {
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}
#home {
background-image: url("../images/main-bg.jpg");
min-height: 100vh;
}
<!-- 5. 뉴스 컨텐츠-->
<div class="news-content wrapper">
<article>
<!--세부 영역 사이사이 header를 넣을 수 있다.-->
<!-- 기사 헤더-->
<header class="post-info">
<h2 class="post-title">기사 상단에 출력될 제목입니다.</h2>
<p class="post-date">2/14 <span>2022</span></p>
<p class="post-cat">카테고리 : 기사 카테고리</p>
</header>
<!--기사 본문-->
<img src="../resources/images/tower1.PNG" alt="기사사진">
/* 기사 부분 */
article {
/* width : 74%; */
/* 2-column에서 3-column으로 변경 시 width 줄이기 */
width : 55%;
/* 컬럼 순서 변경
display : flex의 자식 요소에서 동작 */
order : 2;
}
<!--사이드 바-->
<aside>
<h3 class="sub-title">카테고리</h3>
<ul class="sub-menu">
<li><a href="#">서브메뉴1</a></li>
<li><a href="#">서브메뉴2</a></li>
<li><a href="#">서브메뉴3</a></li>
<li><a href="#">서브메뉴4</a></li>
</ul>
<h3 class="sub-title">KH 아카데미 소개</h3>
<p>
클라우드 서버를 이용한 웹 융합 응용 SW 개발자 양성과정
클라우드 서버를 이용한 웹 융합 응용 SW 개발자 양성과정
클라우드 서버를 이용한 웹 융합 응용 SW 개발자 양성과정
클라우드 서버를 이용한 웹 융합 응용 SW 개발자 양성과정
클라우드 서버를 이용한 웹 융합 응용 SW 개발자 양성과정
</p>
</aside>
<!-- 7. 3-cloumn 레이아웃으로 변경 -->
<div class="ad">
<!--
display : flex가 지정 된 내부 박스 모두 자동으로 수평
정렬 되지만 전체 너무 조정을 위해 article 너비 수정
-->
<img src="../resources/images/banner.PNG">
</div>
/* 기사 부분 */
article {
/* width : 74%; */
/* 2-column에서 3-column으로 변경 시 width 줄이기 */
width : 55%;
/* 컬럼 순서 변경
display : flex의 자식 요소에서 동작 */
order : 2;
}
/* 사이드바 */
aside {
width: 22%;
order : 3;
}
/* 광고 배너 */
.ad {
order : 1;
}
/* menu ----------------------------------------------------- */
#menu {
background-image: url(../images/menu-bg.jpg);
min-height: 100vh;
}
.menu-content {
max-width: 560px;
margin-top : 10%;
}
.menu-content .page-title {
text-align: center;
}
.menu-content p {
font-size: 1.125rem;
font-weight: bolder;
margin : 10px 0 0;
}
/* for mobile ----------------------------------- */
@media (max-width : 600px) {
.menu-content {
margin-top: 20%;
}
}
/* grid ----------------------------------------- */
.grid {
display: grid;
gap : 26px;
/* 처음 적용한 값 */
/* grid-template-columns: 1fr 1fr 1fr; */
/* 반응형 적용 1. 창의 너비가 작아졌을 때 이미지가 너무 작아지지 않도록 최소값 지정 */
/* grid-template-columns: repeat(3, minmax(240px, 1fr)); */
/* 반응형 적용 2. 2번째 3번째 요소가 잘려 보이므로 3열로 한정하지 않고
화면의 너비에 맞게 요소의 수 조정 */
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
margin-top: 6%;
margin-bottom: 50px;
}
.item p {
font-weight: bold;
text-align: center;
}
/* 타일형 레이아웃 변경
-> 강조하고 싶은 item에 big-box 클래스 부여 */
.big-box {
grid-column : 1/3;
grid-row : 1/3;
}
/* 큰 이미지와 작은 이미지의 높이 맞춤 */
.big-box img {
height: 94%;
/* 이미지 비율 맞춤 (자동 잘림) */
object-fit: cover;
}
/* for mobile ------------------------------- */
/* 타일형 레이아웃 변경으로 인해 폭이 좁아지면 메뉴끼리 크기가 맞지 않으므로
폭이 좁아질 경우 1-column으로 변경하기 */
@media (max-width : 600px) {
/* big-box 2개씩 자리차지하던 설정을 리셋 */
.big-box {
grid-column: auto;
grid-row : auto;
}
}
<!-- 4. 화면을 꽉 채우는 배경 이미지 배치 -->
<div id="menu" class="big-bg">
<!-- 2. header 만들기 -->
<header class="page-header wrapper">
<h1><a href="1_full-screen실습.html"><img class="logo" src="../resources/images/logo.jpg" alt="HOME"></a></h1>
<nav>
<ul class="main-nav">
<li><a href="2_column실습.html">News</a></li>
<li><a href="3_grid실습.html">Menu</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<!-- 3. 콘텐츠 부분 만들기 -->
<div class="menu-content wrapper">
<h2 class="page-title">Menu</h2>
<p>
클라우드 서버를 이용한 웹 융합 응용SW개발자 양성과정에 오신 여러분을 진심으로
환영합니다. 웹 어플리케이션 개발에 대한 기초를 다지기 위해 해당 과정에서
학습할 수 있는 하단의 메뉴를 확인해보세요.
</p>
</div>
</div>
/* for mobile ----------------------------------- */
@media (max-width : 600px) {
.menu-content {
margin-top: 20%;
}
}
/* grid ----------------------------------------- */
.grid {
display: grid;
gap : 26px;
/* 처음 적용한 값 */
/* grid-template-columns: 1fr 1fr 1fr; */
/* 반응형 적용 1. 창의 너비가 작아졌을 때 이미지가 너무 작아지지 않도록 최소값 지정 */
/* grid-template-columns: repeat(3, minmax(240px, 1fr)); */
/* 반응형 적용 2. 2번째 3번째 요소가 잘려 보이므로 3열로 한정하지 않고
화면의 너비에 맞게 요소의 수 조정 */
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
margin-top: 6%;
margin-bottom: 50px;
}
.item p {
font-weight: bold;
text-align: center;
}
/* 타일형 레이아웃 변경
-> 강조하고 싶은 item에 big-box 클래스 부여 */
.big-box {
grid-column : 1/3;
grid-row : 1/3;
}
/* 큰 이미지와 작은 이미지의 높이 맞춤 */
.big-box img {
height: 94%;
/* 이미지 비율 맞춤 (자동 잘림) */
object-fit: cover;
}
/* for mobile ------------------------------- */
/* 타일형 레이아웃 변경으로 인해 폭이 좁아지면 메뉴끼리 크기가 맞지 않으므로
폭이 좁아질 경우 1-column으로 변경하기 */
@media (max-width : 600px) {
/* big-box 2개씩 자리차지하던 설정을 리셋 */
.big-box {
grid-column: auto;
grid-row : auto;
}
}
단순히 요소가 페이지에 출력만 되는 것이 아니라 사용자의 동작에 따라 크기가 바뀌고 요소가 이동, 회전하는 것
애니메이션
단순히 요소가 페이지에 출력만 되는 것이 아니라 사용자의 동작에 따라 크기가 바뀌고 요소가 이동, 회정하는 것
2차원 변형
요소가 변형(이동,회전)할 때 수직,수평으로 이동하는 것으로 X축, Y축으로 나누어 페이지 내에서 이동하는 것
3차원 변형
요소가 변형(이동,회전)할 때 수직, 수평으로 이동뿐만 아니라 화면상에서 앞으로 이동하거나 뒤로 이동하는 것이 추가된 것으로 X,Y좌표 뿐만 아니라 Z좌표가 추가된 것
transform 속성
페이지에서 요소들을 변형시키려면 transform속성과 변형 함수를 이용 - 변형함수는 2차원 함수와 3차원 함수 구분
선택자 {
-접두사-transform : 변형함수
transform : 변형함수;
}
이전브라우저와 호환을 위해 접두사를 이용한 함수호출
변형/애니메이션
2차원 변형함수
<body>
<h1>애니메이션</h1>
<h3>transition</h3>
<p>
시간에 따라 웹 요소의 스타일 속성이 조금씩 바뀌는 것을 의미<br>
transition-duration : 애니메이션 효과를 얼마동안 줄지 설정<br>
transition-property : 애니메이션 효과를 적용할 프로퍼티
목록을 정의
</p>
<h3>transform</h3>
<p>
사용자의 동작에 따라 크기가 바뀌고 요소가 이동, 회전하는 것을
변형이라고 하고 transform 속성에 변형 함수를 사용해서 나타낼 수 있음<br>
변형이 부드럽게 이어지면 애니메이션이 됨
</p>
<ul>
<li>translate(x,y) : 지정한 크기만큼 x축, y축으로 이동</li>
<li>scale(x,y) : 지정한 크기만큼 x축, y축으로 확대/축소</li>
<li>rotate(각도) : 지정한 각도만큼 회전</li>
<li>skew(x, y) : 지정한 각도만큼 x축과 y축으로 요소 변형</li>
</ul>
translate ? (좌표값)
요소를 페이지의 일정좌표로 이동하는 함수
3d효과를 표현하기 위해서는 perspective함수을 사용해야함
선택자 {
transform : 함수명(이름) ;
}
scale ? (좌표값)
요소를 일정페이지 만큼 확대/축소 시키는 함수
양수 : 확대
음수 : 축소
선택자 {
transform : 함수명(이름) ;
}
rotate ? (좌표값)
지정한 각도만큼 요소를 시계방향(양수)이나 반대방향(음수)으로 회전시키는 함수
선택자 {
transform : 함수명(이름) ;
}
skew ? (좌표값)
2차원만 가능 지정한 각도만큼 요소를 비틀어 변형하는 함수
선택자 {
transform : 함수명(이름) ;
}
추가 변형속성
transform-origin
변형기준을 x,y,x축을 기준으로 했으나 특정지점을 기준으로 변형할 수 있게 하는 속성
선택자 {
trasform-origin : x y z ;
}
transform-origin
변형기준을 x,y,x축을 기준으로 했으나 특정지점을 기준으로 변형할 수 있게 하는 속성
선택자 {
trasform-origin : x y z ;
}
perspective
화면에서 원근감을 갖게 하는 속성
다른 변형과 적용하려면 먼저 적용되어야 한다.
선택자 {
perspective : 숫자(단위);
}
transform-style
여러가지 변형을 동시에 하는 경우 부모 요소에서 적용한 3D변형을 하위요소에 적용하는 속성
<h3>keyframes</h3>
<p>
@keyframes 을 사용하면 간단한 애니메이션 여러 개를
한꺼번에 실행할 수 있음<br>
@keyframes에는 애니메이션 이름과 CSS 속성을 시점을
나누어 설정함<br>
EX. from ~ to, 0% ~ 30% ~ 60% ~ 100% 등<br>
애니메이션을 적용하기 위해 아래와 같은 속성 적용<br>
animation-name : 애니메이션 이름<br>
animation-duration : 애니메이션 실행 시간<br>
animation-direction : 애니메이션 반복 방향
(처음부터, 끝나면 다시 역순으로)<br>
animation-iteration-count : 반복 횟수 (숫자 또는 무한)
</p>
<img class="pika" id="jump" src="../resources/images/pikachu.png">
<hr>
<img class="pika" id="shake" src="../resources/images/pikachu.png">
</body>
/* @keyframes 정의 */
/* 1. 시작 지점과 끝 지점 두 개만 있는 경우 */
@keyframes jump {
from {
margin-left: 300px;
}
to {
margin-left : 100px;
margin-bottom : 200px;
}
}
/* 애니메이션 jump를 #jump img에 적용 */
#jump {
/* keyframes에서 정한 이름을 작성 */
animation-name: jump;
/* 애니메이션의 실행 시간을 지정하는 속성 */
animation-duration: 2s;
/* 애니메이션을 얼만큼 반복할지 설정 */
animation-iteration-count: 5;
/* 애니메이션 반복 시 처음부터 시작 or 끝에서 역순으로 */
animation-direction: normal;
}
/* 2. 중간 작업이 있는 경우 */
@keyframes shake {
0% {
border : 5px solid black;
}
50% {
margin-left : 300px;
border : 10px solid black;
border-radius: 50%;
transform: translate(50px, 50px);
}
100% {
margin-left : 600px;
border : 5px solid black;
transform : rotate(45deg);
}
}
/* 애니메이션 shake를 #shake img에 적용 */
#shake {
/* alternate : 반복 시 역순으로
infinite : 무한 반복 */
animation: shake 2s alternate infinite;
}
<body>
<h1>레이아웃 스타일</h1>
<h3>width와 height</h3>
<p>
내용이 차지하고 있는 영역의 크기를 조절할 수 있는 속성
</p>
<h4>고정 크기</h4>
<div id="test1" class="size-test"></div>
<h4>가변 크기</h4>
<div id="test2" class="size-test"></div>
<hr>
<h3>화면 배치 방법 변경</h3>
<p>
블럭 요소와 인라인 요소의 속성을 변경하여 배치 방식을
변경할 수 있다<br>
블럭 요소 : 한 줄 전체를 차지하는 요소.
한 줄에 여러 요소가 올 수 없는 요소.<br>
Ex. div, hn, p, hr, ul, ol, form, table, ... 등등<br>
인라인 요소 : 한 줄에서 일부분만 차지하는 요소.
한 줄에 여러 요소가 올 수 있는 요소.<br>
Ex. span, img, input, textarea, label, button, br, ... 등등
</p>
<h4>블럭 요소를 인라인 요소로 변경</h4>
<p>
>> display : inline 테스트<br>
인라인 요소로 변경 되면서 width와 height 속성이 무시된다.
</p>
<div class="block block-test1 area1">첫 번째 영역</div>
<div class="block block-test1 area2">두 번째 영역</div>
<div class="block block-test1 area3">세 번째 영역</div>
<div class="block block-test1 area4">네 번째 영역</div>
<div class="block block-test1 area5">다섯 번째 영역</div>
<h4>인라인 요소를 블럭 요소로 변경</h4>
<p>
>> display : block 테스트<br>
인라인 요소를 블럭 요소로 변경하면 width와 height 값을
지정할 수 있다.
</p>
<span class="block block-test2 area1">첫 번째 영역</span>
<span class="block block-test2 area2">두 번째 영역</span>
<span class="block block-test2 area3">세 번째 영역</span>
<span class="block block-test2 area4">네 번째 영역</span>
<span class="block block-test2 area5">다섯 번째 영역</span>
.block-test2 {
display: block;
<h4>블럭 요소를 인라인 요소로 변경2</h4>
<p>
>> display : inline-block 테스트<br>
영역은 인라인 요소로 변경되지만 내용은 블럭 요소로 지정 되어
width와 height 속성을 설정할 수 있다.
</p>
<div class="block block-test3 area1">첫 번째 영역</div>
<div class="block block-test3 area2">두 번째 영역</div>
<div class="block block-test3 area3">세 번째 영역</div>
<div class="block block-test3 area4">네 번째 영역</div>
<div class="block block-test3 area5">다섯 번째 영역</div>
<body>
<h1>배치 관련 스타일</h1>
<p>
<b>position 속성</b><br>
static : 일반적인 문서 흐름에 따라 배치(기본 값).
top, right, bottom, left 속성이 아무런 영향을 주지 못함.<br>
relative : 일반적인 문서 흐름에 따라 배치.
자신 기준으로 top, right, bottom, left의 값에 따라 오프셋 적용.
다른 요소에는 영향을 주지 않아 공간 차지는 static일 때와 같음.<br>
absolute : 일반적인 문서 흐름에서 제외되며 공간도 차지하지 않음.
가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치 되며
top, right, bottom, left의 값이 위치 결정.<br>
fixed : 일반적인 문서 흐름에서 제외되며 공간도 차지하지 않음.
해당 요소가 모든 페이지의 같은 위치에 출력.<br>
</p>
<h3>static과 relative</h3>
<div class="inline-block" id="first"></div>
<div class="inline-block" id="second"></div>
<div class="inline-block" id="third"></div>
<title>10_레이아웃스타일(배치)</title>
<style>
.inline-block {
display: inline-block;
width : 100px;
height: 100px;
background: orange;
}
#first {
position: static;
top : 20px;
left : 20px;
}
#second {
position: relative;
top : 20px;
left : 20px;
}
#third {
position : relative;
bottom: 20px;
right : 20px;
}
<h3>visibility</h3>
<p>
페이지에 특정 속성을 보이거나 보이지 않게 하는 속성<br>
display : none 속성은 페이지 공간도 차지하지 않고,
visibility : hidden 속성은 페이지 공간을 차지한다
</p>
<div class="vis-test vis-test1"></div>
<div class="vis-test vis-test2"></div>
<div class="vis-test vis-test3"></div>
페이지에 float설정되어 있으면 그 속성이 그대로 다음 요소에 영향을 미치는데 이를 초기화시키는 속성
선택자 {
clear : 속성값;
}
▼ 코드 예시 보기 ▼
<body>
<h1>Flexbox로 수평 정렬</h1>
<p>
Flexible Box Layout Module의 의미로
이전에는 float 속성을 많이 사용했다면
최근에는 Flexbox를 많이 사용함
</p>
<div class="container">
<div class="item">div 1</div>
<div class="item">div 2</div>
<div class="item">div 3</div>
<div class="item">div 4</div>
<div class="item">div 5</div>
<div class="item">div 6</div>
<div class="item">div 7</div>
<div class="item">div 8</div>
</div>
</body>
<style>
.item {
background : lightgray;
color : white;
margin : 10px;
padding : 10px;
}
.container {
/* 부모 요소 display : flex; 추가 시 수평 정렬 */
display: flex;
/* flex-direction : 배치 방향 */
/* 오른쪽에서 왼쪽으로 */
flex-direction: row-reverse;
/* 위에서 아래로 */
flex-direction: column;
/* 아래에서 위로 */
flex-direction: column-reverse;
/* 왼쪽에서 오른쪽으로 */
flex-direction: row;
/* flex-wrap : 줄바꿈 */
/* 줄바꿈 하지 않음 */
flex-wrap: nowrap;
/* 줄바꿈 여러 줄의 경우 아래에서 위로 */
flex-wrap: wrap-reverse;
/* 줄바꿈 여러 줄의 경우 위에서 아래로 */
flex-wrap: wrap;
/* justify-content : 수평 방향 맞춤 */
/* 오른쪽 맞춤 */
justify-content: flex-end;
/* 가운데 맞춤 */
justify-content: center;
/* 양쪽 끝에 붙이고 균등하게 맞춤 */
justify-content: space-between;
/* 균등하게 맞춤 */
justify-content: space-around;
/* 왼쪽 맞춤 */
justify-content: flex-start;
/* align-items : 수직 방향 맞춤 */
/* vh는 뷰 포트의 높이 기준 단위 */
height: 100vh;
/* 부모 요소의 높이 or 콘텐츠 많은 자식 요소 높이 맞춤 */
align-items: stretch;
/* 부모 요소 윗 부분 배치 */
align-items: flex-start;
/* 부모 요소 아랫 부분 배치 */
align-items: flex-end;
/* 중앙 배치 */
align-items: center;
}
</style>
<body>
<h1>Grid로 타일 형태 정렬</h1>
<p>
Grid는 2차원으로 수평 수직을 동시에 영역을 나눌 수 있음
</p>
<div class="container">
<div class="item">div 1</div>
<div class="item">div 2</div>
<div class="item">div 3</div>
<div class="item">div 4</div>
<div class="item">div 5</div>
<div class="item">div 6</div>
<div class="item">div 7</div>
<div class="item">div 8</div>
<div class="item">div 9</div>
</div>
</body>
<style>
.item {
background: lightgray;
color : white;
padding : 10px;
}
.container {
display: grid;
/* grid-template-columns : 그리드 아이템 너비
한 열에 그리드 아이템을 여러 개 놓을 경우 띄어쓰기로 구분
필요한 그리드 아이템 수 만큼 너비 지정 */
grid-template-columns: 200px 200px 200px;
grid-template-columns: 100px 200px auto;
/* 고정 너비 사용 시
화면 너비가 넓어지면 공간 발생
회면 너비가 좁아지면 화면 잘림
그리드에서 사용하는 fr(fraction) 단위 사용
*/
grid-template-columns : 1fr 1fr 1fr;
/* 반복 되는 패턴이 있다면 repeat 사용 */
grid-template-columns: repeat(3, 1fr);
/* gap : 그리드 아이템 사이의 여백 */
row-gap : 20px;
column-gap: 10px;
gap : 20px 10px;
gap : 20px;
/* grid-template-rows : 그리드 아이템 높이
여러 줄을 만들 경우 띄어쓰기 구분 */
grid-template-rows: 200px 200px 200px;
/* row 개수를 미리 알 수 없을 때는 */
grid-auto-rows : 200px;
grid-auto-rows: minmax(200px, auto);
}
.item:nth-child(1) {
/* 컬럼 시작/끝 설정 */
grid-column-start: 1;
grid-column-end: 3;
/* 컬럼 시작/끝 설정 한 번에 */
grid-column: 1/3;
grid-column: 1/span 2;
/* 로우 시작/끝 설정 */
grid-row-start: 1;
grid-row-end: 3;
/* 로우 시작/끝 설정 한 번에 */
grid-row : 1/3;
grid-row : 1/span 2;
/* grid-area */
/* 로우시작/컬럼시작/로우끝/컬럼끝 */
grid-area : 1/1/3/3;
}
</style>
<body>
<h1>배경색과 배경 이미지</h1>
<p>
body { background-color : 색상명 | rgb | rgba | hsl | hsla | 16진수; }
로 배경색을 지정할 수 있다.
</p>
<hr>
<h3>div 영역 테스트</h3>
<p>
div 영역을 설정하는 경우 배경색을 지정하기 위해서는
div에 배경색을 별도로 지정해야 한다.
</p>
<div id="div-bg">
생성하기 뛰노는 가진 청춘의 같은 보이는 군영과 것이다. 그것을 있는 있는 길을 많이 위하여서. 싶이 만물은 끝에 것은 끓는 든 것이다. 과실이 풍부하게 뜨고, 대한 많이 날카로우나 주는 고행을 때문이다. 같은 웅대한 천하를 봄바람이다. 우리 이성은 튼튼하며, 같이 때문이다. 내려온 싶이 인간이 철환하였는가? 만천하의 있는 있으며, 어디 못하다 풀밭에 칼이다. 아름답고 동산에는 이상의 이상 칼이다. 그들에게 인생의 반짝이는 무엇이 못할 사랑의 붙잡아 군영과 앞이 그리하였는가?
우는 길지 못하다 청춘은 구하지 가지에 이상이 힘있다. 피고, 부패를 인간의 위하여 열매를 그러므로 피다. 가치를 자신과 우리 평화스러운 방지하는 있으랴? 없으면, 자신과 되려니와, 실현에 풍부하게 광야에서 뿐이다. 있을 쓸쓸한 꽃이 있으랴? 많이 품에 곳이 끝에 그들의 유소년에게서 피부가 날카로우나 듣는다. 위하여서, 오직 두손을 전인 어디 이 풍부하게 되려니와, 쓸쓸하랴? 할지라도 예수는 이상은 피어나는 것은 그리하였는가? 목숨이 내려온 곳이 하는 가치를 현저하게 있는가? 시들어 그들은 우리 굳세게 사는가 약동하다. 얼마나 따뜻한 무한한 청춘의 없으면 힘있다.
그들의 눈이 불러 설레는 이상이 가치를 끓는 있다. 생생하며, 뛰노는 때에, 천하를 보는 우리의 열락의 내려온 보이는 있는가? 청춘의 길을 때에, 천하를 심장은 뜨고, 방지하는 것이다. 구할 꾸며 몸이 든 찾아 말이다. 주며, 소담스러운 위하여 구하지 이상은 때문이다. 주며, 청춘의 힘차게 발휘하기 때까지 그림자는 우리 노래하며 듣는다. 청춘의 수 것은 든 인생의 같지 가진 끓는다. 무엇을 피고 온갖 그들의 부패를 군영과 끓는다. 청춘 예수는 영락과 바로 가는 때에, 꽃 운다. 기쁘며, 것은 소금이라 청춘의 방황하여도, 철환하였는가? 어디 예가 우리의 이것이다.
</div>
<h3>배경 적용 범위 조정</h3>
<p>
div 영역의 배경 적용 범위를 지정할 때 background-clip
속성을 사용한다.
</p>
<div class="div-test" id="div1">
생성하기 뛰노는 가진 청춘의 같은 보이는 군영과 것이다. 그것을 있는 있는 길을 많이 위하여서. 싶이 만물은 끝에 것은 끓는 든 것이다. 과실이 풍부하게 뜨고, 대한 많이 날카로우나 주는 고행을 때문이다. 같은 웅대한 천하를 봄바람이다. 우리 이성은 튼튼하며, 같이 때문이다. 내려온 싶이 인간이 철환하였는가? 만천하의 있는 있으며, 어디 못하다 풀밭에 칼이다. 아름답고 동산에는 이상의 이상 칼이다. 그들에게 인생의 반짝이는 무엇이 못할 사랑의 붙잡아 군영과 앞이 그리하였는가?
우는 길지 못하다 청춘은 구하지 가지에 이상이 힘있다. 피고, 부패를 인간의 위하여 열매를 그러므로 피다. 가치를 자신과 우리 평화스러운 방지하는 있으랴? 없으면, 자신과 되려니와, 실현에 풍부하게 광야에서 뿐이다. 있을 쓸쓸한 꽃이 있으랴? 많이 품에 곳이 끝에 그들의 유소년에게서 피부가 날카로우나 듣는다. 위하여서, 오직 두손을 전인 어디 이 풍부하게 되려니와, 쓸쓸하랴? 할지라도 예수는 이상은 피어나는 것은 그리하였는가? 목숨이 내려온 곳이 하는 가치를 현저하게 있는가? 시들어 그들은 우리 굳세게 사는가 약동하다. 얼마나 따뜻한 무한한 청춘의 없으면 힘있다.
그들의 눈이 불러 설레는 이상이 가치를 끓는 있다. 생생하며, 뛰노는 때에, 천하를 보는 우리의 열락의 내려온 보이는 있는가? 청춘의 길을 때에, 천하를 심장은 뜨고, 방지하는 것이다. 구할 꾸며 몸이 든 찾아 말이다. 주며, 소담스러운 위하여 구하지 이상은 때문이다. 주며, 청춘의 힘차게 발휘하기 때까지 그림자는 우리 노래하며 듣는다. 청춘의 수 것은 든 인생의 같지 가진 끓는다. 무엇을 피고 온갖 그들의 부패를 군영과 끓는다. 청춘 예수는 영락과 바로 가는 때에, 꽃 운다. 기쁘며, 것은 소금이라 청춘의 방황하여도, 철환하였는가? 어디 예가 우리의 이것이다.
</div>
<div class="div-test" id="div2">
생성하기 뛰노는 가진 청춘의 같은 보이는 군영과 것이다. 그것을 있는 있는 길을 많이 위하여서. 싶이 만물은 끝에 것은 끓는 든 것이다. 과실이 풍부하게 뜨고, 대한 많이 날카로우나 주는 고행을 때문이다. 같은 웅대한 천하를 봄바람이다. 우리 이성은 튼튼하며, 같이 때문이다. 내려온 싶이 인간이 철환하였는가? 만천하의 있는 있으며, 어디 못하다 풀밭에 칼이다. 아름답고 동산에는 이상의 이상 칼이다. 그들에게 인생의 반짝이는 무엇이 못할 사랑의 붙잡아 군영과 앞이 그리하였는가?
우는 길지 못하다 청춘은 구하지 가지에 이상이 힘있다. 피고, 부패를 인간의 위하여 열매를 그러므로 피다. 가치를 자신과 우리 평화스러운 방지하는 있으랴? 없으면, 자신과 되려니와, 실현에 풍부하게 광야에서 뿐이다. 있을 쓸쓸한 꽃이 있으랴? 많이 품에 곳이 끝에 그들의 유소년에게서 피부가 날카로우나 듣는다. 위하여서, 오직 두손을 전인 어디 이 풍부하게 되려니와, 쓸쓸하랴? 할지라도 예수는 이상은 피어나는 것은 그리하였는가? 목숨이 내려온 곳이 하는 가치를 현저하게 있는가? 시들어 그들은 우리 굳세게 사는가 약동하다. 얼마나 따뜻한 무한한 청춘의 없으면 힘있다.
그들의 눈이 불러 설레는 이상이 가치를 끓는 있다. 생생하며, 뛰노는 때에, 천하를 보는 우리의 열락의 내려온 보이는 있는가? 청춘의 길을 때에, 천하를 심장은 뜨고, 방지하는 것이다. 구할 꾸며 몸이 든 찾아 말이다. 주며, 소담스러운 위하여 구하지 이상은 때문이다. 주며, 청춘의 힘차게 발휘하기 때까지 그림자는 우리 노래하며 듣는다. 청춘의 수 것은 든 인생의 같지 가진 끓는다. 무엇을 피고 온갖 그들의 부패를 군영과 끓는다. 청춘 예수는 영락과 바로 가는 때에, 꽃 운다. 기쁘며, 것은 소금이라 청춘의 방황하여도, 철환하였는가? 어디 예가 우리의 이것이다.
</div>
<div class="div-test" id="div3">
생성하기 뛰노는 가진 청춘의 같은 보이는 군영과 것이다. 그것을 있는 있는 길을 많이 위하여서. 싶이 만물은 끝에 것은 끓는 든 것이다. 과실이 풍부하게 뜨고, 대한 많이 날카로우나 주는 고행을 때문이다. 같은 웅대한 천하를 봄바람이다. 우리 이성은 튼튼하며, 같이 때문이다. 내려온 싶이 인간이 철환하였는가? 만천하의 있는 있으며, 어디 못하다 풀밭에 칼이다. 아름답고 동산에는 이상의 이상 칼이다. 그들에게 인생의 반짝이는 무엇이 못할 사랑의 붙잡아 군영과 앞이 그리하였는가?
우는 길지 못하다 청춘은 구하지 가지에 이상이 힘있다. 피고, 부패를 인간의 위하여 열매를 그러므로 피다. 가치를 자신과 우리 평화스러운 방지하는 있으랴? 없으면, 자신과 되려니와, 실현에 풍부하게 광야에서 뿐이다. 있을 쓸쓸한 꽃이 있으랴? 많이 품에 곳이 끝에 그들의 유소년에게서 피부가 날카로우나 듣는다. 위하여서, 오직 두손을 전인 어디 이 풍부하게 되려니와, 쓸쓸하랴? 할지라도 예수는 이상은 피어나는 것은 그리하였는가? 목숨이 내려온 곳이 하는 가치를 현저하게 있는가? 시들어 그들은 우리 굳세게 사는가 약동하다. 얼마나 따뜻한 무한한 청춘의 없으면 힘있다.
그들의 눈이 불러 설레는 이상이 가치를 끓는 있다. 생생하며, 뛰노는 때에, 천하를 보는 우리의 열락의 내려온 보이는 있는가? 청춘의 길을 때에, 천하를 심장은 뜨고, 방지하는 것이다. 구할 꾸며 몸이 든 찾아 말이다. 주며, 소담스러운 위하여 구하지 이상은 때문이다. 주며, 청춘의 힘차게 발휘하기 때까지 그림자는 우리 노래하며 듣는다. 청춘의 수 것은 든 인생의 같지 가진 끓는다. 무엇을 피고 온갖 그들의 부패를 군영과 끓는다. 청춘 예수는 영락과 바로 가는 때에, 꽃 운다. 기쁘며, 것은 소금이라 청춘의 방황하여도, 철환하였는가? 어디 예가 우리의 이것이다.
</div>
<h3>배경 이미지 테스트</h3>
<p>
background-image 속성을 이용하여 배경 사진을 넣을 수 있다.
사진 크기에 따라 자동 반복하여 이미지가 나타난다.
배경 이미지의 반복 방법을 지정하기 위해 background-repeat 속성을
이용할 수 있다.
배경 이미지가 요소보다 크거나 작은 경우 배경 이미지의 크기를
background-size 속성으로 변경할 수 있다.
</p>
<div id="bg-img"></div>
</body>
</html>
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>05_텍스트 스타일</title>
<!-- 구글 웹 폰트 추가 -->
<link href="https://fonts.googleapis.com/css2?family=Festive&display=swap" rel="stylesheet">
<!-- 외부 스타일 시트 링크 -->
<link href="../resources/css/font.css" rel="stylesheet" type="text/css">
<link href="../resources/css/textstyle.css" rel="stylesheet" type="text/css">
<link href="../resources/css/paragraph.css" rel="stylesheet" type="text/css">
<link href="../resources/css/liststyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>텍스트 스타일</h1>
<hr>
<h2>글꼴 관련 스타일</h2>
<h3>font-family 속성 : 텍스트의 글꼴을 지정할 때 사용한다.</h3>
<pre> 선택자 { font-family : 글꼴이름; }의 형식으로 사용한다. </pre>
<p id="ff1">글꼴 변경 테스트1</p>
<p id="ff2">글꼴 변경 테스트2</p>
<p id="ff3">글꼴 변경 테스트3</p>
<h4>웹 폰트 사용하는 방법</h4>
<p>웹 폰트 제공 사이트 예시 : <a href="http://fonts.google.com" target="_blank">구글 웹 폰트 사이트로</a></p>
<p id="web-font">font style test</p>
<h3>font-size 속성 : 텍스트의 크기를 변경할 때 사용한다.</h3>
<p>
상대 크기 <br>
- em : 해당 폰트의 대문자 M의 너비를 기준으로 함.
부모 요소의 크기가 기준으로 배수를 의미. ex) 1.5em은 1.5배<br>
- rem : 최상위의 부모 요소의 크기 기준으로 배수를 의미.<br>
- % : 기본 글꼴의 크기에 대하여 상대적인 값을 가짐<br>
절대 크기 <br>
- px : Pixels, 표시장치(모니터)에 따라서 상대적인 크기를 가짐<br>
- pt : Points, 기본 지정된 크기를 가짐. 1 포인트는 1/72 인치
</p>
<h3>text-transform 속성 : 영문 텍스트의 대소문자 변환 시 사용한다.</h3>
<pre> 선택자 { text-transform : none | capitalize | uppercase | lowercase; }의 형식으로 표현한다.</pre>
<ul>
<li id="tt1">none</li>
<li id="tt2">capitalize : 영문자의 첫 글자만 대문자로</li>
<li id="tt3">uppercase : 모든 영문자를 대문자로</li>
<li id="tt4">lowercase : 모든 영문자를 소문자로</li>
</ul>
<h3>text-shadow 속성 : 텍스트에 그림자 효과를 줄 때 사용한다.</h3>
<pre> 선택자 { text-shadow : none | 가로거리 세로거리 번짐정도 색상; }의 형식으로 표현한다.</pre>
<div id="bg">
<span id="ts1" class="shadow">HTML5</span>
<span id="ts2" class="shadow">HTML5</span>
<span id="ts3" class="shadow">HTML5</span>
<span id="ts4" class="shadow">HTML5</span>
</div>
/* text-shadow 속성 */
/* 배경 설정 */
#bg {
background: black;
margin : 30px;
padding : 50px;
}
/* 공통 속성으로 사이즈와 두께를 지정 */
.shadow {
font-size : 100px;
line-height: 30px;
font-weight: 900;
}
/* 그림자 효과 (가로, 세로, 번짐, 색상) */
#ts1 {
color : orangered;
text-shadow: 5px 5px orange;
}
#ts2 {
color : white;
text-shadow: 0px 1px 20px #fff;
}
#ts3 {
color : white;
text-shadow: 1px 1px 20px #6f0;
}
#ts4 {
color : black;
text-shadow: 0px 0px 4px #ccc,
0px -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -19px 18px #f20;
}
<h3>white-space 속성 : 텍스트의 공백을 처리할 때 사용한다. </h3>
<h3>letter-spacing 속성 : 낱개 글자의 간격을 조정할 때 사용한다. </h3>
<h3>word-spacing 속성 : 단어와 단어 사이 간격을 조정할 때 사용한다. </h3>
<p id="space1">모든 국민은 고문을 받지 아니하며, 형사상 자기에게 불리한 진술을 강요당하지 아니한다. 공개하지 아니한 회의내용의 공표에 관하여는 법률이 정하는 바에 의한다.
명령·규칙 또는 처분이 헌법이나 법률에 위반되는 여부가 재판의 전제가 된 경우에는 대법원은 이를 최종적으로 심사할 권한을 가진다. 국가는 농수산물의 수급균형과 유통구조의 개선에 노력하여 가격안정을 도모함으로써 농·어민의 이익을 보호한다.<p>
<p id="space2">모든 국민은 고문을 받지 아니하며, 형사상 자기에게 불리한 진술을 강요당하지 아니한다. 공개하지 아니한 회의내용의 공표에 관하여는 법률이 정하는 바에 의한다.
명령·규칙 또는 처분이 헌법이나 법률에 위반되는 여부가 재판의 전제가 된 경우에는 대법원은 이를 최종적으로 심사할 권한을 가진다. 국가는 농수산물의 수급균형과 유통구조의 개선에 노력하여 가격안정을 도모함으로써 농·어민의 이익을 보호한다.<p>
<p id="space3">모든 국민은 고문을 받지 아니하며, 형사상 자기에게 불리한 진술을 강요당하지 아니한다. 공개하지 아니한 회의내용의 공표에 관하여는 법률이 정하는 바에 의한다.
명령·규칙 또는 처분이 헌법이나 법률에 위반되는 여부가 재판의 전제가 된 경우에는 대법원은 이를 최종적으로 심사할 권한을 가진다. 국가는 농수산물의 수급균형과 유통구조의 개선에 노력하여 가격안정을 도모함으로써 농·어민의 이익을 보호한다.<p>
<p id="space4">모든 국민은 고문을 받지 아니하며, 형사상 자기에게 불리한 진술을 강요당하지 아니한다. 공개하지 아니한 회의내용의 공표에 관하여는 법률이 정하는 바에 의한다.
명령·규칙 또는 처분이 헌법이나 법률에 위반되는 여부가 재판의 전제가 된 경우에는 대법원은 이를 최종적으로 심사할 권한을 가진다. 국가는 농수산물의 수급균형과 유통구조의 개선에 노력하여 가격안정을 도모함으로써 농·어민의 이익을 보호한다.<p>
<p id="space5">모든 국민은 고문을 받지 아니하며, 형사상 자기에게 불리한 진술을 강요당하지 아니한다. 공개하지 아니한 회의내용의 공표에 관하여는 법률이 정하는 바에 의한다.
명령·규칙 또는 처분이 헌법이나 법률에 위반되는 여부가 재판의 전제가 된 경우에는 대법원은 이를 최종적으로 심사할 권한을 가진다. 국가는 농수산물의 수급균형과 유통구조의 개선에 노력하여 가격안정을 도모함으로써 농·어민의 이익을 보호한다.<p>
/* white-space 속성 */
/* letter-spacing 속성 */
/* word-spacing 속성 */
#space1 {
/* 여러 개의 공백을 하나로 표시 */
white-space: normal;
/* 낱개 글자의 간격 조정 */
letter-spacing: 5px;
}
#space2 {
/* 여러 개의 공백 하나로 표시, 줄 바꾸지 않고 한 줄 표시 */
white-space: nowrap;
/* 단어 사이의 간격 조정 */
word-spacing: 10px;
}
#space3 {
/* 여러 개의 공백을 그대로 표시 */
white-space: pre;
}
#space4 {
/* 여러 개의 공백을 하나로 표시,
영역 넘어가면 자동 줄바꿈 */
white-space: pre-line;
}
#space5 {
/* 여러 개의 공백을 그대로 표시,
영역 넘어가면 자동 줄바꿈 */
white-space: pre-wrap;
}
<h2>문단 스타일</h2>
<h3>direction 속성 : 텍스트 글자 쓰기 방향 지정</h3>
<h4>왼쪽에서 오른쪽으로 텍스트를 표시</h4>
<p id="p1">꽃이 거친 쓸쓸한 것이다. 피가 같이, 얼마나 뭇 힘차게 우리 것은 눈이 아니한 있는가? 이는 얼마나 봄바람을 우리의 같지 힘있다. 인도하겠다는 가치를 그들의 거선의 쓸쓸하랴? 든 불어 피가 피부가 인생을 긴지라 봄바람이다. 그들은 이는 어디 인생에 이상의 커다란 이상 찾아다녀도, 스며들어 이것이다. 갑 보배를 거친 꾸며 자신과 끓는다. 인간에 이상 인류의 관현악이며, 것이다. 인간이 인생에 천지는 커다란 사라지지 칼이다.</p>
<h4>오른쪽에서 왼쪽으로 텍스트를 표시</h4>
<p id="p2">꽃이 거친 쓸쓸한 것이다. 피가 같이, 얼마나 뭇 힘차게 우리 것은 눈이 아니한 있는가? 이는 얼마나 봄바람을 우리의 같지 힘있다. 인도하겠다는 가치를 그들의 거선의 쓸쓸하랴? 든 불어 피가 피부가 인생을 긴지라 봄바람이다. 그들은 이는 어디 인생에 이상의 커다란 이상 찾아다녀도, 스며들어 이것이다. 갑 보배를 거친 꾸며 자신과 끓는다. 인간에 이상 인류의 관현악이며, 것이다. 인간이 인생에 천지는 커다란 사라지지 칼이다.</p>
<h3>text-align 속성 : 텍스트 정렬하기</h3>
<h4>왼쪽 정렬(기본값)</h4>
<p id="p3">꽃이 거친 쓸쓸한 것이다. 피가 같이, 얼마나 뭇 힘차게 우리 것은 눈이 아니한 있는가? 이는 얼마나 봄바람을 우리의 같지 힘있다. 인도하겠다는 가치를 그들의 거선의 쓸쓸하랴? 든 불어 피가 피부가 인생을 긴지라 봄바람이다. 그들은 이는 어디 인생에 이상의 커다란 이상 찾아다녀도, 스며들어 이것이다. 갑 보배를 거친 꾸며 자신과 끓는다. 인간에 이상 인류의 관현악이며, 것이다. 인간이 인생에 천지는 커다란 사라지지 칼이다.</p>
<h4>오른쪽 정렬</h4>
<p id="p4">꽃이 거친 쓸쓸한 것이다. 피가 같이, 얼마나 뭇 힘차게 우리 것은 눈이 아니한 있는가? 이는 얼마나 봄바람을 우리의 같지 힘있다. 인도하겠다는 가치를 그들의 거선의 쓸쓸하랴? 든 불어 피가 피부가 인생을 긴지라 봄바람이다. 그들은 이는 어디 인생에 이상의 커다란 이상 찾아다녀도, 스며들어 이것이다. 갑 보배를 거친 꾸며 자신과 끓는다. 인간에 이상 인류의 관현악이며, 것이다. 인간이 인생에 천지는 커다란 사라지지 칼이다.</p>
<h4>가운데 정렬</h4>
<p id="p5">꽃이 거친 쓸쓸한 것이다. 피가 같이, 얼마나 뭇 힘차게 우리 것은 눈이 아니한 있는가? 이는 얼마나 봄바람을 우리의 같지 힘있다. 인도하겠다는 가치를 그들의 거선의 쓸쓸하랴? 든 불어 피가 피부가 인생을 긴지라 봄바람이다. 그들은 이는 어디 인생에 이상의 커다란 이상 찾아다녀도, 스며들어 이것이다. 갑 보배를 거친 꾸며 자신과 끓는다. 인간에 이상 인류의 관현악이며, 것이다. 인간이 인생에 천지는 커다란 사라지지 칼이다.</p>
<h4>양쪽 정렬</h4>
<p id="p6">꽃이 거친 쓸쓸한 것이다. 피가 같이, 얼마나 뭇 힘차게 우리 것은 눈이 아니한 있는가? 이는 얼마나 봄바람을 우리의 같지 힘있다. 인도하겠다는 가치를 그들의 거선의 쓸쓸하랴? 든 불어 피가 피부가 인생을 긴지라 봄바람이다. 그들은 이는 어디 인생에 이상의 커다란 이상 찾아다녀도, 스며들어 이것이다. 갑 보배를 거친 꾸며 자신과 끓는다. 인간에 이상 인류의 관현악이며, 것이다. 인간이 인생에 천지는 커다란 사라지지 칼이다.</p>
<h3>line-height 속성 : 줄 간격 조절하기</h3>
<h4>기본 간격</h4>
<p id="p7">생성하기 뛰노는 가진 청춘의 같은 보이는 군영과 것이다. 그것을 있는 있는 길을 많이 위하여서. 싶이 만물은 끝에 것은 끓는 든 것이다. 과실이 풍부하게 뜨고, 대한 많이 날카로우나 주는 고행을 때문이다. 같은 웅대한 천하를 봄바람이다. 우리 이성은 튼튼하며, 같이 때문이다. 내려온 싶이 인간이 철환하였는가? 만천하의 있는 있으며, 어디 못하다 풀밭에 칼이다. 아름답고 동산에는 이상의 이상 칼이다. 그들에게 인생의 반짝이는 무엇이 못할 사랑의 붙잡아 군영과 앞이 그리하였는가?
우는 길지 못하다 청춘은 구하지 가지에 이상이 힘있다. 피고, 부패를 인간의 위하여 열매를 그러므로 피다. 가치를 자신과 우리 평화스러운 방지하는 있으랴? 없으면, 자신과 되려니와, 실현에 풍부하게 광야에서 뿐이다. 있을 쓸쓸한 꽃이 있으랴? 많이 품에 곳이 끝에 그들의 유소년에게서 피부가 날카로우나 듣는다. 위하여서, 오직 두손을 전인 어디 이 풍부하게 되려니와, 쓸쓸하랴? 할지라도 예수는 이상은 피어나는 것은 그리하였는가? 목숨이 내려온 곳이 하는 가치를 현저하게 있는가? 시들어 그들은 우리 굳세게 사는가 약동하다. 얼마나 따뜻한 무한한 청춘의 없으면 힘있다.
그들의 눈이 불러 설레는 이상이 가치를 끓는 있다. 생생하며, 뛰노는 때에, 천하를 보는 우리의 열락의 내려온 보이는 있는가? 청춘의 길을 때에, 천하를 심장은 뜨고, 방지하는 것이다. 구할 꾸며 몸이 든 찾아 말이다. 주며, 소담스러운 위하여 구하지 이상은 때문이다. 주며, 청춘의 힘차게 발휘하기 때까지 그림자는 우리 노래하며 듣는다. 청춘의 수 것은 든 인생의 같지 가진 끓는다. 무엇을 피고 온갖 그들의 부패를 군영과 끓는다. 청춘 예수는 영락과 바로 가는 때에, 꽃 운다. 기쁘며, 것은 소금이라 청춘의 방황하여도, 철환하였는가? 어디 예가 우리의 이것이다.</p>
<h4>픽셀 고정 단위 간격</h4>
<p id="p8">생성하기 뛰노는 가진 청춘의 같은 보이는 군영과 것이다. 그것을 있는 있는 길을 많이 위하여서. 싶이 만물은 끝에 것은 끓는 든 것이다. 과실이 풍부하게 뜨고, 대한 많이 날카로우나 주는 고행을 때문이다. 같은 웅대한 천하를 봄바람이다. 우리 이성은 튼튼하며, 같이 때문이다. 내려온 싶이 인간이 철환하였는가? 만천하의 있는 있으며, 어디 못하다 풀밭에 칼이다. 아름답고 동산에는 이상의 이상 칼이다. 그들에게 인생의 반짝이는 무엇이 못할 사랑의 붙잡아 군영과 앞이 그리하였는가?
우는 길지 못하다 청춘은 구하지 가지에 이상이 힘있다. 피고, 부패를 인간의 위하여 열매를 그러므로 피다. 가치를 자신과 우리 평화스러운 방지하는 있으랴? 없으면, 자신과 되려니와, 실현에 풍부하게 광야에서 뿐이다. 있을 쓸쓸한 꽃이 있으랴? 많이 품에 곳이 끝에 그들의 유소년에게서 피부가 날카로우나 듣는다. 위하여서, 오직 두손을 전인 어디 이 풍부하게 되려니와, 쓸쓸하랴? 할지라도 예수는 이상은 피어나는 것은 그리하였는가? 목숨이 내려온 곳이 하는 가치를 현저하게 있는가? 시들어 그들은 우리 굳세게 사는가 약동하다. 얼마나 따뜻한 무한한 청춘의 없으면 힘있다.
그들의 눈이 불러 설레는 이상이 가치를 끓는 있다. 생생하며, 뛰노는 때에, 천하를 보는 우리의 열락의 내려온 보이는 있는가? 청춘의 길을 때에, 천하를 심장은 뜨고, 방지하는 것이다. 구할 꾸며 몸이 든 찾아 말이다. 주며, 소담스러운 위하여 구하지 이상은 때문이다. 주며, 청춘의 힘차게 발휘하기 때까지 그림자는 우리 노래하며 듣는다. 청춘의 수 것은 든 인생의 같지 가진 끓는다. 무엇을 피고 온갖 그들의 부패를 군영과 끓는다. 청춘 예수는 영락과 바로 가는 때에, 꽃 운다. 기쁘며, 것은 소금이라 청춘의 방황하여도, 철환하였는가? 어디 예가 우리의 이것이다.</p>
<h4>em 가변 단위 간격</h4>
<p id="p9">생성하기 뛰노는 가진 청춘의 같은 보이는 군영과 것이다. 그것을 있는 있는 길을 많이 위하여서. 싶이 만물은 끝에 것은 끓는 든 것이다. 과실이 풍부하게 뜨고, 대한 많이 날카로우나 주는 고행을 때문이다. 같은 웅대한 천하를 봄바람이다. 우리 이성은 튼튼하며, 같이 때문이다. 내려온 싶이 인간이 철환하였는가? 만천하의 있는 있으며, 어디 못하다 풀밭에 칼이다. 아름답고 동산에는 이상의 이상 칼이다. 그들에게 인생의 반짝이는 무엇이 못할 사랑의 붙잡아 군영과 앞이 그리하였는가?
우는 길지 못하다 청춘은 구하지 가지에 이상이 힘있다. 피고, 부패를 인간의 위하여 열매를 그러므로 피다. 가치를 자신과 우리 평화스러운 방지하는 있으랴? 없으면, 자신과 되려니와, 실현에 풍부하게 광야에서 뿐이다. 있을 쓸쓸한 꽃이 있으랴? 많이 품에 곳이 끝에 그들의 유소년에게서 피부가 날카로우나 듣는다. 위하여서, 오직 두손을 전인 어디 이 풍부하게 되려니와, 쓸쓸하랴? 할지라도 예수는 이상은 피어나는 것은 그리하였는가? 목숨이 내려온 곳이 하는 가치를 현저하게 있는가? 시들어 그들은 우리 굳세게 사는가 약동하다. 얼마나 따뜻한 무한한 청춘의 없으면 힘있다.
그들의 눈이 불러 설레는 이상이 가치를 끓는 있다. 생생하며, 뛰노는 때에, 천하를 보는 우리의 열락의 내려온 보이는 있는가? 청춘의 길을 때에, 천하를 심장은 뜨고, 방지하는 것이다. 구할 꾸며 몸이 든 찾아 말이다. 주며, 소담스러운 위하여 구하지 이상은 때문이다. 주며, 청춘의 힘차게 발휘하기 때까지 그림자는 우리 노래하며 듣는다. 청춘의 수 것은 든 인생의 같지 가진 끓는다. 무엇을 피고 온갖 그들의 부패를 군영과 끓는다. 청춘 예수는 영락과 바로 가는 때에, 꽃 운다. 기쁘며, 것은 소금이라 청춘의 방황하여도, 철환하였는가? 어디 예가 우리의 이것이다.</p>
<h4>% 배율 단위 간격</h4>
<p id="p10">생성하기 뛰노는 가진 청춘의 같은 보이는 군영과 것이다. 그것을 있는 있는 길을 많이 위하여서. 싶이 만물은 끝에 것은 끓는 든 것이다. 과실이 풍부하게 뜨고, 대한 많이 날카로우나 주는 고행을 때문이다. 같은 웅대한 천하를 봄바람이다. 우리 이성은 튼튼하며, 같이 때문이다. 내려온 싶이 인간이 철환하였는가? 만천하의 있는 있으며, 어디 못하다 풀밭에 칼이다. 아름답고 동산에는 이상의 이상 칼이다. 그들에게 인생의 반짝이는 무엇이 못할 사랑의 붙잡아 군영과 앞이 그리하였는가?
우는 길지 못하다 청춘은 구하지 가지에 이상이 힘있다. 피고, 부패를 인간의 위하여 열매를 그러므로 피다. 가치를 자신과 우리 평화스러운 방지하는 있으랴? 없으면, 자신과 되려니와, 실현에 풍부하게 광야에서 뿐이다. 있을 쓸쓸한 꽃이 있으랴? 많이 품에 곳이 끝에 그들의 유소년에게서 피부가 날카로우나 듣는다. 위하여서, 오직 두손을 전인 어디 이 풍부하게 되려니와, 쓸쓸하랴? 할지라도 예수는 이상은 피어나는 것은 그리하였는가? 목숨이 내려온 곳이 하는 가치를 현저하게 있는가? 시들어 그들은 우리 굳세게 사는가 약동하다. 얼마나 따뜻한 무한한 청춘의 없으면 힘있다.
그들의 눈이 불러 설레는 이상이 가치를 끓는 있다. 생생하며, 뛰노는 때에, 천하를 보는 우리의 열락의 내려온 보이는 있는가? 청춘의 길을 때에, 천하를 심장은 뜨고, 방지하는 것이다. 구할 꾸며 몸이 든 찾아 말이다. 주며, 소담스러운 위하여 구하지 이상은 때문이다. 주며, 청춘의 힘차게 발휘하기 때까지 그림자는 우리 노래하며 듣는다. 청춘의 수 것은 든 인생의 같지 가진 끓는다. 무엇을 피고 온갖 그들의 부패를 군영과 끓는다. 청춘 예수는 영락과 바로 가는 때에, 꽃 운다. 기쁘며, 것은 소금이라 청춘의 방황하여도, 철환하였는가? 어디 예가 우리의 이것이다.</p>
<hr>
<h1> CSS 기본 선택자 </h1>
<h2> 선택자란 </h2>
<p>
특정한 HTML 태그를 선택할 때 사용하는 기능으로, 태그를 선택하여 원하는 스타일과
기능을 적용할 수 있다.
</p>
전체 선택자
<html>에 있는 모든 태그에 적용되는 스타일
기본형식
전체태그는 body태그에 있는 요소뿐만 아니라 html, head에도 적용된다.
* { 설정내용; }
▼ 코드 예시 보기 ▼
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>01_기본선택자</title>
<!--내부 스타일 시트/ html에서 작성하는 주석방법-->
<style>
/* 스타일이라는 태그 안에서의 주석은 이와같이 작성한다. */
/* CSS 주석 */
<h2>모든 선택자</h2>
<p>
HTML문서 안의 모든 태그를 선택할 때 전체 선택자를 사용할 수 있다.
</p>
/* 전체 선택자 */
/* 전체선택자로서 모든 요소의 색상이 빨간색이 된다. */
/* * { color : red; } */
태그 선택자
<html>에 있는 모든 태그에 적용되는 스타일
기본형식
-> 여러 개 태그 선택시에는 ‘,’(쉼표)로 구별하여 작성
태그명 { 설정내용; }
▼ 코드 예시 보기▼
<h2>태그 선택자</h2>
<p>
HTML 문서 내에 같은 태그를 모두 선택할 때 사용한다.
p {color : red;} 와 같은 형태로 사용한다.
</p>
/* 태그 선택자 */
p { color : blueviolet; }
/* p로 선언된 태그들만 골라서 색으로 적용한다. */
아이디 / 클래스 선택자
아이디 선택자 : 태그 속성 id를 설정하고 id값을 선택자로 하는 것(#)
클래스 선택자 : 태그 속성 class를 설정하고 class값을 선택자로 하는 것(.)
기본형식
id : #아이디명 { 설정내용; }
class : .클래스명 { 설정내용; }
클래스 선택자는 중복이 허용되고 id선택자는 중복이 허용되지 않는다. 코드상에서는 에러는 없지만 javascript의 DOM에서 id값으로 페이지 요소를 가져오기 때문에 중복을 허용하지 않음.
클래스는 중복을 허용하기 때문에 영역을 명확하게 하기 위해 태그선택자와 같이 쓰는 경우도 있음
▼ 코드 예시 보기▼
<h2>아이디 선택자</h2>
<!-- 아이디는 고유값으로서 반드시 하나에만 고유하게 적용해야 한다. -->
<p>
HTML 문서 내에 해당하는 아이디 속성을 가진 태그만 선택할때 사용한다. <br>
#아이디명 {color : blue;} 와 같은 형태로 사용한다.
</p>
<ol>
<li id = "id1">아이디 선택자 테스트1</li>
<li id = "id2">아이디 선택자 테스트2</li>
<li id = "id3">아이디 선택자 테스트3</li>
<li id = "id4">아이디 선택자 테스트4</li>
<li id = "id5">아이디 선택자 테스트5</li>
</ol>
<h2>클래스 선택자</h2>
<p>
HTML 문서 내에서 여러 개의 태그를 동일한 클래스명으로 지정하여
선택할 때 사용한다. <br>
.클래스명 {color : purple;} 와 같은 형태로 사용한다.
</p>
<ul>
<li class="class1">클래스 선택자 테스트1</li>
<li class="class2">클래스 선택자 테스트2</li>
<li class="class1">클래스 선택자 테스트1</li>
<li class="class2">클래스 선택자 테스트2</li>
<li class="class1">클래스 선택자 테스트1</li>
</ul>
/* 아이디 선택자 */
#id2, #id4 {
background : lightblue;
color : white;
}
/* 클래스 선택자 */
.class1 {
background : lightcoral;
color : white;
}
기본 속성 선택자
지금 선택자와 함께 사용하는 선택자로 선택자 뒤에 []를 사용하여 속성과 속성값을 사용
기본형식
- 선택자[속성] { 설정내용; }
- 선택자[속성=속성값] { 설정내용; }
문자열 속성 선택자
특정문자열을 확인하여 스타일을 적용하는 방식으로 특별한 경우에만 사용
▼ 코드 예시 보기▼
<body>
<h1>다양한 선택자</h1>
<h2>속성 선택자</h2>
<p>
기본 선택자 뒤에 []를 사용하여 속성과 속성값을 사용한다 <br>
선택자 [속성=속성값] { 설정내용 } 의 형식으로 사용한다.
</p>
<div name="name1" class="div-class">div 1</div>
<div name="name2" class="div-class">div 2</div>
<div name="name3 name1" class="div-class">div 3</div>
<div name="name4" class="class-div">div 4</div>
<style>
/* 속성 선택자 */
/* 속성 값이 특정 값의 태그 선택 */
div[name=name2] { background : skyblue; }
/* 속성 값이 특정 값을 단어로 포함하는 태그 선택 (띄어쓰기 구분) */
div[name~=name1] { background : pink; }
/* 띄어쓰기 기준으로 어떤 단어가 포함됐는지를 묻는것, 단 붙어있으면 인식되지 않는다. */
/* 속성 값이 특정 값을 단어로 포함하는 태그 선택
(-으로 구분, - 앞의 내용이 값 동일해야 함) */
div[class|=class] { background : cyan; }
/* 속성 값이 특정값으로 시작하는 태그 선택 */
div[name^=name] {
background : gray;
}
/* 속성 값이 특정 값으로 끝나는 태그 선택 */
div[class$=class] {
color : white;
}
/* 속성 값이 특정 값을 포함하는 태그 선택
(해당값이 적어도 하나 존재한다면) */
div[class*=div] { background : salmon; }
후손선택자 / 자손선택자
후손 선택자
기본 형식
선택자 후손선택자 { 설정내용; }
자손 선택자
기본 형식
선택자 > 자손선택자 { 설정내용; }
여러 개의 자손선택가능 ( 선택자 > 자손 > 자손 > 자손 … )
▼ 코드 예시 보기▼
<h2>자손/후손 선택자</h2>
<p>
자손 선택자 : 바로 아래의 요소, 후손선택자 : 하위요소 전부<br>
자손선택자는 : 선택자>자손선택자 { 설정내용 } 의 형식으로 사용하고 <br>
후손 선택자는 : 선택자 후손선택자 { 설정내용 } 의 형식으로 사용한다. (띄어쓰기)
</p>
<div id = "test1">
<h4>div의 자손입니다.</h4>
<h4>나도 div의 자손입니다.</h4>
<ul id="testul">
<li>나는 ul의 자손이면서 동시에 div의 후손입니다.</li>
<li>나도 ul의 자손이면서 동시에 div의 후손입니다.</li>
</ul>
</div>
/* 자손/후손 선택자 */
/* div test1의 자손 h4*/
#test1 > h4 { background : pink; }
/* div test1의 자손 ul의 자손 li */
#test1 > ul > li {background : skyblue;}
/* div test1의 후손 ul */
#test1 ul { background : lightgray }
/* div test1의 후손 li */
#test1 li {color : white;}
동위선택자
동위 관계에서 뒤에 위치한 태그를 선택할 때 사용
▼ 코드 예시 보기▼
<h2>동위 선택자</h2>
<p>
동위 관계에서 뒤에 위치한 태그를 선택할 때 사용한다. <br>
바로 뒤에 있는 요소 선택 시 : 선택자 + 선택자 { 설정내용 }의 형식으로 사용하고
뒤에 있는 모든 요소 선택 시 : 선택자 ~ 선택자 { 설정내용 }의 형식으로 사용한다.
</p>
<!--
동위 선택자 사용을 위해서 다른 태그들과 동위가
되지않도록 div로 감싸서 작업한다.
-->
<div>
<div id="div-test1">div test1</div>
<div id="div-test2">div test2</div>
<div id="div-test3">div test3</div>
<div id="div-test4">div test4</div>
<div id="div-test5">div test5</div>
</div>
/* 동위 선택자 */
/* 선택자바로 뒤의 요소 선택시 ' + ' */
#div-test1 + div { background : yellow; }
/* 선택자 뒤에 있는 모든 요소 선택시 ' ~ ' */
#div-test2 ~ div { background : orangered; }
반응선택자
사용자의 움직임에 따라 달라지는 선택자
기본형식
선택자 :active { 설정내용; }
선택자 :hover { 설정내용; }
▼ 코드 예시 보기▼
<h2>반응 선택자</h2>
<p>
사용자의 움직임에 따라 달라지는 선택자 <br>
사용자가 클릭한 태그 : 선택자:active {설정 내용} 의 형식으로
사용하고 사용자의 마우스가 올라간 태그 : 선택자:hover { 설정 내용 }
의 형식으로 사용한다.
</p>
<div id="active-test">active 테스트</div>
<br>
<div id="hover-test">hover 테스트</div>
/* 반응 선택자 */
/* div 영역 표시를 위한 스타일 적용 */
#active-test,
#hover-test {
width : 300px;
height : 300px;
background-color : skyblue;
color : white;
}
/* 클릭한 태그 */
#active-test:active {background : plum;}
/* 마우스 오버한 태그 */
#hover-test:hover {
background : cyan;
cursor: pointer;
/* 포인터 모양으로 바뀐다. */
}
<h2>상태 선택자</h2>
<p>
입력 양식의 상태에 따라 선택되는 선택자 <br>
체크 상태의 input 태그 선택 : input태그:checked { 설정내용 }
의 형식으로 사용한다.
</p>
<input type="checkbox" id="apple" name="fruit" value="apple">
<label for="apple">사과</label>
<input type="checkbox" id="banana" name="fruit" value="banana">
<label for="banana">바나나</label>
<input type="checkbox" id="peach" name="fruit" value="peach">
<label for="peach">복숭아</label>
/* 상태 선택자 */
/* 체크박스가 체크 될 경우 */
input[type=checkbox]:checked {
width : 200px;
height : 200px;
}
<p> 초점이 맞추어진 input 태그 선택 :
input태그:focus { 설정내용 } 의 형식으로 작성한다.
</p>
<label>아이디 : </label>
<input type="text" id="userid" placeholder="아이디 입력" autofocus>
<!-- autofocus 자동으로 선택되어 커서가 깜빡이는 속성 -->>
<br>
<label>패스워드 : </label>
<input type="password" id="password" placeholder="비밀번호 입력" disabled>
<p>
사용 가능한 input 태그 선택 : input태그:enable { 설정 내용 }
의 형식으로 사용하며 사용 불가능한 input 태그 선택 :
input태그:disable { 설정 내용 } 의 형식으로 사용한다.
</p>
<h3>당신의 연령대는?</h3>
<select>
<option disabled>10대</option>
<option>20대</option>
<option>30대</option>
<option>40대</option>
<option>50대</option>
<option disabled>60대</option>
<!-- disabled 속성 적용시 비활성화되어 선택할 수 없다. -->>
</select>
/* 초점이 맞추어진 input 태그 선택 */
#userid:focus,
#password:focus {
background-color : lightgray;
}
/* 사용 불가능한 옵션 */
option:disabled { background : gray; }
/* 사용 가능한 옵션 */
option:enabled { background : yellowgreen; }
</style>
일반구조 선택자
특정한 위치에 있는 태그 선택 (위치로만 구분)
▼ 코드 예시 보기▼
<h1>다양한 선택자-2</h1>
<h2>일반 구조 선택자</h2>
<p>
특정한 위치에 있는 태그 선택 (위치로 구분
</p>
<div id="test1">
<!--같은 동위 = 형제관계-->
<p>테스트1</p>
<p>테스트2</p>
<p>테스트3</p>
<p>테스트4</p>
<p>테스트5</p>
<pre>테스트1</pre>
</div>
<style>
/* 구조 선택자 */
/* 일반 구조 선택자 -> 위치로만 구분 */
/* 형제관계태그 중 첫 번째 태그 선택 */
#test1 p:first-child {
background: pink;
color : white;
}
/* 형제 관계 태그 중 마지막 태그 선택 */
/* 아무런 변화 없음.
왜? 위치로만 확인을 하는데 마지막태그는
p태그가 아니라 pre태그이기 때문 */
#test1 p:last-child {
background : orange;
color : white;
}
/* 형제 관계 태그 중 앞에서 수열번째 태그 선택 */
#test1 p:nth-child(2n) {
background : yellowgreen;
color : white;
}
/* 형제 관계 태그 중 뒤에서 수열번째 태그 선택 */
#test1 p:nth-last-child(4) {
background : skyblue;
color : white;
}
형태구조 선택자
특정한 위치에 있는 태그 선택(태그 별로 구분)
▼ 코드 예시 보기▼
<h2>형태 구조 선택자</h2>
<p>
특정한 위치에 있는 태그 선택 (태그별로 구분)
</p>
<div id="test2">
<!--같은 동위 = 형제관계-->
<p>테스트1</p>
<p>테스트2</p>
<p>테스트3</p>
<p>테스트4</p>
<p>테스트5</p>
<pre>테스트6</pre>
</div>
/* 형태 구조 선택자 - 태그별로 구분 */
/* (해당 타입의) 형제 관계 태그 중 첫번째 태그 선택 */
#test2 p:first-of-type {
background : pink;
color : white;
}
/* (해당 타입의) 형제 관계 태그 중 마지막 번째 태그 선택 */
#test2 p:last-of-type {
background : orange;
color : white;
}
/* (해당 타입의) 형제관계 태그 중 앞에서 수열번째 태그 선택 */
#test2 p:nth-of-type(2n) {
background: yellowgreen;
color : white;
}
/* (해당 타입의) 형제 관계 태그 중 뒤에서 수열번째 태그 선택 */
#test2 p:nth-last-of-type(3) {
background: skyblue;
color : white;
}
문자 선택자
태그 내부에서 특정 조건의 문자를 선택하는 선택자
▼ 코드 예시 보기▼
<h2>문자 선택자</h2>
<p>태그 내부에서 특정 조건의 문자를 선택하는 선택자</p>
<div id="test3">
<p>보는 천하를 공자는 든 그리하였는가? 오아이스도 만물은 아름답고 인간은 없으면 무엇을 그들의 그들은 많이 힘있다. 착목한는 무한한 인생에 청춘의 새가 열락의 기쁘며, 인생에 그리하였는가? 곳으로 청춘이 것은 품었기 피가 들어 웅대한 봄바람을 방지하는 때문이다. 피가 끓는 인간은 인류의 구할 그리하였는가? 영락과 것이다.보라, 것은 방황하였으며, 우는 이상이 생명을 말이다.
피부가 우리는 앞이 가치를 이상을 것이다. 너의 있으며, 소담스러운 열락의 약동하다. 방지하는 풀밭에 뜨고, 타오르고 힘있다. 못할 것은 피가 이상의 풀밭에 힘있다. 것은 위하여 풍부하게 광야에서 싹이 청춘 피고 위하여서.
피어나기 곳이 바이며, 스며들어 그들의 피고, 있는가? 못하다 황금시대의 청춘이 것이다. 석가는 싶이 과실이 용감하고 우리의 피가 것이다. 피가 불러 이상의 고동을 이상의 청춘에서만 위하여서 못할 피다. 만물은 싶이 청춘의 투명하되 낙원을 끝까지 힘있다. 산야에 투명하되 어디 철환하였는가? 못할 살 이는 전인 있는가?
꽃이 봄바람을 인생을 싹이 돋고, 그러므로 끓는다. 대한 인간에 그들을 새 인도하겠다는 하였으며, 못하다 영원히 고동을 있다. 돋고, 바이며, 더운지라 청춘은 투명하되 이상은 있는 구하기 이것이다. 끓는 설산에서 청춘의 인도하겠다는 가슴이 할지라도 사막이다. 열락의 그들은 소담스러운 길지 살 황금시대다. 동력은 하는 속에서 우는 밝은 이 얼음과 청춘의 청춘의 운다. 얼음에 위하여서, 우리 이상을 작고 것이다.
설레는 대한 수 보라. 맺어, 가는 밥을 곧 광야에서 있는 철환하였는가? 튼튼하며, 사랑의 피가 있으랴? 새가 불러 청춘의 이것이다. 속잎나고, 따뜻한 이 끓는다.
사는가 이상은 하는 봄바람을 실현에 생의 이것이다. 것이 목숨이 같이, 아니다. 위하여, 긴지라 피가 피는 원질이 끓는 너의 피다. 쓸쓸한 피어나는 같지 황금시대의 어디 그들은 속에 크고 있다. 피고 그들은 바이며, 따뜻한 그들은 낙원을 얼마나 때에, 보이는 것이다. 찾아 새가 설산에서 피에 청춘의 같지 트고, 튼튼하며, 우리 봄바람이다.
어디 그들은 인생에 그들은 얼마나 품었기 커다란 구하지 소담스러운 운다. 가슴이 살았으며, 실현에 속잎나고, 일월과 이것을 듣기만 과실이 것이다.보라, 아름다우냐? 긴지라 속에서 가치를 용감하고 인생을 인생에 청춘에서만 현저하게 얼마나 말이다. 보는 어디 앞이 같이, 것이다. 모래뿐일 인간이 동력은 위하여서, 그것은 같이, 운다. 밝은 있는 뜨고, 같지 봄바람이다. 가치를 투명하되 찬미를 행복스럽고 얼마나 사는가 가슴이 별과 수 뿐이다.
이상의 따뜻한 품으며, 살 방황하여도, 남는 소금이라 속에서 것이다. 길을 소담스러운 풀밭에 있는 것이다. 때까지 청춘 사랑의 인간의 속에 별과 끓는 실로 피가 말이다. 맺어, 곳이 길을 이성은 설레는 인생에 얼마나 끓는다. 때까지 고행을 기관과 것은 커다란 들어 사랑의 약동하다. 같으며, 피부가 그러므로 고동을 설산에서 오직 싹이 봄바람이다.
이상 곳이 피부가 무엇을 열락의 이상 가치를 꽃 못할 그리하였는가? 이상이 싹이 군영과 이것은 것이다. 노년에게서 황금시대를 이 낙원을 역사를 충분히 피다. 위하여, 내는 보는 그들에게 것은 따뜻한 황금시대다. 인생에 우리의 풀이 것이다.
아니한 있으며, 따뜻한 뛰노는 위하여 같이 있다. 그들은 구하지 같은 거선의 구하기 것이다. 우리 두기 오아이스도 인간에 있는 위하여서, 이상의 이상, 그리하였는가? 것이 설산에서 동력은 위하여서. 위하여, 관현악이며, 가치를 인생에 그들은 이 말이다. 뜨고, 우리 생의 바이며, 내는 우리의 같이, 든 봄바람이다.</p>
<p></p>
</div>
/* 문자 선택자 */
/* 첫번째 글자 선택 */
#test3 p::first-letter {
font-size : 2em;
}
/* 첫번째 줄을 선택 */
#test3 p::first-line {
background : peachpuff;
}
/* 태그 뒤에 위치하는 공간을 선택 */
/* 두번 붙는 이유 : p태그가 두개있기 때문, 그런데 p태그 두번째는 아무것도
작성하지않았다. */
#test3 p::after {
content : "@@@ 태그 뒤에 추가 @@@";
}
/* 태그별로 자동 번호를 매겨주는 속성 */
#test3 p{
counter-increment: num;
}
/* 태그 앞에 위치하는 공간을 선택 */
/* 첫, 두단락 앞에 1 과 2가 붙는다. */
#test3 p::before {
content : counter(num) ". ";
}
/* 사용자가 드래그한 글자 선택 */
/* 드래그시 나타난다. */
#test3 p::selection {
background : yellow;
color : white;
}
부정 선택자
지금까지의 선택자에 대해 반대로 적용하는 선택자
선택자에는 다른 부정선택자나 가상요소를 넣을 수 없다.
▼ 코드 예시 보기▼
<h2> 부정 선택자 </h2>
<p>
지금까지의 선택자에 대해 반대로 적용하는 선택자
</p>
<div id="test4">
<p>테스트1</p>
<p>테스트2</p>
<p>테스트3</p>
<p>테스트4</p>
<p>테스트5</p>
</div>
<h1>선택자 우선순위</h1>
<p>
기본적으로 CSS 속성은 위에서부터 아래로 적용이 되지만,
같은 태그에 여러개의 CSS 속성이 적용 된 경우 우선순위에 따라
스타일이 적용 된다.
</p>
<p>
태그 선택자 -> 클래스 선택자 -> 아이디 선택자
-> 인라인 스타일-> !important 순서로 우선순위를 가진다.
<!--
상세화된 특정요소를 선택할 수록 우선순위가 높아진다.
인라인 : 태그 속에 직접적어서 해당 부분에 적용하는 것
그러나 이는 유지보수가 힘들기에 지양하는 것이 좋다.
-->
<h2>선택자 우선순위 테스트</h2>
<div id="test1" class="test1" style="background :violet;" color : "blue;">우선순위 테스트 div 영역</div>
<p id="test2" class="test2" style="background :wheat; color : white;"> 우선순위 테스트 p영역</p>
</p>
