[TIL] CSS: 패딩(Padding), 디스플레이(display), 플롯(float) 및 포지션 제어

• CSS Padding property - 요소의 내부 여백을 조절하여 가독성을 높이고 크기를 제어하는 방법
• CSS display Property - 요소의 화면 표시 방식을 결정하는 레이아웃 시스템의 뼈대 속성
• CSS Float property - 텍스트가 이미지를 감싸는 흐름을 제어하고 부작용을 해제(Clear)하는 방법
• CSS box model Position control steps - 요소를 원하는 위치에 정확히 배치하기 위한 4단계 공식

 

CSS Padding property

 

요소의 내부 공간을 결정하는 속성

테두리(Border)와 실제 콘텐츠(텍스트나 이미지) 사이의 안쪽 여백을 의미한다.

 

1. 정의 및 특징

패딩은 요소의 내부 크기를 확장하는 역할을 한다.

• 배경색의 영향: 요소에 배경색(background-color)이 지정되어 있다면, 패딩 영역까지 그 색이 채워진다.
• 음수 값 불가: 마진(margin)과 달리 패딩에는 음수 값을 사용할 수 없다.

 

2. 개별 속성과 축약형 (Shorthand)

상, 하, 좌, 우 방향을 개별적으로 설정하거나 한 줄로 줄여서 쓸 수 있다.

 

개별 속성

• padding-top: 위쪽 여백
• padding-right: 오른쪽 여백
• padding-bottom: 아래쪽 여백
• padding-left: 왼쪽 여백

 

 

축약형 작성법은 값을 적는 개수에 따라 12시부터 시계 방향 순으로 적용된다.

 

3. 주의사항: 박스 크기 계산 (box-sizing)

기본적으로 패딩을 추가하면 요소의 전체 너비(width)가 커지게 된다.

예를 들어, 너비가 200px인 박스에 좌우 패딩을 각각 20px씩 주면 실제 화면에 보이는 너비는 240px이 된다.

이러한 계산의 번거로움을 줄이고 레이아웃 깨짐을 방지하기 위해 box-sizing: border-box; 속성을 사용하는 것을  권장한다.

이 속성을 쓰면 패딩을 늘려도 처음 설정한 너비 안으로 패딩이 들어온다.

인라인 요소(span 등)에 상하 패딩을 줄 경우, 배경은 칠해지지만 다른 줄의 텍스트를 밀어내지 못하므로 주의해야 한다.

 

[표] 패딩 vs 마진 한눈에 비교

구분	패딩 (Padding)	마진 (Margin)
위치	테두리 안쪽 여백	테두리 바깥쪽 여백
배경색	배경색이 적용됨	배경색이 적용되지 않음 (투명)
음수 값	사용 불가	사용 가능
주 목적	콘텐츠와 테두리 사이 간격 확보	요소와 요소 사이의 간격 확보

 

 

[예제 코드] 버튼 스타일링 (패딩 활용)

CSS

 

/* 상하 12px, 좌우 24px 패딩으로 버튼 크기와 여백 조절 */
.custom-button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
}

.custom-button:hover {
  background-color: #2980b9;
}

 

 

---

 

 

CSS display Property

레이아웃 시스템의 뼈대를 이루는 CSS display 속성
웹 페이지의 모든 요소가 주변과 어떻게 배치될지 결정한다.

 

1. 주요 속성값 (기본 레이아웃)

 

block

항상 새로운 줄에서 시작하며 가능한 전체 너비를 차지한다. (예: div, h1, p)

 

inline

새로운 줄에서 시작하지 않고 콘텐츠만큼의 너비만 차지하며, width, height, 상하 margin 설정이 적용되지 않는다. (예: span, a)

 

inline-block

inline처럼 나란히 배치되면서도 block처럼 크기와 여백 설정을 모두 가질 수 있다.

 

none

요소를 화면에서 완전히 제거하여 공간조차 차지하지 않게 만든다. (visibility: hidden은 공간을 남겨둔다는 점에서 차이가 있다.)

 

 

2. 모던 레이아웃 속성 (강력한 배치)

현대 웹 디자인의 핵심인 복잡한 배치를 위한 속성들이다.

 

flex

요소를 1차원(행 또는 열) 정렬에 최적화된 플렉스 컨테이너로 만든다. 과거에는 가로 메뉴를 만들 때 inline-block을 썼지만 현재는 flex가 표준이다.

 

grid

2차원(행과 열 모두) 격자 형태의 레이아웃을 짜기에 완벽한 컨테이너를 만든다.

 

 

 

 

 

 

**display: none**은 요소가 아예 사라지지만, **visibility: hidden**은 요소는 안 보여도 그 공간은 그대로 남겨둔다.

리스트(li)로 가로 메뉴를 만들 때 과거에는 inline-block을 썼지만, 현재는 **display: flex**를 사용하는 것이 표준

inline 요소에 padding을 줄 경우 배경색은 칠해지지만 주변 레이아웃을 밀어내지는 못하므로 주의

 

 

[표] display 속성 요약표

값	줄 바꿈 여부	크기 설정(width/height)	비고
block	있음	가능	가로 전체를 차지함
inline	없음	불가능	텍스트 흐름 속에 위치함
inline-block	없음	가능	inline과 block의 장점 결합
flex	설정에 따름	가능	유연한 박스 모델 (1차원)
grid	설정에 따름	가능	격자 시스템 (2차원)
none	-	-	렌더링 자체를 하지 않음

 

 

