[혼자 공부해서 개발까지] part6 - 스타일의 여백과 크기 설정 &값의 단위

전 글에서는 CSS를 사용해야 하는 이유, 사용방법 그리고 속성과값을 간단하게 배워보았습니다. 이제부터는 비슷한 속성들끼리 하나의 글에 묶어서 진행하려고 합니다. 오늘은 태그들의 너비,높이, 여백등을 설정할 수 있는 속성과 앞으로 나올 값의 단위를 미리 알아보는 시간입니다.

 

 

 

목차

• 너비와 높이
• 여백공간
• 값의 단위

이 그림을 참고하면 오늘 나오는 내용에 이해를 도울 수 있습니다.

 

너비와 높이

너비와 높이는 요소의 크기를 설정하는 중요한 속성입니다. 이 두 속성을 사용하면 웹 페이지에서 요소들이 차지하는 공간을 정확하게 제어할 수 있습니다. 

 

속성명

 

Width : 요소의 가로 길이를 설정합니다.(너비)

width 사용방법  =  width : 크기;

Height : 요소의 세로 길이를 설정합니다.(높이) 

height 사용방법 = height : 크기;

 

아래 사진은 p태그입니다. 1136 x 21.33이 나타내는  것이 너비와 높이 입니다. 즉, 하늘색은 width와 height의 범위를 보여줍니다. (확인 방법은 웹브라우저에서 f12키를 눌러서 확인 할 수 있습니다)

 

 

여백공간 &경계선

여백은 요소 간의 공간을 조정하는 데 중요한 역할을 합니다. 여백을 이해하면 페이지의 레이아웃을 세밀하게 조정할 수 있습니다.

 

속성명

Margin : 요소와 다른 요소 간의 외부 공간을 설정하는 속성입니다. 주로 요소 간의 간격을 조정할 때 사용됩니다.

margin사용방법1 =  margin : 크기지정;  (top,right,bottom,left 전부 동일한 값을 넣을 수 있음)

margin사용방법2 =  margin : top right bottom left; (크기를 각각 지정할 수 있음)

 

margin사용방법3 = margin-top : 크기; 
                             = margin-right: 크기 ;

                             = margin-bottom : 크기 ;

                             = margin-left : 크기 ;

 

Padding : 요소의 내용과 경계(border) 사이의 공간을 설정합니다. 즉, 요소의 안쪽 여백을 조정할 때 사용됩니다.

padding사용방법1 =  padding : 크기지정;

 

padding사용방법2 = padding  : top right bottom left; (크기를 각각 지정할 수 있음)

 

padding 사용방법3 = padding -top : 크기; 
                                = padding -right: 크기 ;

                                = padding -bottom : 크기 ;

                                = padding -left : 크기 ;

 

 

Border : 요소의 테두리를 설정하는 속성입니다. 여백은 아니지만, 요소의 시각적 구분을 돕기 때문에 함께 다룹니다.

border사용방법1 = border : 선크기   선의모양  선의색;

 

border사용방법2 = border-top : 선크기   선의모양  선의색;
                             = border-bottom : 선크기   선의모양  선의색;
                             = border-right : 선크기   선의모양  선의색;
                             = border-left : 선크기   선의모양  선의색;

 

 

 

세가지 속성은 div태그를 이용해서 예시를 들어보겠습니다.

값의 단위

css에는 많은 속성들이 존재합니다. 위에서도 잠깐 나왔지만 속성들을 사용하기 위해서는 반드시 그 속성에서 사용할 수 있는 단위도 알아야 합니다. 이 파트에서 css에 있는 모든 값을 단위를 정의하기에는 배우지 않은 속성도 있기 때문에 대표적인 단위 몇개까 알아보겠습니다

단위	설명	주요 사용 예시
px	화면에서 나타낼 수 있는 가장 작은 단위, 크기 고정에 사용됨	width: 100px;
%	부모 요소의 크기를 기준으로 비율을 설정.	width: 100px;
em	현재 요소의 폰트 크기를 기준으로 상대적인 크기	font-size: 2em; (현재 폰트 크기의 2배)
rem	상대적인 크기로 기본값은 최상위 태그인 HTML태그에 16px이다.	font-size: 1.5rem;
vw	viewport width은 화면의 너비를 기준으로 상대적인 크기.	width: 50vw; (화면 너비의 50%)
vh	viewport height은 화면의 높이를 기준으로 상대적인 크기.	height: 100vh; (화면 높이의 100%)
auto	자동 크기 조정 (주로 margin, width에서 사용)	margin: 0 auto; (가로 방향으로 가운데 정렬)

이 표로 CSS에서 자주 쓰는 단위들을 깔끔하게 확인할 수 있어요! 필요에 따라 적합한 단위를 사용하면 되겠죠?😊

---

마무리

오늘 내용 어렵지 않으셨나요? 제가 블로그를 한 편, 두 편 쓰면서 조금 더 쉽고 이해하기 편하게 내용을 전달하고 싶어서 평소에 프론트 이외에도 글 전달력을 높이는 방법도 함께 공부하고 있습니다. 아직 많이 부족하지만 조금씩 퀄리티를 높여 나갈 예정이니, 앞으로도 많은 관심 부탁드립니다.