일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- Codility
- Photoshop
- dataframe
- grid
- CSS
- Prefix Sums
- Flexbox
- SK바이오사이언스
- 에라토스테네스의 체
- Javascript
- 알고리즘
- series
- c++
- align-items
- 통신사할인
- margin
- 포토샵
- 소수
- Gap
- c
- 확률
- stl
- Design Pattern
- 백준
- skt membership
- 강화학습
- pandas
- spring
- 수학
- 상태
- Today
- Total
목록box (3)
sliver__
웹 페이지의 디자인을 할 때, 요소들 간의 간격을 잘 조절하는 것은 매우 중요합니다. 이를 위해 CSS의 **박스 모델(Box Model)**을 이해하고 활용하는 것이 필수입니다. 이 글에서는 **패딩(padding)**과 **마진(margin)**을 중심으로 박스 모델을 실전에서 어떻게 활용할 수 있는지 살펴봅니다.📦 박스 모델 복습Padding: 요소의 내용과 테두리 사이의 공간입니다. 내부 여백이라고도 하며, 보통 배경색이 적용된 요소에는 필수입니다.Margin: 요소 외부의 공간, 즉 요소와 다른 요소 사이의 거리입니다.1️⃣ 패딩 실습: 내부 공간 만들기🔹 헤더에 패딩 적용하기배경색이 있는 header 요소에 padding: 20px;을 적용하면, 텍스트와 배경 테두리 사이에 여유 공간이 생..
CSS를 제대로 배우기 위해 가장 먼저 이해해야 할 개념 중 하나가 바로 **박스 모델(Box Model)**입니다. 웹페이지의 모든 요소는 기본적으로 사각형 박스로 구성되며, 이 박스는 몇 가지 구성 요소로 이루어져 있어요. 이 글에서는 CSS 박스 모델이 무엇이고, 어떻게 동작하는지 쉽게 설명해드릴게요!🧱 박스 모델이란?CSS 박스 모델은 웹 요소가 화면에 어떻게 표시되고 크기가 어떻게 결정되는지를 정의하는 개념입니다. 모든 요소는 다음과 같은 구조를 가진 하나의 "박스"로 이해할 수 있어요:Content (콘텐츠)텍스트, 이미지, 비디오 등 실제 콘텐츠가 들어가는 부분입니다. width와 height 속성으로 이 영역의 크기를 조정할 수 있어요.Padding (패딩)콘텐츠와 테두리(border) ..
[판다스 내장 그래프 도구 활용] 판다스는 Matplotlib 라이브러리의 기능을 일부 내장하고 있어서 간단한 그래프를 손쉽게 그릴 수 있다. 시리즈 또는 데이터프레임 객체에 plot() 메소드를 적용한다 kind 옵션으로 그래프의 종류를 선택할 수 있다. kind 옵션 설명 kind 옵션 설명 'line' 선 그래프 'kde' 커널 밀도 그래프 'bar' 수직 막대 그래프 'area' 면적 그래프 'barh' 수평 막대 그래프 'pie' 파이 그래프 'his' 히스토그램 'scatter' 산점도 그래프 'box' 박스 플롯 'hexbin' 고밀도 산점도 그래프 선 그래프 데이터프레임 객체에 plot() 메소드를 적용할 때, 다른 옵션을 추갛하지 않으면 가장 기본적인 선 그래프를 그린다. DataFram..