질문/공유질답게시판

한번에 클래스 두개 지정하는거 왜 안될까요?

기븐

1.PNG

2.PNG

 

 

 

위와 같은 부분이 있는데요 (위는 layout.html, 아래는 layout.css 중 일부입니다)

 

(참고로 지금 이게 현재 적용중인 코드입니다. 당연히 아무 문제 없이 잘 나옵니다.)

 

보시면 거의 같은게 두개 중복돼서 이걸 한꺼번에 처리하려고

 

img class="warning left", img class="warning right" 와 같이 입력하고

 

#ft .warning{height:90px;position:absolute;bottom:10px}

#ft .warning .right{right:10px}

#ft .warning .left{left:10px}

 

이렇게 입력했는데, 맨 위의 #ft .warning{height:90px;position:absolute;bottom:10px} 만 적용되고 아래 두개는 안되더군요

 

입력값이 문제인가 해서 여러모로 바꿔봤는데 여전히 개발자도구로 확인해봐도 #ft .warning 까지만 나오고 밑의 left나 right는 안되더군요

 

하다하다 도저히 안돼서 img id="warning" class="left" 와 같이 입력하고

 

#warning{height:90px;position:absolute;bottom:10px}

#warning .right{right:10px}

#warning .left{left:10px}

 

뭐 이런 식으로 해도 여전히 left나 right 클래스는 적용이 안 되더군요

 

img 태그에 속성을 직접 준게 문제인가 해서 div로 감싸 봐도 안되고...

 

뭐가 문제인가요?

위로 아래로
댓글 14
  • ?
    <img class="warning-left warning-right" src="blabla.com/img.png">
    클래스 사이에 띄어쓰기 한칸 넣고해보세요
  • ? ?

    "img class="warning left", img class="warning right" 와 같이 입력하고"

    띄어쓰기 한칸 넣었는데 안됐습니다.

     

    (하나의 그림에 warning-left랑 warning-right를 모두 적용하는게 아니라요, 공통 요소를 warning로 정의하고 위치만 각각 right:10px인건 right, left:10px은 left 라는 클래스로 정의하고 싶은데 안 돼서 결국 전부 따로따로 클래스를 지정한게 warning-left warning-right 입니다.

     

    지금 저 위의 스샷 코드는 출력 자체에는 아무 이상이 없습니다. 코드가 낭비인거 같아서 문제지..)

  • ?
    #ft .right{right:10px}
    #ft .left{left:10px}

    css에 이렇게 정의해보고 해보셨나염? 안되면 저두 모르겠네영 ㅠㅠ
  • ? ?

    #ft 라는 속성은 위에 보시다시피 따로 되어 있어서요.. (저건 아예 레이아웃의 푸터 전체에 해당하는 요소)

    저 warning.png 랑 fanmeeting2.png 라는 그림에만 해당하는 공통요소
    (height:90px;position:absolute;bottom:10px) 만 따로 뽑아내고, 그 중에 왼쪽에 있는건 left로, 오른쪽에 있는건 right로 정의하고 싶은건데

    그래서 #warning{height:90px;position:absolute;bottom:10px} 로 일단 정의하고, #warning .left{left:10px} 와 같이 해봐도 여전히 #warning 까지만 적용되고 left나 right 클래스는 적용이 안 되더군요.

    (개발자도구로 확인해봐도 해당 css요소 자체가 아예 존재하지 않는 걸로 나옵니다)

  • profile
    .warning {~~~}
    .right.warning {~~~} // 또는 그냥 .right {~~~}
    .left.warning {~~~} // 또는 그냥 .left {~~~}
    같은 식으로 해보세요.

    css에서 .warning .right 같이 하시면 warning이란 클래스 이름을 가진 요소 '하위'의 right에만 적용될 거예요.
  • profile ?
    아 그렇군요

    .right.warning 이랑 .right 는 어떻게 다른가요?

    그리고 html에 적용할 때는 img class="warning right" 이런 식으로 하나요 아님 이 요소들을 div class="warning" 로 묶은 다음 그 아래에 img class="right" 이런 식으로 하나요?
  • ?
    img class="warning right" 와 같이 하니까 .right.warning이나 .right 두 방법 모두 잘 되네요
  • ? profile
    img class="warning right"로 하셔야죵.
    <div class="warning"><img class="right">로 하시면 right가 warning의 하위요소로 잡히기 때문에 또 꼬이게 돼요.

    .right.warning 또는 .warning.right라고 하시면 right와 warning이 함께 쓰이는 경우에만 스타일 적용되구요.
    .right만 단독으로 쓰면 페이지 전체에 걸쳐 right란 클래스 속성값이 있는 모든 요소들에 적용이 될 거예요.
  • profile ?

    그렇다면 혹시 모르므로 .right.warning 이라고 하는게 더 낫겠네요.

     

    아 이거 가만보니 처음에 #ft .warning .right 가 안 됐던게 띄어쓰기를 해서 그런건가 보네요. 띄어쓰기 안하고 붙일 경우 #ft .warning.right 라고 해도 잘 되는거 같네요

     

    띄어쓰기를 하면 뒤에 있는게 하위요소일 경우에만 되나보네요

  • ? profile
    네, 바로 그렇습니다 ^^/
  • ?
    #ft .warning{height:90px;position:absolute;bottom:10px}
    #ft .warning .right{right:10px}
    #ft .warning .left{left:10px}

    이렇게 정의하면 right와 left는 warning이라는 클래스 하위에 속하게 되버리기때문에 적용이 안되요
    근데 원하시는거는 warning이라는 속성이랑 동등하게 적용이 되야하니까
    따로
    #ft .right{right:10px}
    #ft .left{left:10px}
    이렇게 정의해서 해보시란 말씀이었습니다 윤삼님이 잘 설명 해주셨네요
  • ? ?
    아 이제 무슨 말씀인지 알겠네요
  • ?
    네 .warning과 .left를 붙여야 해요
    .warning.left 이렇게
  • ?
    답변주신 분들 감사합니다. 몰랐던거 하나 알게 되었네요