WEB2 - CSS

반응형 디자인

반응형 디자인과 미디어 쿼리 소개

강의

 

 

소스코드

변경사항

 

 

 

미디어 쿼리를 이용해서 반응형 디자인 구현하기

강의

 

 

소스코드 

변경사항

 

댓글

댓글 본문
  1. nathan
    2024-05-23 완료
  2. 이사야
    2024-05-06 완료!
  3. 야생의코린이
    2024-05-05 완료
  4. beginner
    20240308
  5. 김현지
    2024.2.12
  6. 레나
    2024.02.02 완료
  7. ECLECTIC
    시작
  8. gony2623
    240116
  9. Sansol Park
    CSS에서 일반 선택자(예: ol)와 ID 선택자(예: #grid ol)가 동일한 요소를 대상으로 하는 경우, 더 구체적인 선택자가 우선권을 갖습니다. 여러분의 경우, #grid ol이 ol보다 구체적이므로 #grid ol에 정의된 스타일이 일반적인 ol 선택자에 정의된 스타일보다 우선적으로 적용됩니다.

    제공된 코드에서 미디어 쿼리 내부의 #grid ol 선택자는 화면 너비가 800픽셀 이하일 때 #grid div 내부의 <ol> 요소에 적용됩니다. 이는 #grid ol 선택자가 일반적인 ol 선택자보다 구체적이기 때문입니다.

    따라서 답변을 하자면: 네, 이 경우에는 ID 선택자(#grid ol)를 사용하여 더 높은 구체성을 부여하므로 미디어 쿼리 내에서 #grid ol에 대한 정의된 스타일이 일반적인 ol 선택자에 대한 스타일보다 우선적으로 적용됩니다.

    ChatGPT 3.5 의 답변입니다.
    대화보기
    • css에 #grid ol 선택자 ol선택자가 둘다 있으면 ol선택자에 있는 속성도 미디어 쿼리에 #grid ol 선택자를 써야 적용되네요 같은 태그니까 우선권이 있는 id 선택자를 쓰면 되는 걸까요?
    • strangecoderK
      Css에 #grid ol 이라고 쓴 경우 @media 안에도 #grid ol 이라고 써야 되는것 같네요 그냥 ol이라고만 쓰면 안되나봐요
    • 므갱이
      2023.11.12 완료
    • KunWoo
      231031
    • 정연세
      231001완
    • 오옹오옹
      23.08.13
    • 코딩두
      23.07.08 완료
    • 어흥
      23.06.18.
    • 코코
      23.05.26
    • 23.05.16
    • nightsunny
      23.05.05 check.
    • ashkite12
      23.03.08
    • 코딩척척석사
      2023.03.08
    • webby
      23.03.01
    • otcace
      23.02.23
    • 열공강아지
      2/7
    • TheDuck
      2023. 02. 01 완료
    • BBIYA
      2023.01.19
    • 2022.12.21
    • 하얀세상
      저는 왜 안될까요.. 코드를 진짜 똑같이 썼는데, 줄어든다고 사라지진 않습니다. 800보다 줄어들어도 글자가 사라지지 않아요. 크롬을 쓰고 있는데, 혹시 어떤게 문제일까요..?
    • 엠제이
      10182022
    • 보통사람 박코딩
      할수있다
    • 아아뜨아
      221010
    • 서우
      221006
    • solfany
      2022.09.29
    • 코딩왕초보
      2022.09.27
    • 코딩드림
      22.09.24
    • 당당
      2022.09.09
    • 순길
      220907 오늘은 여기까지
    • PanLu
      수강완료
    • 코딩다람쥐
      2022.09.04 수강완료
    • 모카
      2022.08.30
    • 8/27
    • 히야
      2022년 8월 19일 수강 완료했습니다. 감사드립니다!
    • MelonMusk
      08/21
    • MelonMusk
      08/20
    • 뿔고래
      미디어 쿼리를 조건문처럼 사용해서 웹 페이지의 너비에 따라 인터페이스를 바뀌게 하자. 이것을 사용하면 세로 친화적인 디자인과 가로 친화적인 디자인을 함께 사용할 수 있다.
    • 참새튀김
      22.08.17
    • gn0es
      22.08.11
    • 헤밍웨이
      220810 완료
    • 여름이
      22.8.8.
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기