HTML&CSS(5)

위 아래 자간 
line-height: 10px;

좌 우 자간 
letter-spacing:  0.1em;

 

마진
위  오른쪽 아래 왼쪽

 

***

 

마우스오버시 효과

 

태그:hover{color:컬러값;}

 

margin:0 0 0 0 ;

상 하 좌 우 : px or auto(중앙정렬)로 설정

 

 

input : 해당영역 선택했을 때(상태선택자)

 

 

---

 

상자라인 만들때

border:1px (선두께) solid #색상값

 

리스트태그에 앞에 기호 없애기 list-style:none;

 

ul li : nth-child(2n+1)

li 아이템 중에 (nth-child = 구조선택자를 선택하는 함수) 홀수(2n+1)  짝수(2n)

 

 

상자 외곽에 라운드줄때

border-radius:10px.10px 0 0;

 

 

 

*<margin: 전체에 값주기

 

---

 

 

width:가로값px;

height:세로값px;

margin:0 auto; 마진/중앙정렬

float:left or right(붙는위치)

clear:both; 위의 style값 지우기

 

 

---

 

 

문자선택자

#history2: :first-letter {

   font-size:2em;

}

= 히스토리2 안에 있는 첫번째 글자에 속성을 준다

= 폰트사이즈 2배

first-letter   첫번째글자 선택

 

---

 

#content p : first-child : : selction {

   background-color:blue;

   color:yello;

}

= 컨텐츠 아이디에 P태그 에 퍼스트 차일드를 셀렉션했을때 속성을 준다

= 배경을 블루로, 글자색을 노랑으로

 

 

---

 

 

부정선택자

#content li : not(.fa) {

   background-color : #ffd800;

}

= 클래스가  fa가 아닌 애들한테 속성을 준다

= 배경에 색상을 준다

 

 

---

 

링크선택자

#content a : : after {

   content: ' - ' attr (href) ;

}