본문 바로가기
반응형

CSS

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; 이런식으로 여러가지 속성값을 나열식으로 하나로 표현합니다. 다른 하나는 각각의 속성 종류별로 별도의 ..
HTML+CSS 기초 강의 - 33. HTML5 에서 추가된 폼 요소 3 2018. 12. 21. 아직 많이 사용되고 있지는 않지만, 폼의 편의성 개선을 위해 2개의 폼 태그가 추가되었습니다. 실상은 있는지도 모르는... 그런 폼 태그입니다만, 는 편리한 기능이기 때문에 꼭 알아두길 추천합니다. 입력 필드와 드롭다운목록을 하나로 합친 요소입니다. 기본 상태는 입력필드이고 입력도 가능하지만, 필드가 포커스되면 드롭다운목록이 활성화되어 목록에서 항목을 선택할 수 있게 되는 조금은 신박한 입력필드입니다. 사용자가 드롭다운목록에서 아이템을 선택하면 입력 필드에 해당 목록 아이템 값이 자동으로 입력됩니다. 입력필드에 입력된 내용은 수정할 수 있으며 목록에 원하는 값이 없으면 새로운 내용을 입력할 수도 있습니다. 사용자에게 선택 가능한 값들을 예를 들어 목록으로 보여주고 선택하면 자동으로 입력까지 해주는 편리한..
Javascript 없이 CSS 만으로 동작하는 이미지 슬라이더 0 2018. 9. 30. 자바스크립트 없이 CSS 만으로 동작하는 이미지 슬라이더 입니다. 이미지 갯수에 따라 조정해야하는 내용이 많아서 보통은 자바스크립트로 이미지 슬라이더를 이용하지만, 자바스크립트 없이 가볍게 돌려야 하거나, 자바스크립트에 익숙하지 않을 때 사용하면 유용합니다. 기본적인 CSS 문법 정도는 아는 분이면 커스터마이징을 할 수 있겠지만 아니면 아래 이미지 크기 변경 방법만 따라해서 이미지 크기 정도 조정해서 제공된 파일들을 그대로 복사해서 사용하면 됩니다. 이미지 4개 CSS슬라이더 미리보기 기본 사용법 압축파일을 다운로드 받아 풀면 CSS 파일들과 cssslider3.html cssslider4.html cssslider5.html 이렇게 3개의 html 파일이 있습니다. 뒤에 붙은 숫자는 이미지 갯수에 따라..
반응형
닫기

티스토리툴바