HTML/CSS문법79 CSS 수평 네비게이션 바 CSS horizontal navigation bar 수평 탐색 표시줄을 만드는 방법에는 inline 또는 floating 목록 항목을 사용하는 두 가지가 있다. inline list items 수평 탐색 모음을 작성하는 한 가지 방법은 이전 페이지의 "표준" 코드 외에 요소를 인라인으로 지정하는 것이다: 홈 뉴스 연락처 About li 요소에 display값을 inline을 설정함으로 세로에서 가로로, 수평으로 아이템이 표시되며 위의 코드를 실행한 결과는 아래 그림과 같다. 예를 들어 설명: display: inline; - 기본적으로 요소는 블록 요소이다. 여기서는 각 목록 항목의 앞뒤 줄 바꿈을 제거하여 한 줄에 표시한다. floating iist items 수평 탐색 막대를 만드는 또 다른 방법은.. 2023. 9. 2. 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. 이전 1 2 3 4 5 6 7 ··· 20 다음
