CSS 기본

/* css 코딩방법 : html 태그에 해당되는 값을 적용한다.
html태그{
속성: 값;
}
=> 설명: html태그 (css 선택자)

EX)
h1{color: burlywood;
background-color: blue;}

h2{ color: white;
background-color: black;}

전체 선택자

• : (전체 선택자), 모든 태그 선택
  사용법 : * { 속성:값; }

ex) * {color: red;}

ID 선택자

/ html 태그의 id 속성을 디자인 적용 /
/ 사용법 : #ID 속성값 {속성: 값; } /
#header {
width: 600px;
background-color: red;}

클래스 선택자

사용법 : .class값 {속성:값;}
*/
.select{color: red;}

공간태그 : div, span

/ 클래스선택자 사용법 : .클래스명 {속성:값;} /
/ 공간태그 비교 :
1) div태그 자동 줄바꿈 0
1) span태그 자동 줄바꿈 x
div 가로세로 크기 적용 o
span 가로세로 크기 적용 x
/
.div-hello{
width: 100px;
height: 100px;
background-color: aqua;
}

.div-hello2{
width: 300px;
background-color: blue;
}

.span-hello{
background-color: yellow;
}

.span-hello2{
background-color: red;
}

폰트 등 변환

/ 폰트 글자크기 속성 /
font-size: 30px;

/ 굵은 글씨 속성 /
font-weight: bold;
/ 밑줄 속성 /
text-decoration: underline;

List 이미지 넣기

/ 리스트 이미지 넣기 /
/ list_style-imgage: url() /

li {
list-style-image: 이미지경로url("./arrow.gif");
}