*border-radius 둥근 테두리
border-radius: 크기 또는 백분율
크기 : 반지름 크기를 px, em의 단위와 함께 수치로 표시
백분율 : 핸재 요소의 크기를 기준으로 비율(%)로 지정
생략
<style>
#round{
border-radius: 25px;
}
#circle{
border-radius: 50%;
}
#round1{
width: 300px;
height: 300px;
border: 1px solid black;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
</style>
</head>
<body>
<img src="cat.jpg" id="round">
<img src="photo.jpg" id="circle">
<div id="round1"></div>
생략
실습1) p.259
생략
<style>
#container{
width: 600px;
border: none;
/* 왼쪽 오른쪽 가운데 => 밖여백 위아래 0, 왼오른쪽 자동으로 계산 */
margin :0 auto;
}
div{
border: 1px dotted #222;
padding: 20px;
margin:20px;
}
table, th, td{
/* 1px 실선 #ccc;
테이블 테두리선 합치기 */
border: 1px solid #ccc;
border-collapse: collapse;
}
th,td{
padding: 10px 20px;
}
#description{
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
#package{
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
</style>
</head>
<body>
<div id="container">
<div id="description">
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
<p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
</div>
<div id="receipe">
<h2>레드향 샐러드 레시피</h2>
<p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
<p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
<ol>
<li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
<li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
<li>드레싱 재료를 믹서에 갈아줍니다.</li>
<li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
</ol>
</div>
<div id="package">
<h2>상품 구성</h2>
<table>
<caption>선물용과 가정용 상품 구성</caption>
<colgroup>
<col style="background-color:#eee;">
<col>
<col span="2" style="width:150px">
</colgroup>
<thead>
<tr>
<th>용도</th>
<th>중량</th>
<th>갯수</t>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td rowspan="2">가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</tbody>
</table>
</div>
</div>
생략
여백스타일
*요소 주변의 여백을 설정하는 margin
maring : 크기 | 백분율 | auto
크기 : 너비값이나 높이값을 px나 em 같은 단위와 함께 수치로 지정 ex) margin : 50px;
백분율 : 박스 모델을 포함한 부모 요소를 기준으로 너비값이나 높이값을 퍼센트(%)로 지정 ex) margin 0.1%;
auto : 디스플레이 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정
생략
<style>
div{
width: 200px;
height: 100px;
border: 1px solid black;
}
#margin1{
margin: 50px; /*모두*/
margin: 30px 50px; /* 위아래 왼오른쪽*/
margin: 30px 50px 100px 200px;
padding: 20px;
}
/* 마진 중첩 => 밖여백 겹쳐짐 */
#margin2{
margin: 50px;
padding: 20px;
}
#margin3{
margin: 50px;
padding: 20px;
}
#margin4{
margin: 50px;
padding: 20px;
}
#container{
/* 왼쪽 오른쪽 가운데 정렬 */
margin: 0px auto;
padding: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="margin1">레드향1</div>
<div id="margin2">레드향2</div>
<div id="margin3">레드향3</div>
<div id="margin4">레드향4</div>
</div>
생략
레이아웃
*배치 방법을 결정하는 display
display : block; : 인라인 레벨 요소를 블록 레벨 요소로 만든다.
display : inline; : 블록 레벨 요소를 인라인 레벨 요소로 만든다.
display : inline-block; : 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있음.
display : none; : 해당 요소를 화면에 표시하지 않음.
*왼쪽이나 오른족으로 배치하는 float
float : left; : 해당 요소를 문서의 왼쪽에 배치
float : right; : 해당 요소를 문서의 오른쪽에 배치
float : none; : 좌우 어느 쪽에도 배치하지 않음. 기본값
*float 속성을 해제 clear
clear : left; : float : left를 해제
clear : right; : float : right를 해제
clear : both; : float : left와 float : right를 해제
<style>
h1, p, div, span{
border: 1px solid black;
}
h1{
/* block 큰영역 -> inline 작은영역 */
display: inline;
}
span{
display: block;
}
ul{
list-style: none;
}
li{
/* block 큰영역 => inline(4) -> block(1)*/
display: inline-block;
border: 1px solid black;
padding: 20px;
margin: 0 20px;
}
</style>
</head>
<body>
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
</ul>
<h1>제목</h1>
<p>문단</p>
<div>큰영역</div>
<span>작은 영역</span>
</body>
<style>
p,img{
border: 1px solid blue;
}
img{
/* 이미지 왼쪽(기준), 오른쪽 어울림 */
float: right;
margin-right: 40px;
}
#ppp{
/* 어울림 해제 */
clear: right;
}
</style>
</head>
<body>
<img src="photo.jpg">
<p>설명글 설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글
설명글 설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글
설명글 설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글
</p>
<p>설명글 설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글
설명글 설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글
설명글 설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글
</p>
<p id="ppp">설명글 설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글
설명글 설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글
설명글 설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글
</p>
<p>설명글 설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글
설명글 설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글
설명글 설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글설명글
</p>
실습2)
생략
<style>
/* id="container" 가운데 정렬 */
#container{
margin: 0px auto;
width: 1200px;
}
/* id="header" 너비 1200px, 높이 120px, 배경색*/
#header{
width: 1200px;
height: 120px;
background-color: skyblue;
}
/* id="sidebar" 너비 300px, 높이 600px, 배경색, 왼쪽 어울림*/
#sidebar{
width: 300px;
height: 600px;
background-color: pink;
float: left;
}
/* id="contents" 너비 900px, 높이 600px, 배경색, 왼쪽 어울림*/
#contents{
width: 900px;
height: 600px;
background-color: silver;
float: left;
}
/* id="footer" 너비 1200px, 높이 100px, 배경색, 어울림 해제 */
#footer{
width: 1200px;
height: 100px;
background-color: skyblue;
clear: left;
}
</style>
</head>
<body>
<div id="container">
<div id="header">헤더</div>
<div id="sidebar">사이드바</div>
<div id="contents">본문</div>
<div id="footer">푸터</div>
</div>
생략
실습3)
<style>
#container{
margin: 0px auto;
width: 1200px;
}
#header{
width: 1200px;
height: 120px;
background-color: skyblue;
}
#sidebar{
width: 250px;
height: 600px;
background-color: pink;
float: left;
}
#contents{
width: 800px;
height: 600px;
background-color: silver;
float: left;
}
#sidebar2{
width: 150px;
height: 600px;
background-color: pink;
float: left;
}
#footer{
width: 1200px;
height: 100px;
background-color: skyblue;
clear: left;
}
</style>
</head>
<body>
<div id="container">
<div id="header">헤더</div>
<div id="sidebar">사이드바</div>
<div id="contents">본문</div>
<div id="sidebar2">사이드바2</div>
<div id="footer">푸터</div>
</div>
'KDT > WEB' 카테고리의 다른 글
| 231116 WEB - CSS6 선택자, 클래스 (0) | 2023.11.17 |
|---|---|
| 231114 WEB - CSS5 위치 (0) | 2023.11.17 |
| 231110 WEB - CSS3 (0) | 2023.11.10 |
| 231109 WEB - CSS2 우선순위 및 텍스트 스타일 (0) | 2023.11.09 |
| 231107 WEB - HTML4(input 속성), CSS1(CSS란?) (0) | 2023.11.07 |