css 선택자요령과 list , Background 속성

// List Tag(목록태그)

1.비순서형(사용빈도늪음)
    사이트의 모든메뉴,슬라이드,나열형구조
2.순서형(가끔)
3.정의형(가끔)

** 비순서형 ( unordered list )
ul로 정의하고 li로 표현합니다. ( list item )

<ul>
    <h1>contents</h1> ---> 절대불가....
    <li>컨텐츠작성영역</li>
    <li>우동</li>
    <li>짬뽕</li>
    홍길동  -> 절대불가
</ul>

** 순서형 ( ordered list )
ol로 정의하고 li로 표현합니다.

** 정의형 ( definition list )
dl로 정의하고 dt, dd로 표현합니다.
            dt : definition term  정의되는 용어
            dd : definition description 용어에 대한 설명


** 목록 기호 없애기
ul, ol -> 선언가능
li -> 선언가능

    list-style-type:none;
    list-style:none;


//////// 조합선택자
1. 하위선택자(자손)
2. 자식선택자


3. 그룹선택자

    선택자1, 선택자2, 선택자3 { 속성:값; }



/// Block 요소 크기조절의 기본형

Width : 부모가 설정
Height : 자식이 설정


////////  선택자 가상요소 사용하기

선택자:nth-child(n)  : n번째 자식을 선택
               n은 1번부터
선택자:first-child  :첫번째 자식요소를 선택
선택자:last-child   :막내만 선택

선택자:nth-child(odd)  : 홀수자식만 선택
선택자:nth-child(even)  : 짝수자식만 선택

li:nth-child(1)  : li요소중 첫번째를 선택하라



///// Background 속성

// 솔리드, 그라데이션칼라사용
background-color

// 배경이미지를 제어하는 속성
background-image : 이미지 지정
    background-image:url('파일명');

    url ( Uniform Resource Locator)
    자료가 있는곳을 표기하는 형식

background-repeat : 이미지의 반복유무
    background-repeat :
            repeat (기본값)
            no-repeat  반복없음
            repeat-x   x축반복
            repeat-y   y축반복


background-poisiton : 이미지의 위치설정

    background-position: x y;

    좌표값입력은 기준좌표, 수치값
    기준좌표 : left, right, top, bottom, center(정렬)


    배경이미지 묶음 : Sprite image

    낱개 < 묶음 (효율성이 높음)

    배경포지션으로 위치 이동

background-size : 이미지의 크기설정
background-attachment



//////////////// 멀티클래스 사용법
<h1 class="aa bb cc">contents</h1>

.aa
.bb
.cc

.aa.bb
.aa.cc
.bb.cc
.aa.bb.cc