class/id

)CSS의기본-2

 

id / class

<id> 태그안에 유니크한 id값을 붙여줘서 css 구분할때 편하게 해줌

css 스타일값 변경 시 id값을 선택자로 사용할수있다

사용할때 #id이름 이렇게 사용

 

class = id 기능이 같음

 

 

<style>에서 id는 #id이름  class는 .class이름 

으로 스타일 줄태그 지정 후

{ 스타일 내용 넣기 </style>

 

 

width:00px;	가로사이즈 (스타일값 추가 시 마지막에 ; 넣어주기)
background-color:#ffffff;	배경색 값
border:1px solid #ffffff;	테두리라인 : 사이즈 모양(solid 실선) 색상값
text-align:center;	텍스트 정렬 :중앙
overflow:hidden	?
float:left (요즘에잘안씀)	float 정렬에관련 해당 컨텐츠를 (left) 옆으로 붙인다(공간이 있을때)
clear:both;	바로 윗단의 스타일이 내려오는 경우가 있음, 클리어시켜주는 역할
box-sizing: border-box;

 

font-size:1em;  (2em,3em...)

 

 

CSS_3-1_id_class.html

0.00MB

 

 

<ul></ul> 번호 없는 리스트태그 , 요소들로는 <li></li> 사용

<ol></ol> 번호나열 리스트태그, <li>사용은 동일

 

 

 

---

 

 

 

속성선택자 :

각 tag의 속성을 선택하여 css의 속성을 설정할 수 있다.

 

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

<style>

input (속성)[type=text] {

   color:green;

   font-size:30px;
   gont-weight:bold;

}

</style>

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

input 태그중 속성이 text인 요소에만 컬러값/폰트사이즈/bold 적용

 

 

---

 

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

div h1 {

    font-wight:bold;

}

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

div태그 아래위치에 있는 모든 h1 태그 속성 폰트값에 bold 적용

 

 

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

div > h1 {

    font-wight:bold;

}

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

div태그 바로 아래에 있는 h1태그에만 폰트값 bold 적용

 

 

---

 

 

 

태그의 동일(동등)한 위치를 판단하여 css 속성을 설정할 수 있다.

 

+ 나랑 동일(동등)한 위치 태그중에 내 바로 아래에 있는 애만 선택

~ 나랑 동일한 위치태그 전부다 선택

 

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

h3~div {

   font-size:10px;

   color:yellow

}

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

내가 h3인데 h3아래 div 태그를 전부 다 선택하겠다