<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css 기초</title>
<!-- 스타일 작성 영역 -->
<style>
/* <style>영역 안에서는 css문법체계를 따름 */
/* 기본문법 - 선택자{속성:값;} */
/* 주요용어 : 선택자, 속성, 값 */
/* 선택자의 종류 */
/* 1. 타입 선택자 */
h2{color: red;}
p{color: blue; font-family: serif;}
/* 2. 전체 선택자 */
*{font-style: italic; color: yellow;}
/* == 같은 스타일을 적용시 개별선택자가 우선 적용됨 */
/* 3. 아이디 선택자 */
#p1{color: green;}
/* 4. 클래스 선택자 */
.aa{color: violet;}
/* 타입선택자보다 우선시 됨 (많이 사용됨)*/
/* p요소중에서 class가 aa인 요소선택 */
p.aa{background-color: #31f809;}
/* 5. 선택자 그룹 */
li, a{color: gray;}
/* 6. 자식, 자손 선택자 */
#ss>p{color: black;} /*자식*/
#ss p{color: blueviolet;} /*자손*/
/* 띄어쓰기 주의! */
/* p.aa{} /*p요소 중에서 class가 aa인 요소*/
/* p .aa{} p요소 자손들중에서 class가 aa인 요소 */
/* 복합적인 자식/자손 선택자 사용 */
#kk ul.gg>li{background-color: aqua;}
/* 7. 속성 선택자 */
p[class]{font-size: 30px;}
div[id="ss"]{font-weight: bold;}
/* 8. 의사 선택자 */
/* 순서변경 시 뒤에꺼 적용안됨. */
a:link{color: blue;}
a:visited{color: brown;}
a:hover{color: green;}
a:active{color: yellow;}
/* 4가지 이벤트 순서대로 작성해야 함 */
#kk ul li:first-child{color: red;}
#kk ul li:last-child{color: blue;}
#kk ul li:nth-child(2){color: green;}
/* 테이블의 홀수줄만 배경색을 지정 -수식으로 n번째 자식선택 (n:0,1,2,3.........)*/
table tr:nth-child(2n+1){background-color: aqua;}
</style>
</head>
<body>
<h2 class="aa">css selector test</h2>
<p id="p1">hello world</p>
<p class="aa">nice to meet you</p>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<a href="">naver</a>
<hr>
<!-- 자식과 자손에 대한 연습 -->
<div id="ss">
<h4>Region</h4>
<p>hello world</p>
<div>
<p>apple</p>
<p>banana</p>
<p>orange</p>
</div>
</div>
<!-- 자식과 자손의 복합구조 -->
<div id="kk">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<ul class="gg">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
<hr>
<!-- 의사선택자의 또 다른 사용법 실습 -->
<table border="1">
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css작성위치</title>
<!-- 스타일을 적용하는 3가지 방법 -->
<!-- 1. 외부 스타일시트 (권장함)-->
<link rel="stylesheet" href="./02_ex.css">
<!-- 2. 내부 스타일시트 (수업진행)-->
<style>
p{color: red;}
</style>
</head>
<body>
<!-- 3. 인라인 스타일: 내부/외부 스타일시트보다 무조건 우선적용(권장안함: 유지보수 어려움)-->
<p style="color: green;">hello world</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font 스타일</title>
<!-- 스타일을 작성하는 영역 -->
<style>
/* 글꼴 지정 */
p{font-family: 'Times New Roman', Times, serif;}
p{font-family: "Blippo Blk BT", sans-serif;}
/* 별도의 폰트파일을 사용하여 통일된 글꼴 적용= 웹폰트 */
@font-face {
font-family: "My Font";
src: url(./font/aaa.ttf);
}
/* 웹폰트 적용하기 */
p{font-family: "My Font",monospace;}
/* 폰트 크기 [단위사용..] */
p{font-size: 2.0em;}
/* 폰트 두께 bold, normal */
p{font-weight: bold;}
/* 폰트 기울기 italic, normal */
p{font-style: italic;}
/* 폰트의 4가지 속성을 축약으로 .. 한번에[작성 순서 : (weight/style), size, family]*/
p{font: bold italic 300% "My Font", monospace;;}
/* 텍스트 관련 속성 */
/* 텍스트의 정렬 */
p{text-align: right;}
p{text-align: center;}
/* 텍스트 변환[대소문자] */
p{text-transform: capitalize;}
p{text-transform: uppercase;}
p{text-transform: lowercase;}
/* 텍스트 꾸미기(선긋기) */
p{text-decoration: overline;}
p{text-decoration: underline;}
p{text-decoration: line-through;}
p{text-decoration: none;} /*<a>태그에서 많이 쓰임*/
/* 텍스트그림자 */
p{text-shadow: 5px 3px 5px red;}
/* 워드 랩 */
p.aa{
border: 1px solid blue;
width: 5em;
word-wrap: break-word;
}
/* 다중 컬룸 */
#column{
column-count: 2;
column-gap: 80px;
column-rule: 4px dashed green;
}
</style>
</head>
<body>
<p>hello world</p>
<p>한글도 사용해 봅니다.</p>
<hr>
<!-- 워드 랩 -->
<p class="aa">
한글은 전혀 문제 없이 자동으로 워드랩 됩니다.
sdgfsdgsdfasddfsdfdsfsggggggggggggggggggggggggggggg
</p>
<hr>
<!-- 다중 컬룸 -->
<p id="column">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima fugiat distinctio incidunt tempore obcaecati ab ea nostrum eaque molestiae labore? Aperiam modi beatae autem ad tempore fuga nesciunt voluptatum officia?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque omnis molestiae asperiores minima ea, illo possimus doloremque, esse quaerat animi excepturi, obcaecati est recusandae magni laudantium fugit veritatis expedita! Nam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque dolores consectetur minima iusto facilis nemo rerum ducimus! Eligendi excepturi veritatis alias laborum, dolorem quibusdam modi ullam accusantium quis fugit tenetur!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut corrupti illo adipisci facere quam ratione consequatur molestiae, sunt ipsum nulla consectetur facilis quibusdam ullam tenetur veritatis, esse dicta ab ducimus.
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box model</title>
<!-- 내부 스타일시트 -->
<style>
p.aa{
/* 1. 경계선 스타일 */
border-style: solid; /*기본3px,black색상*/
border-top-style: dotted;
/* 2. 경계선의 두께*/
border-width: 3px;
border-bottom-width: 8px;
/* 3. 경계선의 색상 */
border-color: red;
border-right-color: blue;
/* 4. 모서리를 둥글게 */
border-radius: 20px;
border-bottom-left-radius: 0px;
border-top-right-radius: 0px;
/* 5. 경계선 이미지 */
/* 이미지가 보여질 정도의 선두계가 필요함 */
border: 30px solid transparent ;
border-image: url(./image/border.png);
border-image-slice: 30 30; /*높이 너비*/
border-image-repeat: round; /*라운드만큼 확장*/
/* 6. 요소의 크기 */
width: 70%;
height: 200px; /*높이 값을 %단위로 할때 고려해야 함. : 부모사이즈를 모름*/
/* 7. 블럭요소의 요소 자체가 가운데 정렬[단, 너비를 조절했을 때] */
margin-left: auto; margin-right: auto;
}
/* 인라인요소는 크기 설정이 안됨 그래서, margin auto 가운데 정렬도 안됨*/
a{background-color: red; width: 300px;}
em{background-color: aqua;}
/* 인라인요소 중에 블럭요소의 크기조절 특징이 있는 요소들이 존재함 */
/* 이런 요소들을 inline-block요소라 부름 */
input{background-color: aqua; width: 100%;}
img{border: 1px solid black; width: 25%;}
</style>
</head>
<body>
<!-- 경계선/ 요소크기/ 가운데 정렬 -->
<p class="aa">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid reprehenderit suscipit laborum voluptatem debitis dolorem repellendus fugiat odit, ea odio eum perferendis quibusdam minus temporibus quas ipsam molestiae? Ad, non.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias neque, fugiat quisquam alias voluptate ex maiores vel nemo ad sunt possimus. Labore, mollitia doloribus ratione fuga unde deserunt corporis quod?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa expedita nam tempore vel quasi quos nulla, minima deleniti, velit aliquam voluptate, voluptatibus est a odit numquam fugiat! Dolor, explicabo architecto.
</p>
<!-- 인라인요소의 너비 조정 -->
<a href="">google</a>
<em>hello world</em>
<!-- 인라인블럭요소의 너비조정 -->
<input type="text">
<img src="./image/back.jpg" alt="">
<hr>
<!-- 마진에 대한 특이점: 마진이 겹칠 수 있음 -->
<div class="margin">
<p id="p1">#p1</p>
<p id="p2">#p2</p>
</div>
<style>
div.margin{
padding: 0px;
}
#p1{background-color: red; height: 50px; margin: 0px; margin-bottom: 20px;}
#p2{background-color: green; height: 50px; margin: 0px; margin-top: 10px;}
/* 심지어 음수 마진도 가능 */
#p1{background-color: red; height: 50px; margin: 0px;}
#p2{background-color: green; height: 50px; margin: 0px; margin-top: -20px; width: 50%;}
</style>
<hr>
<!-- 배경이미지 -->
<p class="bg">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores ipsum temporibus modi, quis laborum dolorem distinctio nobis fugit! Necessitatibus, impedit aspernatur. A totam obcaecati sequi impedit quidem dicta corrupti labore.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Labore porro fuga autem beatae laborum. Id tenetur voluptatum aliquid magnam ea unde magni in veniam praesentium saepe? Fuga beatae cum ipsa.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam est vel eligendi, minima optio ut ullam ad rerum incidunt voluptatibus harum natus ducimus magnam iusto. Suscipit qui expedita aspernatur atque?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum, cupiditate. Incidunt, totam dolor. Deleniti facilis est aliquam adipisci ducimus architecto distinctio, libero dolorum quia qui reiciendis aut quam quas temporibus?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis a ut, commodi voluptas rem, odit aut qui sed optio accusantium libero expedita dolorem nesciunt velit cumque suscipit placeat, minima totam.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias quae, sunt ea ab inventore nisi magni veniam accusantium. Repellat, dicta! Repellendus eveniet nobis expedita ipsa quisquam amet reprehenderit vel voluptatem.
</p>
<style>
p.bg{
background-color: green;
background-image: url(./image/image.png);
background-size: 200px 100px;
background-repeat: repeat-x;
background-repeat: no-repeat;
background-position: center;
background-position: top right;
padding: 10px 20px 10px 20px; /*top right bottom left*/
}
</style>
<hr>
<!-- 배경이미지가 붙어있는 위치 설정 -->
<p id="ss">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi numquam doloribus aut nesciunt neque deleniti nostrum nemo saepe quisquam quam harum temporibus, modi, ut nulla facilis facere vel tempore dicta.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid nostrum doloribus aperiam blanditiis ut. Quae doloremque natus quaerat alias repellat non, vel quos quas minus, qui similique reprehenderit cumque quo?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati sequi accusantium harum! Iusto, dolore quas rerum quam excepturi ullam, accusantium ab, facilis quidem et quo. Eveniet ea repellendus molestiae ipsam.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores aspernatur quae perspiciatis natus quaerat illum suscipit, aliquid, non eum cumque voluptas laborum, officia nam eius provident accusantium voluptatem illo quo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium suscipit, rem eius nobis iste possimus veniam ullam autem atque quo! Officia rem sapiente atque praesentium. Recusandae similique assumenda dicta veritatis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea eveniet odio, facilis sit natus, recusandae eligendi possimus voluptatum voluptate, vero distinctio. Eveniet itaque at aliquam? Amet ratione voluptatum eaque consectetur?
</p>
<style>
#ss{
width: 60%;
height: 300px;
border: 2px solid blue;
overflow: scroll;
margin-left: auto; margin-right: auto;
background-image: url(./image/image.png);
background-size: 200px 100px;
background-repeat: no-repeat;
background-position: center;
background-attachment: scroll; /*default*/
background-attachment: local; /*배경이 콘텐츠에 적용된 느낌 (일반적으로 많이 사용)*/
background-attachment: fixed; /*브라우저에 적용된 배경.. 다만 p요소에 적용했기에 p요소 안에서만 보임*/
}
</style>
</body>
</html>
'CSS' 카테고리의 다른 글
| Web App: 반응형웹01 (0) | 2023.10.30 |
|---|---|
| 웹사이트 만들어보기 (0) | 2023.10.30 |
| CSS-D5 (0) | 2023.10.30 |
| CSS-D04 (0) | 2023.10.27 |
| css//01 (0) | 2023.08.30 |