본문 바로가기

CSS14

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.