CSS - [ 속성 ]

CSS에서 속성은 Properties로, HTML의 속성 Attributes와는 표현이 약간 다르다. 크게 박스 모델, 글꼴 문자, 배경, 배치, 플렉스, 전환, 변환, 띄움, 애니메이션, 그리드, 다단, 필터로 나눌 수 있다.

 

---

1. 너비

width 와 height는 요소의 가로 세로 너비를 지정해준다. span 은 인라인 요소로 기본값은 포함한 콘텐츠 크기만큼 설정되고, div 는 블록 요소로 기본값은 가로는 부모 요소의 크기만큼, 세로는 포함한 콘텐츠 크기만큼 설정된다. 인라인 요소는 가로 너비가 최대한 줄어들려 하고, 블록 요소는 최대한 늘어나려 한다는 게 차이점이다. 그리고 인라인에는 width와 height를 설정할 수 없다는 점 다시 상기하자!!

max-width, max-height나 min-width, min-height로 요소의 최대 최소 가로/세로 너비를 지정할 수도 있다.

 

 

 

---

2. 표현 단위

- px(픽셀) : 절대 단위. 화면에 출력할 수 있는 하나의 점을 의미

- %(상대적 백분율) : 기준에 상대적으로 나타냄

- em(요소의 글꼴 크기) :  글꼴 크기라는 기준을 가지고 있으므로 상대적임

- rem(루트 요소(html)의 글꼴 크기) : 최상위 요소(html 요소)에 지정된 글꼴 크기만 기준으로 함

- vw(뷰포트 가로 너비의 백분율)

- vh(뷰포트 세로 너비의 백분율)

이 있다. 물론 외에도 더 많은 단위들이 있다~

 

* %의 경우 width, height이면 부모의 width, height를 기준으로 본다. 나머지 속성에 %값을 주면 부모의 width를 기준으로 한다.

 

* vw의 경우에 뷰포트의 전체를 100으로 보고, 1vw=뷰포트의 100분의 1 과 같은 의미이다. 즉 가로 세로 너비를 vw 단위로 설정하면 화면을 늘이고 줄일때 뷰포트의 크기에 맞게 요소의 사이즈가 변한다. 

 

* 브라우저의 기본 글꼴 크기는 16px이다. 기본적으로 1em은 16px과 같은 의미로 보면 된다. 즉 10em은 160px인 셈! 또한 폰트 사이즈는 상속되는 속성이다. 만약 부모의 폰트 사이즈가 10px이면, 자식들을 포함해서 1em은 10px이 될 것이다. 따라서 em은 상대적으로 크기가 변할 수 있으니 주의가 필요하다.

 

---

3. 외부 여백

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

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

 

 

---

4. 내부 여백

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

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

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

 

 

 

---

5. 테두리 선

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는 투명색을 지정할 때 사용한다. 역시 값을 하나~네 개 까지 지정 가능하다.

 

---

6. 색상 표현

참고로 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)

 

 

---

7. 모서리

border-radius는 요소의 모서리를 둥글게 깎는 요소이다.

둥글둥글 귀엽당

왼쪽은 10px, 오른쪽은 20px 적용... 

만약 10px로 설정하면, 모서리 부분에 반지름이 10px인 정원을 배치하고 둥근 부분만큼 모서리를 깎아내는 것과 같다. 값은 왼쪽 위 모서리부터 시계방향으로 4개를 적용시킬 수 있다. (ex. border-radius: 0 10px 0 0)

 

 

---

8. 크기 계산(box-sizing)

box-sizing은 요소의 크기 계산 기준을 지정하는 속성이다. 요소의 내용으로 크기를 계산하는 content-box, 요소의 내용+padding+border로 크기를 계산하는 border-box 두 가지 값이 있으며 기본값은 content-box이다.

