지금, 개발하기81 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. HTML/CSS] 가운데 정렬이 안된다고? text-align을 이용해서 모든 글자(text)를 중앙배열 시켜보자. 가운데 정렬을 하기 위해서 모든 태그의 스타일에 'text-align : center'를 적용하자. 오잉? 아래를 보면 모든 태그를 center로 맞추었는데, 이상하게 a태그는 중앙 배열이 되지 않는걸 볼 수 있다. 왜그럴까? F12를 눌러서 개발자 모드로 들어가자. 좌측 상단의 화살표를 클릭해서 태그에 갖다대자. 그러면 태그가 적용되는 범위를 박스로 확인할 수 있다. h1태그 p태그 div태그 a태그 a 태그만 영역이 글자가 있는 구역만 해당된 다는 것을 알 수 있다. 이럴때는 div태그 같이 한 줄 전체를 영역으로 인식하는 태그로 감싸주면 된다 짜잔~ 가운데 정렬이 된 걸 확인할 수 있다 :) 2021. 5. 10. 이전 1 ··· 15 16 17 18 19 20 21 다음
