WEB2 - CSS

반응형 디자인

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

강의

 

 

소스코드

변경사항

 

 

 

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

강의

 

 

소스코드 

변경사항

 

댓글

댓글 본문
  1. 김현지
    2024.2.12
  2. 레나
    2024.02.02 완료
  3. ECLECTIC
    시작
  4. gony2623
    240116
  5. 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.
    • phoenix0428
      2022-08-05
    • robert
      2022.07.29 반응!
    • 코드만다
      22.07.26
    • 코딩러버
      어려웠지만 이해 완료
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기