음.. 그러니까 가로너비를 100px로 지정하고 padding 20px border 4px 이렇게 지정하면 100에 48px만큼 크기가 커지게 된다. content-box이면 요소의 크기는 148이 되고, border-box이면 가로너비를 52px로 지정해 요소의 크기를 100px으로 유지해 준다. 즉 border-box는 요소가 커지는 특성을 가진 padding이나 border를 입력했을 때 요소가 커지지 않고 가로 세로 너비를 그대로 사용하게 해준다고 보면 된다.

 

 

---

9. 넘침 제어(overflow)

overflow는 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성이다. 기본값은 visible이며 overflow-x, overflow-y와 같이 개별로 제어할 수 있다.

• visible : 넘친 내용을 그대로 보여줌
• hidden : 넘친 내용을 잘라냄
• scroll : 넘친 내용을 잘라냄, 스크롤바 생성
• auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성

scroll은 요소가 넘치지 않더라도 무조건 스크롤을 생성하므로 많은 경우에 scroll 보다 auto를 사용한다.

 

 

---

10. 출력 특성(display)

display는 요소의 화면 출력 특성을 지정하는 속성이다. 

• block : 상자 요소
• inline : 글자 요소
• inline-block : 글자 + 상자 요소
• flex : 플렉스 박스 (1차원 레이아웃)
• grid : 그리드 (2차원 레이아웃)
• none : 보여짐 특성 없음, 화면에서 사라짐
• 기타 : table, table-row, table-cell 등...

 

---

11. 투명도

oapcity는 요소의 투명도를 결정한다. 기본값은 불투명인 1이고, 0-1 사이의 소수점 숫자로 값을 결정할 수 있다. 소수점 단위에서 0은 생략하고 .5와 같이 적어줘도 된다.

 

 

---

12. 글꼴

• font-style : 글자의 기울기를 설정하는 속성으로 기본값은 기울기가 없는 normarl이다. italic은 이텔릭체(기울어진 글자) 이다.
• font-weight : 글자의 두께(가중치)를 설정하는 속성이다. 기본값은 normal, 400이며 두껍게는 bold, 700 이다. 100-900 사이의 100단위의 값을 입력할 수 있다.
• font-size : 글자의 크기를 지정한다. 기본 크기는 16px이며 px, em, rem 등 의 단위로 값 지정이 가능하다.
• line-height : 한 줄의 높이를 설정하는 속성으로 행간과 유사하다고 보면 된다. 숫자를 입력하면 요소의 글꼴 크기의 배수로 지정되며, 단위를 이용해 설정할 수도 있다. 배수를 사용하는 방법을 권장한다.
• font-family : 글꼴을 지정하는 속성이다. 원하는 글꼴 후보를 쉼표로 구분해 여러개 명시할 수 있다. 마지막에 필수로 글꼴계열을 작성해줘야 한다. 앞에 명시한 글꼴들을 적용할 수 없을 경우 글꼴계열 중에서 아무 폰트를 가져와 출력한다. 특수문자가 포함된 글꼴 이름은 큰 따옴표로 묶어줘야 한다!! (ex. font-family : 글꼴1, "글꼴2", ... 글꼴계열;)

 

참고로 글꼴 계열은 크게 serif(바탕체 게열), sans-serif(고딕체 계열), monospace(고정너비 글꼴 계열), cursive(필기체 계열), fantasy(장식 글꼴 계열)의 5가지로 볼 수 있다. 

 

 

---

13. 문자

• color : 글자의 색상을 지정하는 속성이다. 기본값은 검정색, rgb(0, 0, 0)이다. 값으로는 전에 배웠던 색상 표현 방법을 이용해 넣어주면 된다.
• text-align : 문자의 정렬 방식을 지정하는 속성으로 왼쪽 정렬 left가 기본값이다. right는 오른쪽 정렬, center는 가운데 정렬, justify는 양쪽 정렬이다.
• text-decoration : 단순하게 문자의 장식(선)을 추가하는 속성이다. underline은 밑줄, overline은 윗줄, line-through는 중앙 선이다. a 태그에는 underline이 기본값으로 들어간다.
• text-indent : 첫 줄의 들여쓰기를 지정하는 속성이다. 음수 값을 넣어주면 내어쓰기로 적용된다

 

---