본문 바로가기

분류 전체보기589

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 Image) CSS background-image 속성 background-image 속성은 요소의 배경으로 사용할 이미지를 지정한다. 기본적으로 이미지는 반복되므로 전체 요소를 포함한다. Hello World! 이 페이지는 이미지를 배경으로 합니다! 위의 코드를 실행하면 배경 이미지로 "paper.gif"그림이 채워진다. 결과 화면은 아래 그림과 같다. 배경 이미지는 요소와 같은 특정 요소에 대해서도 설정할 수 있다: Hello World! 이 단락은 이미지를 배경으로 합니다! p 요소에 배경이미지를 "paper.gif"이미지로 설정하였다. 아래 그림은 위의 코드를 실행한 결과 화면이다. 지금까지 background-image 속성을 활용하여 배경이미지를 설정하는 예제를 살펴보았다. 꼭 실습해보시기를 바랍니다. 모.. 2023. 7. 7.
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.

티스토리툴바