라라리라
2023.08.10 / CSS3 - 코딩 22 일차 본문
0301_font_web.html
<!DOCTYPE html>
<html lang="ko">
<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 href="https://fonts.googleapis.com/css2?family=Dokdo&family=East+Sea+Dokdo&family=Nanum+Gothic&display=swap" rel="stylesheet">
<style>
body {font-family: 'East Sea Dokdo', cursive;}
</style>
</head>
<body>
웹 사이트에서 폰트를 다운받아 설치해줍니다.
</body>
</html>
0302_fontstyle.html
<!DOCTYPE html>
<html lang="ko">
<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.style1 {
font: italic 30px arial,sans-serif;
}
p.style2 {
font: bold 40px Georgia,serif;
}
</style>
</head>
<body>
<p class="style1">font: italic 30px arial,sans-serif</p>
<p class="style2">font: bold 40px Georgia,serif</p>
</body>
</html>
0303_text_deco.html
<html lang="ko">
<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 { text-decoration:overline; }
h2 { text-decoration:line-through; }
h3 { text-decoration:underline; }
</style>
</head>
<body>
<h1>텍스트 장식의 예입니다.</h1>
<h2>텍스트 장식의 예입니다.</h2>
<h3>텍스트 장식의 예입니다.</h3>
</body>
</html>
0304_text_trans.html
<html lang="ko">
<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.upper { text-transform:uppercase; }
p.lower { text-transform:lowercase; }
p.capit { text-transform:capitalize; }
</style>
</head>
<body>
<p class="upper">text_transform is uppercase.</p>
<p class="lower">text_transform is lowercase.</p>
<p class="capit">text_transform is capitalize.</p>
</body>
</html>
0305_margin.html
<html lang="ko">
<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:5px solid red; background:yellow;}
.box1{margin:20px;}/*상,하,좌,우*/
.box2{margin:20px 50px;}/*상하, 좌우*/
.box3{margin:20px 50px 30px;}/*상, 좌우, 하*/
.box4{margin:20px 30px 50px 70px}/*상 우 하 좌*/
</style>
</head>
<body>
<p class="box1">박스의 상,하,좌,우에 20px의 여백이 지정된경우</p>
<p class="box2">박스의 상,하에 20px의 여백이, 좌우에는 50px의 여백이 지정된경우</p>
<p class="box3">박스의 상에 20px, 좌우에는 50px, 하에 30px의 여백이 지정된경우</p>
<p class="box4">박스의 상에 20px, 우에는 30px, 하에 50px, 좌에 70px의 여백이 지정된경우</p>
</body>
</html>
0306_padding1.html
<html lang="ko">
<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:5px solid red; background:yellow;}
.box1{padding:20px;}/*상,하,좌,우*/
.box2{padding:20px 50px;}/*상하, 좌우*/
.box3{padding:20px 50px 30px;}/*상, 좌우, 하*/
.box4{padding:20px 30px 50px 70px}/*상 우 하 좌*/
</style>
</head>
<body>
<p class="box1">박스의 상,하,좌,우에 20px의 여백이 지정된경우</p>
<p class="box2">박스의 상,하에 20px의 여백이, 좌우에는 50px의 여백이 지정된경우</p>
<p class="box3">박스의 상에 20px, 좌우에는 50px, 하에 30px의 여백이 지정된경우</p>
<p class="box4">박스의 상에 20px, 우에는 30px, 하에 50px, 좌에 70px의 여백이 지정된경우</p>
</body>
</html>
0307_margin_padding.html
<html lang="ko">
<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 {
margin: 0px;
padding: 0px;
}
p {
margin: 0px;
padding: 0px;
background-color: yellow;
border: 1px solid red;
}
#target {
margin: 10px;
padding: 20px;
background-color: lightgreen;
border: 1px solid red;
}
</style>
</head>
<body>
<p>margin: 0px, padding: 0px인 단락입니다.</p>
<p id="target">margin: 10px, padding: 20px인 단락입니다.</p>
</body>
</html>
0308_테이블.html
<html lang="ko">
<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>
/*collapse가 표의 이중 테두리를 붙이는 역할을 한다*/
table,
th,
td {
border-collapse: collapse;
border: 1px solid gray;
}
table {
width: 1000px;
height: 450px;
background: #ffffcc;
margin: 0px auto;
}
caption {
font-weight: bold;
margin-bottom: 50px;
}
th,
td {
padding: 15px 20px;
width: 100px;
}
thead th {
background: #3366ff;
color: #ffffff;
border-bottom: 6px solid #000033;
}
/* 수직정렬 위치 top*/
td {
vertical-align: top;
}
/* 글자 중앙정렬, 수직정렬 위치 middle*/
tbody .aa {
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<table>
<caption>업종별 모범거래기준 주요 내용 비교</caption>
<thead>
<tr>
<th>구분</th>
<th>제빵(4월)</th>
<th>피자(7월)</th>
<th>치킨(7월)</th>
<th>커피(11월)</th>
</tr>
</thead>
<tbody>
<tr>
<th>영업지역</th>
<td class="aa">500m</td>
<td class="aa">1,500m</td>
<td class="aa">800m</td>
<td class="aa">500m</td>
</tr>
<tr>
<th>광고</th>
<td>관련내용 없음<br />(분쟁없음)</td>
<td>총 광고비 사전동의<br />광고내역 송부 등</td>
<td>총 광고비 사전동의<br />광고내역 송부 등</td>
<td>관련내용 없음<br />(분쟁없음)</td>
</tr>
<tr>
<th>대금지급</th>
<td>관련내용 없음<br />(분쟁없음)</td>
<td>관련내용 없음<br />(분쟁없음)</td>
<td>관련내용 없음</td>
<td>월 1~2회 정산<br />정산기한 최소 7일 보장</td>
</tr>
</tbody>
</table>
</body>
</html>
0309_인라인과블럭.html
<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<body>
<!--
[인라인 inline]
(1) 개념
인라인 태그는 컨텐츠 크기만큼만 공간을 차지한다.
즉, width와 height 및 margin과 padding이 없다.
(2) 종류
span, a, em
-->
<h3>inline</h3>
<a>AAAAAAAAAAAAAAAAAAAAA</a>
<span>SPAN</span>
<em>EM</em>
<br><br><br><br>
<!--
[블럭 block]
(1) 개념
블럭 태그는 혼자 한 줄을 전부 차지한다.
즉, width와 height 및 margin과 padding 속성이 적용된다.
(2) 종류
div, p, h1
-->
<h3>block</h3>
<h1>H1</h1>
<div>DIV</div>
<p>P</p>
<br><br><br><br>
<!--
[인라인블럭 inline-block]
(1) 개념
인라인블럭 태그는
inline처럼 줄바꿈 없이 한 줄에 다른 컨텐츠들과 나란히 배치되지만,
block처럼 width와 height 및 margin과 padding 속성이 적용된다.
(2) 종류
button, input, select
-->
<h3>inline-block</h3>
<button>button</button>
<input type="text">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</body>
</html>
0310_float.html
<!DOCTYPE html>
<html lang="ko">
<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 {
width: 100px;
height: 100px;
}
div#a {
background: #52D4FF;
}
</style>
</head>
<body>
<!--
float 은 해당 요소를 어떻게 정렬할지를 정의하는 css 속성이다.
float 속성은 묶음 태그(block element) 만 적용할 수 있다.
묶음 태그 : <div> <p> <ol> <ul> <table> <img> 등
left : 왼쪽으로 정렬한다.
right: 오른쪽으로 정렬한다.
-->
<div id="a">
a 영역
</div>
a 영역이 있습니다.
</body>
</html>
0311_float_right.html
<!DOCTYPE html>
<html lang="ko">
<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 {
width: 100px;
height: 100px;
float: right;
}
div#a {
background: #52D4FF;
}
</style>
</head>
<body>
<!--
float 은 해당 요소를 어떻게 정렬할지를 정의하는 css 속성이다.
float 속성은 묶음 태그(block element) 만 적용할 수 있다.
묶음 태그 : <div> <p> <ol> <ul> <table> <img> 등
left : 왼쪽으로 정렬한다.
right: 오른쪽으로 정렬한다.
-->
<div id="a">
a 영역
</div>
a 영역이 있습니다.
</body>
</html>
0312_float_left.html
<!DOCTYPE html>
<html lang="ko">
<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 {
width: 100px;
height: 100px;
float: left;
}
div#a {
background: #52D4FF;
}
</style>
</head>
<body>
<!--
float 은 해당 요소를 어떻게 정렬할지를 정의하는 css 속성이다.
float 속성은 묶음 태그(block element) 만 적용할 수 있다.
묶음 태그 : <div> <p> <ol> <ul> <table> <img> 등
left : 왼쪽으로 정렬한다.
right: 오른쪽으로 정렬한다.
-->
<div id="a">
a 영역
</div>
a 영역이 있습니다.
</body>
</html>
'코딩 > 2023 HTML & CSS' 카테고리의 다른 글
| 2023.08.12 / 미니 프로젝트 - 코딩24일차 (0) | 2023.08.13 |
|---|---|
| 2023.08.11 / CSS4 - 코딩 23 일차 (0) | 2023.08.11 |
| 2023.08.09 / CSS2 - 코딩 21 일차 (0) | 2023.08.09 |
| 2023.07.21 / HTML 4- 코딩 2 일차 (0) | 2023.07.21 |
| 2023.07.21 / HTML 3- 코딩 2 일차 (0) | 2023.07.21 |
'코딩/2023 HTML & CSS' Related Articles
more