[예제 코드] HTML 태그의 기본 성격 변화시키기

CSS

 

/* 원래 block인 li를 한 줄로 나란히 배치 */
nav li {
  display: inline-block;
  margin-right: 20px;
  background-color: #f0f0f0;
  padding: 10px;
}

/* 원래 inline인 span을 block으로 바꿔 크기 부여 */
.box-span {
  display: block; 
  width: 100px;
  height: 50px;
  background-color: orange;
}

/* 요소를 화면에서 완전히 숨기기 */
.hidden {
  display: none;
}

 

 

 

 

 

 

CSS Float property

과거 웹 레이아웃의 핵심이었으며 현재도 텍스트 흐름을 제어할 때 요긴하게 쓰이는 CSS Float 속성

 

1. 정의 및 특징

float은 사전적으로 '뜨다'라는 뜻을 가지며, 요소를 일반적인 흐름에서 벗어나게 하여 부모 요소의 왼쪽이나 오른쪽으로 띄워 배치하는 속성이다.

본래 이미지 주위를 텍스트가 자연스럽게 감싸도록 만들기 위해 고안되었다.

 

 

2. 주요 속성값

none: 요소를 띄우지 않는 기본값이다.

left: 요소를 왼쪽으로 띄우고, 다른 콘텐츠는 그 오른쪽으로 흐르게 한다.

right: 요소를 오른쪽으로 띄우고, 다른 콘텐츠는 그 왼쪽으로 흐르게 한다.

 

 

3. Float의 부작용과 해결 방법 (Clearing)

요소가 붕 뜨게 되면, 부모 요소를 포함한 다음 요소들이 float된 요소의 높이를 인식하지 못해 레이아웃이 무너지는 문제가 발생한다.

 

 

이를 해결하기 위해 float의 영향을 받지 않으려는 다음 요소에 clear 속성(left, right, both)을 사용한다.

가장 현대적이고 많이 쓰이는 방식은 부모 요소에 가상 요소(::after)를 만들어 초기화하는 클리어픽스(Clearfix) 기법이다.

 

 

전체 레이아웃을 잡을 때는 이제 float보다는 Flexbox 나 Grid를 사용하는 것이 표준

하지만 신문 기사 스타일처럼 사진 옆으로 글자가 흐르게 해야 하는 디자인에서는 여전히 float이 유일하고 강력한 해결책

float을 썼다면 반드시 clear처리 해야함

 

[표] Float vs Flexbox vs Grid 비교

특성	Float	Flexbox	Grid
주 목적	텍스트 흐름 제어	1차원 정렬 (행/열)	2차원 격자 레이아웃
난이도	높음 (해제 작업 필요)	보통	보통
사용 시점	이미지 옆 글자 배치 시	메뉴 바, 카드 나열 등	전체 페이지 설계 시

 

 

[예제 코드] 텍스트 감싸기와 플로팅 해제 (Clearfix)

CSS

 

.float-img {
  float: left; /* 이미지를 왼쪽으로 띄움 */
  width: 150px;
  margin-right: 20px;
  margin-bottom: 10px;
}

.container {
  border: 1px solid #ccc;
  padding: 10px;
}

/* 부모 요소 높이 상실을 방지하는 클리어픽스 기법 */
.container::after {
  content: "";
  display: block;
  clear: both;
}

---

 

 

 

CSS box model Position control steps

 

 

1. 포지션 세팅 4단계 공식

포지션 속성은 UI를 빌딩할 때 숨 쉬듯 사용하는 필수 스킬이다.

요소를 원하는 방향에 정확히 배치하고 싶다면 다음 4가지 스텝을 순서대로 진행한다.

 

스텝 1: 마크업으로 페어런츠(부모)와 칠드런(자식) 관계를 명확히 설정한다.

스텝 2: 페어런츠에게 position: relative;를 부여하여 기준점을 잡는다. (단, 페어런츠가 body 요소일 경우는 생략할 수도 있다.)

스텝 3: 칠드런에게 position: absolute;를 부여하여 공중에 띄운다.

스텝 4: 칠드런에게 top, bottom, left, right 좌표 속성을 사용하여 원하는 위치를 컨트롤한다.

 

 

 

---

 

 

 

 

Self training

 

W3Schools: CSS display: inline-block (https://www.w3schools.com/css/css_inline-block.asp)

W3Schools: CSS Box Model (https://www.w3schools.com/css/css_boxmodel.asp)

W3Schools: CSS Borders (https://www.w3schools.com/css/css_border.asp)

W3Schools: CSS Margins (https://www.w3schools.com/css/css_margin.asp)

W3Schools: CSS Padding (https://www.w3schools.com/css/css_padding.asp)

W3Schools: CSS The display Property (https://www.w3schools.com/css/css_display.asp)

W3Schools: CSS Float (https://www.w3schools.com/css/css_float.asp)

W3Schools: CSS Position Offset (https://www.w3schools.com/css/css_position_offset.asp)

 

 

CSS, 웹퍼블리싱, CSS패딩, display속성, CSS플롯, 플롯해제, CSS포지션, 레이아웃, TIL, 코딩공부