[1] 폰트 지정과 text 속성 변경
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Font & Text</title>
<style>
/* 폰트 글꼴지정 */
p{font-family: "Blippo Blk BT", sans-serif;}
p{font-family: "휴먼매직체", serif;}
p{font-family: monospace;}
/* 모든 컴퓨터에서 동일한 폰트로 보여지려면 */
/* 웹폰트 사용 : 개발자의 커스텀 폰트 지정 */
@font-face {
font-family: "MyFont";
src: url("./font/dalseo.ttf");
}
p{font-family: "MyFont", sans-serif;}
/* 폰트크기 */
p{font-size: small;} /*키워드로 적용*/
p{font-size: 16px;} /*수치 단위 px*/
p{font-size: 1.5em;} /*비율을 이용한 사이즈 1.5배(권장)*/
/* bold, normal */
p{font-weight: bold;}
/* italic, normal */
p{font-style: italic;}
/* 폰트속성 4개를 한번에 축약형으로 설정 */
/* 순서 [weight/style] size family */
p{font: bold italic 200% "MyFont","휴먼옛체",serif;}
/* 텍스트에 관련된 속성들 */
/* 텍스트 정렬 */
p{text-align: center;}
p{text-align: right;}
p{text-align: justify;}
/* 텍스트 변환[대소문자 변환] */
p{text-transform: uppercase;}
p{text-transform: lowercase;}
p{text-transform: capitalize;}
/* 텍스트 선긋기 */
p{text-decoration: overline;}
p{text-decoration: underline;}
p{text-decoration: line-through;}
p{text-decoration: none;}
/* 텍스트 그림자 */
p{text-shadow: 5px 3px 5px red;}
/* 워드 랩 */
p.aaa {
border: 1px solid blue;
width: 5em;
word-wrap: break-word;
}
#bbb{
column-count: 2;
column-gap: 80px;
column-rule: 4px dashed green;
}
</style>
</head>
<body>
<p>Hello world</p>
<p>한글은 어떠한가</p>
<p class="aaa">
한글은 전혀 문제 없이 자동으로 워드 랩 됨.
aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<!-- 다중 컬룸 -->
<p id="bbb">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt debitis assumenda natus cumque quaerat minus velit aliquid iste quae, labore consequatur placeat quos sed ullam, nostrum, molestiae repudiandae necessitatibus doloremque!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, ullam molestiae suscipit voluptas voluptatibus dolor totam quaerat quia, molestias a non quo minima unde deleniti earum impedit ex velit commodi.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit explicabo quaerat facere earum inventore. Eius dicta facilis alias non beatae soluta possimus ipsa officia velit nesciunt. Voluptatem hic molestias delectus.
</p>
<!-- 텍스트 정렬할때 인라인 요소와 블럭요소의 차이 -->
<!-- text-align 은 블럭요소에서만 의미가 있음 -->
<div style="text-align: center; background-color: bisque; height: 5em;">Hello</div>
<span style="text-align: center; background-color: aqua; line-height: 5em;">Hello</span>
</body>
</html>
[2] 요소 크기 및 배경
Block 속성과 inline 속성 요소
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>박스모델(요소크기 및 배경)</title>
<style>
p.aa{
/* 경계선 */
border-style: solid;
border-top-style: dotted;
border-width: thin;
border-width: 3px;
border-bottom-width: 8px;
border-color: red;
border-right-color: blue;
border-radius: 20px;
border-bottom-left-radius: 0px;
border-top-right-radius: 0px;
/* 경계선을 이미지가 보일정도의 두께로 설정 */
border: 30px solid transparent;
/* 경계선 이미지 */
border-image-source: url("./image/border.png");
border-image-slice: 30 30; /*높이 너비*/
border-image-repeat: round;
/* 요소 크기 */
width: 70%;
height: 300px;
/* 요소의 콘텐츠가 아니라 요소자체를 가운데 정렬 */
margin-left: auto;
margin-right: auto;
}
/* 인라인 요소 - 너비지정 불가 */
a{background-color: red; width: 200px;}
em{background-color: aqua; width: 100%;}
/* 인라인-블럭 요소 - 너비지정 가능 */
img{width: 500px; border: 1px solid black;}
input{background-color: aqua; width: 100%;}
</style>
</head>
<body>
<!-- 경계선 border / 요소크기 / 가운데 정렬 -->
<p class="aa">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non quis itaque explicabo error voluptas maiores eos, est animi temporibus quia vero nemo repudiandae quasi suscipit dolorum doloribus, ipsam aspernatur quam!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci totam expedita esse animi illum quidem unde accusamus sit, nam consectetur iste corrupti tenetur optio magni nemo ex deleniti aspernatur maxime.
</p>
<!-- 인라인 요소의 크기 설정 및 가운데 정렬 -->
<!-- 인라인 요소 : 너비조정 불가능 -->
<a href="">anchor</a>
<em>Hello</em>
<!-- 인라인(블럭) 요소 : 너비조정 가능 -->
<img src="./image/image.png" alt="image">
<input type="text">
<!-- 마진 -->
<div id="m">
<p id="p1">p1</p>
<p id="p2">p2</p>
</div>
<style>
#p1{background-color: red; margin: 0px; height: 50px; margin-bottom: 20px;}
#p2{background-color: green; margin: 0px; height: 50px; margin-top: 10px;}
/* 음수 마진을 주면 요소가 겹침 */
#p1{background-color: red; margin: 0px; height: 50px;}
#p2{background-color: green; margin: 0px; height: 50px; margin-top: -20px; width: 50%;}
</style>
<!-- 배경 이미지/색상 -->
<p class="back">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus consequatur cumque iusto dolor eligendi, neque blanditiis eum ea voluptatum officiis perspiciatis, doloribus est delectus dolorem amet quae deleniti aliquam autem!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum quisquam id sit deleniti beatae vel omnis explicabo, sapiente, architecto culpa cum dicta quia impedit. Dignissimos assumenda debitis asperiores amet expedita.
</p>
<style>
p.back{
background-color: green;
background-image: url("./image/image.png");
background-size: 200px 100px;
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: no-repeat;
background-position: center;
background-position: right top;
background-position: top center;
}
</style>
<!-- 배경 이미지가 붙어 있는 위치 설정 -->
<p id="attach">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis quis, reprehenderit, quae nobis ut ipsum voluptatum culpa harum eaque minus veritatis at deserunt, deleniti numquam dolor adipisci. Corrupti, similique vero.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus excepturi sint corporis facilis odio, atque sed commodi expedita a iste explicabo asperiores, obcaecati, ex dolores repellat ipsa ipsum molestiae quisquam.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum ratione nemo animi deserunt officiis a, necessitatibus odio debitis atque, expedita velit consequatur natus suscipit? Consequatur sequi molestias labore inventore quidem?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores in eveniet dicta illo veniam hic maiores recusandae numquam veritatis laudantium tenetur pariatur maxime corrupti ab tempore velit, esse non! Soluta!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, dolore ipsum velit quisquam hic cum iste quas vero saepe enim sequi ipsam, doloremque corporis odio iusto perferendis voluptate exercitationem eos!
</p>
<style>
#attach{
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; /*요소가 스크롤될때 배경도 같이 스크롤 - 요소에 붙어 있는 배경같은 느낌*/
background-attachment: local; /*콘텐츠에 배경이 붙은 느낌*/
background-attachment: fixed; /*브라우저에 배경이 이미지가 붙어 있음. 단, 요소안에서만 보여짐*/
}
</style>
</body>
</html>
[3] a태그와 list
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>anchor, list, table style</title>
<style>
a:link{color: blue;}
a:visited{color: brown;}
a:hover{color: red; font-size: 2em;}
a:active{color: yellow;}
/* 작성 순서가 다르면 동작 안될 수 있다
반드시 hover는 visited 다음에!
*/
#aa:hover{background-color: green;}
img{background-color: yellow; border: 2px solid red;}
img:hover{background-color: gray; width: 100%;}
</style>
</head>
<body>
<a href="http://www.mrhi.or.kr">aaaaa</a>
<!-- 다른 요소에도 :hover 효과 가능함 -->
<p id="aa">Hello</p>
<img src="./image/image.png" alt="img">
<hr>
<!-- 리스트 스타일 -->
<ul class="a">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
<style>
ul.a {list-style-type: circle;}
ul.a {list-style-type: disc;}
ul.a {list-style-type: square; list-style-position: inside;}
ul.a {list-style-image: url("image/border.png");}
</style>
<ol class="b">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ol>
<!-- 숫자 모양 바꾸기 -->
<style>
ol.b{ list-style: lower-alpha; }
ol.b{ list-style: lower-latin; }
ol.b{ list-style: lower-roman; }
ol.b{ list-style: lower-greek; }
ol.b{ list-style: decimal; }
ol.b{ list-style: decimal-leading-zero; }
</style>
</body>
</html>
3-1) li로 네비게이션 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>네비게이션 메뉴</title>
<style>
/* 네비게이션 메뉴 만들기 */
ul {
list-style: none;
border-top: 1px solid red;
border-bottom: 1px solid red;
padding: 10px 0;
text-align: center;
}
ul li {
display: inline;
text-transform: uppercase;
padding: 0 10px;
letter-spacing: 10px;
}
ul li a {
color: black;
text-decoration: none;
}
ul li a:hover{
color: darksalmon;
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">blod</a></li>
<li><a href="#">about</a></li>
<li><a href="#">Contect</a></li>
</ul>
</body>
</html>
[4] table
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Navigation menu</title>
<style>
table{ border: 2px solid; border-collapse: collapse; text-align: center;}
th, td{ border: 1px solid; padding: 10px 5px;}
th{background-color: green; color: white;}
tr:nth-child(2n){background-color: yellow;}
td:first-child{width: 40%;}
th{border-bottom: double red;}
/* 직접 요소를 만들지 않았지만 테이블에 숨어 있는 요소가 존재함 */
/* 테이블은 table안에 header body footer가 있다 */
/* 테이블만들때 명시하지 않으면 body만 자동 생성됨 */
table>:nth-child(1){border: 10px solid blue;}
/* 자식과 자손 */
table>tr{color: aqua;}
table tr{color: red;}
</style>
</head>
<body>
<table>
<tr>
<th>이름</th>
<th>이메일</th>
</tr>
<tr>
<td>김철수</td>
<td>chul@google.com</td>
</tr>
<tr>
<td>김영희</td>
<td>young@google.com</td>
</tr>
<tr>
<td>홍길동</td>
<td>hong@google.com</td>
</tr>
<tr>
<td>윤석열</td>
<td>yoon@google.com</td>
</tr>
</table>
</body>
</html>
보조기억장치