[CSS] 기초2

---

목차

• 가상 클래스(Pseudo-classes)
  
  • 첫 번째 자식
  • 라인 적용
  • 글자 적용
  • ::selection
• 배경 관련
  • 배경에 이미지 삽입
  • 여러 개의 배경 삽입
• 글자관련
  • 정렬
  • 줄 긋기
  • 대소문자 변환
  • 그림자 효과

---

ㅁ의사 클래스 (Pseudo-classes)

의사클래스는 링크에 대해 특수 효과를 설정할 수 있다.

 

예를 들어 어떤 링크를 클릭하면 클릭된 링크는 보라색으로 바뀌게 되고, 클릭되지 않은상태는 파란색으로 나타난다.

이러한 것을 설정하는 것이 의사 클래스이다.

 

보통 네 가지로 나눠진다.

아래 코드에서 확인

방문X

방문했을 때

마우스 링크에 올렸을 때

 

ㅇ첫 번째 위치하는 자식

p태그의 첫 번째 자식만 색깔을 바꿔준다.

ㅇ라인에 대한 적용

첫 번째 줄에만 css를 적용하고 싶으면 다음과 같이 작성한다.

이는 웹페이지의 창의 크기에 관계없이 무조건 첫 번째 줄은 색깔이 바뀐다.

참고사항은 콜론이 두 개임을 알 수 있다. ::

ㅇ글자에 대한 적용

첫 번째 글자에만 css를 적용한다.

ㅇ::selection

글자를 드래그 했을 때 색깔을 주고 싶을 때 이용한다.

마우스로 드래그를 하면 배경은 노란색, 글자색은 빨간색이 됨을 알 수 있다.

 

 

 

ㅁ배경 관련(Background)

ㅇ배경에 이미지 삽입

이미지가 반복되서 전체 페이지를 덮는다.

 

만약 반복되는 것이 싫어서 x축으로만 반복하고 싶으면 아래 코드로 입력한다.

y축도 똑같다.

이번에는 전체배경은 yellowgreen 에 이미지는 오른쪽 위에만 보이게 해본다.

 

 

이번에는 table 태그 안에 적용시킨다.

따라서 영역이 있는 곳에는 모두 background 셀렉터를 사용할 수 있다.

 

 

ㅇ배경 여러개 넣기

아이디값을 div에 주었으므로 div 영역에 대한 배경을 의미한다.

 

background-image 셀렉터의 url()을 컴마, 로 구분해서 두 개의 이미지를 넣을 수 있다.

또한 background-position 의 첫 번째 right bottom은 첫 번째 이미지, left top은 두 번째 이미지에 대한 위치이다.

background-repeat도 첫 번째 이미지는 반복하지 않고, 두 번째 이미지는 반복한다는 뜻이다.

 

 

ㅁ글자 (Text)

ㅇ정렬(Alignment)

text-align

-left: 왼쪽정렬

-right: 오른쪽 정렬

-center: 가운데 정렬

-justify: 양쪽 정렬

 

-텍스트 정렬하기

 

-텍스트 상자 안에 텍스트 내용 넣기

 

ㅇ줄 긋기

-텍스트 줄 긋기

 

-링크에 대한 밑줄 없애고 마우스 올리면 밑줄 생기게 하기

 

 

ㅇ변환(Transformation)

-대소문자

 

ㅇ그림자효과 (Shadow)

-그림자 효과

첫 번째 2px는 기본 글자의 굵기, 두 번째 2px는 그림자 글자의 굵기, 다음은 그림자의 색깔이다.