KDT 포스코X코딩온 웹 과정 14기 - 3,4일차 CSS 선택자

목차

 

CSS 작성법

 

 

선택자 : 각각의 정의 요소들이 어떤 html 태그에 css를 적용시키는지 알려주는 지시자.

속성 : 실제로 적용되는 속성의 종류이며, 여러개의 프로터피를 연속해서 지정할 수 있고, 사용자가 임의로 정의하여 사용용할 수 없다는 특징이 있다.

값 : 실제로 해당 속성들에 대하여 적용되는 값을 말하며, 키워드나 크기 단위 또는 색상 등의 단위로 나타낸다.

CSS 선택자

#. 기본 선택자 

전체 선택자 : *{color : red;}
테그 선택자 : li {color: red;}c
클래스 선택자 : .orange { color : red;}
                          <span class = "orange"> 오랜지 <span>
아이디 선택자 : #orange {color : orange;}
                          <li id = "orange"> 오렌지 </li>

#. 아이디는 각각의 html당 하나의 동일한 이름을 쓸 수 있고, class는 중복을 허용한다.

 

#. 복합선택자

주로 특수한 요소를 호출하고 싶은데, 기본 선택자 만으로는 선택이 불가능한 경우 사용함.

 

1. 일치 선택자 : 선택자 ABC와 XYZ를 동시에 만족하는 요소에 대하여 사용

span.orage{color:red;} : 태그가 span이고, class가 orange인 글귀를 빨간색으로 띄워라.

 

2. 자식 선택자 : 선택자 ABC의 자식 요소 XYZ 를 선택

ul > .orange { color : red;} : ul 요소 내의 class가 orange인 테그를  빨간색 글씨로 띄워라.

 

3. 하위(후손) 선택자 : 선택자 ABC의 하위 요소 XYZ를 선택

div .orange {color: red;} : div 내의 후손 태그들 중에서 class가 orange인 테그를 빨간색으로 표시하라.

 

4. 인접형제 태그 : 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택.

.orange + li {color : red;} : class가 orange인 테그와 아래쪽으로 제일 처음 붙은 li 테그를 빨간색으로 표시하라. 

 

5. 일반형제 선택자 : 선택자 ABC의 다음 형제 요소 XYZ를 모두 선택

 

.orange ~ li {color : red;} : class가 orange인 테그 중에서 아래쪽의 li테그 모두를 빨간색으로 표시하라. 단, 다른 테그가 나오면 그 이후의 li 테그는 적용되지 않음.ㅁㅁ

 

가상 선택자 

#. 사용자의 행동에 따라 변화하는 가상 상황에 따라서 CSS를 다르게 가져가고 싶을때 사용한다.

#. 각 요소의 상황에 따라 사용자가 원하는 요소를 선택하여 사용한다.

#. 특정 요소를 부정하고 싶을때 사용한다.

 

1. hover : 선택자 요소에 마우스  커서가 올라가 있는 동안 선택

a:hover{color:red;}

 

2. active : 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택.

a:active{color:red;}

 

3. forcus : 선택자 ABC 요소가 포커스되면 선택

input:focus{background-color: orange;}

 

4.  ABC:first-child : 선택자 ABC가 형제 요소 중 첫째라면 선택.

.클래스 span:first-child{color:red;

 

5.  ABC:last-child : 선택자 ABC가 형제 요소 중 막내라면 선택.

.클래스 h3:last-child{color:red;}

6. ABC:nth-child(n) : 선택자 ABC가 형제 요소 중 (n)쨰라면 선택

.클래스 *:nth-child(수식) {color:red;}

7. ABC not(XYZ) : 선택자 XYZ가 아닌 ABC 요소 선택

.클래스 *:not(span) {color:red;}

 

가상요소 선택자

1. After : 요소의 뒤에 내용 삽입

.클래스::after{content:"내용";}

2. Before : 요소의 앞에 내용을 삽입

.클래스::before{content:"내용";}

 

#. 실제 의미 없는 HTML 테그를 만들지 않고 임시로 문구를 띄우고 싶을때 사용한다.

예) 쇼핑몰 페이지의 Hot 추천

 

 

#. 속성 선택자

#. 지정한 특정 속성을 가지고 있는 테그를 선택하는 선택자.

 

1. [ABC]  : 속성 ABC를 포함한 요소 전부를 선택.

#

 

2. [ABC = "XYZ"] : 속성 ABC를 포함하고 그 속성의 값이 XYZ인 테그를 가르키는 선택자.

 

 

 

CSS 우선순위

 

- 동일한 요소를 다른 선택자로 적용해 여러 스타일이 적용되는 상황이 발생할 수 있음.

 

!important > 인라인 스타일 > 아이디 선택자 > 클래스/속성/가상선택자 > 테그 선택자 > 전체 선택자.

---

 #######실습 시간에 풀었던 문제 1 #######

 

 

 

######실습 시간에 풀었던 문제2######

######### 실습시간에 풀었던 문제3#############

 

 

1~3번까지 예제 풀며 느낀점 : 특별히 문제 풀때 특별한 애로사항은 없었다. 다만, 2번 문제의 경우, 특정 테그의 자손을 찾을 떄 띄어쓰기 하나로 결과가 달라질 수 있으니, 유의할 필요가 있어 보인다. 실제로 문제 풀떄 띄어쓰기를 빼먹어서 css가 적용되지 않았었음. 이런 건, 컴퓨터가 에러로 출력하지 않으니까.

 

######실습시간에 풀었던 문제4########

 

느낀점 : 단순한 수식으로 짝수일때, 홀수일때 다른색으로 css를 찍는 문제, 주의해야할 포인트는 없었다.

 

######실습시간에 풀었던 문제5######

 

######실습시간에 풀었던 문제6######

 

 

5번~6번 풀다가 느낀점 : 다시한번 말하지만, 띄워쓰기 한번에 결과가 크게 달라진다.

 

이미지 : 코딩온 교육자료 및 직접 짠 CSS 스타일시트를 참조