부트스트랩 CSS문법 질문드립니다.
본문
부트스트랩 질문이 아니라 CSS질문인거같은데
부트스트랩에 점보트론이란 컴포넌트가 있죠.
그걸 한페이지에 여러개 쓰면서 각각의 css속성을 적용하려면
<div class="jumbotron aaa"> aaa </div>
<div class="jumbotron bbb"> bbb </div>
이렇게 하면 된다고 전에 질문드린거에 고수님이 답변을 주셨는데
div class="jumbotron aaa"에서 jumbotron aaa가 무슨뜻인지 알고싶습니다.
점보트론이란 원본 클래스의 객체클래스 aaa를 만든다는건가요?
일종의 프로그래밍 객체개념이라고 보면 되는건가요?
그러면 모든 클래스를 선언할때 저렇게 원본클래스 한칸 띄워서 객체클래스명
이렇게 쓰면 되는건가요?
답변 2
CSS에서는 class 명을 여러개 달아둘수 있습니다.
또한, CSS에서 말하는 class는 프로그래밍적 접근이라기보다는,
id는 유일한, class는 복수(다수)의 뜻으로 접근하시면 됩니다.
즉, 공통의 디자인을 적용할때 jumbotron과 같이 클래스로 만들어두면, 중복되어도 상관없는 것이죠.
하지만 그런 공통의 클래스로 작성된 디자인을 좀 더 세분하고 원하는 형태로 만들때는 id 값이나 class를 좀 더 추가하는 방식을 사용하는 것이죠.
클래스를 여러개 달때 띄워서 쓰시면 다수의 클래스명 선언이 되는 겁니다.
이를 응용하면,
.jumbotron.aaa {} 와 같이 선택자를 선택할 수도 있습니다.
<div class="jumbotron aaa"> aaa </div>
<div class="jumbotron bbb"> bbb </div>
이렇게 했을때 jumbotron aaa에 별로의 CSS스타일을, bbb에도 별도의 CSS스타일을 적용할 수 있는건가요?
네 선언순서가 .jumbotron 보다 .aaa 가 뒷쪽에 정의되어 있다면 .aaa {} 와 같이 선언만 해도 되고요.
순서가 뒤죽박죽이거나 추후에도 문제가 없게 하려면 .jumbotron.aaa {} 와 같이 선언하시면 됩니다.
한마디로
두개의 각각의 div에 점보트론이라는 css를 함께 적용하면서,
aaa, bbb로 나눠서 다른 내용의 css도 추가할 수 있다는 뜻이죠.
