CSS79 CSS navigation bar CSS navigation var 사용하기 쉬운 탐색 기능은 웹 사이트에 매우 중요하다. CSS를 사용하면 지루한 HTML 메뉴를 보기 좋은 네비게이션 바로 변환할 수 있다. Navigation bar = list of links 탐색 모음에는 표준 HTML이 기본으로 필요하다. 이 예제에서는 표준 HTML 목록에서 탐색 모음을 작성한다. 탐색 모음은 기본적으로 링크의 목록이므로 및 요소를 사용하면 다음과 같은 이점이 있다: 홈 뉴스 연락처 About 참고: 우리는 테스트 링크에 href="#"을 사용합니다. 실제 웹 사이트에서 이것은 URL일 것입니다. 위의 코드를 실행하면 아래 그림과 같이 리스트에 링크를 설정한 메뉴가 표시되며 아래 그림과 같다. 이제 글머리 기호와 여백 및 패딩을 목록에서 제거한다.. 2023. 9. 1. CSS opacity/transparency opacity 속성은 요소의 불투명도/투명도를 지정한다. 투명 이미지(transparent image) opacity 속성은 0.0 - 1.0 사이의 값을 사용할 수 있다. 값이 낮을수록 투명도가 높다: Image 투명도 opacity 특성은 요소의 투명도를 지정합니다. 값이 낮을수록 투명도가 높습니다: Image with 50% opacity: img 요소에 opacity속성에 0.5값을 설정하도록 설정하였고, 실행결과 화면은 아래 그림과 같다. Transparent hover Effect opacity 속성은 종종 :hover 선택기와 함께 마우스 오버 시 불투명도를 변경하는 데 사용된다: Image 투명도 불투명도 속성은 종종 :hover 선택기와 함께 사용되어 마우스 오버 시 불투명도를 변경합니다.. 2023. 8. 31. CSS pseudo-elements CSS pseudo-elements란 무엇인가? CSS 의사 요소는 요소의 지정된 부분을 스타일링하는 데 사용된다. 예를 들어, 다음과 같은 용도로 사용할 수 있다: 요소의 첫 번째 문자 또는 줄 스타일 지정 요소의 내용 앞 또는 뒤에 내용 삽입 구문 selector::pseudo-element { property: value; } ::first-line pseudo-elemtn ::first-line pseudo class는 텍스트의 첫 번째 줄에 특수 스타일을 추가하는 데 사용된다. 다음 예제는 모든 요소에 텍스트의 첫 줄을 포맷한다: :: 첫 줄 의사 요소를 사용하여 텍스트의 첫 줄에 특수 효과를 추가할 수 있습니다. 텍스트가 더 많이, 더 많이, 더 많이, 더 많이, 더 많이, 더 많이, 더 많이.. 2023. 8. 30. CSS pseudo-classes pseudo-class가 무엇인가? pseudo class는 선택하고자 하는 HTML 요소의 특별한 상태(state)를 정의하는 데 사용된다. 예를 들어, 다음과 같은 용도로 사용할 수 있다: 사용자가 요소 위에 마우스를 올릴 때 요소 스타일 지정 방문한 링크와 방문하지 않은 링크 스타일이 다릅니다 요소가 포커스를 맞출 때 스타일 지정 구문 selector:pseudo-class { property: value; } 클래스나 아이디에도 pseudo class를 사용할 수 있다. selector.class-name:psudo-class { property: value; } or selector.id-name:psudo-class { property: value; } Pseudo Class 대표적인 CSS .. 2023. 8. 29. 이전 1 2 3 4 5 6 7 ··· 20 다음
