CSS 가상 클래스 상태 선택자 (:enabled, :disabled 등) 웹 페이지에서 입력 양식폼을 만들 때 입력 양식의 상태에 따라 각각 스타일을 적용할 수 있습니다. 그럴 경우에 의사 클래스(가상 클래스) 선택자를 사용하시면 됩니다. 그럼 가상 클래스 중에서 요소의 상태에 따른 선택자에 대해서 알아보죠. ※ 사용자 동작에 반응하는 선택자는 이전 게시글을 참고하세요. CSS 가상 클래스 상태 선택자 1.
CSS 가상 클래스 반응 선택자 (:hover, :active 등) 웹 페이지에서 사용자가 요소를 마우스 포인터로 올리거나 또는 클릭을 하게 되면 특정 동작이 발생하는데 해당 시점에 원하는 스타일을 변경할 수 있습니다. 그럴 경우에 의사 클래스(가상 클래스) 선택자를 사용하시면 됩니다. 그럼 가상 클래스 중에서 사용자 동작에 반응하는 선택자에 대해서 알아보죠. CSS 가상 클래스 반응 선택자 1. 가상 클래스
CSS 속성(Attribute) 선택자 정리, 7가지 종류 웹 페이지를 만들다 보면 태그 안에 class, id, href 등 많은 속성을 추가하게 됩니다. 속성 선택자는 태그 안에서 사용된 속성 값을 이용하여 스타일을 지정할 수 있습니다. 그럼 속성 선택자 종류에 대해서 알아보죠. CSS 속성(Attribute) 선택자 1. 속성 선택자 종류 (7가지) 종류 설명 예시 [속성] 해당되는 속성 이름을 가진 요소
CSS 결합(Combinators) 선택자 – 자손, 자식, 형제 결합자 결합 선택자는 둘 이상의 선택자를 결합해서 스타일을 적용할 수 있습니다. 스타일을 적용하기 위해서 태그에 class 또는 id를 부여하는데 스타일을 적용할 때마다 매번 부여하는 것은 비효율적입니다. 이름을 지정하는 것도 힘들고 모두 기억하는 것도 힘듭니다. 그럴 경우에 결합 선택자를 사용하시면 됩니다. 그럼 결합 선택자의 종류 및 사용하는 방법에 대해서
CSS 배경 이미지 넣는 방법, background-image 속성 등 웹 페이지 전체에 배경 이미지를 지정할 수 있지만 태그 요소에서도 배경 이미지를 지정할 수 있습니다. 그리고 배경 이미지와 관련된 속성은 많이 있습니다. 그럼 예제를 통해서 배경 이미지와 관련된 속성들에 대해서 알아보죠. ▼ 배경 이미지 관련 주요 속성 속성 설명 background-image 배경 이미지 파일 위치를 지정합니다. background-repeat 배경
CSS 배경색(background-color) 및 범위 지정 방법 웹 페이지 전체에 백그라운드 색을 지정할 수 있지만 텍스트, 목록, 버튼 등 태그 요소에도 백그라운드 색을 지정할 수 있습니다. 그리고 백그라운드 색을 지정할 때 적용 범위도 조절할 수도 있습니다. 그럼 예제를 통해서 백그라운드 색 지정 및 범위를 조절하는 방법에 대해서 알아보죠. ▼ 백그라운드 색 지정 속성 속성 설명 background-color
CSS 표(table) 스타일 정리 및 예제, border 속성 등 HTML에서 표(table)를 만들 때 CSS을 이용하면 표 테두리, 셀 테두리, 표 색상, 셀 색상, 셀 사이의 여백 등 원하는 스타일을 지정할 수 있습니다. 그럼 예제를 통해서 표(table)와 관련된 스타일에 대해서 알아보죠. ▼ 표 스타일 중에서 대표적인 속성 ▼ 속성 설명 border 표와 셀에 테두리를 지정합니다. border-spacing
CSS 목록 리스트 스타일 정리 및 예제, list-style 속성 웹 사이트를 제작할 때 리스트(목록)는 자주 사용됩니다. 특히 사이트 메뉴를 리스트와 링크로 조합해서 많이 만듭니다. 리스트는 순서 없는 리스트와 순서 있는 리스트로 구분할 수 있습니다. 그럼 예제로 리스트를 만드는 스타일에 대해서 알아보죠. ▼ 리스트 스타일 속성 ▼ 속성 설명 list-style-type 불릿 모양과 번호 스타일을 지정합니다. list-style-image
CSS a태그 링크 밑줄 없애기, 밑줄 스타일, 색상 변경 웹의 가장 큰 특징은 웹 페이지 링크를 통해 인터넷에서 원하는 정보를 찾는 겁니다. HTML 앵커(a) 태그를 사용하여 다른 웹 사이트 또는 특정 웹 페이지로 이동할 수 있습니다. 앵커(a) 태그를 추가하게 되면 구분할 수 있게 파란색 글자에 밑줄이 생깁니다. 하지만 일반적으로는 웹 페이지에서 밑줄을 제거합니다. 그럼 예제로
CSS 텍스트 정렬(text-align), 줄 간격 조절(line-height) 웹 페이지를 읽을 때 좀 더 가독성 있게 하기 위해서 워드 문서와 같이 텍스트를 정렬할 수 있고 줄 간격도 조절할 수 있습니다. 텍스트를 정렬할 때에는 text-align 속성을 사용하고 줄 간격을 조절할 때에는 line-height 속성을 사용하면 됩니다. 그리고 텍스트를 세로로 가운데 정렬하려면 line-height 속성을 사용하시면 됩니다. 그럼 예제를 통해서 텍스트