CSS14 HTML/CSS] 배경 이미지의 위치를 이동시키자 배경 이미지를 편집하다 보면 이미지의 위치를 조정하고 싶을 때가 있습니다. 그럴때는 background-position 속성으로 이미지가 표시되는 위치를 조절할 수 있습니다. backgound-position 속성 background-position 속성은 보통 수평 위치와 수직 위치 값을 둘 다 표시합니다. 첫번째로 지정한 값은 수평 위치 값, 두번째로 지정한 값은 수직 위치 값이됩니다. 만약 값을 하나만 표시한다면, 표시된 값을 수평 위치 값으로 간주하고 수직위치는 center로 간주합니다. 길이(px) 표시법 : 배경 이미지의 위치를 길이로 직접 지정합니다. 아래는 style.css 페이지에서 왼쪽 상단을 기준으로 가로 200px, 세로 200px의 위치에 이미지가 놓이도록 표시한 것입니다. div.. 2021. 5. 16. 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 2 3 4 다음
