배경 및 테두리
이번 수업에서는 CSS 배경과 테두리로 할 수 있는 창의적인 작업을 살펴보겠습니다. 그라데이션 (gradients), 배경 이미지, 둥근 테두리를 추가하는 것에서 배경과 테두리는 CSS 의 많은 스타일 질문에 대한 답입니다.
전제조건: | 기본 컴퓨터 활용 능력, 기본 소프트웨어 설치, 파일 작업 에 대한 기본 지식, HTML 기본 사항 (HTML 소개 학습) 및 , CSS 작동 방식 이해 (CSS 첫 번째 단계 학습) |
---|---|
목적: | 박스의 배경과 테두리 스타일을 지정하는 방법 배우기. |
CSS 의 스타일링 배경
CSS background
속성은 이 수업에서 만나게 될 많은 background longhand 속성의 줄임말 입니다. 스타일 시트에서 복잡한 배경 속성을 발견하면, 한 번에 많은 값을 전달할 수 있으므로 이해하기 어려울 수 있습니다.
.box {
background:
linear-gradient(
105deg,
rgba(255, 255, 255, 0.2) 39%,
rgba(51, 56, 57, 1) 96%
)
center center / 400px 200px no-repeat,
url(big-star.png) center no-repeat,
rebeccapurple;
}
이 자습서의 뒷부분에서 속기 (shorthand) 작동 방식으로 돌아가지만, 먼저 개별 배경 속성을 보고, CSS 에서 배경으로 수행할 수 있는 다양한 작업을 살펴보겠습니다.
배경 색상
background-color
속성은 CSS 의 모든 요소에 대한 배경색을 정의합니다. 이 속성은 유효한 <color>
를 허용합니다. background-color
는 요소의 내용 및 패딩 박스 아래로 확장됩니다.
아래 예에서는 다양한 색상 값을 사용하여 박스, 제목 및 <span>
요소에 배경색을 추가했습니다.
사용 가능한 <color> 값을 사용하여, 이것들을 가지고 놀아보십시오.
배경 이미지
background-image
속성을 사용하면 요소의 배경에 이미지를 표시할 수 있습니다. 아래 예에는 두 개의 박스가 있습니다 — 하나는 박스보다 큰 배경 이미지이고 다른 하나는 별 모양의 작은 이미지 입니다.
이 예제는 배경 이미지에 대한 두 가지를 보여줍니다. 기본적으로 큰 이미지는 박스에 맞게 축소되지 않으므로 작은 이미지만 표시되는 반면, 작은 이미지는 박스를 채우기 위해 바둑판 식으로 배열됩니다. 이 경우 실제 이미지는 단일 별 입니다.
배경 이미지 외에 배경색을 지정하면 이미지가 색상 위에 표시됩니다. 위 예제에 background-color
속성을 추가하여 실제 상태를 확인하십시오.
배경 이미지 반복 제어
background-repeat
속성은 이미지의 타일링 동작을 제어하는 데 사용됩니다. 사용 가능한 값은 다음과 같습니다.
no-repeat
— 배경이 반복되지 않도록 합니다.repeat-x
— 수평으로 반복합니다.repeat-y
— 수직으로 반복합니다.repeat
— 기본값; 양방향으로 반복합니다.
아래 예에서 이러한 값을 사용해 보십시오. 값이 no-repeat
로 설정되어 별 하나만 표시됩니다. 다른 값 — repeat-x
및 repeat-y
— 를 사용하여 그 효과가 무엇인지 확인하십시오.
배경 이미지 크기 조정
위의 예에서 배경의 요소보다 커서, 이미지가 크게 잘립니다. 이 경우 길이 나 백분율 값을 취할 수 있는 background-size
속성을 사용하여 이미지 크기를 배경 안에 맞출 수 있습니다.
키워드를 사용할 수도 있습니다.
cover
— 브라우저는 이미지를 박스 면적을 완전히 덮으면서 가로 세로 비율을 유지하며 이미지를 충분히 크게 만듭니다. 이 경우 일부 이미지가 박스 외부에 있을 수 있습니다.contain
— 브라우저는 이미지를 박스 안에 들어가기에 적합한 크기로 만듭니다. 이 경우 이미지의 종횡비가 박스의 종횡비와 다른 경우, 이미지의 한쪽 또는 위쪽과 아래쪽에 간격이 생길 수 있습니다.
아래 예제에서는 위 예제의 큰 이미지를 사용했으며, 박스 안에 길이 단위를 사용하여 크기를 조정했습니다. 이미지가 왜곡된 것을 볼 수 있습니다.
다음을 시도해 보십시오.
- 배경 크기를 수정하는 데 사용되는 길이 단위를 변경 하십시오.
- 길이 단위를 제거하고
background-size: cover
또는background-size: contain
을 사용할 때 어떻게 되는지 확인 하십시오. - 이미지가 박스보다 작으면,
background-repeat
의 값을 변경하여 이미지를 반복할 수 있습니다.
배경 이미지 배치
background-position
속성을 사용하면 적용되는 박스에서 배경 이미지가 나타나는 위치를 선택할 수 있습니다. 박스의 왼쪽 상단 모서리가 (0,0)
이고, 박스가 가로 (x
) 및 세로 (y
) 축을 따라 위치하는 좌표계를 사용합니다.
참고: background-position
의 기본값은 (0,0)
입니다.
가장 일반적인 background-position
값은 — 수평 값과 수직 값의 두 가지 개별 값을 갖습니다.
top
및 right
(background-image
페이지에서 다른 키워드를 찾으십시오) 와 같은 키워드를 사용 할 수 있습니다.
.box {
background-image: url(star.png);
background-repeat: no-repeat;
background-position: top center;
}
.box {
background-image: url(star.png);
background-repeat: no-repeat;
background-position: 20px 10%;
}
키워드 값을 길이 또는 백분율과 혼합할 수도 있습니다. 예를 들면 아래와 같습니다.
.box {
background-image: url(star.png);
background-repeat: no-repeat;
background-position: top 20px;
}
마지막으로, 박스의 특정 모서리로 부터의 거리를 나타내기 위해 4 값 구문을 사용할 수도 있습니다 — 이 경우 길이 단위는 앞에 오는 값과의 offset 입니다. 아래 CSS 에서 우리는 배경을 위쪽에서 20px, 오른쪽에서 10px 로 배치합니다.
.box {
background-image: url(star.png);
background-repeat: no-repeat;
background-position: top 20px right 10px;
}
아래 예제를 사용하여 이러한 값을 가지고 실습하면서 박스 안에서 별을 움직이십시오.
참고: background-position
은 background-position-x
및 background-position-y
의 줄임말로, 다른 축 위치 값을 개별적으로 설정할 수 있습니다.
그라데이션 (Gradient) 배경
배경에 사용될 때 — Gradient — 는 이미지 처럼 작동하며 background-image
속성을 사용하여 설정 ���니다.
<gradient>
데이터 유형에 대한 MDN 페이지에서 다양한 유형의 그라디언트 및 그라디언트로 수행 할 수 있는 작업에 대한 자세한 내용을 읽을 수 있습니다. 그라디언트를 재생하는 재미있는 방법은 웹에서 사용할 수 있는 많은 CSS 그라디언트 생성기 중 하나 를 사용하는 것입니다. 그라디언트를 생성한 다음 이를 생성하는 소스 코드를 복사하여 붙여 넣을 수 있습니다.
아래 예제에서 다른 그라디언트를 사용해 보십시오. 두 개의 박스에는 각각 전체 박스에 걸쳐 펼쳐지는 선형 그라디언트와 설정된 크기의 방사형 그라디언트가 있습니다. 따라서 반복됩니다.
여러 배경 이미지
여러 개의 배경 이미지를 가질 수도 있습니다 — 하나의 속성 값으로 여러 개의 background-image
값을 지정하고, 각 이미지를 쉼표로 구분합니다.
이렇게 하면 배경 이미지가 서로 겹칠 수 있습니다. 배경은 stack 맨 아래에 마지막으로 나열된 배경 이미지와 함께 쌓이고, 코드에서 그 뒤에 오는 이미지 위에 각각의 이전 이미지가 쌓입니다.
참고: 그라디언트는 일반 배경 이미지와 혼합될 수 있습니다.
다른 background-*
속성은 background-image
와 같은 방식으로 쉼표로 구분된 값을 가질 수도 있습니다.
background-image: url(image1.png), url(image2.png), url(image3.png),
url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position:
10px 20px,
top right;
다른 속성의 각 값은 다른 속성의 같은 위치에 있는 값과 일치합니다. 예를 들어, image1
의 background-repeat
값은 no-repeat
입니다. 그러나, 다른 속성의 값이 다른 경우 어떻게 됩니까? 답은 더 적은 수의 값이 순환한다는 것입니다 — 위의 예에서는 4 개의 배경 이미지가 있지만 2 개의 background-position
값만 있습니다. 처음 두 위치 값은 처음 두 이미지에 적용되고 다시 순환됩니다 — image3
에는 첫 번째 위치값이 제공되고, image4
에는 두 번째 위치값이 제공됩니다.
해봅시다. 아래 예에서는 두 개의 이미지를 포함했습니다. 쌓인 순서를 설명하려면, 목록에서 어떤 배경 이미지가 먼저 나오는지 전환해 보십시오. 또는 다른 속성을 사용하여 위치, 크기 또는 반복 값을 변경하십시오.
배경 첨부 (attachment)
배경에 사용할 수 있는 또 다른 옵션은 내용이 스크롤될 때 스크롤하는 방법을 지정하는 것입니다. 이는 background-attachment
속성을 사용하여 제어되며, 다음 값을 사용할 수 있습니다.
scroll
: 페이지가 스크롤될 때 요소의 배경이 스크롤 되도록 합니다. 요소 내용이 스크롤되면, 배경이 움직이지 않습니다. 실제로 배경은 페이지에서 동일한 위치로 고정되므로, 페이지가 스크롤될 때 스크롤 됩니다.fixed
: 요소의 배경을 viewport 에 고정시켜, 페이지나 요소 내용을 스크롤할 때 스크롤되지 않도록 합니다. 항상 화면에서 동일한 위치에 유지됩니다.local
: 이 값은 나중에 추가 되었습니다 (Explorer 9 이상에서만 지원되지만, ���른 값은 IE4 이상에서 지원됨). 왜냐하면scroll
값이 다소 혼란스럽고 많은 경우 실제로 원하는 것을 수행하지 않기 때문입니다.local
값은 배경을 설정된 요소로 고정하므로, 요소를 스크롤하면 배경과 함께 스크롤 됩니다.
background-attachment
속성은 스크롤할 내용이 있을 때만 영향을 미치므로, 세 가지 값의 차이점을 보여주는 데모를 만들었습니다 — background-attachment.html 을 살펴보십시오 (여기에서 소스 코드 를 참조하십시오).
배경 속기 (shorthand) 속성 사용
이 수업 시작 부분에서 언급했듯이, background
속성을 사용하여 지정된 배경을 자주 볼 수 있습니다. 이 속기 기능을 사용하면 모든 다른 속성을 한 번에 설정할 수 있습니다.
여러 배경을 사용하는 경우, 첫 번째 배경에 대한 모든 속성을 지정한 다음, 쉼표 뒤에 다음 배경을 추가해야 합니다. 아래 예에서는 크기와 위치가 있는 그라디언트, no-repeat
및 이미지 위치가 있는 이미지 배경, 색상이 있습니다.
배경 이미지 속기 값을 쓸 때 따라야 할 몇 가지 규칙이 있습니다. 예를 들면:
background-color
는 마지막 쉼표 뒤에만 지정할 수 있습니다.background-size
의 값은background-position
, 직후에 포함되며center/80%
와 같이 '/' 문자로 구분됩니다.
모든 고려 사항을 보려면 MDN 페이지의 background
를 살펴보십시오.
배경이 있는 접근성 고려 사항
배경 이미지나 색상 위에 텍스트를 배치 할 때, 방문자가 텍스트를 읽을 수 있도록 contrast 를 충분히 유지해야 합니다. 이미지를 지정하고 해당 이미지 위에 텍스트를 배치하는 경우, 이미지가 로드되지 않은 경우 텍스트를 읽을 수 있는 background-color
도 지정해야 합니다.
화면 판독기는 배경 이미지를 구문 분석할 수 없으므로 순전히 장식이어야 합니다. 중요한 내용은 HTML 페이지의 일부여야 하며, 배경에 포함되지 않아야 합니다.
테두리
박스 모델에 대해 알아볼 때, 테두리가 박스 크기에 어떤 영향을 미치는지 알아 냈습니다. 이 수업에서는 테두리를 창의적으로 사용하는 방법을 살펴봅니다. 일반적으로 CSS 를 사용하여 요소에 테두리를 추가할 때는, CSS 의 한 라인에 테두리의 색상, 너비 및 스타일을 설정하는 속기 속성을 사용합니다.
border
를 사용하여 박스의 네 면 모두에 테두리를 설정할 수 있습니다.
.box {
border: 1px solid black;
}
또는 박스의 한쪽 가장자리를 대상으로 지정할 수 있습니다. 예를 들면:
.box {
border-top: 1px solid black;
}
이러한 속기의 개별 속성은 다음과 같습니다.
.box {
border-width: 1px;
border-style: solid;
border-color: black;
}
그리고 longhands 는 다음과 같습니다.
.box {
border-top-width: 1px;
border-top-style: solid;
border-top-color: black;
}
참고: 위쪽, 오른쪽, 아래쪽 및 왼쪽 테두리 속성에는 문서의 쓰기 모드 (예: 왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽으로 텍스트 또는 위에서 아래로) 와 관련된 논리적 속성이 매핑되어 있습니다. 다음 수업에서는 다양한 텍스트 방향 처리 에 대해 다룰것입니다.
테두리에 사용할 수 있는 다양한 스타일이 있습니다. 아래 예에서 우리는 박스의 네 면에 다른 테두리 스타일을 사용했습니다. 테두리 스타일, 너비 및 색상으로 실습하여 테두리의 작동 방식을 확인 하십시오.
둥근 테두리
박스의 둥근 테두리는 border-radius
속성 과 박스의 각 모서리와 관련되 관련 longhands 를 사용하여 수행됩니다. 두 개의 길이 또는 백분율을 값으로 사용할 수 있습니다. 첫 번째 값은 가로 반경을 정의하고 두 번째 값은 세로 반경을 정의합니다. 많은 경우에 하나의 값만 전달하면 둘 다에 사용됩니다.
예를 들어, 박스의 네 모서리를 모두 10px radius 로 만들려면 아래와 같습니다.
.box {
border-radius: 10px;
}
또는 오른쪽 상단 모서리의 가로 반경이 1em 이고, 세로 반경이 10% 가 되도록 하려면 아래와 같습니다.
.box {
border-top-right-radius: 1em 10%;
}
아래 예에서 네 모서리를 모두 설정한 다음, 오른쪽 위 모서리의 값을 변경하여 다르게 만들었습니다. 값을 사용하여 모서리를 변경할 수 있습니다. 사용 가능한 구문 옵션을 보려면 border-radius
의 속성 페이지를 살펴보십시오.
배경과 테두리로 실습하기
새로운 지식을 테스트하려면 아래 예제를 시작점으로 사용하여 배경과 테두리를 사용하여 다음을 작성하십시오.
- 박스에 둥근 모서리가 10px 인, 5px 검은색 단색 테두리를 지정하십시오.
- 배경 이미지를 추가하고 (URL
balloons.jpg
사용) 박스를 덮도록 크기를 조정하십시오. <h2>
에 반투명 검정색 배경색을 지정하고 텍스트를 흰색으로 만듭니다.
참고: 여기에서 해결책을 살펴 보기 할 수 있지만 — 먼저 스스로 알아보십시오!