Programming/HTML, CSS32 [CSS] 박스 모델의 너비 박스 모델의 배치를 위해서는 박스 모델의 너비를 이해해야 합니다. 높이는 한 줄에서 가장 긴 높이를 기준으로 맞추겠지만 너비는 좌우 배치에 영향을 주기 때문입니다. box-sizing: 속성 값; 박스 모델의 너비를 결정하는 속성입니다. 지난 포스트 중에서 박스 모델 콘텐츠 영역의 너비(클릭하면 링크)를 지정하는 width라는 속성을 다뤘었습니다. 그런데 이 width라는 속성은 콘텐츠 영역만 조정하고 다른 박스 모델에는 영향을 주지 않습니다. 그래서 이 box-sizing 속성을 이용하여 width가 적용되는 범위를 조정합니다. 올 수 있는 속성 값은 이하 두가지 입니다. 속성 값 효과 content-box width속성의 범위를 콘텐츠 영역만 적용합니다. (기본 값) border-box width속성.. 2021. 1. 28. [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] 테두리 속성 BORDER 콘텐츠와 마진, 패딩을 다루었고 이번엔 마진과 패딩의 사이 테두리에 대한 속성들을 다루려고 합니다. border-width: 속성 값; border-width 속성은 테두리의 굵기를 지정합니다. px등의 단위를 이용해 두께를 직접 지정하거나, thin/medium/thick의 키워드를 이용해 굵기를 지정할 수 있습니다. border-top/bottom/left/right-width를 통해 특정 위치의 굵기를 지정할 수 있습니다. border-style: 속성 값; border-style은 테두리의 모양을 지정합니다. 속성 값은 아래와 같으며 더 많은 속성 값은 링크에 있습니다. 속성 값; 효과 none 테두리 없음 (기본 값) dashed 대시( - )선으로 테두리 표시 dotted 점선으로 테두리 표시.. 2021. 1. 27. [CSS] 콘텐츠 영역 설정하기 지난 포스트에서 마진과 패딩을 다뤘는데 이번엔 콘텐츠 영역을 설정하는 것을 다루겠습니다. 1. 콘텐츠 크기 지정하기 콘텐츠의 크기는 다음의 두가지 속성으로 조절합니다. width: 속성 값; height: 속성 값; 말 그대로 width는 콘텐츠의 너비, height는 콘텐츠의 높이입니다. 두 속성의 속성 값은 아래와 같습니다. 속성 값 효과 크기 너비/높이를 단위와 수치로 직접 지정 백분율 콘텐츠를 포함하는 부모요소의 크기를 기준으로 백분율로 지정 auto 너비와 높이가 콘텐츠의 양(길이, 크기 등)에 따라 자동 지정 +1. 실제 콘텐츠의 크기 방금과 같은 방법으로 너비와 높이를 지정했더라도 실제 콘텐츠의 크기는 위에서 지정한 값이 아닙니다. 왜냐하면 실제로 요소를 웹에 배치할때 지난 포스트에서 배운 .. 2021. 1. 25. [CSS] 마진(margin)과 패딩(padding) 웹에서 마진과 패딩을 여백을 의미합니다. 마진과 패딩을 이용하면 콘텐츠를 원하는 곳에 배치할 수 있기에 활용도가 높습니다. 들어가기전에 마진과 패딩을 한눈에 볼 수 있게 표현하면 다음과 같습니다. 콘텐츠와 패딩을 묶어서 하나의 요소로 보고, 요소와 마진 사이의 경계를 테두리(border)라고 합니다. 1. 마진 (margin) 마진은 현재 요소 주위의 여백입니다. 마진을 조절하여 요소와 요소사이의 간격을 조절할 수 있습니다. 마진은 다음과 같은 속성으로 조절합니다. 마진 속성: 속성 값; ▽ margin-top: 상단의 여백 크기 지정 ▽ margin-bottom: 하단의 여백 크기 지정 ▽ margin-left: 좌측의 여백 크기 지정 ▽ margin-right: 우측의 여백 크기 지정 ▽ margin.. 2021. 1. 25. [CSS] 배경 관련 속성 텍스트에 이어서 웹의 배경에 대한 속성들을 몇가지 알아보겠습니다. 웹의 배경이라고 개요를 펼치기는 했지만 실제로는 전체 배경뿐만이 아니라 컨텐츠 하나하나(요소 하나하나 ex] ,, 등)의 배경으로 사용할 수 있습니다. background-color: 색상; 웹의 전체 배경색을 설정합니다. background-image: url(이미지 파일 경로); 웹의 배경에 이미지 파일을 삽입할 수 있게 해줍니다. 위에서 보았듯이 이미지가 계속 반복되어 나오는것이 기본으로 설정되어있습니다. 그래서 이미지 반복 없이 혹은 다른 배열로 배치하고싶다면 다음과 같은 속성을 사용합니다. background-repeat: 속성 값; background-repeat의 속성 값은 다음과 같습니다. 속성 값 효과 repeat 화면을 .. 2021. 1. 22. 이전 1 2 3 4 ··· 6 다음 300x250
