css background4 CSS background 배경 관련 스타일(background-position) background-position - background-position 속성을 사용하면 배경 이미지의 위치를 지정해줄 수 있습니다. - 기본형은 아래와 같습니다. - 선택자 {background-position : 수평위치 수직위치; } - 수평위치와 수직위치는 세 가지 방법으로 입력해줄 수 있습니다. - [키워드, 백분율, 길이]로 입력해줄 수 있습니다. - 첫 번째 방법은 키워드로 입력하는 방법입니다. - 키워드로 입력할 때 수평위치(↔)는 left, center, right 중 하나를 입력할 수 있습니다. - 키워드로 입력할 때 수직위치(↕)는 top, center, right 중 하나를 입력할 수 있습니다. - 만약 속성값을 하나만 입력하면, 입력 값을 자동으로 수평위치로 인식합니다. 수직위치.. 2020. 12. 19. CSS background 배경 관련 스타일(background-size) CSS background 배경 관련 스타일(background-size) 오늘은 배경 이미지의 크기를 조절하는 방법을 알아보겠습니다. background-size - background-size 속성을 사용하면 배경 이미지 크기를 조절해줄 수 있습니다. - 기본형은 아래와 같습니다. - 선택자 { background-size : 속성값; } - 속성값으로 auto, contain, cover, 크기값(px 등), 백분율(%)이 들어갈 수 있습니다. - 위 예시는 div 태그 안쪽에 배경 이미지를 설정하고 있습니다. - div 태그의 크기는 브라우저 화면의 크기로 하였습니다. - 배경 이미지는 반복을 하지 않도록 설정하였습니다. - 속성값 auto는 원래 배경 이미지 크기만큼 표시됩니다. - 따라서 위에.. 2020. 12. 17. CSS background 배경 관련 스타일(background-image, background-repeat) CSS background 배경 관련 스타일(background-image, background-repeat) background-image - background-image 속성을 사용하면 배경에 이미지를 넣어줄 수 있습니다. - 기본형은 아래와 같습니다. - 선택자 { background-image: url(파일 경로); } - 파일 경로는 상대 경로와 절대 경로로 지정해줄 수 있습니다. - 상대 경로란 index파일을 기준으로 지정하는 방법입니다. 자세한 내용은 아래를 참고해주세요. 2020/10/11 - [홈페이지 만들기/1단계. HTML] - HTML 이미지(img) 태그: 태그와 경로 설정(src / ..) - 절대 경로란 'http://'로 시작하는 경로를 말합니다. - 절대 경로를 지정하면.. 2020. 12. 13. CSS background 배경 관련 스타일(background-color, background-clip) CSS background 배경 관련 스타일(background-color, background-clip) 오늘은 배경색과 배경 범위를 지정해주는 스타일을 알아보겠습니다. background-color - background-color를 사용하면 배경 색을 지정해줄 수 있습니다. - 기본형은 아래와 같습니다. - 선택자 { background-color: 색상 이름; } - 위 예시에서는 두 영역에 각각 배경 색을 다르게 지정해주었습니다. - 문서 전체의 배경이 되는 body는 배경색을 gray로, div태그에는 배경색을 pink로 지정해주었습니다. - 물론 색상 이름은 pink와 같은 색상 이름뿐만아니라, 16진수, rgb(a) 등을 입력해도 됩니다. - 색상 이름, 16진수, rgb(a)가 뭔지 잘 .. 2020. 12. 10. 이전 1 다음 반응형
