반응형 초보강의 HTML+CSS 기초 강의 - 31. CSS 속성 기초 3 - 요소의 크기와 영역 속성 0 2018. 12. 21. 요소의 너비와 높이 그리고 영역의 범위 패딩, 마진, 테두리 값을 주게 되면 HTML 요소가 차지하는 영역의 크기와 내부영역의 위치가 가변으로 변하게 됩니다. HTML 요소에 너비와 높이 값이 지정되어 있지만 이 값은 패딩, 마진, 테두리 값이 모두 0인 상태의 요소가 차지하는 영역의 크기를 말합니다. 아래처럼 태그에 마진, 패딩, 테두리 0 으로 크기를 정한 처음의 박스 영역에서 패딩, 테두리, 마진을 차례로 추가함에 따라 점점 차지하는 영역이 커지는 것을 알 수 있습니다. 예를 들어 너비 960px인 데스크톱 환경용 웹디자인을 한다고 가정하면 항상 패딩과 테두리선 너비를 미리 계산해서 HTML 요소의 너비값을 지정할 때 그만큼 차감을 해서 960px으로 맞춰줘야 합니다. * HTML 요소가 차지하는 .. HTML+CSS 기초 강의 - 32. CSS 속성 기초 4 - 배경 속성 0 2018. 12. 21. 배경 속성 요소의 배경에 색상이나 이미지를 배치해 요소를 꾸밀 수 있습니다.배경으로 이미지를 배치하면 말그대로 배경이기 때문에 HTML 요소 안의 컨텐츠들은 이 배경 이미지 위에 표시됩니다.배경 이미지로 반투명 png 이미지도 사용할 수 있기 때문에, 중첩된 요소들에 여러개의 배경 이미지를 잘 사용하면 다양한 이미지 중첩 효과를 만들 수도 있습니다. 배경 속성값 지정하는 방법은 2가지로 나누어집니다. 하나는 background 속성을 사용해 여러가지 배경 속성을 나열해 압축형으로 표현하는 방법.예를들면 background: red url("bg_img.png") no-repeat fixed center; 이런식으로 여러가지 속성값을 나열식으로 하나로 표현합니다. 다른 하나는 각각의 속성 종류별로 별도의 .. 반응형 이전 1 2 3 4 다음
닫기닫기