웹개발 프로젝트(CSS/HTML)-#8 미니홈피 프로젝트 (기본 레이아웃 완성)

오늘은 레이아웃을 완성해보는 시간이다.

 

지금까지 배운 속성들 에다가 오늘 새롭게 배울 개념(1. 선택자 조건 걸기 2.속성선택자)를 추가해서

 

미니홈피 홈 레이아웃을 완성해보겠다.

 

앞서 선택자라는 개념을 배웠다. 선택자는 css속성을 적용할 대상이라고 했다.

 

그 종류로는 HTML태그, class, id 등이 있다고 했다.

 

오늘은 이 선택자들끼리 조건을 걸고, 하위항목으로 설정하는 방식에 대해서 설명해보겟다.

 

조건을 건다는것이 무슨말인가 간단하게 예를들자면

 

name이라는 클래스 안에 있는 a태그에만 css속성을 적용해줘라 라는 조건을 의미한다.

 

name이라는 클래스를 css파일에 저장했다면 모든 name이라는 클래스에 적용이 되지만

 

위와같은 조건을 건다면 그 클래스안에 a태그에만 적용이 되는것이다. 별거없다.

 

그 형식에는 다양한 종류가 존재한다.

 

먼저 선택자 조건걸기 에 대해서 먼저 알아보자

 

1.and로 조건걸기(방식: 선택자들 붙여서 쓰기)

div#name ▶ div 태그 중 name 아이디를 가진 요소에 적용

div.menu#name ▶ div 태그 중 menu 클래스와 name 아이디를 가진 요소에 적용

.menu#name ▶ menu 클래스와 name 아이디를 동시에 가진 요소에 적용

 

2.or로 조건걸기(방식: 선택자들 사이에 쉼표 추가)

#name, .menu ▶ name 아이디 혹은 menu 클래스를 가진 요소에 적용

.item1, .item2, .item3 ▶ item1 클래스 혹은 item2 클래스 혹은 item3 클래스를 가진 요소에 적용

 

html태그이든 클래스선택자이든 id선택자이든 옆으로 계속 붙여나가면서 조건을 걸면되는데

or로 조건을 걸 경우에는 쉼표(,)를 선택자 사이사이에 추가해주면 된다.

 

3.상위-하위 요소로 조건걸기(방식: 선택자들 사이 띄어쓰기)

.menu a ▶ menu 클래스 요소의 하위 요소 중 a 태그인 요소에 적용

.menu #name ▶ menu 클래스 요소의 하위 요소 중 name 아이디를 가진 요소에 적용

div .menu #name ▶ div 태그 요소의 하위 요소 중 menu 클래스를 가진 요소의 하위 요소 중 name 아이디를 가진 요소

에 적용

 

4.상위-하위 요소로 조건걸기(방식: 선택자들 사이 > 추가)

3번과는 조금 다르다. >를 추가해주면 순수한 부모-자식 관계를 가지는 선택자끼리만 조건이 걸린다.

3번은 상위-하위, 4번은 순수한 부모-자식 관계에 적용할수있는것이다.

 

다음 속성선택자에 대해서 알아보자

 

속성 선택자란 커서를 올렸을때, 클릭을 했을때 등과 같은 '상태'에 따라서 css속성을 적용하는것을 의미한다.

 

이런 속성은 여러가지가 있지만 hover, active, focus에 대해서 알아보자

 

hover는 마우스를 해당 요소로 올렸을 때 (호버하였을 때) 상태를 의미한다.

 

마우스를 올려놓기만 했을때 색상이 바뀐다던지 다른 효과를 줄때 사용한다.

  .menu-container > div:hover{
      background-color: lightgreen;
  }

위의 코드를 해석해보자면

 

menu-container라는 클래스의 자식에 있는 div태그에 커서를 올려놨을때 

 

배경색을 lightgreen으로 보여줘라 라는뜻이다.

 

이렇게 여러가지 선택자끼리 조건도 걸고 속성도 추가해줄수있다.

 

active는 마우스로 해당 요소를 클릭했을 때 상태를 의미한다.

​

input 요소에 적용한 focus 속성은 해당 요소가 활성화되었을 때

(즉, 입력창에 입력할 수 있도록 커서가 깜빡깜빡하는 상태)를 의미한다.