본문 바로가기

웹 퍼블리싱/CSS11

21. display 이번 포스팅에서는 display 속성에 대하여 알아보겠습니다. 모든 요소는 기본적으로 고유의 display 값을 지니고 있는데요. 해당 display 값에 따라 block level, inline level 등의 박스 유형이 결정되게 됩니다. display 속성으로 요소의 고유 display 값을 변경하여 유연하게 대응할 수 있으니 확실하게 익혀두세요. 1. display 서론에서 말씀드렸다시피 display 속성은 박스 유형을 결정하는 속성인데요. display 속성은 기본 값이 일정하게 정해져있는 것이 아닌, 요소에따라 결정되고 있습니다. display의 속성 값으로는 inline, block, inline-block, none이 있으며, 하나 하나 알아보도록 하겠습니다. 2. inline inlin.. 2023. 5. 16.
20. padding, border, margin 이번 포스팅에서는 앞선 포스팅의 연장으로, boxmodel에 포함되는 padding, border, margin에 대하여 알아보겠습니다. CSS는 다양한 속성들을 반복적으로 자주 사용하다 보니, 하나하나 잘 이해하고 넘어가시는 게 좋을 것 같습니다. padding, border, margin에 대한 간단한 소개는 이미 다루었으니 사용 방법 위주로 소개드리겠습니다. 1. padding padding의 기본 값은 0이며, 속성 값으로는 고정 값과 퍼센트(%)를 사용할 수 있는데요. padding은 상(top), 하(bottom), 좌(left), 우(right)를 각각 지정할 수도 있습니다. h1 { padding: 10px 20px 10px 20px; /* 순서대로 상/우/하/좌 */ } 위와 같이 이어서.. 2023. 5. 11.
19. boxmodel 이번 포스팅에서는 boxmodel에 대하여 알아보겠는데요. HTML의 모든 요소는 기본적으로 4가지의 박스 형태로 구성되어 있으며, 각 영역마다 다르게 스타일링이 가능합니다. boxmodel의 각 영역에 대한 특성을 바르게 알고 사용하는 것이 중요하고 기본이 되는 내용 중 하나이니 확실하게 짚고 넘어가는 게 좋을 것 같습니다. 1. content content 영역은 말 그대로 요소의 실제 콘텐츠를 포함하는 영역입니다. 별도로 content 영역의 너비나 높이를 지정하지 않는다면 콘텐츠의 내용에 따라 너비와 높이가 정해집니다. 이러한 content 영역은 boxmodel에서 가장 안쪽에 위치해 있으며, 사람으로 비유하자면 "뼈"에 해당된다고 생각해 주시면 됩니다. 2. padding padding 영역은.. 2023. 5. 8.
반응형