푸으름

✏️ 선형 그라데이션  : 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박스 모델의 가장 외곽인 테두..

✏️ 박스 모델 속성종류설명width       박스 모델의 너비를 지정height박스 모델의 높이를 지정box-sizing 박스 모델의 크기를 계산하는 기준을 지정box-shadow박스 모델에 그림자 효과를 추가✏️ 테두리 속성속성설명border-style상하좌우 4개 방향의 테두리 스타일을 한꺼번에 지정border-위치-style상하좌우 중 특정한 위치의 테두리 스타일만 지정border-width상하좌우 4개 방향의 테두리 두께 한꺼번에 지정border-위치-width상하좌우 중 특정한 위치의 테두리 두께만 지정border-color상하좌우 4개 방향의 테두리 색상을 한꺼번에 지정border-위치-color상하좌우 중 특정한 위치의 테두리 색상만 지정border-radius상하좌우 4개 방향 꼭짓점을..