CSS79 CSS image sprites CSS image sprites 이미지 스프라이트는 단일 이미지에 삽입된 이미지의 모음이다. 이미지가 많은 웹 페이지는 로드하는 데 시간이 오래 걸리고 여러 서버 요청을 생성할 수 있다. 이미지 스프라이트를 사용하면 서버 요청 수가 줄어들고 대역폭이 절약된다. CSS image sprite - 예제 세 개의 개별 이미지를 사용하는 대신 이 단일 이미지("img_navsprites.gif")를 사용한다: - src 속성을 비워 둘 수 없으므로 작은 투명 이미지만 정의한다. 표시된 이미지는 CSS에서 지정한 배경 이미지가 된다. 너비: 46px; 높이: 44px; - 사용할 이미지의 부분을 정의한다 background: url(img_navsprites.gif) 0; - 배경 이미지와 위치를 정의한다(왼쪽 .. 2023. 9. 5. CSS image gallery CSS를 사용하여 이미지 갤러리를 만들 수 있다. CSS Image Gallery 여기에 이미지 설명 추가 여기에 이미지 설명 추가 여기에 이미지 설명 추가 여기에 이미지 설명 추가 div요소에 gallery 클래스에 float left, width 180px를 설정하여 너비가 180px 이미지 영역을 스타일을 정의한다. div요소에 gallery 클래스에 hover상태이면 border 1px solid #777색으로 현재 커서 위치와 이미지 선택이 어디인지를 알려준다. div 요소에 gallery 클래스에 img 요소는 width 100%, height auto로 설정하여 width 180px에 자동으로 높이가 조절이 된다. 위의 코드를 실행한 결과는 아래 그림과 같다. Responsive Image .. 2023. 9. 4. CSS dropdown CSS를 사용하여 호버블 드롭다운을 만든다. basic dropdown 사용자가 요소 위에서 마우스를 이동할 때 나타나는 드롭다운 상자를 만든다. Hoverable 드롭다운 아래 텍스트 위로 마우스를 이동하여 드롭다운 내용을 엽니다. 이곳에 마우스를 올려보세요 Hello World! HTML) 드롭다운 내용(예: 또는 요소)을 열려면 임의의 요소를 사용한다. 컨테이너 요소(예: )를 사용하여 드롭다운 내용을 만들고 원하는 내용을 추가한다. CSS를 사용하여 드롭다운 콘텐츠를 올바르게 배치하려면 요소 주위에 요소를 둘러 놓는다. CSS) . dropdown 클래스는 드롭다운 내용을 드롭다운 버튼 바로 아래에 배치하고자 할 때 필요한 position:relative를 사용한다(position:absolute.. 2023. 9. 3. CSS 수평 네비게이션 바 CSS horizontal navigation bar 수평 탐색 표시줄을 만드는 방법에는 inline 또는 floating 목록 항목을 사용하는 두 가지가 있다. inline list items 수평 탐색 모음을 작성하는 한 가지 방법은 이전 페이지의 "표준" 코드 외에 요소를 인라인으로 지정하는 것이다: 홈 뉴스 연락처 About li 요소에 display값을 inline을 설정함으로 세로에서 가로로, 수평으로 아이템이 표시되며 위의 코드를 실행한 결과는 아래 그림과 같다. 예를 들어 설명: display: inline; - 기본적으로 요소는 블록 요소이다. 여기서는 각 목록 항목의 앞뒤 줄 바꿈을 제거하여 한 줄에 표시한다. floating iist items 수평 탐색 막대를 만드는 또 다른 방법은.. 2023. 9. 2. 이전 1 2 3 4 5 6 ··· 20 다음
