[부스트코스]웹 프로그래밍 9.CSS(3 - 기본스타일 속성)

HTML의 여러 태그들의 기능을 알아보았듯이 CSS의 여러 속성들을 알아보겠습니다.

 

• color 속성
• font 속성
• text-align 속성
• border 속성
• cursor 속성
• visibility 속성
• border-radius 속성

 

---

color 속성

color 속성은 단어 뜻대로 색상, 정확히는 글자의 색상을 의미합니다.

• red, blue등 이미 정의된 색
• #000, #FFFFFF 등의 16진수 색상 코드
• rgb(255, 255, 255) 등의 rgb 색상
• rgba(200, 100, 150, 0.5) 등의 알파(투명도)가 적용된 rgba 색상

color 속성은 위 목록등의 값을 사용할 수 있으며, 기본값은 inherit으로 부모의 색상을 가져옵니다.

 

#text1 { color: red; }

#text2 { color: #0A0; }

#text3 { color: rgb(0, 0, 150); }

#text4 { color: rgba(30, 150, 100, 0.5); }

 

---

font 속성

font 속성은 글자의 폰트를 정의하는 속성인데, 여러 기능을 동시에 가지고 있는 속성이기도 합니다.
정확히 말하면 6개의 세부적인 글꼴 관련 속성을 font라는 하나의 속성에 한번에 쓸 수 있다는 소리입니다.

우선 세부적인 글꼴 관련 속성을 봅시다.

font-style	글꼴의 스타일 지정
font-weight	글자 두께
font-variant	글꼴 변형 (소문자를 대문자로 바꾸는 등의)
font-size	글자 크기
line-height	줄 간격
font-family	글꼴 (굴림, 돋움, …)

font 속성은 다음과 같은 순서로 세부 속성을 한번에 기술합니다.

font: font-style font-variant font-weight font-size/line-height font-family

font-style

글꼴의 스타일로, 주로 이탤릭체(기울여 표시)를 설정하기 위해 사용합니다.

• normal: 기본
• italic: 이탤릭체

font-weight

글꼴의 두께로, 미리 정의된 단어나 100 ~ 900 사이의 숫자를 통해 설정합니다.
기본값은 normal 입니다.

• 100: lighter
• 200
• 300
• 400: normal
• 500
• 600
• 700: bold
• 800
• 900: bolder

font-size

글자 크기로, <font> 태그의 size 속성과 효과가 같습니다.
(HTML5부터 <font> 태그 사용은 권장되지 않으며, CSS를 사용해야 합니다)

px, px, em, 등의 단위와 small, big 등의 상수 크기를 사용할 수 있습니다.
(일반 웹 페이지에서는 px 사용)

font-family

글꼴 종류로, <font> 태그의 face 속성과 효과가 같습니다.
쉼표(,)로 여러 글꼴을 등록 할 수 있는데, 이때 맨 앞에 있는 글꼴을 우선으로 적용시키며, 맨 앞에 있는 글꼴이 사용자의 컴퓨터에 없을 때 그 다음 글꼴을 사용하게 됩니다.

 

ex)

.box1 {

    font-size: 20px;

    font-family: 나눔고딕,NanumGothic,돋움,Dotum;

}

 

---

text-align 속성

text-align 속성은 텍스트의 정렬 방향을 의미합니다.

• left: 왼쪽 정렬
• right: 오른쪽 정렬
• center: 중앙 정렬
• justify: 양쪽 정렬 (자동 줄바꿈시 오른쪽 경계선 부분 정리)

ex)

#box1 { 

text-align: right;

 }

 

 

---

border 속성

border 속성은 태그의 테두리를 설정하는 속성으로,  세부적인 속성들을 한번에 쓸 수 있는 속성입니다. width - style - color의 순서로 사용합니다.

border-width

테두리의 두께로, 주로 px 단위를 사용합니다.

border-style

테두리의 스타일로 실선, 점선, 이중선 등의 옵션이 존재합니다.

border-color

테두리의 색상으로, 값은 color속성의 포맷을 사용합니다.

 

ex)

.border-styles > p{

    margin: 2px 0;

    padding: 1px 3px;

    border-width: 2px;

    border-color: #aaa;

}

 

 

*.border-styles > p  : border-style이라는 class 하위의 p 태그에 CSS style 적용.

 

 

---

cursor 속성

cursor 속성을 이용하면 해당 태그 위에 위치하는 마우스 커서의 모양을 바꿀 수 있습니다.

• auto: 자동
• default: 기본값 (화살표)
• pointer: 손가락 모양 (클릭 가능한 버튼)
• wait: 로딩

등 다양한 종류의 값이 있습니다.

 

ex)

.btn-wait {

    cursor: wait

 }

 

---

visibility 속성

visibility 속성은 태그의 가시성을 결정합니다.

아래의 4가지 값을 가지며, 기본 값은 inherit 입니다.

• visible: 보임
• hidden: 숨김 (자신의 영역은 계속 차지)
• collapse: 겹치도록 지정(테이블의 행과 열 요소만 지정할 수 있으며, 그 외 요소의 지정하면 hidden으로 해석)
• inherit: 부모 요소의 값을 상속

ex)

#box1 {

     visibility: hidden; 

}

 

 

---

border-radius 속성

border-radius 속성은 요소의 테두리를 둥글게 만들어줍니다. px 단위와 % 단위를 사용할 수 있으며, border 속성 없이도 사용할 수 있습니다.

총 4개의 모서리를 각각 다른 값으로도 줄 수 있습니다. margin 및 padding 속성 처럼 4개의 값을 띄워쓰면 왼쪽-위 부터 시계 방향으로 각자 다른 값을 지정할 수 있습니다.

사용법

#box{

    border-radius: 5px; border-radius: 1px 2px 3px 4px;

}

 

 

 

 

참고: https://www.edwith.org/boostcourse-web/lecture/16675/

[LECTURE] 4) CSS 기본 Style 변경하기 : edwith

https://ofcourse.kr/css-course

CSS border-radius 속성 - ofcourse

 

---