본문 바로가기

HTML/CSS문법79

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.
CSS HSL 색상 HSL은 색상, 채도 및 밝기를 나타낸다. HSL 값 CSS에서 색상은 색상, 채도 및 밝기(HSL)를 사용하여 다음과 같은 형태로 지정할 수 있다: hsl(hue, saturation, lightness) 색상은 0에서 360까지의 색상 휠의 도입니다. 0은 빨간색, 120은 녹색, 240은 파란색이다. 포화도는 백분율 값입니다. 0%는 회색의 색조를 의미하며, 100%는 전체 색상이다. 가벼움도 백분율이다. 0%는 검은색, 50%는 밝지도 어둡지도 않고, 100%는 흰색이다 HSL 값을 사용하여 색상 지정 hsl(0, 100%, 50%) hsl(240, 100%, 50%) hsl(147, 50%, 47%) hsl(300, 76%, 72%) hsl(39, 100%, 50%) hsl(248, 53%, 5.. 2023. 7. 5.
CSS HEX Colors 16진수 색상은 #RRGGBB로 지정된다. 여기서 RR(빨간색), GG(녹색) 및 BB(파란색) 16진수 정수는 색상의 성분을 지정한다. 16진수 색상값 CSS에서 색은 16진수 값을 사용하여 다음과 같은 형식으로 지정할 수 있다: #tgbb 여기서 rr(빨간색), gg(녹색) 및 bb(파란색)는 00과 ff 사이의 16진수 값이다(10진수 0-255와 동일). 예를 들어, #ff0000은 빨간색으로 표시된다. 빨간색은 가장 높은 값(ff)으로 설정되고 다른 값은 가장 낮은 값(00)으로 설정되기 때문이다. 검은색으로 표시하려면 모든 값을 00으로 설정합니다. #000000과 같이 설정한다. 흰색을 표시하려면 #fffffff와 같이 모든 값을 off로 설정한다. HEX 값을 사용하여 색상 지정 #ff00.. 2023. 7. 4.

티스토리툴바