[CSS]다양한 레이아웃의 구성과기능

1. 수평, 중앙, One True 정렬 레이아웃

1.1 수평 정렬 (Float 방식)

• `float: left;` 속성을 사용하여 요소들을 가로로 배치
• `float` 속성은 원래 텍스트를 감싸는 용도로 만들어졌기 때문에 레이아웃을 구성할 때 문제가 발생할 수 있음.
• 자손에게 `float`속성을 지정하고, 부모의 `overflow` 속성에는 `hidden`키워드 적용
• `hidden` 지정하지 않는다면, 요소들이 떠다님. (빈 공간을 아래 요소가 채움)

.container {
    overflow: hidden;
}
.item {
    float: left;
    margin: 0 3px;
    padding: 10px;
    border: 1px solid black;
}

 

1.2 중앙 정렬 (`margin: auto;`)

• `margin: auto;`를 활용하여 요소를 가로 중앙에 배치
• `margin: auto;`는 block 요소에서만 동작하며, `display: inline-block;`을 사용하면 `text-align: center;`를 활용 가능

.container {
    width: 960px;
    margin: 0 auto;
}

 

1.3 One True 레이아웃 (고정형 + 가변형 레이아웃)

• One True Layout은 좌우` float`을 활용하여 콘텐츠 영역을 나누는 방식

body {
    width: 500px;
    margin: 10px auto;
}

/* 부모 태그의 overflow 속성에 hidden 적용 */
#middle {
    overflow: hidden; 
}

/* 자손 태그에 적당한 너비를 입력하고 float 적용 */
#left {
    float: left;
    width: 150px;
    background: red;
}
#right {
    float: right;
    width: 350px;
    background: blue;
}

• `display: flex;`이를 사용 `float`하지 않으면 가능합니다(권장)

✅ 핵심 요점 정리

항목	설명
수평 정렬	`float: left;` 사용 (하지만 추천되지 않음)
중앙 정렬	`margin: auto;`로 가운데 정렬 가능
One True Layout	고정형 + 가변형 혼합 레이아웃

---

2. 요소 배치

2.1 절대 위치 지정 (`position: absolute;`)

• 특정 위치에 절대적인 좌표로 배치
• `position: absolute;`는 부모 요소의 position: relative; 기준으로 움직이기 때문에,
  부모 요소가 없으면 뷰포트(브라우저 화면) 기준으로 배치

#container {
    position: relative;
    width: 500px;
    height: 300px;
}
.circle {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
#red {
    background: red;
    left: 20px;
    top: 20px;
}

 

2.2 요소를 중앙 배치 (position + transform)

• 요소를 가로·세로 완전 중앙에 배치하는 방법

/* 중앙 정렬하려는 div 태그의 position속성을 absolute로 지정.
   left속성과  top속성을 50%로 지정 */
#container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /*왼쪽 상단 꼭짓점이 기준이므로 중앙에 맞춰줌. */
}

• `display: flex;`를 사용하면 더 쉽게 중앙 정렬 가능

#container {
    display: flex;
    justify-content: center;
    align-items: center;
}

 

✅ 핵심 요점 정리

항목	설명
절대 위치 배치	position: absolute; 사용
중앙 배치	transform: translate(-50%, -50%); 또는 flexbox 활용

---

3. 글자 생략 (text-overflow: ellipsis;)

3.1 한 줄 글자 생략 (`ellipsis`)

• `text-overflow: ellipsis;`를 사용하여 길이가 초과된 텍스트를 `...`으로 처리할 수 있음
• `ellipsis`는 `width`가 설정된 요소에서만 동작하므로, 반드시 `width` 값을 함께 지정해야 함

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

3.2 여러 줄 글자 생략 (line-clamp)

• 최신 CSS에서는 `-webkit-line-clamp` 속성을 활용하면 여러 줄도 자동으로 생략 가능

.multi-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

 

✅ 핵심 요점 정리

항목	설명
한 줄 생략	`text-overflow: ellipsis;` 사용
여러 줄 생략	`-webkit-line-clamp` 활용

---

📎 참고자료

• MDN CSS 정렬 가이드
• CSS Grid vs Flexbox
• HTML5 웹 프로그래밍 입문 4판 (김성윤 저, 한빛미디어)