미디어쿼리 7/9 미디어쿼리 💡 학습한 내용 ✔️ 미디어쿼리 : 반응형 적응형 웹사이트를 만들 때 사용되며 웹사이트를 모바일, 태블릿 환경으로 자연스러운 변화를 줄 때 사용되는 css 코드 💨 adaptive(적응형) 웹사이트 ( ) -pc버전과 모바일 버전 각각 고정값을 가지고 있으며 뚝뚝 끊겨서 바뀜. 💨 responsive(반응형) 웹사이트 ( ) -하나의 템블릿으로 모바일, 태블릿, 데스크탑 모든기기에 대응할 수... CSS미디어쿼리CSS 7/12 미디어쿼리 실습 💡 학습한 내용 ✔️ Menu 만들기 💨 html 💨 css pc 작업 .media-menu { list-style: none; padding: 0; display: flex; align-items: center; .media-menu a { .media-menu li { border: solid 5px red; 💨 css media 작업 @media (min-width: 320px) and... CSS미디어쿼리실습CSS 웹 프로그래밍 #11 display : flex ; : 무조건 1행 수평으로 정렬 justify-content : space-between; :시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬 align-items :축이 크로스 축이면 사용가능함 display:flex; :박스 모델이 플렉스가 되면 플렉서블하게 요소를 배치할 수 있음 nth-child(n) :부모... CSS미디어쿼리htmlCSS 2021.05.28. 개발일지 ◼︎ 오늘 학습한 내용 6. 미디어쿼리 1) 미디어 쿼리 기초 사용 예시 (CSS) 2) 유용한 사이트 다양한 기기의 width 값이 정리되어있는 사이트 크롬 브라우저 '개발자도구'를 통해 다양한 기기에서의 화면을 미리 볼 수 있다 남들이 예쁘게 잘 만들어둔 사이트 모아볼 수 있는 곳 정말 예쁜 사이트들이 많다,, 세상은 넓고 능력자는 많은것,,, 여기에서 마음에 드는 사이트를 크롬으로 열어... 웹프CSS웹프로그래밍프론트엔드개발미디어쿼리htmlCSS 미디어쿼리 실습 📌학습 내용 📖 메뉴 버튼 실습 X축 정렬된 메뉴 버튼을 모바일 버전에서 Y축 정렬되게 하기 • 기본 PC 버전 세팅 • 미디어쿼리 적용하기 📖 HELBAK header영역 실습 • 특징 — PC와 모바일에서 header 레이아웃이 다름 — PC 버전에서는 header가 고정되어 있음 • header 기본 적용 📎html 📎CSS • li x축 정렬하여 각각 색 바꿔주기 • LOGO 영역과 ... CSS대구AI스쿨실습미디어쿼리CSS devlogs-210709 pc 버전과 모바일 버전의 구조가 많이 다를 경우, naver처럼 모바일 버전 웹사이트를 따로 제작하는 경우도 있음 유저가 사용하는 브라우저의 크기에 따라 다른 css styling을 적용할 수 있다. 320px <= 스마트폰 < 768px 768px <= 태블릿 < 1024px 1024px <= PC a) 특정 크기에서 미디어쿼리를 적용하고자 할 때, 만약 미디어쿼리 밖의 코드(원래의 값)... 대구AI스쿨개발일지CSS미디어쿼리CSS [CSS] 미디어쿼리 적용하기 selecter 밖에서 설정해주는 방법도 있지만, size.scss 라는 파일을 만들어서 공통적으로 사용하는 스타일과 브레이크포인트를 설정해줄 수 있다. - size.scss $변수명: "브레이크포인트를 설정", 위와 같이 내가 설정하고 싶은 사이즈를 설정해주고 아래와 같이 사용할 수 있다. - main.scss 설정하고 싶은 브레이크포인트를 변수로 설정하여 더욱 간결한 코드를 작성할 수 있... CSSTIL미디어쿼리CSS SCSS 미디어쿼리(Media Query) SCSS를 이용해서 간편하게 미디어 쿼리를 적용하는 방법을 알아보자 먼저, SCSS는 Sass의 상위호환으로 CSS와 호환될 수 있는 문법을 갖고 있다. CSS와 문법이 좀 다른 Sass에 비해 SCSS는 거의 완벽히 CSS 문법과 호환이 되어 편리하다. SCSS를 기반으로 살펴보자! 변수를 사용할 수 있다. 변수 사용법 믹스인은 CSS를 묶어서 재사용할 수 있는 모듈로 만들어 준다. 이렇게... scssmedia query미디어쿼리media query
7/9 미디어쿼리 💡 학습한 내용 ✔️ 미디어쿼리 : 반응형 적응형 웹사이트를 만들 때 사용되며 웹사이트를 모바일, 태블릿 환경으로 자연스러운 변화를 줄 때 사용되는 css 코드 💨 adaptive(적응형) 웹사이트 ( ) -pc버전과 모바일 버전 각각 고정값을 가지고 있으며 뚝뚝 끊겨서 바뀜. 💨 responsive(반응형) 웹사이트 ( ) -하나의 템블릿으로 모바일, 태블릿, 데스크탑 모든기기에 대응할 수... CSS미디어쿼리CSS 7/12 미디어쿼리 실습 💡 학습한 내용 ✔️ Menu 만들기 💨 html 💨 css pc 작업 .media-menu { list-style: none; padding: 0; display: flex; align-items: center; .media-menu a { .media-menu li { border: solid 5px red; 💨 css media 작업 @media (min-width: 320px) and... CSS미디어쿼리실습CSS 웹 프로그래밍 #11 display : flex ; : 무조건 1행 수평으로 정렬 justify-content : space-between; :시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬 align-items :축이 크로스 축이면 사용가능함 display:flex; :박스 모델이 플렉스가 되면 플렉서블하게 요소를 배치할 수 있음 nth-child(n) :부모... CSS미디어쿼리htmlCSS 2021.05.28. 개발일지 ◼︎ 오늘 학습한 내용 6. 미디어쿼리 1) 미디어 쿼리 기초 사용 예시 (CSS) 2) 유용한 사이트 다양한 기기의 width 값이 정리되어있는 사이트 크롬 브라우저 '개발자도구'를 통해 다양한 기기에서의 화면을 미리 볼 수 있다 남들이 예쁘게 잘 만들어둔 사이트 모아볼 수 있는 곳 정말 예쁜 사이트들이 많다,, 세상은 넓고 능력자는 많은것,,, 여기에서 마음에 드는 사이트를 크롬으로 열어... 웹프CSS웹프로그래밍프론트엔드개발미디어쿼리htmlCSS 미디어쿼리 실습 📌학습 내용 📖 메뉴 버튼 실습 X축 정렬된 메뉴 버튼을 모바일 버전에서 Y축 정렬되게 하기 • 기본 PC 버전 세팅 • 미디어쿼리 적용하기 📖 HELBAK header영역 실습 • 특징 — PC와 모바일에서 header 레이아웃이 다름 — PC 버전에서는 header가 고정되어 있음 • header 기본 적용 📎html 📎CSS • li x축 정렬하여 각각 색 바꿔주기 • LOGO 영역과 ... CSS대구AI스쿨실습미디어쿼리CSS devlogs-210709 pc 버전과 모바일 버전의 구조가 많이 다를 경우, naver처럼 모바일 버전 웹사이트를 따로 제작하는 경우도 있음 유저가 사용하는 브라우저의 크기에 따라 다른 css styling을 적용할 수 있다. 320px <= 스마트폰 < 768px 768px <= 태블릿 < 1024px 1024px <= PC a) 특정 크기에서 미디어쿼리를 적용하고자 할 때, 만약 미디어쿼리 밖의 코드(원래의 값)... 대구AI스쿨개발일지CSS미디어쿼리CSS [CSS] 미디어쿼리 적용하기 selecter 밖에서 설정해주는 방법도 있지만, size.scss 라는 파일을 만들어서 공통적으로 사용하는 스타일과 브레이크포인트를 설정해줄 수 있다. - size.scss $변수명: "브레이크포인트를 설정", 위와 같이 내가 설정하고 싶은 사이즈를 설정해주고 아래와 같이 사용할 수 있다. - main.scss 설정하고 싶은 브레이크포인트를 변수로 설정하여 더욱 간결한 코드를 작성할 수 있... CSSTIL미디어쿼리CSS SCSS 미디어쿼리(Media Query) SCSS를 이용해서 간편하게 미디어 쿼리를 적용하는 방법을 알아보자 먼저, SCSS는 Sass의 상위호환으로 CSS와 호환될 수 있는 문법을 갖고 있다. CSS와 문법이 좀 다른 Sass에 비해 SCSS는 거의 완벽히 CSS 문법과 호환이 되어 편리하다. SCSS를 기반으로 살펴보자! 변수를 사용할 수 있다. 변수 사용법 믹스인은 CSS를 묶어서 재사용할 수 있는 모듈로 만들어 준다. 이렇게... scssmedia query미디어쿼리media query