1. margin, padding 하위 속성 margin과 padding에 top, right, bottom, left 등을 붙여 하위 속성을 만들 수 있다. 이것은 마진과 패딩에 동일한 방법으로 적용된다. 1) margin의 하위 속성 margin-top margin-right margin-bottom margin-left 아래 (그림 1)처럼 위, 우측, 아래, 좌측에 속성값을 주고 구글 크롬 개발자 도구로 출력하면 그 아래 (그림 2)와 같다. 아래 (그림 2)를 보면 패딩이 상, 우, 하, 좌측의 패딩이 20픽셀, 30픽셀, 40픽셀, 50픽셀로 지정되었다. 2) padding의 하위 속성 padding-top padding-right padding-bottom padding-left paddin..

css 박스 모델(Box-Model) 1 - margin, padding, border, content 박스(Box)란: 요소가 차지하고 있는 사각형의 영역 브라우저가 요소를 렌더링하는 시점에 각각의 요소들은 각각 사각형 형태의 영역을 차지하고 있다. 박스는 4개의 영역으로 구성되는데, margin, padding, border, content이다. css는 이 박스들의 크기, 위치, 속성들에 대해 스타일을 정의할 수 있다. 위 그림에서 바깥쪽 여백이 margin이고, 안쪽 여백이 padding이다. 테두리는 border 속성을 가짐으로써 두께, 모양, 색깔 등을 정의할 수 있다. 콘텐츠나 언제나 테두리(border)로 감싸져 있다. 콘텐츠 영역(span은 제외)은 width, height(너비, 높이)..

css 포지션 - static과 fixed와 sticky 차이점 지난 글 position 2편 2021.12.05 - CSS position, relative와 absolute 차이 position: static; ‘static’은 ‘고정적인’이라는 뜻이지만, css - position에서는 ‘원래 위치’란 뜻이다. 원래 위치에서 이탈하지 않고, 문서의 흐름을 그대로 따른다는 의미이다. static은 기본값(디폴트*, default)이다. static: 고정적인 fixed: 고정된 sticky: 달라붙는 static은 default값이며, * 디폴트(default, 기본값)이란 사용자의 개입 없이 자동으로 할당되는 설정 값이다. position의 속성값 static은 항상 페이지의 정상적인 흐름으로 배치..

CSS의 position 속성 중 relative와 absolute는 웹 디자인에서 중요한 역할을 하며, 그 차이를 정확히 아는 것이 중요합니다.CSS Position 속성이란?CSS에서 position 속성은 요소의 위치를 정의하는 데 사용됩니다. 웹 페이지의 레이아웃을 구성할 때 요소가 어디에 배치되는지 제어하는 중요한 역할을 합니다.relative와 absolute는 가장 많이 사용되는 두 가지 위치 속성입니다. 이 둘은 겉보기에 비슷해 보일 수 있지만, 동작 방식은 완전히 다릅니다.Position: relative와 absolute의 기본 개념1. Position: relativerelative는 요소를 자신의 원래 위치를 기준으로 이동시킵니다.특징:요소의 기본 위치를 유지하면서, 추가적으로 to..

픽셀(px), em, rem 등 웹에서 사용하는 폰트 크기 단위는 어떻게 다를까요? 이들의 차이와 변환법을 쉽게 이해할 수 있도록 정리해 보았습니다.웹 폰트 크기 단위란?웹 디자인에서 텍스트의 크기를 조정할 때는 다양한 단위를 사용할 수 있습니다. 이 단위들은 텍스트의 크기를 정의하는 방식이 조금씩 다르며, 상황에 따라 적합한 단위를 선택하는 것이 중요합니다.주요 폰트 크기 단위의 종류와 특징1. 픽셀(px)픽셀은 화면에서 고정된 크기를 나타내는 단위입니다.특징:고정된 크기: 어떤 브라우저나 디바이스에서도 동일한 크기를 유지합니다.장점: 디자인의 정확성을 보장합니다.단점: 반응형 디자인에서는 유연성이 부족할 수 있습니다.2. emem은 부모 요소의 폰트 크기를 기준으로 하는 상대적 단위입니다.특징:1em..

CSS에서 오버플로우 속성은 콘텐츠가 요소 크기를 초과할 때 어떻게 처리할지를 결정하는 중요한 역할을 합니다.오버플로우(Overflow)란 무엇인가요?웹 디자인에서 콘텐츠가 부모 요소의 크기를 초과하는 경우, 이를 어떻게 처리할지를 지정하는 속성이 바로 CSS overflow입니다. 적절히 사용하면 스크롤바를 추가하거나, 초과된 부분을 숨기고, 콘텐츠의 표시 방식을 조정할 수 있습니다.오버플로우와 관련된 4가지 CSS 속성1. overflow: visible기본값으로, 콘텐츠가 요소의 크기를 초과해도 그대로 표시됩니다.특징:초과된 콘텐츠가 잘리지 않고 부모 요소 밖으로 드러남.레이아웃을 정확히 제어하기 어려울 수 있음.예제 코드:.box { width: 200px; height: 100px; ove..

Whitespace와 공백은 디자인과 글쓰기에서 중요한 역할을 하지만, 그 가치와 활용법을 제대로 아는 사람은 많지 않습니다.Whitespace와 공백이란?공간은 디자인과 글쓰기에서 단순히 "비어 있는 부분"으로 간주되곤 하지만, 사실 공간은 중요한 의미와 역할을 지니고 있습니다. 여기서 말하는 Whitespace는 디자인 용어로, 공백(빈 공간)을 효과적으로 활용하는 기술을 말합니다.Whitespace의 정의와 역할Whitespace는 텍스트와 텍스트, 이미지와 이미지 사이의 빈 공간을 의미합니다.디자인에서의 역할가독성을 높여줍니다.콘텐츠에 집중하도록 돕습니다.깔끔하고 세련된 느낌을 줍니다.Whitespace의 오해많은 사람들이 공간을 비효율적이라고 생각하지만, 공백은 시각적 균형과 정보를 전달하는 데..