이번 게시글부터는 다른 폰트를 이용해서 써보겠습니다 ㅎ.ㅎ(뭔가 더 깔끔해보이는 것 같아요!) 1.
반응형 웹 디자인 : 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 주는 것 1) 뷰포트(viewport) : 실제 내용이 표시되는 영역 - 태그 이용해서 사이에 작성 뷰포트 속성 - width(뷰포트 너비) - height(뷰포트 높이) - user-scalabe(확대, 축소 가능 여부) - initial-scale(초기 확대, 축소 값) 가장 많이 쓰이는 뷰포트 속성 cf) 뷰포트 단위 vw(뷰포트 너비의 1%) vh(뷰포트...
![[Day 20] CSS - 반응형 웹과 미디어 쿼리](https://mblogthumb-phinf.pstatic.net/MjAyMjAxMjRfMjMw/MDAxNjQyOTY3MjI3OTAy.lkoNfjmzW5uv3svSMZJ58PmrK1xbZX7UsIDtMBfq7PMg.sI0mB2fiIt5OkgtH6vSY8hasoM87KQvSwoXIMZFBP4og.JPEG.cleveryellowduck/%BB%E7%BF%EB40.jpg?type=w2)
#
css
#
노란오리의하루기록
#
미디어쿼리
#
반응형웹
#
뷰포트
원문 링크 : [Day 20] CSS - 반응형 웹과 미디어 쿼리
![[실험 15] 피지조절 워시오프팩 만들기](https://mblogthumb-phinf.pstatic.net/MjAyMTExMThfMTcx/MDAxNjM3MTY2MTY2MDQ5.2_u43fkgBW5YGo9xZADE7-nl4lvekSEQ_yFhlzg77hAg.C7RlB58E9iW71wE16ZuuNVvCqeoq0RWYbiI-wyNeD0cg.JPEG.cleveryellowduck/nati-melnychuk-I-6Ap7JXHq8-unsplash.jpg?type=w2)
![[Day 15,16] 배경 관련 CSS](https://mblogthumb-phinf.pstatic.net/MjAyMjAxMDhfMTQ5/MDAxNjQxNjUzMTUyMjQx.6UtT6wriPIoxBDvStxeoQTnI7h0ZilzSrcvV91ZWpsgg.Zr0siTY08u2aIvvEtB9EzKHPOrrK9GBdFYreAktVTaQg.JPEG.cleveryellowduck/%BB%E7%BF%EB37.jpg?type=w2)
![[Day 17] CSS - 연결 선택자와 속성 선택자](https://mblogthumb-phinf.pstatic.net/MjAyMjAxMTBfMTcy/MDAxNjQxNzQzOTkzNzY4.iZswyeWbaTDo21zMcUKNutknuyaR-C-Xq4lFKOQt-Akg.mhSVbbwleNSVJusGABXK6yZK3IMBsxfbXMhy2wIvtJwg.PNG.cleveryellowduck/image.png?type=w2)
![[Day 17] CSS - 가상 클래스와 가상 요소](https://mblogthumb-phinf.pstatic.net/MjAyMjAxMTBfMTgx/MDAxNjQxODI1MTUzNzM4.kIX2H2CpsZdWceyVm7KfZ1PC5awDJHhD6ZhJ4uTv1H8g.cXELRuSR4z6WVNyQYHJ-O5LgJ7Y4Yg6STN2VEuZ1vbAg.PNG.cleveryellowduck/image.png?type=w2)
![[Day 21] CSS - 그리드 레이아웃, 플렉스 박스 레이아웃, CSS 그리드 레이아웃](https://mblogthumb-phinf.pstatic.net/MjAyMjAxMjZfNzYg/MDAxNjQzMTkwMTAxMDEz.Pd3dsbm7OWjy_GKbpJT3fYJ6TOzuthip6Zh6DfM25ccg.rIRjMjQczaBXrz0p56NdZm3rOSM2lBEALCTOcaYEnJsg.PNG.cleveryellowduck/image.png?type=w2)
![[논문리뷰] Relevance-CAM : Your Model Already known Where to Look](https://mblogthumb-phinf.pstatic.net/MjAyMjA0MjlfMTQ2/MDAxNjUxMTU4MDY3NzUy.IGr1MqxZF3YGURYyMWrfeUq-8N4PrhjfpzegT4_fZQcg.5eN6a5T5Fb4eFTjOzkcKzEfcT_LEUUgNvYVyVdIPZTUg.PNG.cleveryellowduck/image.png?type=w2)