본문 바로가기

콘텐츠2

[CSS] 박스 모델 html/css를 처음 다룰때 인라인 요소와 블록 요소를 다뤘었습니다. 이 중 블록 요소는 한 칸을 차지하며, 자동 줄바꿈이 이루어진다고 했습니다. 그래서 블록 요소를 살펴보면 웹 페이지에서 박스 모양의 공간을 가지게 되는데 이런 요소들을 박스 모델이라고 부릅니다. 인라인 요소와 블록 요소에 대한 설명은 아래 링크로... 2020/08/18 - [Programming/HTML,CSS] - [HTML/CSS] 블록 요소와 인라인 요소 마진과 패딩, 테두리를 조작하는 속성 2021/01/25 - [Programming/HTML,CSS] - [CSS] 마진(margin)과 패딩(padding) 2021/01/25 - [Programming/HTML,CSS] - [CSS] 콘텐츠 영역 설정하기 2021/01/2.. 2021. 1. 27.
[CSS] 콘텐츠 영역 설정하기 지난 포스트에서 마진과 패딩을 다뤘는데 이번엔 콘텐츠 영역을 설정하는 것을 다루겠습니다. 1. 콘텐츠 크기 지정하기 콘텐츠의 크기는 다음의 두가지 속성으로 조절합니다. width: 속성 값; height: 속성 값; 말 그대로 width는 콘텐츠의 너비, height는 콘텐츠의 높이입니다. 두 속성의 속성 값은 아래와 같습니다. 속성 값 효과 크기 너비/높이를 단위와 수치로 직접 지정 백분율 콘텐츠를 포함하는 부모요소의 크기를 기준으로 백분율로 지정 auto 너비와 높이가 콘텐츠의 양(길이, 크기 등)에 따라 자동 지정 +1. 실제 콘텐츠의 크기 방금과 같은 방법으로 너비와 높이를 지정했더라도 실제 콘텐츠의 크기는 위에서 지정한 값이 아닙니다. 왜냐하면 실제로 요소를 웹에 배치할때 지난 포스트에서 배운 .. 2021. 1. 25.
300x250