HTML/CSS문법79 CSS Attribute Selector(속성 선택자) 특정 속성에 HTML 요소들 스타일하기 특정 속성 또는 속성 값을 가진 HTML 요소의 스타일을 지정할 수 있다. CSS [attribute] Selector [속성] 선택자는 지정된 속성을 가진 요소를 선택하는 데 사용된다. 다음 예제에서는 대상 특성을 가진 모든 요소를 선택합니다: CSS [속성] 선택자 대상 속성을 가진 링크가 노란색 배경을 가져옵니다: 네이버l 디즈니 위키피디아 a요소의 target 속성에 배경색을 노랑색으로 지정하는 스타일을 정의하였고, '디즈니'와 '위키피디아'에 적용하여 아래 그림과 같이 표시되었다. CSS [attribute=value] selector [attribute="value"] 선택자는 지정된 속성과 값을 가진 요소를 선택하는 데 사용된다. 다음 예제에서는 tar.. 2023. 9. 6. 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. 이전 1 2 3 4 5 6 ··· 20 다음
