CSS 속성 1편 ( 단위 + 박스 속성 )

스타일 속성을 적용 하기에 앞어서 먼저 스타일 값으로 입력할 수 있는 CSS의 단위부터 알아 보려고 한다.

스타일 값으로 입력할 수 있는 단위에는 키워드, 크기, 색상, URL 등이 있다.

이 친구들을 차례대로 살펴 보겠다 😳

첫번째로 키워드 단위는 W3C에서 미리 정의한 단어로, 키워드를 스타일 값으로 입력하면

키워드에 해당하는 스타일이 자동으로 적용이 된다. 자동 완성 기능을 통해 서비스 해주고 있다.

두번째, 크기 단위이다.

표 외에도 cm, mm, inch 단위 등이 있지만 주로 아래와 같은 단위를 사용한다.

( 개인적으로는 픽셀과 백분율 단위를 많이 사용하는 것 같다 ! )

배수단위는 유용하나 많은 사람들이 사용하지 못하는 단위라고 한다.

어렵게 생각할 것 없이 배수를 나타내는 것이다. 1배 = 1em = 100%, 1.5배 = 1.5em = 150% 와 같다.

세번째, 색상 단위다.

가장 간단한 방법으로는 색상의 영어 이름을 입력하는 것이다.

예 : background: [ red | orange | blue ]

단지 예시를 보면 알겠지만 다양한 원하는 색을 사용하기엔 좋지 못하다.

따라서 표와 같은 단위 형태를 사용한다 🤔

이때 alpha값은 투명도를 나타낸다.

tip. 색상표는 구글에 컬러피커라고 검색하면 16진수와 rgb로 나타내주는 서비스를 제공한다.

( 또는 사이트 이용 - https://www.webpagefx.com/web-design/color-picker/ )

마지막으로 URL 단위다.

이미지 또는 글꼴 파일을 불러올 때 사용하는 단위다.

경로는 img 태그의 src 부분과 동일 하다.

예 : background-image: url('파일명.확장자명');

---

이어서, ⭐박스 속성⭐에 대해 알아보겠다 

박스 속성 글씨에 강요를 한 이유는 웹 페이지의 레이아웃 구성을 하는데 있어 가장 중요하기 때문이다.

아래 그림을 기억하자 !

▲ 박스 속성

가장 안쪽에 위치한 글자를 감싸는 영역의 크기를 정하는 속성은 width와 height를 사용한다.

이름만 봐도 바로 역할을 알 수 있을 것이다 :)

boder 속성은 테두리의 두께를 정하고 margin은 테두리와 다른 태그와의 간격을 지정한다.

padding은 테두리와 글자 사이의 간격을 지정하는 속성이다.

margin과 padding 속성은 margin-left, padding-left 와 같은 속성 이름으로 

각각 왼쪽, 오른쪽, 위쪽, 아래쪽 방향을 지정할 수 있다.

⭐ border 속성을 사용시 우리는 border-width, border-style, border-color 이 3가지의 속성을 모두 사용해야 한다.

이도 영어를 보면 직관적으로 알수 있듯 두께, 형태, 색상 에 해당하는 것들이다.

따라서 border 속성을 사용할 때 3문장을 적어야 한다는 것인데 이와 같은 번거로움을 해결하기 위해

border: width style color

순서를 지켜서 사용하면 한문장으로 해결할 수 있다.

마지막으로 border에는 border-radius 라는 속성이 있다.

이 속성을 사용해서 우리는 모서리가 둥근 사각형을 만들 수 있다.

예) border-radius: 20px;

이어서 CSS속성을 더 공부해보겠다 😽