HTML, CSS 관련 기본사항 3

1. 클래스 선택자

- 중복되는 항목에 대해 CSS 작업 시 작업을 용이하게 하기 위해 태그에 클래스를 부여하여 CSS 작업 시 부여된 이름을 통해 작업이 진행될 수 이도록 한 것.

- <div class="a"></div> 인 경우 / CSS에서 해당 항목 호출하여 작업 시 .a { } 로 진행.

- 엘리먼트의 별명이 2개인 경우 / CSS에서 해당 항목 호출하여 작업 시 .a.aa { } 식으로 진행.

// HTML
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<!-- 아래 엘러먼트는 별명이 2개 입니다.(.d, .black) -->
<div class="d black"></div>
<!-- 아래 엘러먼트는 별명이 2개 입니다.(.b, .black) -->
<div class="b black"></div>
<div class="f"></div>


// CSS
body {
    text-align:center;
}

div {
    width:30%;
    display:inline-block;
    height:100px;
    background-color:red;
    margin:10px;
}

/* div 이면서 동시에 a 클래스를 가지고 있는 */
div.a {
    background-color:green;
}

/* 클래스 b 인 엘리먼트 */
.b {
    background-color:blue;
}

.black {
    background-color:black;
}

/* d 라는 클래스를 가진 동시에 black 이라는 클래스도 가진 엘리먼트 */
.d.black {
    background-color:#565656;
}

 

2. ul, ol, li

- ul (unordered list) : 목록을 의미. (목록을 만들 때 무조건 사용, li와 함께 사용)

- ol (ordered list) : 목록을 의미. (순서가 중요한 리스트인 경우 사용, li와 함께 사용)

- li (list) : 항목을 의미.

ul - li 사용 시

ol - li 사용 시 (순서 존재)

 

3. 리스트 스타일 초기화

- list-style: none; 설정 시 리스트 앞에 표시되었던 기호가 사라진다.

 

4. position 속성

- absolute, fixed : 너비가 최대한 줄어 든다, 유령화/유령의 집화, 겹치는게 가능하다, top/left/bottom/right 이동가능.

- relative : 너비 유지, 유령의 집화,  겹치기 불 가능.

- static : 너비 유지, 사람화, 겹치기 불 가능.