css background4 CSS background - shorthand 속성 CSS background-shorthand 속성 코드를 단축하기 위해 단일 속성에 모든 배경 속성을 지정할 수도 있다. 이것을 shorthand 속성이라고 한다. 아래와 같이 작성하는 것 대신에: body { background-color: #ffffff; background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; } background 속성을 활용하여 아래와 같이 간략히 작성할 수 있다. body { background: #ffffff url("img_tree.png") no-repeat right top; } shorthand 속성을 사용할 때 속성 값의 순서는 다음과 같다: b.. 2023. 7. 10. CSS background-attacthment CSS background-attacthment 속성 Background-Attachment 속성은 배경 이미지를 스크롤할지 또는 고정할지(페이지의 나머지 부분에서는 스크롤하지 않음)를 지정한다: 배경 첨부 속성 Background-Attachment 속성은 배경 이미지를 스크롤할지 고정할지 여부를 지정합니다(페이지의 나머지 부분에서는 스크롤하지 않음). Tip: 스크롤 막대가 보이지 않으면 브라우저 창의 크기를 조정해 보십시오. 배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도. 배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도. 배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도. 배경 이미지가 고정되어 있습니다. 페이지 아래로 스크롤 시도. 배경 이미지가 고정되어 있습.. 2023. 7. 9. CSS 배경이미지 반복(CSS background image repeat) CSS background-repeat 속성 기본적으로 배경 이미지 속성은 이미지를 수평 및 수직으로 반복한다. 일부 이미지는 수평 또는 수직으로만 반복해야 한다. 그렇지 않으면 다음과 같이 이상하게 보일 수 있다: Hello World! 이상한 배경 이미지... 위의 코드를 실행한 결과 화면이 아래 그림이다. 위의 이미지가 수평으로만 반복되는 경우(background-repeat: repeat-x;) 배경이 더 잘 나타난다: Hello World! 여기서 배경 이미지는 수평으로만 반복됩니다! 위의 코드를 실행한 결과 화면은 아래 그림과 같다. 반복되는 그림이미지가 하나로 단순화한다. CSS background-repeat:no-repeat 배경 이미지를 한 번만 표시하는 것도 background-rep.. 2023. 7. 8. CSS 배경(CSS Background) CSS 배경 속성은 요소의 배경 효과를 추가하는 데 사용된다. 이번 글에서는 CSS 배경 속성에 대해 아래와 같이 살펴볼 것이다. background-color background-image background-repeat background-attachment background-position background (shorthand property) CSS background-color 속성 : 배경색(Background Color) Hello World! 이 페이지의 배경색은 lightblue 색입니다! 위의 코드를 실행한 결과 화면은 아래 그림과 같다. CSS의 경우 색상은 다음과 같이 지정된다: "빨간색"과 같은 유효한 색상 이름 "#ff0000"과 같은 HEX 값 "rgb(255,0,0)"와 .. 2023. 7. 6. 이전 1 다음
