주요 선택자, 텍스트 관련 스타일(1)

**주요선택자
전체선택자   ==> *
태그선택자 ==> 태그이름
ID선택자 ==> #아이디이름
클래스선택자 ==> .클래스이름

-----------------------------------------------------------

border: 1px solid black;

==> 테두리 두께, 선 모양, 선 색상

 

 

padding: 20px;

==> 안쪽 여백

margin: 20px;

==> 바깥쪽 여백

 

 

-------------------------------------------------------
**한꺼번에 여러개 선택하기

선택자1, 선택자2 .. {

}

-------------------------------------------------------
브라우저에 따라 지원되는 css가 다를 수 있어요.
그래서 어떠한 속성(들)은 브라우저를 구별하는 접두어를 붙여줘야 합니다.

예를 들어 요소를 회원시키는 
rotate의 경우 브라우저마다 지원방식이 달라 
브라우저를 구별하는 식별자를 써 줘야 합니다.

transform:rotate(15deg)
-webkit-transform:rotate(15deg);
-moz-transform:rotate(15deg);
-o-transform:rotate(15deg)
-ms-transform:rotate(15deg)

----------------------------------------------

.box{
position:absolute; <-- 절대위치로 지정
left:50px; <-- 가로위치
top:70px; <-- 세로위치
width: 100px; <-- 가로길이
height: 60px; <-- 세로길이
background: orange; <-- 배경색상
border: 2px solid green; <-- 테두리모양
line-height: 60px; <-- 줄간격
text-align: center; <-- 정렬방식
}

-----------------------------------------------------------
**텍스트 관련 스타일

- font-family

선택자{
font-family:"맑은고딕","궁서","돋움"
}

나열한 순서대로 해당 글꼴있으면 설정해 줍니다.

- css는 상속이 됩니다.
==> 부모 노드(태그)에 설정된 css가 
자식노드들에게도 영향을 끼칩니다.

- font-size
글자 크기를 설정하는 속성


- font-weight
normal 기본
bold 굵게
lighter 가늘게
bolder 더 굵게


- font-style
normal
italic <--- 기울임꼴


- font
글꼴관련속성을 한꺼번에 설정할 수 있어요.
한꺼번에 설정할 때에는 순서가 중요합니다.

font: italic 12px 돋움 ;

  font-style font-size font-family순서대로 와야 합니다.