홈페이지 만들기37 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. CSS Vendor Prefix 벤더 프리픽스 : -webkit-, -moz- 이게 도대체 뭐지? CSS Vendor Prefix 벤더 프리픽스 : -webkit-, -moz- 이게 도대체 뭐지? CSS는 지금까지 무수한 발전을 해왔습니다. 그리고 지금도 계속 발전하고 있습니다. 현재는 CSS1을 거쳐 CSS3를 개발 중에 있습니다. 그런데 CSS3는 배경이나 글꼴, 박스 모델 등 수십 개 기능을 주제별로 규약을 따로 만들고 있습니다. 이 주제별 규약을 'CSS 모듈'이라고 부릅니다. 모듈들은 개발 속도가 다르기 때문에 일부는 완성되었고 아직 개발 중인 것도 있습니다. 따라서 HTML과는 다르게 CSS는 아직 '웹 표준'이 정해지지 않았습니다. CSS는 웹 표준이 정해지지 않았기 때문에 브라우저에 따라 다른 방식으로 지원됩니다. 그래서 우리는 CSS를 모든 브라우저에서 원활히 사용하기 위해, 스타일 .. 2020. 12. 9. Cascading 캐스케이딩의 뜻 - 1. 스타일 우선순위 Cascading 캐스케이딩의 뜻 - 1. 스타일 우선순위 CSS는 Cascading Style Sheet의 줄임말입니다. Style Sheet는 스타일을 지정해주는 종이(?) 또는 페이지 정도로 이해하면 됩니다. 그러면 Cascading이란 무엇일까요? Cascading이란 '위에서 아래로 흐르는', '상속 또는 종속하는'의 의미를 갖고 있습니다. 따라서 Cascading은 선택자에 적용된 많은 스타일 중에 어떤 스타일로 브라우저에 표현할지 결정해주는 원리를 의미하게 됩니다. 블라블라 위 설명이 분명 확 와닿지 않을 것입니다. 아래 예시를 통해 그 의미를 알아봅시다. 위와 같은 코드가 있다고 해봅시다. 그런데 만약 에서는 글자색을 빨간색으로 지정하고, 에서는 글자색을 파란색으로 지정하고, 에서는 글자색.. 2020. 12. 4. CSS 목록 스타일: list-style-type list-style-image list-style-position list-style CSS 목록 스타일: list-style-type list-style-image list-style-position list-style li 태그를 사용하면, 텍스트 리스트(목록)를 만들 수 있습니다. 이런 리스트에도 스타일을 지정해 줄 수 있는데요. 오늘은 list-style-type, list-style-image, list-style-position, list-style을 사용해 리스트 스타일을 지정해줘보겠습니다. list-style-type(순서가 없는 목록의 스타일을 변경할 때) - ul 태그를 사용하면 순서가 없는 목록을 만들 수 있습니다. - 순서가 없는 목록은 텍스트 좌측에 불릿(bullet)이라고 부르는 기호(?)가 들어갑니다. - 이 불릿의 모양을 list-style-type 속성을 사.. 2020. 12. 2. 이전 1 2 3 4 5 ··· 7 다음 반응형
