본문 바로가기

분류 전체보기 (69)

[CSS] background-size 속성 및 IE8 이하 브라우저 대응 background-size: auto; /* 기본값, 이미지 원본 크기 */ background-size: auto 500px; /* 가로를 auto, 세로를 원하는 크기로 지정하면 세로 크기에 따라 가로 크기는 자동으로 원본 비율에 맞게 변경됨 */ background-size: 500px auto; /* 가로 크기에 따라 세로 크기는 자동으로 원본 비율에 맞게 변경됨 */ background-size: 500px 300px; /* 가로, 세로 모두를 원하는 크기로 지정할 수 있음 */ background-size: cover; /* 이미지의 가로와 세로 중 크기가 더 큰 쪽에 맞추어 이미지 비율을 유지하며 배경 영역을 덮을 수 있음 */ background-size: contain; /* 이미지의 ..
[HTML] 클릭 시 지정한 크기로 새 창(팝업창) 띄우기 새 창 열기 menubar : 메뉴바 toolbar : 툴바 location : 주소 표시줄 directories : 연결 디렉토리 status : 상태 표시줄 scrollbars : 스크롤바 resizable : 새 창 크기 조절
[HTML/CSS] 스타일시트(CSS) 적용하는 방법 1. 외부 CSS "style.css" 라는 외부 스타일시트를 헤드 섹션 내에 요소로 추가합니다. 가장 많이 사용하는 방법입니다. 2. 내부 CSS 헤드 섹션 내에 3-2. CSS파일 내 @import url("style.css"); 4. 인라인 CSS 내용 해당 요소에 직접 스타일 속성을 추가하는 방법입니다. CSS가 이미 선언되어 있더라도 직접적으로 추가하는 이 방법이 우선적으로 적용됩니다. CSS 수정 시에 일일이 찾아야 하는 불편함이 있으므로, 수정 및 관리 측면에서 이 방법은 권장하지 않습니다.
[CSS] overflow:hidden과 clear:both 비교 overflow: hidden; overflow: hidden 은 내용이 지정 영역 밖으로 나가지 않게 하고, 영역 밖의 내용은 잘립니다. clear: both; 모든 방향의 float 속성을 해제합니다. clear: both 외에 clear: left , clear: right 는 각각 왼쪽, 오른쪽의 float 속성을 해제합니다.
[jQuery] 자동 롤링 이미지 이전/다음 버튼이 없는 단순한 자동 롤링 이미지입니다. 1. 태그 안에 제이쿼리를 불러옵니다. 2. CSS ul, li { list-style: none; } .rolling_box { position: relative; width: 800px; height: 400px; } .rolling_box li { position: absolute; top: 0; left: 0; } 3. HTML 4. Script