지금, 개발하기/CSS30 HTML/CSS] 배경 이미지 반복? 배경 이미지 사이즈 변경? 이번에는 웹 문서의 배경을 어떻게 꾸미는지 알아보겠습니다. 배경에는 단순히 색상을 넣을 수도 있지만 이미지를 첨부해서 표현할 수도 있습니다. 이미지 파일을 이용해서 어떻게 배경 스타일을 꾸미는지 알아보도록 하겠습니다. 1. background-repreat 배경이미지의 반복 방법을 지정해주는 스타일입니다. 배경 이미지의 크기가 배경의 크기보다 작을 경우에는 기본적으로 반복(reapeat)해서 표현됩니다. background-repreat의 속성을 없애면 반복 방향을 지정 할 수도 있고, 아예 없애버릴 수도 있습니다. background-repreat: repeat / repeat-x /repeat-y / no- repeat / space / round // 요소의 전체 크기를 꽉 채울 때까지 x, y축을.. 2021. 5. 15. HTML/CSS] pt, em으로 폰트 크기 조절하기 페이지에 글자를 넣어서 사용할 때면 폰트 크기를 조절하고 싶을 때가 많습니다. CSS에서 글자의 크기를 조절하려면 font-size를 사용하면 됩니다. font-size의 단위에는 px, pt, em, %등이 있지만 가장 기본적인 방법을 사용해서 폰트크기를 조절해 보도록 하겠습니다. CSS에서 폰트 크기를 조절하는 대표적인 방법은 px, pt, em을 사용하는 것입니다. px과 pt는 절대적인 폰트의 크기를 조절할 수 있고, %와 em은 상대적인 폰트의 크기를 조절할 수 있습니다. 1. 폰트 크기 조절_ px px을 이용해서 모든 태그를 20px로 맞추어 보았습니다. 2. 폰트 크기 조절_ pt : 이번에는 pt를 사용해보겠습니다. 참고로 pt(point)는 px의 약 1.33배입니다. 3. 폰트 크기 .. 2021. 5. 14. HTML/CSS] box-sizing 적용하기 요소들을 배치할 때는 요소의 너비와 높이를 계산하는 게 중요합니다. 그런데 한 요소 안에는 컨텐츠, 테두리(boder), padding가 다 들어있습니다. 그렇다면 요소의 전체 길이를 알려면 컨텐츠 + 테두리(boder) + padding의 합을 구해야겠네요. 생각만해보 복잡하죠? CSS3 이전에는 정말로 요소의 전체 길이를 구하기 위해 일일히 다 계산을 했습니다. 그런데 CSS3 이후부터는 일일히 계산할 필요가 없어졌습니다. 가로길이(width)와 세로길이(height)만 입력하면 똭!하고 요소가 만들어집니다. 바로 box-sizing 덕분이죠. box-sizing은 다음과 같이 사용합니다. box-sizing: border-box /* 박스 사이즈에 테두리와 padding이 포함 */ box-sizi.. 2021. 5. 13. HTML/CSS] 테두리(border)는 어떻게 쓰나요? 테두리 관련 속성 텍스트, 그림, 표 등 시각형 모양의 요소에 다양하게 적용할 수 있는 테두리 속성을 알아봅시다. 테두리 속성에는 크게, 테두리두께, 테두리 스타일, 테두리 색상이 있습니다. 테두리 두께 : 테두리 두께는 보통 px을 이용하여 지정하지만 아래와 같이 두께를 조절할 수도 있습니다. border-width: thin / medium /thick 테두리 스타일 border-style : solide / dashed / dotted / none / hidden/ doubled / groove / inset / outset / ridge 테두리 색상 border-color: 색이름(red) / HEX값(#ff0000) / RGB값(rgb(0,255,0)) 보통은 테두리의 세가지 속성 두께, 스타일.. 2021. 5. 12. 이전 1 ··· 4 5 6 7 8 다음
