1. 둥근 모서리(border-radius)

border-radius 속성은 요소의 모서리를 둥글게 만듭니다. 이 속성은 특정 모서리나 전체 요소에 적용 가능하며, 픽셀 값이나 백분율로 지정할 수 있습니다.

/* 단일 값: 모든 모서리에 동일 적용 */
border-radius: 20px;

/* 4개 값: 시계 방향 (좌상, 우상, 우하, 좌하) */
border-radius: 10px 20px 30px 40px;

/* 해당 모서리 전용 속성 사용 */
border-top-left-radius: 15px;
border-bottom-right-radius: 25px;

요소를 완전히 원형으로 만들려면:

• 정사각형일 경우 border-radius: 50%;
• 직사각형일 경우 border-radius: 높이값 / 2;

<div class="rounded-box"></div>

.rounded-box {
  width: 200px;
  height: 150px;
  background-color: #4a90e2;
  border-radius: 75px; /* 높이 절반 → 위아래만 둥근 모서리 */
  margin: 20px;
}

2. 박스 그림자(box-shadow)

box-shadow는 요소 주변에 그림자를 생성합니다. 인수는 수평 위치, 수직 위치, 흐림 정도, 확장 반경, 색상 순으로 지정합니다. inset 키워드는 내부 그림자로 변경합니다.

.box-shadow-element {
  box-shadow: 5px 8px 12px -3px rgba(0, 0, 0, 0.25);
}

이펙트를 동적으로 적용할 수도 있습니다:

.card {
  padding: 20px;
  border: 1px solid #ddd;
  background: white;
  transition: all 0.3s;
}

.card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

2.1 텍스트 그림자(text-shadow)

h2 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

• 첫 두 값: 수평·수직 오프셋
• 세 번째: 블러(模糊) 반경
• 네 번째: 색상

3. 부동(floating) 기반 레이아웃

3.1 표준 흐름(표준 흐름/문서 흐름)

• 块 요소: 위에서 아래로,default 줄바꿈 없이 세로 나열
• 인라인 요소: 왼쪽에서 오른쪽으로, 줄 바꿈은 자동 처리

3.2 부동(floating)

부동은 요소를 scrollbar 없이 왼쪽/오른쪽으로 이동시키는 레이아웃 방식입니다.

Sidebar Ad-box

.left-column {
  float: left;
  width: 25%;
}

.right-content {
  float: left;
  width: 75%;
}

핵심 특징:

• 부동 요소는 표준 흐름에서 벗어남 (document flow脫標)
• 인라인 블록처럼 너비를 content에 따라 조정
• 부모 요소는 내부 부동 요소의 높이를 인식하지 못함 → "부모 높이 붕괴" 문제 발생
• 인라인 요소에 부동을 적용하면 display: block 없이도 width/height 설정 가능

4. 부동 정리(clean float)

부동을 정리하는 이유는 부모 컨테이너가 자식의 높이를 인식하지 못해 레이아웃이 깨지는 문제를 해결하기 위함입니다.

4.1 대표적인 정리 방법

① 추가 요소법 (추천하지 않음)

.clearfix-anchor {
  clear: both;
}

<div class="parent">
  <div class="child float"></div>
  <div class="child float"></div>
  <div class="clearfix-anchor"></div>
</div>

② overflow 속성 활용

.parent {
  overflow: hidden; /* auto/scroll도 가능 */
  zoom: 1; /* IE6 호환용 */
}

이점: 단순하고 직관적 단점: overflow: hidden使用 시 잘리는 콘텐츠 문제 가능성

③ Double Pseudo Element (표준 방식)

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

이 방법은 외부 간격 축소 및 호환성 문제 해결에도 효과적입니다.

④ 단일 Pseudo Element

.clearfix::after {
  content: "";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

5. 일반적인 웹페이지 레이아웃 예시

<div class="layout-wrapper">
  <header class="site-header"> Site Header </header>
  <div class="main-container">
    <aside class="sidebar-left"> Outside Nav </aside>
    <main class="content-area">
      - Item 1
- Item 2
- Item 3
- Item 4
    </main>
  </div>
  <footer class="site-footer"> Footer </footer>
</div>

.site-header,
.site-footer {
  background-color: #333;
  color: #fff;
  height: 60px;
  line-height: 60px;
}

.main-container {
  width: 960px;
  margin: 0 auto;
  overflow: hidden; /* clear fix 효과 */
}

.sidebar-left {
  float: left;
  width: 200px;
  background-color: #f5f5f5;
  padding: 15px;
}

.content-area {
  float: left;
  width: 740px;
}

.item-grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

.item {
  float: left;
  width: 170px;
  height: 120px;
  background-color: #e0e0e0;
  margin-right: 20px;
  margin-bottom: 15px;
}

.item.last {
  margin-right: 0;
}