컴퓨터/웹 : CSS3 [CSS] CSS의 선택자 한번에 정리해버리기/CSS 태그 선택 CSS 선택자 CSS은 다양한 선택자 기능을 제공한다. 크게는 태그명을 이용한 선택, class명을 이용한 선택, id명을 이용한 선택 등이 있지만, 편의를 위한 선택 기능들을 제공한다. 오늘 CSS에서 많이 사용되는 선택자들을 모두 정리해버린다. 기본 선택자 태그 선택 태그명{ /CSS 코드 내용/} HTML의 태그명으로 CSS을 적용한다. 해당 태그명을 가진모든 요소를 선택한다. 클래스 선택자 .class명{ /*CSS 코드 내용*/} class이름을 class의 값으로 가지는 모든 태그를 선택한다. 아이디 선택자 #id명{ /CSS 코드 내용/} id이름을 id값으로 가지는 모든 태그를 선택한다. *한 페이지 내에서 id값은 고유하여야한다. 기본 속성 선택자 [속성]{ /CSS 코드 내용/} [속성.. 2023. 5. 10. [CSS] 한 HTML 태그에 여러 클래스, 아이디 동시 추가 여러 클래스, 아이디 동시 추가 HTML에 CSS를 적용하는 과정에서 잠깐 고민하게 만드는 문제가 생겼다. 바로 한 요소에 어떻게 여러 클래스, 아이디를 적용하냐하는 것이다. 이 고민을 하게 된 것은 부트스트랩을 클래스로 적용하는데, 거기에 내가 만든 클래스명을 붙여 해당 요소를 쉽게 컨트롤 하고 싶기 때문이었다. HTML에서 한 요소에 두 개 이상의 클래스를 적용하는 방법은 이렇다. class = "클래스명1 클래스명2" 즉, 각 클래스명은 띄어쓰기로 구분하여 적으면 두 가지 클래스가 적용된다. 실제 코드를 보면 아래와 같다. 소주 맥주 콜라 위 코드에서는 btn와 btn-primary와 btn1이라는 세 가지 클래스가 적용 된 것을 확인 할 수 있다. 2022. 1. 13. [CSS] CSS스타일 여러 클래스 및 ID에 동시 적용하기 CSS를 여러 클래스에 동시 적용 CSS를 작성할 때 여러 요소에 동시에 같은 CSS를 적용하고 싶을 때가 있다. 이럴 때 여러 선택자(클래스, 아이디)를 쉽게 동시에 선택하는 방법은 아래와 같다. .btn1, .btn2, .btn3, .btn4{ font-size: 3em; margin:0.5em; padding-left: 0.5em; padding-right: 0.5em; } 즉, 원하는 선택자를 ,(컴마)로 연결해주고 원하는 CSS를 입력해준다. 이러한 방법으로 btn1, btn2, btn3, btn4라는 클래스들에 동시에 각 속성이 적용된다. 2022. 1. 13. 이전 1 다음
