HTML13 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. HTML/CSS] 여백을 조절하는 속성_ margin, padding 텍스트의 여백을 조절하는 속성에는 박스모델의 여백인 margin과 padding이 있습니다. 박스모델을 사용해서 요소를 자유롭게 배치하고자 한다면 margin과 padding을 사용하는 건 필수입니다. 간단하게 margin과 padding에 대해 알아봅시다. 1. margin : 요소 밖의 여백을 설정 margin은 현재 선택된 요소를 가장 밖에서 둘러싸고 있는 여백을 의미합니다. 컨텐츠로부터 가장 끝에 위치한 margin의 영역을 조정하면 요소끼리의 간격을 조절하기에 용이합니다. margin의 속성에는 위, 오른쪽, 아래, 왼쪽(시계방향)을 조절하는 margin-top, margin-right, margin-bottom, margin-left가 있습니다. 보통은 px을 사용하나 %로도 조절이 가능합니다.. 2021. 5. 11. 이전 1 2 3 4 다음
