<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>블록 레벨과 인라인 레벨</title>
<style>
body * { /* body 하위에 있는 모든 요소에 대해 */
border:1px solid blue;
}
.accent {
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<h1>시간이란...</h1>
<div>내일 죽을 것처럼 <p class="accent">오늘</p>을 살고 </div>
<p>영원히 살 것처럼 <br>내일을 꿈꾸어라. </p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델</title>
<style>
button {
font-size: 2em;
background: #fff;
padding: 15px 30px;
margin:15px;
border: 1px solid #222;
/* Do it! 박스 모델에 그림자 추가하기 */
box-shadow:2px 2px 5px #000; /* 오른쪽 아래에 그림자 효과*/
}
</style>
</head>
<body>
<button>Do it!</button>
</body>
</html>박스 그림자 좌표 같은 역할
box-shadow: X(3시 방향으로) Y(6시 방향으로) 번짐의 정도 그림자의 색상
box-shadow: 2px 2px 5px #000;
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델</title>
<style>
div {
border: 1px solid #000;
margin-bottom: 20px;
}
/* Do it! 박스 모델의 너비와 높이 지정하기 */
.box1 {
width:400px; /* 고정 너비 */
height:100px; /* 고정 높이 */
}
.box2 {
width:70%; /* 가변 너비 */
height:100px; /* 고정 높이 */
}
</style>
</head>
<body>
<div class="box1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, dignissimos. Impedit perferendis fugiat facere molestiae!</div>
<div class="box2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur laboriosam ullam, excepturi vitae ratione quos.</div>
</body>
</html>가로 플렉스 세로 픽스
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>블록 레벨과 인라인 레벨</title>
<style>
body * { /* body 하위에 있는 모든 요소에 대해 */
border:1px solid blue;
}
.accent {
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<h1>시간이란...</h1>
<div>내일 죽을 것처럼 <span class="accent">오늘</span>을 살고 </div>
<p>영원히 살 것처럼 <br>내일을 꿈꾸어라. </p>
</body>
</html>블록 레벨 I (혼자 있고 싶어요)
인라인 레벨 E (우린 모두 칭구칭긔) 대표적 태그 span, img
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델</title>
<style>
div {
width:200px;
height:100px;
display:inline-block;
margin:15px;
border-style:solid; /* 테두리 스타일 - 실선 */
}
/* Do it! 테두리 두께 지정하기 */
.box1 {
border-width:2px; /* 네 방향 모두 2px */
}
.box2 {
border-width:thick thin; /* top & bottom - thick, left & right - thin */
}
.box3 {
border-width:thick thin thin; /* top - thick, right - thin, bottom - thin, left - thin */
}
.box4 {
border-width:10px 5px 5px 10px; /* top - 10px, right - 5px, bottom - 5px, left - 10px */
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델</title>
<style>
div {
width:200px;
height:100px;
display:inline-block;
margin:15px;
border-style:dashed; /* 테두리 스타일 - 선으로 된 점선 */
border-width:2px; /* 테두리 굵기 - 2px */
}
/* Do it! 박스 모델의 테두리 색상 지정하기 */
.box1 {
border-color:red; /* 전체 테두리 - 빨강 */
}
.box2 {
border-top-color:blue; /* 위쪽 테두리 - 파랑 */
border-left-color:red; /* 왼쪽 테두리 - 빨강 */
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델</title>
<style>
/* Do it! 테두리 스타일 묶어서 지정하기 */
h1 {
padding-bottom: 5px;
border-bottom: 3px solid rgb(75, 70, 70); /* 아래쪽 테두리만 3px짜리 회색 실선*/
}
p {
padding: 10px;
border: 3px dotted blue; /* 모든 테두리를 3px짜리 파란 점선 */
}
</style>
</head>
<body>
<h1>박스 모델</h1>
<p>박스 모델은 실제 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding), 박스의 테두리(border), 그리고 여러 박스 모델 간의 여백인 마진(margin) 등의 요소로 구성되어 있습니다. </p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델</title>
<style>
/* Do it! 이미지 꼭짓점을 둥글게 처리하기 */
.round {
border-radius: 25px; /* 네 방향 꼭짓점을 둥글게 */
}
</style>
</head>
<body>
<img src="images/cat.jpg">
<img class="round" src="images/cat.jpg">
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델</title>
<style>
/* Do it! 이미지를 원형으로 표시하기 */
.circle {
border-radius:50%; /* 테두리를 원으로 */
}
</style>
</head>
<body>
<img src="images/photo.jpg">
<img class="circle" src="images/photo.jpg">
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델</title>
<style>
div {
width:200px;
height:150px;
}
/* Do it! 원하는 꼭짓점만 둥글게 처리하기 */
.corner {
border:2px solid blue;
border-top-left-radius:20px; /* 왼쪽 위 꼭짓점만 둥글게 */
border-top-right-radius:20px; /* 오른쪽 위 꼭짓점만 둥글제 */
}
</style>
</head>
<body>
<div class="corner"></div>
</body>
</html>
'코딩 > CSS 실습' 카테고리의 다른 글
| [코드 연습장]CSS: 다양한 고급 선택자를 활용한 폼(Form)과 리스트 디자인 (0) | 2026.03.25 |
|---|---|
| [코드 연습장] CSS: Flexbox 기초 정렬 실습 및 반응형 프로필 카드 만들기 (0) | 2026.03.23 |
| [코드 연습장]CSS: 상대 단위(em/rem)와 유동적 이미지(Fluid Image) 기초 실습 (0) | 2026.03.23 |
| [코드 연습장] CSS 배경 꾸미기 (background-size, linear-gradient 등) (0) | 2026.03.20 |
| [코드 연습장] margin, padding, left-top등 박스 모델과 레이아웃 제어 (0) | 2026.03.19 |