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은 항상 페이지의 정상적인 흐름으로 배치..

포지션(position) Html 문서에서 각 요소를 배치하는 방법에 대해 정의하는 속성이다. 즉 요소의 배치 방법을 결정하는 것이 포지션(position) 속성이다. 포지션(position) 속성이 각 요소의 배치 방법을 결정하면 Top, Bottom, Light, Left 속성들이 최종 위치를 결정한다. 포지션의 상하좌우, 4가지 위치 값 Top, Bottom, Light, Left 이 4개의 속성들은 필요에 따라 선택적으로 사용한다. (즉, 무조건 4개 모두 정의해야 하는 것은 아니다) position의 5가지 속성값 position 속성에 사용되는 속성 값들은 다음 5가지가 있다. static: static은 기본값이며, 일반적인 문서 흐름에 따라 요소를 배치. relative: 일반적 흐름에 따..

픽셀, em 차이 CSS에서 길이를 표현 단위에는 몇 가지 다른 단위가 있다. 길이를 표현하는 CSS 속성은 width, margin, padding, font-size, 등이 있는데 숫자 뒤에 px, em 등이 붙는다. 목차 주의사항 절대 단위 상대 단위 픽셀 - EM 변환 표 주의사항 숫자와 단위 사이에는 공백이 올 수 없다. 값이 0인 경우 단위를 생략해도 된다. 일부 CSS 속성은 마이너스(음수)가 허용된다. 길이 단위에는 절대 단위 및 상대 단위가 있다. 절대 단위 절대 단위는 고정되어 있으며, 디바이스별 화면 크기가 다양하기 때문에 화면에서 잘 표현을 못하는 경우가 있다. 하지만 인쇄 레이아웃처럼 출력 결과를 알 수 있는 경우는 사용해도 좋다. 절대 단위에는 다음과 같은 것들이 있다. cm: ..

1. 오버플로와 관련된 4가지 CSS 속성. 1) overflow : 상자, 혹은 웹페이지를 기준으로 흘러넘치는 콘텐츠 처리 방식. 2) overflow-x : 상자를 가로로 흘러넘치는 콘텐츠 처리 방식. 3) overflow-y : 상자를 세로로 흘러넘치는 콘텐츠 처리 방식. 4) text-overflow : 텍스트 컨테이너를 기준으로 흘러넘치는 텍스트에 대한 처리 방식. 2. 위 1), 2), 3)에 대해 알아본다. 그리고, 4)에 대해서는 다음 글에서 알아본다. 1) overflow (1) 오버플로(overflow)는 언제 발생하는가? 영어 단어 overflow=흘러넘치다, 라는 뜻. 그러므로, 콘텐츠 내용이 콘텐츠 그릇보다 클 때 → 콘텐츠는 흘러넘친다. (2) 오프 롤로(overflow) 처리 ..

1. white-space란? white=흰 白, space=빌 空 → 위 순서를 바꾸면 空白(공백) → 즉, 문자가 없는 흰 공간(빈 공간)을 말한다. 2. 컴퓨터에 white-space를 입력하는 방법 3가지 탭 키(혹은 스페이스 바) = 들여 쓰기. 스페이스 바 = 공백 입력. 엔터 키 = 줄 바꿈 입력. 3. 컴퓨터가 white space를 바라보는 시각 = 연속된 공백은 인정하지 않는다 = 즉, 공백 1개로 본다. 그러므로, 들여 쓰기(←탭키 또는 스페이스 바에 의한 연속 공백)는 인정하지 않고, 글자 사이 연속 공백(←스페이스 바에 의한)은 공백 1개로 처리하고, 라인 연속 공백(←엔터키, 줄 바꿈 여러 개), 이 세 가지 모두 인정하지 않는다. →이것이 기본 값 = white-space: n..