히바리 쿄야 와 함께 하는 Developer Cafe
[2일차] DO IT HTML5&CSS3 / p186 ~ 292/ font , background,ul,li 스타일 본문
[2일차] DO IT HTML5&CSS3 / p186 ~ 292/ font , background,ul,li 스타일
TWICE&GFRIEND 2021. 1. 11. 13:34/**/ css 에서 사용하는 주석 해당 코멘트를 입력하는 부분 브라우저 에서는 인식되지 않음
주석 사용 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>comment</title>
<style>
h2{
font-size:20px; /* 글자 크기 */
color:orange; /* 글자 색 */
}
p{
color:blue; /* 글자 색 */
}
</style>
</head>
<body>
<h2>토트넘 손흥민 레알마드리드 이적설</h2>
<p>손흥민 선수가 요즘 맹활약을 하면서 스페인 레알마드리드 이적설이 나오고 있다.</p>
</body>
</html>
<!doctype html>
<html lang="ko">
<head>
<title>온라인 프로필</title>
<meta charset="utf-8">
<style>
* {
margin: 20px auto;
}
#container {
width:600px; /* 너비 */
padding:15px; /* 테두리와 내용 사이의 여백 */
border:1px dotted gray; /* 테두리 스타일 */
}
p {
font-size:0.9em; /* 글자 크기 */
line-height:2.0; /* 줄간격 */
}
.bluetext {
color:blue;
}
h2.accent {background-color:#222;color:#fff;padding:5px;}
.browntext {
color:brown;
}
.boldtext {
font-weight: bold;
}
</style>
</head>
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Transform</title>
<style>
.box{
position:absolute;
left:50px;
top:70px;
width:100px;
height:60px;
background:#fff;
border:2px solid green;
text-align:center;
line-height:60px;
}
.box:hover {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
</style>
</head>
<body>
<div class="box">Mouse Over</div>
</body>
</html>
-webkit- 웹키트 방식 브라우저용(사파리, 크롬 등)
-moz- 게코 방식 브라우저용(모질라, 파이어폭스 등)
-o- 오페라 브라우저
-ms- 마이크로소프트 인터넷 익스플로러
<body>
<div id="container">
<h1>회사 소개</h1>
<h2 class="accent">“사람을 구체적으로 도와주는 책”</h2>
<p>이지스퍼블리싱(주)의 책에는 <span class="browntext boldtext">‘사람들에게 구체적으로 도움이 되는 책’을 만든다는 출판 가치가 담겨 있습니다.</span></p>
<p> 2010년 5월 출범한 이지스퍼블리싱(주)는 크게 두 영역의 책을 출간합니다. IT 실용 도서와 학습 분야 도서입니다.
IT 교재와 사진 책 등 실용서는 이지스퍼블리싱 브랜드로, 학습과 자녀교육 도서는 이지스에듀 브랜드로 출간하고 있습니다. </p>
<h2 class="bluetext">이지스퍼블리싱의 미션</h2>
<p>사람에게 구체적으로 <span class="bluetext">도움</span>을 주는 책<br>
우리는 열심히 사는 사람들에게 도움이 되고 싶습니다.<br>
우리는 책을 출간하기 전에 질문할 것입니다.<br>
"이 책이 사람들에게 도움이 됩니까?"</p>
<p class="bluetext">정보의 지름길을 만들어 빠르게 원하는 곳으로 가도록 도와주는 책.
손에 잡히는 이익을 얻을 수 있도록 도움이 되는 책을 만들고 싶습니다.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
section{
width:500px;
padding:15px; -> 안쪽 여백 상하좌우 15px
border:5px solid gray;
}
</style>
</head>
<body>
<div id="container">
<section>
<h2>GFriend</h2>
<p>소원,예린,은하,유주,신비,엄지 6인 멤버 걸그룹이다. 작년 11월에 Mago 라는 타이틀 곡으로 컴백했다.</p>
</section>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>01_전체선택자</title>
<style>
/* CSS기본형 - 선택자 {속성1:속성값1; 속성2:속성값2; 속성3:속성값3;} */
/* 태그를 전체 선택할때 * 표기 사용 */
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>heading-1</h1>
<h2>heading-2</h2>
<p>paragraph</p>
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
<p>paragraph</p>
<p>paragraph</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>02_태그선택자</title>
<style>
h1 {
color:hotpink;
}
p {
color:blue;
}
ul {
list-style:none;
}
/* 스타일 우선순위 : 인라인 스타일이 우선으로 적용됨 */
</style>
</head>
<body>
<h1>스타벅스 크리스마스 음료 출시!</h1>
<h2>크리스마스 음료를 만나보세요!</h2>
<p>에스프레소</p>
<ul>
<li>토피넛 라떼</li>
<li>제주 유기농 말차라떼</li>
<li>돌체라떼</li>
<li>다크 초콜릿</li>
</ul>
<p>프라프치노</p>
<p>티바나</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>03_클래스선택자</title>
<style>
.red_text {
color: red;
}
.bold {
font-weight: bold;
}
span {
background-color: darkgreen;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<h1 class="red_text">스타벅스 크리스마스 음료 출시!</h1>
<h2>크리스마스 음료를 만나보세요!</h2>
<p class="red_text bold">에스프레소</p>
<!-- 클래스명 : 한글 쓰면 안됨 숫자로 쓰면 안됨
red_01 영문으로 써야함 클래스 중간에 띄어쓰기 하면 안됨 -->
<ul>
<li>토피넛 라떼</li>
<li>제주 유기농 말차라떼</li>
<li>돌체라떼</li>
<li>다크 초콜릿</li>
</ul>
<p>프라프치노</p>
<p class="bold">티바나</p>
<!-- 원하는 부분만 사용할때 span 태그 사용 인라인 요소 많이 씀 -->
<p>e-프리퀀시 받으러 <span>스타벅스</span> 가기!</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>04_아이디선택자</title>
<style>
#heading {
background-color:skyblue;
}
</style>
</head>
<body>
<!-- id 는 한번만 사용할 수 있음 중복사용 불가 -->
<h1 id="heading">스타벅스 크리스마스 음료 출시!</h1>
<h2>크리스마스 음료를 만나보세요!</h2>
<p>에스프레소</p>
<ul>
<li>토피넛 라떼</li>
<li>제주 유기농 말차라떼</li>
<li>돌체라떼</li>
<li>다크 초콜릿</li>
</ul>
<p>프라프치노</p>
<p>티바나</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>05_1_자식선택자</title>
<style>
.main>li {
color:red;
}
.sub>li {
color:indianred;
}
.sub>li>a {
color:greenyellow;
}
</style>
</head>
<body>
<ul class="main">
<li>menu
<ul class="sub">
<li><a href="#">sub</a></li>
<li>sub</li>
<li><a href="#">sub</a></li>
<li>sub</li>
<li>sub</li>
</ul>
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>05_2_하위선택자</title>
<style>
/* .container ul 컨테이너 클래스 한칸 띄고 ul -> 모든 ul을 선택 */
/* 하위선택자 */
.container ul {
border: 2px solid blue;
}
/* 자식선택자 */
.container>ul {
border: 2px solid red;
}
</style>
</head>
<body>
<div class="container">
<h1>주문 방법 및 요금</h1>
<p>산지직송 싱싱한 제주도 감귤을 주문하세요!</p>
<ul>
<li>주문방법
<ul>
<li>직접 통화</li>
<li>문자 주문</li>
</ul>
</li>
<li>요금
<ul>
<li>1kg : 10,000원</li>
<li>2kg : 20,000원</li>
<li>3kg : 30,000원</li>
<li>4kg : 40,000원</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>06_1위치선택자(배수)</title>
<style>
/* 짝수 */
li:nth-child(2n) {
background-color: yellow;
}
/* 홀수 */
li:nth-child(2n+1){
background-color: aqua;
}
</style>
</head>
<body>
<ol>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>06_위치선택자</title>
<style>
ul {
width: 1000px;
background-color: beige;
}
li {
list-style: none;
display: inline-block;
line-height: 50px;
}
li:first-child {
color: blue;
}
li:last-child {
color: gold;
font-weight: bold;
}
li:nth-child(3) {
color: fuchsia;
}
/*
li:nth-child(2n) {
color: aquamarine;
}
*/
</style>
</head>
<body>
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>07_속성선택자</title>
<style>
/* 속성선택자 */
input[placeholder] {
background-color: coral;
}
/* 속성값 선택자*/
input[type="password"] {
background-color:deepskyblue;
}
</style>
</head>
<body>
<input type="text" placeholder="아이디입력">
<br>
<br>
<input type="password">
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>08_상태선택자</title>
<style>
a:link {
color: red;
text-decoration: none;
}
a:visited {
color:yellow;
}
a:hover {
background-color:black;
color:white;
}
a:active {
color:greenyellow;
}
/*
1) :link 방문하지 않은 링크에 스타일 적용
2) :visited 방문한 링크에 스타일 적용
3) :hover 웹 요소에 마우스 커서를 올려놓을 때의 스타일 적용
4) :active 웹 요소를 활성화(클릭)했을 때
스타일 적용
**CSS 작성 순서 주의할 것
:link >> :visited >> :hover >> :active
*/
</style>
</head>
<body>
<a href="#" target="_blank">네이버 바로가기</a>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>09_첫글자+첫줄선택자</title>
<style>
p:first-letter {
color: red;
font-weight: bold;
font-size: 24px;
}
p:first-line {
font-style: italic;
background-color:greenyellow;
}
</style>
</head>
<body>
<p>겨울이 오고 있어요! <br>빨리 눈이 내렸으면 좋겠어요!</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>text-example</title>
<style>
h3 {
color:red;
text-align:center;
}
.check {
width: 640px;
padding: 10px 10px;
background-color: #000;
color: #fff;
margin-top: 10px;
}
.order,.send1,.send2 {
text-align: center;
}
.pm,.refund {
color: blue;
font-weight: bold;
}
p {
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<img src="images/banner.jpg" alt="배너">
<div>
<p class="check">확인하세요</p>
<h3>주문 및 배송</h3>
<p class="send1"><span class="pm">오후 2시 이전</span><br>주문건은 당일 발송합니다</p>
<p class="send2">2시 이후 주문건은 다음날 발송합니다(주말 제외)</p>
<hr>
<h3 class="exchange">교환 및 환불</h3>
<p>불만족시 <span class="refund">100% 환불</span> 해 드립니다.</p>
<p>고객센터로 전화주세요</p>
<hr>
<h3>고객센터</h3>
<p>0000-0000</p>
<p>상담시간 : 오전 9시 ~ 오후 6시 (토/일 ,공휴일 휴무)</p>
<hr>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>02_box</title>
<style>
h1 {
color: indianred;
}
/* overflow : 요소들을 넘치게 하지 않게 하기 위해서 사용 */
.div1 {
width: 200px;
height: 80px;
background-color: lightblue;
margin-bottom: 20px;
}
.hidden {
overflow: hidden;
/* 넘치는 요소를 안보이게 하기 위해서 사용 */
}
.scroll {
overflow: scroll;
}
.auto {
overflow: auto;
}
</style>
</head>
<body>
<h1>overflow:hidden, scroll, auto</h1>
<div class="div1 hidden">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</div>
<div class="div1 scroll">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</div>
<div class="div1 auto">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</div>
<h1>border-(width/style/color)</h1>
<p>border-width : top right bottom left;</p>
<p>border-style : top right bottom left;</p>
<p>border-color : top right bottom left;</p>
<p class="border">border : width style color;</p>
<h1>border-style</h1>
<p class="border2 solid">solid</p>
<p class="border2 dotted">dotted</p>
<p class="border2 dashed">dashed</p>
<p class="border2 double">double</p>
<p class="border2 ridge">ridge</p>
<p class="border2 groove">groove</p>
<p class="border2 inset">inset</p>
<p class="border2 outset">outset</p>
<style>
.border {
border : 3px solid blue;
border-width : 20px 10px 50px 8px;
border-style : dashed dotted solid double;
border-color : red blue green orange;
}
.border2 {
border: 4px #f00;
}
.solid {
border-style: solid;
}
.dotted {
border-style: dotted;
}
.dashed {
border-style: dashed;
}
.double {
border-style: double;
}
.ridge {
border-style: ridge;
}
.groove {
border-style: groove;
}
.inset {
border-style: inset;
}
.outset {
border-style: outset;
}
</style>
<h1>padding</h1>
<p class="bg padding1">padding:50px; (네 방향 모두 50px)</p>
<p class="bg padding2">padding:20px 40px; (위/아래:20px, 좌/우 40px)</p>
<p class="bg padding3">padding:20px 40px 10px; (위:20px, 좌/우 40px, 아래:10px)</p>
<p class="bg padding4">padding:20px 10px 30px 5px; (위/오른쪽/아래/왼쪽)</p>
<style>
.bg {
background-color: yellow;
color: blue;
}
.padding1 {
padding:50px;
}
.padding2 {
padding:20px 40px;
}
.padding3 {
padding:20px 40px 10px;
}
.padding4 {
padding:20px 10px 30px 5px;
}
</style>
<h1>margin</h1>
<h2 class="center">center</h2>
<p class="margin1">아날로그(Analog) 신다사이저는 디지털(Digital) 신디사이저보다 '따뜻한' 소리가 난다고 한다.</p>
<p class="margin2">아날로그(Analog) 신다사이저는 디지털(Digital) 신디사이저보다 '따뜻한' 소리가 난다고 한다.</p>
<p class="margin3">아날로그(Analog) 신다사이저는 디지털(Digital) 신디사이저보다 '따뜻한' 소리가 난다고 한다.</p>
<style>
.center {
text-align:center;
border-bottom: 2px solid lightgray;
width: 70%;
margin: 0 auto; /* 가로너비 값이 있어야 함*/
/* width 값이 있어야함 */
/* 텍스트 정렬하고 다름 */
/* margin: 0 auto; 적용하려면 width 값이 있어야함 없으면 적용 자체가 안됨 */
}
.margin1 {
width: 200px;
border: 1px solid blue;
padding: 10px;
}
.margin2 {
width: 200px;
border: 1px solid blue;
padding: 10px;
margin: 50px;
}
.margin3 {
width: 200px;
border: 1px solid blue;
padding: 10px;
margin: 0 auto;
/*margin: 20px auto 20px;
margin: 20px auto 20px auto;*/
}
</style>
<h1>box-sizing</h1>
<div class="div2">겨울이 오고 있어요!!!</div>
<div class="div2 padding">겨울이 오고 있어요!!!</div>
<div class="div2 padding sizing">겨울이 오고 있어요!!!</div>
<style>
.div2 {
width: 300px;
height: 200px;
background-color: skyblue;
border: 2px solid #000;
/*margin-bottom: 30px;*/
margin: 0 0 30px 0;
}
.padding {
padding: 20px 30px;
/* padding 값은 보더를 기준으로 */
}
.sizing {
box-sizing: border-box;
/* 레이아웃 잡을때 사용 */
}
</style>
<h1>display : block, inline, inline-block</h1>
<a href="#">hyperlink</a>
<!-- 인라인블록 : 요소를 인라인으로 배치, 내용은 블록요소의 속성 적용 -->
<ul class="inline-block">
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
<!-- 인라인 요소 -->
<ul class="inline">
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
<!-- 인라인요소 태그 -->
<h2>inline 요소 태그</h2>
<ul>
<li>img</li>
<li>a, span</li>
<li>input, textarea , button</li>
<li>label</li>
<li>sub, sup</li>
<li>br</li>
</ul>
<!-- 블록요소 태그 -->
<h2>block 요소 태그</h2>
<ul>
<li>div</li>
<li>heading(h1~h6)</li>
<li>ul li(ol li)</li>
<li>p</li>
<li>header, nav, section, article, aside, footer</li>
<li>form, fieldset</li>
</ul>
<!-- display:none -->
<h2>display:none</h2>
<ul class="display">
<li>홈(Home)</li>
<li>상품(Product)</li>
<li class="none">서비스(Service)</li>
<li>소개(About)</li>
<li>연락처(Contact)</li>
</ul>
<style>
a {
background-color: yellow;
display: block;
}
.inline-block li {
background-color: indianred;
list-style: none;
width: 200px;
height: 100px;
padding: 30px;
margin: 20px;
display: inline-block;
}
.inline li {
background-color: aquamarine;
list-style: none;
width: 200px;
height: 100px;
padding: 30px;
margin: 20px;
display: inline;
}
.display {
text-align: center;
}
.display li {
background-color: yellow;
list-style: none;
display: inline-block;
padding: 10px;
line-height: 80px;
/* 인라인 : 공간이 남으니까 자리를 차지할 수 있겠네 이렇게 생각해라 */
}
.display .none {
/*.display .none = display 하위요소의 none */
/*display: none;*/
visibility: hidden;
}
</style>
<h1>box-shadow: x y blur color;</h1>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<style>
.box1, .box2, .box3 {
width: 100px;
height: 100px;
margin-bottom: 20px;
/*display: inline-block;*/
}
.box1 {
background-color: aquamarine;
box-shadow: 5px 5px 5px #555;
}
.box2 {
background-color: bisque;
box-shadow: 10px 10px 0 #555;
}
.box3 {
background-color: beige;
box-shadow: -5px -5px 3px #555;
}
</style>
<h1>border-radius</h1>
<ul>
<li>border-radius</li>
<li>border-top-left-radius</li>
<li>border-top-right-radius</li>
<li>border-bottom-left-radius</li>
<li>border-bottom-right-radius</li>
</ul>
<p class="radius">Pet Sounds는 미국의 록 밴드 비치보이스의 열 한번째 정규 음반이다. 1996년 5월 16일, 캐피털 레코드에서 발매되었으며 발매 이후 대중 음악사에서 가장 영향력 있는 음반 가운데 하나이자, 1960년대 최고의 음반 가운데 하나로 꼽힌다.</p>
<div class="circle"></div>
<style>
.radius {
width: 300px;
height: 150px;
border: 5px solid coral;
padding: 20px;
/*border-radius: 20px;
border-top-right-radius: 50px;*/
border-radius: 20px 70px;
}
.circle {
width: 200px;
height: 200px;
background-color: aqua;
border-radius: 50%;
/* 버튼 , 둥근 사각형 만들때 보더 래뒤어스 사용 */
}
</style>
</body>
</html>
-text-align 정렬 -
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>뉴욕타임즈 10대 식품</title>
<style>
p {
border: 1px solid #ccc; /* 테두리 - 1픽셀짜리 회색 실선 */
padding: 10px; /* 테두리와 내용 사이의 패딩 여백 */
margin: 10px; /* 단락 주변의 마진 여백 */
}
.align-left {text-align:left;} /* 왼쪽 정렬 */
.align-right {text-align:right;} /* 오른쪽 정렬 */
.align-center {text-align:center;} /* 가운데 정렬 */
.align-justify {text-align:justify; } /* 양쪽 정렬 */
</style>
</head>
<body>
<h1>텍스트 정렬 </h1>
<!-- 왼쪽 정렬 -->
<p class="align-left">
Integer elementum massa at nulla placerat varius.
Suspendisse in libero risus, in interdum massa.
Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
<!-- 오른쪽 정렬 -->
<p class="align-right">
Integer elementum massa at nulla placerat varius.
Suspendisse in libero risus, in interdum massa.
Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
<!-- 가운데 정렬 -->
<p class="align-center">
Integer elementum massa at nulla placerat varius.
Suspendisse in libero risus, in interdum massa.
Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
<!-- 양쪽 정렬 -->
<p class="align-justify">
Integer elementum massa at nulla placerat varius.
Suspendisse in libero risus, in interdum massa.
Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
</body>
</html>
text-decoration
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>웹 표준 기술 살펴보기</title>
<style>
p {line-height: 1.8;}
a {text-decoration:none;} /* 밑줄 없앰 */
.edited {text-decoration:line-through;} /* 취소선 */
</style>
</head>
<body>
<h2>HTML5</h2>
<p>다양한 기기로 인터넷에 접속할 수 있는 요즘, <br>
<span class="edited">HTML4</span> HTML5를 공부해야 할 때입니다.</p>
text-shadow
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>text-transform</title>
<style>
h1 {
font-size:100px; /* 글자 크기 */
font-family:"Arial Rounded MT"; /* 글꼴 */
}
.shadow1{
color:orange; /* 글자색 */
text-shadow:1px 1px; /* 텍스트 그림자 */
}
.shadow2 {
text-shadow: 5px 5px 3px #f00; /* 텍스트 그림자 */
}
.shadow3 {
color:#fff; /* 글자색 */
text-shadow:7px -7px 5px #000; /* 텍스트 그림자 */
}
</style>
</head>
<body>
<h1 class="shadow1">HTML5</h1>
<h1 class="shadow2">HTML5</h1>
<h1 class="shadow3">HTML5</h1>
</body>
</html>
text-overflow
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>슈퍼푸드</title>
<style>
.content {
border:1px solid #ccc; /* 테두리 */
width:300px; /* 단락의 너비 */
white-space:nowrap; /* 줄바꿈 없음 */
overflow:hidden; /* 넘치는 부분 감춤 */
text-overflow:ellipsis; /* 말줄임표 */
}
.content:hover {
overflow:visible; /* 넘치는 부분 보여줌*/
}
</style>
</head>
<body>
<h2>귀리(Oat) </h2>
<p class="content">귀리는 베타글루칸(항암 및 면역증강작용을 가지고 있는 불소화성 다당류) 성분을 포함하고 있다.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>background-position</title>
<style>
div {
/* 배경 이미지가 안보이면 width 값과 height 값이 설정 되어 있는지 봐야한다.*/
width: 500px;
height: 500px;
background-image: url("이미지경로/image.jpg.");
border: 1px solid #000;
/* background-image 만 height 값 지정해주고 */
/* 나머지는 width 값만 설정해준다 */
background-repeat: no-repeat;
/* backgroud 위치는 왼쪽 상단이 기준 (0,0) 부터 */
background-position: 70% 20%;
/*
background-position : x y;
수평위치(x): left/center/right;
수직위치(y): top/center/bottom;
값을 하나만 지정할 경우, 수평 위치 값으로
간주하고 수직 위치값은 50%나 center로 간주
px, % 직접 수치 입력 가능
*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>02_background_repeat</title>
<style>
body {
background-image: url('');
background-repeat: repeat-x;
/*
repeat : 주어진 공간을 가득 채울때까지 배경이미지 반복
repeat-x : 배경 이미지를 x축(가로)으로 반복
repeat-y : 배경 이미지를 y축(세로)으로 반복
no-repeat : 배경 이미지를 한번만 표시하고 반복
하지 않음
*/
}
h1 {
color: white;
margin: 20px 0 40px;
}
</style>
</head>
<body>
<h1>식물소개</h1>
<h2>진달래(KOrean Rosebay)</h2>
<p>참꽃 또는 두견화라고도 한다. 전국의 50~2,000m 높이의 산야에서 무리지어 자란다. 높이는 2~3m 이고 줄기 윗부분에서 많은 가지가 갈라지며, 작은가지는 연한 갈색이고 비늘조각이 있다.
잎은 어긋나고 긴 타원 모양의 바소꼴 또는 거꾸로 세운 바소꼴이며 </p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>background-attachment</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 20px;
}
header {
width: 100%;
height: 100px;
background-color: mediumpurple;
}
.art1 {
width: 100%;
height: 360px;
background-image: url();
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.art2 {
width: 100%;
height: 700px;
background-color: gold;
}
.art3 {
/* 가로 스크롤 생기면 오류다 */
width: 100%;
height: 600px;
background-image: url("images/image.jpg");
background-size: cover;
background-attachment: fixed;
/* 배경화면을 고정시킴 */
/* 고객센터 , 찾아오시는 길 배경에 많이 쓰임 배경 고정하는 속성 */
}
footer {
width: 100%;
height: 80px;
background-color: black;
color: white;
}
</style>
</head>
<body>
<header>header</header>
<section>
<article class="art1">article1</article>
<article class="art2">article2</article>
<article class="art3">article3</article>
</section>
<footer>footer</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>05_background-size</title>
<style>
div {
width: 100%;
height: 500px;
border: 1px solid #000;
background-image: url();
background-repeat: no-repeat;
background-position: center top;
background-size: 70% 50%;
/* %는 주어진 박스를 기준으로 설정 */
/* px 은 이미지를 기준으로 설정 */
/*
background-size 속성값 : w(너비) h(높이);
px 값 , % 값 모두 변경 가능
px : 이미지 크기 조절
% : 삽입하고자 하는 박스크기 기준 원하는 크기만큼
표시
auto: 자동맞춤(기본 이미지 크기)
cover: 긴축 기준, 박스가 가지고 있는 크기에서
긴 축을 맞춤
contain: 짧은 축 키준
cover : 주어진 공간 이미지 전체를 차지함
contain : 주어진 공간 이미지만 차지
사용할때 cover 속성을 많이 사용함
*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>06_background-clip</title>
<style>
div {
border: 5px dotted purple;
width: 400px;
padding: 50px;
text-align: center;
background-color: yellow;
background-clip: border-box;
}
h1 {
font-size: 60px;
background-image: url();
color: transparent;
-webkit-background-clip: text;
/* web 표준이 되지 않는 속성에 -webkit- 이라 접두어를 붙인다.*/
transition: all 0.7s;
/* hover 가 될 대상에게 트랜지션을 적용한다 */
}
h1:hover {
/* hover 는 마우스를 올렸을 때 */
/* css의 속성이 아닌 상태를 의미함 hover */
background-position: left bottom;
}
/*
border-box : 박스 모델의 가장 외곽인 테두리(border)
까지 적용
padding-box : 테두리를 뺀 패딩 범위까지 적용
content-box : 내용 부분에만 적용
*/
</style>
</head>
<body>
<div>여자친구 Mago 대박나자 !!!!!!!!</div>
<h1>오마이걸<br>다섯번째 계절!!</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>04_example</title>
<style>
body {
background-color: #ccc;
}
.list1 {
list-style-image: url('');
}
#area {
border-collapse: collapse;
padding: 20px;
}
#area th, #area td {
padding: 20px;
text-align: center;
}
#area th {
background-color:cadetblue;
color: #fff;
}
#area th:first-child {
border-radius: 10px 0 0 0;
}
#area th:last-child {
border-radius: 0 10px 0 0;
}
#area tr:nth-child(2) td {
background-color: blueviolet;
color: #ccc;
}
#area tr:nth-child(3) td {
background-color: darkkhaki;
color: #ccc;
}
#area tr:nth-child(4) td {
background-color: blueviolet;
color: #ccc;
}
#area tr:last-child td {
background-color: darkkhaki;
color: #ccc;
}
form {
width:500px;
margin-top: 30px;
}
form fieldset legend {
font-style: italic;
}
.reg {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="title">
<h1>시 워크샵(Poetry Workshops)</h1>
<p>1년 동안 다양한 시 워크샵과 심포지엄을 실시합니다.</p>
<p>다음과 같은 이벤트가 회원들에게 무료로 제공되오니 참고하여 주시기 바랍니다.</p>
</div>
<div class="sub_title">
<ul class="list1">
<li>A Poetic Perspective</li>
<li>Wait Whitman at War</li>
<li>Found Poems and Outsider Poetry</li>
</ul>
</div>
<div>
<table id="area" >
<tr>
<th></th>
<th>뉴욕</th>
<th>시카고</th>
<th>샌프란시스코</th>
</tr>
<tr>
<td>A Poetic Perspective</td>
<td>2012년 2월4일(토)<br>오전 11시 - 오후 2시</td>
<td>2012년 3월3일(토)<br>오전 11시 - 오후 2시</td>
<td>2012년 3월17일(토)<br>오전 11시 - 오후 2시</td>
</tr>
<tr>
<td>Walt Whitman at War</td>
<td>2012년 2월4일(토)<br>오전 11시 - 오후 2시</td>
<td>2012년 3월3일(토)<br>오전 11시 - 오후 2시</td>
<td>2012년 3월17일(토)<br>오전 11시 - 오후 2시</td>
</tr>
<tr>
<td>Found Poems &<br>Outsider Poetry</td>
<td>2012년 2월4일(토)<br>오전 11시 - 오후 2시</td>
<td>2012년 3월3일(토)<br>오전 11시 - 오후 2시</td>
<td>2012년 3월17일(토)<br>오전 11시 - 오후 2시</td>
</tr>
<tr>
<td>Natural Death:<br>An Exploration</td>
<td>2012년 2월4일(토)<br>오전 11시 - 오후 2시</td>
<td>2012년 3월3일(토)<br>오전 11시 - 오후 2시</td>
<td>2012년 3월17일(토)<br>오전 11시 - 오후 2시</td>
</tr>
</table>
</div>
</div>
<div>
<form action="#" method="post">
<fieldset>
<legend>관심 강좌 등록</legend>
<p>이름 : <input type="text"><br></p>
<p>이메일 : <input type="email"><br></p>
<p>가장 가까운 센터 :
<select>
<option value="seoul">서울</option>
<option value="suwon">인천</option>
<option value="inchon">수원</option>
<option value="busan">부산</option>
</select></p>
회원이십니까? <input type="radio" name="yes" value="join"> 네
<input type="radio" name="no" value="join"> 아니오
</fieldset>
<!--<input type="submit" name="regist" value="regist">-->
<button type="regist" class="reg">등록</button>
</form>
</div>
</body>
</html>
'CSS3' 카테고리의 다른 글
| [4일차] DO IT HTML/CSS/JAVASCRIPT 웹 표준의 정석/p293~p438/선택자,트랜지션,반응형 플렉스 (0) | 2021.03.05 |
|---|---|
| [3일차] DO IT HTML/CSS/JAVASCRIPT 웹 표준의 정석/p167~p292/CSS기본,텍스트로 표현하는 다양한 스타일,CSS 박스모델 (0) | 2021.03.04 |
| [5일차] DO IT HTML5&CSS3/p490 ~ 550/반응형웹디자인 (0) | 2021.01.13 |
| [4일차] DO IT HTML5 & CSS3 / p370 ~488 / 시멘틱태그, 선택자,애니메이션 (0) | 2021.01.13 |
| [3일차] DO IT HTML5&CSS3/P294 ~ 368/Box Model,Position,column (0) | 2021.01.11 |
