# media queries
ComAround_ media queries / 반응형 만들기
media queries를 사용하면 반응형 웹사이트를 만들 수 있다.미디어 쿼리의 문법 구조는 아래와 같다.나는 스타일드 컴포넌트 내부에 미디어 쿼리를 적용해보았다.최대 너비가 768px인 좁은 화면에서는 flex-direction 을 row 에서 column 으로
[React]Emotion에 대해 알아보자(2)(fallbacks,Nested Seletors,Media Queries, Globalstyles, keyframes)
&가 없다면 p태그가 haeader 태그 안에 들어 있기도 하고 들어 있지 않다. 하지만 header 태그 안에 있는 p 태그에게만 명시적으로 다른 색깔을 주고 싶을 때 어떻게 해야 하는가?css 선택자 중에서는 부모를 선택할 수 있는 선택자는 존재하지 않는다.head
TIL 10___CSS basic 6(반응형 웹, 미디어 쿼리)
* 반응형 웹 디자인은 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현해준다. 1. 모바일 기기를 위한 뷰포트 뷰포트란 스마트폰 화면에서 실제 내용이 표시되는 영역 뷰포트는 ` 태그를 이용해 와 `태그 사이에 작성한다.PC에 맞게
210716_[15]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_2_helbak_덴마크쇼핑몰_layout
오늘은 반응형 웹사이트 (Responsive Web)인 helbak이라고 하는 여태껏 많이 실습에 간접적으로 참고하였던 덴마크 쇼핑몰 site의 layout을 직접 짜는 실습을 하였다. HTML 작성style.css (스타일 및 미디어 쿼리)키즈가오 사이트와 다른점은
210715_[14]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_1_kidsgao_final
이틀간 학습하였던 내용과 동일하게 진행하였고, 키즈가오 site 기본틀 (java script 제외)을 완성하였다.각각 4가지의 process를 6가지의 구간으로 나누어서 진행하였다.(1) night2 움직이는 달 ( 앞서 배웠던 잠자리와 동일한 움직임) (2) mor
210714_[13]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_1_kidsgao
어제 학습했던 내용에서 추가적으로 학습을 진행하였다.제작 과정은 동일하게 페이지별로 style.css학습진행 순서는 어제와 동일하다.각각 4가지의 process를 5가지의 구간으로 나누어서 진행하였다.원 size축소 size원 size축소 size원 size축소 siz
210713_[12]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_1_kidsgao
앞서 2주간 학습하였던 HTML과 css의 기본내용으로 kidsgao라고 하는 강사님이 3달 학습후에 처음으로 외주를 받아서 만든 상업 홈페이지에 대한 실습을 하였다.<url : http://sisikiller.dothome.co.kr/>크게 제작된 부분
210712_[11]_대구 AI스쿨_일반과정_웹 프로그래밍_CSS_9_media_queries_2
지난 시간에 이어 미디어 쿼리 두번째 학습 시간이었다.오늘은 그리드 레이아웃(grid layout)에 대해 학습을 하였다.다음은 그리드 레이아웃의 3가지 특징이다.1\. 시각적으로 안정된 디자인을 만들 수 있다.2\. 업데이트가 편한 웹 디자인을 구성할 수 있다.3\.
210709_[10]_대구 AI스쿨_일반과정_웹 프로그래밍_CSS_8_media_queries
학습 첫번째 시간에 가장 먼저 배웠던 것은 반응형 웹 사이트 였다. 웹이 초창기에는 레이아웃의 변화가 없어서 창의 크기를 바꾸어서 보는 것이 불편했지만, PC 브라우저의 다양화 그리고 스마트폰과 태블릿 pc의 등장으로 사용자의 접속 환경에 맞추어 능동적으로 변화하는것이