푸으름

✏️ 배경 이미지 관련 속성종류설명background-color배경색 지정background-clip배경색이나 이미지의 적용 범위 지정background-image배경 이미지 지정background-repeat배경 이미지의 반복 방법 지정backgroud-position배경 이미지의 위치 지정background-origin배경 이미지를 배치할 기준 지정backround-attachment배경 이미지를 문서에 고정background하나의 속성으로 배경 스타일을 한꺼번에 지정backround-size배경 이미지의 크기를 조절✏️ 선형 그라데이션 관련 속성종류설명방향끝 지점을 기준으로 to 다음에 방향을 나타내는 예약어를 최대 2개 사용 가능. 사용할 수 있는 예약어는 left right top bottom각..

✏️ 선형 그라데이션  : linear-gradient기본형 : linear-gradient(to 또는 , , [ㅡ ..])// 색상이 수평, 수직 또는 대각선 방향으로 일정하게 변하는 것을 말함값설명방향끝 지점을 기준으로 to 예약어와 함꼐 사용, to 다음에 방향어를 최대 2개 사용 가능 / 만약 색상이 왼쪽에서 오른쪽으로 변한다면 to right로 나타낼 수 있음각도선형 그라데이션에서 색상에 바뀌는 방향을 알려 주는 방법, deg를 사용하고 top 부분이 0deg이며 시계방향으로 증가 / 만약 왼쪽 아래에서 오른쪽 위 방향으로 방향을 지정하면 45deg로 설정할 수 있음색상 중지점2가지 색 이상의 선형 그라데이션을 만들기 위해서는 색상이 바뀌는 지점을 정해줘야 함, 이 바뀌는 색을 색상 중지점이라..

✏️ 웹 요소에 배경 이미지를 넣는 background-image 속성background-image : url(이미지 경로)// 이미지 파일은 .jpg, .png, .gif 형식을 사용하며 파일 경로에는 따옴표를 붙임// 파일 경로에는 상대 경로, 절대 경로 둘다 가능 ✏️ 배경 이미지의 반복 방법을 지정하는 backround-repeat 속성종류설명repeat브라우저 화면에 가득 찰 때까지 가로와 세로로 반복, 기본값repeat-x브라우저 화면 너비에 가득 찰 때가지 가로로 반복repeat-y브라우저 화면 높이에 가득 찰 때가지 가로로 반복no-repeat한 번만 표시하고 반복하지 않음✏️ 배경 이미지의 위치를 조절하는 background-position 속성방법설명크기   배경 이미지의 위치를 길이로..

✏️ 배경색을 지정하는 background-color 속성배경색을 지정하려면 배경을 넣고 싶은 요소의 스타일 규칙을 만들 때 background-color 속성을 이용rgb값을 이용하거나 16진수값 등을 이용할 수 있고 속성값은 상속되지 않음 기본적으로 모든 웹 요소의 배경은 투명하기 때문에 body 스타일로 지정한 문서 배경이 비치는 것일 뿐임background-color : #000000;background -color : rgb(0,128,0); background-color : green; ✏️ 배경색의 적용 범위를 조절하는 background-clip 속성배경색을 박스 모델의 가장 외곽인 테두리까지 적용할지, 테두리를 빼고 적용할지 등을 지정종류설명border-box박스 모델의 가장 외곽인 테두..