[CSS] CSS 정리 (3)

 

 

 

특정 부분이나 글자 등 여러 요소들에 대해 배경을 넣어서 아름다운 웹 페이지를 만들 수 있다.

웹의 바탕을 꾸며 주는 배경 스타일에 대해 알아보자.

 

background

 

1. background-color

배경색을 지정할 때 사용한다. 색의 지정은 텍스트의 색상을 설정하는 방법과 동일하다. (16진수, RGB, HSL)

또한 background-color 속성은 스타일 상속에서 배재된다.

 

2. background-clip

배경색의 적용 범위를 조절하는 역할을 한다. 

 

• border-box : 테두리까지 적용한다.
• padding-box : 패딩 범위까지 적용한다.
• content-box : 콘텐츠 부분에만 적용한다.

 

박스 모델에서 어떤 요소까지 배경색을 적용할 지를 결정한다.

 

3. background-image

웹 요소에 배경 이미지를 넣을 때 사용한다. 

url()에 이미지 파일 경로를 넣어서 사용한다.

 

/* 잠깐 url src href의 차이점에 대해 알아보자.

세 가지 모두 링크를 걸어 이미지나 다른 웹사이트를 불러오는데 사용되지만, 구분할 수 있어야 한다.

 

• CSS에서: 항상 url
• HTML에서link인 경우: href
• link가 아닌 경우(이미지, 비디오 등등): src

이렇게 기억하고 사용하자.  */

 

4. background-repeat

배경 이미지의 반복 방법을 지정하는 역할을 한다.

화면 너비에 가득 찰 때 까지 반복하거나, 한 번만 표기하고 반복하지 않게 설정할 수 있다.

 

5. background-position

배경 이미지의 위치를 조절하는 역할을 한다.

위치를 설정하는 속성값을 알아보자.

• 키워드 : left center right / top center bottom 수평 위치와 수직 위치를 설정한다.
• 백분율 : n% k% 왼쪽 모서리부터 가로 n% 세로 k%의 위치에 배경 이미지를 설정한다.
• 크기 : px 단위로 직접 크기를 설정한다. 위치는 왼쪽 상단을 기준으로 한다.

6. background-origin

배경 이미지의 적용 범위를 조절한다.

background-clip과 동일하게 사용한다.

 

7. background-attachment

스크롤 시에도 배경 이미지를 고정할 때 사용한다.

 

8. background-size

배경 이미지의 크기를 조절한다.

속성값이 하나만 입력되면 그 값은 너비로 인식하고 높이는 비율에 맞춰서 계산한다.

 

9. background

역시 또 한 번에 적용할 수 있는 속성이 있다.

background속성으로 위의 속성들을 한 번에 사용할 수 있다.

 

 

배경을 꾸밀 때 배경색이나 이미지를 사용하는 방법 외에도 그라데이션 효과를 사용할 수 있다.

 

선형 그라데이션

 

linear-gradient 함수로 사용한다. 

그라데이션 색상이 수직, 수평, 대각선 방향으로 일정하게 변하는 효과를 줄 수 있다.

 

 

to 예약어로 방향을 지정한다. 위의 예시에서는 to right bottom으로 우측 하단으로 효과를 설정했다.

이 방법 외에도 각도를 지정해서 방향을 설정할 수 있고, 색상 중지점을 지정해 두 가지 이상의 선형 그라데이션을 구현할 수 있다. 

 

원형 그라데이션

 

선형 그라데이션은 말 그대로 직선을 그리며 색상을 조절했다. 

원형 그라데이션은 원 또는 타원의 중심으로부터 바깥 방향으로 색상을 조절한다.

 

 

모양을 따로 지정하지 않으면 타원형으로 인식한다.

 

 

at 키워드와 함께 circle을 설정하면 그라데이션이 시작하는 원의 중심을 다르게 설정할 수 있다.

 

그라데이션을 사용해 패턴을 만들 수 있다.

 

• repeating-linear-gradient : 선형 그라데이션을 반복해서 패턴을 만든다
• reapeating-radical-gradient : 원형 그라데이션을 반복해서 패턴을 만든다

 

고급 선택자

 

웹 페이지의 소스코드가 일어질수록 기본 선택자만을 사용해서 스타일을 설정하기 힘들다. 

연결 선택자와 속성 선택자를 사용해 스타일 설정에 도움을 받자.

 

연결 선택자

 

둘 이상의 선택자를 연결해서 스타일을 적용할 요소를 지정한다. 

 

 

하위 선택자를 사용해 부모 요소에 포함된 하위 요소를 모두 선택할 수 있다.

section p {스타일 규칙}에서 section에 포함된 p에 대해 색상을 파란색으로 설정했다.

 

 

자식 선택자를 이용해 자식 요소에만 스타일을 적용시킬 수 있다.

section > p {스타일 규칙}에서 section의 자손인 p에 대해서만 글자 색을 파란색으로 설정했다.

이 때 자식은 바로 한 단계 아래의 요소를 뜻한다.

 

하위 요소 전체에 대해 적용시키는것과 하위 요소 중 자손에 대해서만 적용시키는것의 차이를 이해하자.

 

 

 

위의 소스코드에서 section을 부모로 하는 h1과 p 요소가 있다. 여기서 h1과 p요소 중에서 먼저 나온 요소인 h1을 형 요소, p를 동생 요소라고 한다.

형제 요소들에 대해서 적절하게 스타일을 적용하고 싶을 때 형제 선택자를 사용한다.

 

