패스트캠퍼스 챌린지 11일차 - Part1. Ch8

이번엔 margin 속성에 대해 알아보자. margin은 요소의 외부 여백을 지정하는 속성으로, 특이하게 음수도 사용할 수 있다. 기본값은 외부 여백이 없는 0이며, 브라우저가 여백을 계산하는 auto는 가운데 정렬에 활용된다.

margin-top, right, bottom, left에 각각 여백을 따로 줄 수 있으며, 값을 하나만 넣어주면 위아래 좌우에 모두 적용된다. 또는 값을 두 개 넣어주면 각각 위아래, 좌우로 세 개 넣어주면 위, 좌우, 아래로 네 개 넣어주면 위 오른쪽 아래 왼쪽 이렇게 적용된다. 참고로 음수 값을 넣어주면 외부 여백이 줄어들어 요소들이 겹칠 수도 있다.

 

 

다음으로 padding은 margin과 반대로 요소의 내부 여백을 지정하는 속성이다. 기본값은 내부 여백이 없는 0이며 단위, %를 이용해 크기를 지정할 수 있다. padding을 통해 요소의 크기를 조절할 수도 있다

위 사진은 div 태그에 가로 세로 100px, padding 20px을 적용했을 때 모습이다. 가운데 파란색 박스가 content의 영역이고 바깥의 초록색 부분이 padding을 통해 추가된 부분이다.

margin과 마찬가지로 padding-top, right, bottom, left에 따로 여백을 줄 수 있으며 값을 하나, 두 개, 세 개, 네 개 까지 지정해 줄 수 있다.

 

 

border는 요소의 테두리 선을 지정하는 속성이다. [ border: 두께(width) 종류(style) 색상(color) ] 과 같이 사용하며 순서는 상관없지만 위와 같은 순서를 권장한다. padding과 마찬가지로 border의 두께만큼 요소의 크기가 커진다. 기본값은 medium none black 이며 이제 각각의 개별 속성들을 살펴보자! 

• width는 단위를 이용해 지정할 수 있으며, medium, thin, thick 처럼도 설정할 수 있지만 수치를 통해 설정하는 것을 권장한다. 또한 역시 top, right, bottom, left에 값을 따로 주거나 값을 두 개, 세 개, 네 개 지정해 줄 수 있다.
• style은 선의 종류이며 solid(실선), dotted(점선 ....), dashed(파선 _ _ _ _ ), double(두 줄 선), groove(홈이 파여있는 모양) 등 이 있다. 마찬가지로 값을 하나~네 개 까지 지정해 줄 수 있다.
• color는 색상을 지정하는 속성이며 transparent는 투명색을 지정할 때 사용한다. 역시 값을 하나~네 개 까지 지정 가능하다.

 

---

참고로 css에서 색상을 표현하는 방법엔 여러가지가 있다. 웬만하면 Hex 색상코드 방법을 권장한다.

• 브라우저에서 제공하는 색상 이름 : red, tomato, royalblue ...
• 16진수 색상 Hex 색상코드 방법 :#000, #FFFFFF
• 빛의 삼원색 RGB : rgb(255, 255, 255)
• 빛의 삼원색+투명도 RGBA : rgba(0, 0, 0, 0.5)
• 색상, 채도, 명도 HSL : hsl(120, 100%, 50%)
• 색상, 채도, 명도+투명도 HSLA : hsla(120, 100%, 50%, 0.3)

 

---

11일차 ^!^

 

※ 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/3FVdhDa