• h1 + p {스타일 규칙} : h1의 형제인 p요소 중 첫 번째 p에 대해 스타일 규칙을 설정한다.
• h1 ~ p {스타일 규칙} : h1의 형제인 모든 p요소에 대해 스타일 규칙을 설정한다.

 

 

속성 선택자

 

태그 안에서 사용하는 속성과 속성값에 따라서 요소를 선택하는 역할을 한다. 

 

 

a[href] {스타일 규칙}에서 a 요소 중에서 href 속성이 있는 요소를 찾아내 스타일 규칙을 적용시켰다. 

이처럼 여러 가지 태그를 사용할 때 태그 안에서 특정한 속성, 속성값을 사용한 요소들에 대해서 따로 스타일 규칙을 적용시킬 수 있다.

 

• a[속성 = 속성값] {스타일 규칙} : 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일 규칙을 설정한다.
• a[속성 ~= 속성값] {스타일 규칙} : 여러 속성값 중에서 해당 속성값이 포함된 요소를 찾아 스타일 규칙을 설정한다. 속성값이 button / flat button 처럼 파생되는 속성값들에 대해 한 번에 처리할 수 있다. (단어로 구분)
• a[속성 |=속성값] {스타일 규칙} : 여러 속성값 중에서 해당 속성값이 포함된 속성에 스타일을 적용한다. 2번 선택자와 비슷하지만, 2번 선택자는 -으로 연결한 단어에 스타일을 적용하지 않는다. 2번 선택자보다 좀 더 넓은 범용성을 가진다고 할 수 있다.
• a[속성 ^=속성값] {스타일 규칙} : 해당 속성값으로 시작하는 요소를 찾을 때 사용한다.
• a[속성 $=속성값] {스타일 규칙} : 해당 속성값으로 끝나는 요소를 찾을 때 사용한다. 확장자명을 찾을 때 좋다.
• a[속성 *=속성값] {스타일 규칙} : 해당 속성값이 포함된 요소를 찾을 때 사용한다. 2번과 3번 선택자는 단어를 기준으로 구분하니 이 선택자는 좀 더 넓은 범용성을 가진다고 할 수 있다.

 

가상 클래스

 

버튼을 클릭하거나 마우스 커서를 근처에 가져가면 스타일이 변하는 버튼을 본 적이 있다.

사용자의 동작에 반응하는 웹 페이지를 만들기 위해 가상 클래스를 사용할 수 있다.

가상 클래스는 클래스 이름 앞에 :를 붙여 표현한다. 가상 클래스에는 어떤 것들이 있는지 알아보자.

 

• :link 가상 클래스 선택자 : 하이퍼링크가 달린 텍스트는 기본적으로 파란색과 밑줄이 추가된다. 링크의 밑줄과 색상을 조절할 때 사용한다.
• :visited 가상 클래스 선택자 : 하이퍼링크가 달린 텍스트를 방문하게 되면 색상이 보라색으로 변한다. 이 때 색상을 조절할 때 사용한다.
• :hover 가상 클래스 선택자 : 요소 위로 마우스 커서를 가져갈 때 스타일을 새로 적용한다. 응용하면 메인메뉴 위로 마우스 커서를 가져갔을 때 서브메뉴가 나타나는 효과를 만들 수 있다.
• :active 가상 클래스 선택자 : 웹 요소의 링크나 이미지를 클릭했을 때 그 순간의 스타일을 지정한다.
• :focus 가상 클래스 선택자 : 텍스트 필드 위에 커서를 올려놓을 때 스타일을 지정한다.
• :target 가상 클래스 선택자 : 같은 문서 안에서 다른 위치로 이동할 때 앵커를 사용하는데, 여기서 :target 선택자를 사용하면 앵커의 목적지가 되는 부분에 스타일을 쉽게 적용할 수 있다. (앵커는 나무위키를 생각하면 좋을 것 같다)
• :checked 가상 클래스 선택자 : form의 라디오박스나 체크박스에서 선택된 항목에는 checked속성이 추가된다. 선택된 요소에 대해 스타일을 지정할 때 사용한다.
• :not 가상 클래스 선택자 : 직관적으로 알 수 있는 선택자이다. 괄호 안에 있는 요소를 제외한 나머지를 의미한다. 집합에서 여집합 개념을 떠올리면 이해하기 쉽다.

 

위의 가상 클래스 선택자들 중 1~4 선택자는 메뉴 링크에서 자주 사용하는데, 1~4 순서로 정의해야 제대로 작동한다.

 

이 외에도 구조 가상 클래스를 이용해 클래스나 아이디를 사용하지 않고도 특정 위치에 있는 요소를 찾아 스타일을 적용시킬 수 있다. (응용하면 홀수 번째나 짝수 번째 요소에 스타일을 적용시킬 수 있다)

 

 

가상 요소

 

가상 클래스는 여러 요소 중 원하는 요소를 선택하는 역할을 하고, 가상 요소는 웹 문서의 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가하는 역할을 한다. 

가상 요소는 요소 이름 앞에 ::를 붙여서 표현한다. 가상 요소에는 어떤 것들이 있는지 알아보자.

 

• ::first-line, ::first-letter 요소 : 지정한 요소의 첫 번재 줄이나 첫 번째 글자에 스타일을 적용한다. 
• ::before, ::after 요소 : 지정한 요소의 내용 앞뒤에 스타일을 넣을 수 있다.