미디어쿼리 2021.07.09 CSS-8 Day10, 모바일, 웹브라우저 등 다양한 환경에서 적용할 수 있도록 하는 CSS코드인 미디어쿼리에 대해서 배웠다. 미디어쿼리 : 웹브라우저(PC), 모바일 등 다양한 환경에서 웹사이트로써 기능할 수 있도록 만들어 주는 CSS 코드 {.pc { }} └ 이때 .pc 는 내가 설정한 class 이름이기 때문에 각자가 설정한 class 이름으로 적용하면 됨! {.pc {color: greenye... CSS개발일지프론트엔드코린이미디어쿼리CSS 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 210712 개발일지 📌 학습한 내용 미디어쿼리 실습 1. PC version & mobile version 메뉴바 2. Helbak 메인 페이지 3. Bootstrap Agency 메인페이지 - Portfolio PC version PC version 2 mobile version 미디어쿼리를 적용하는 방법 1. CSS 파일 안쪽에 미디어 쿼리 코드 작성 (실무에서 가장 많이 사용) @media (min-wid... 웹프로그래밍대구AI스쿨실습미디어쿼리대구AI스쿨 웹 프로그래밍 #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 [210605 TIL] CSS 미디어 쿼리를 이용한 태블릿용 화면, 모바일용 화면 구성하기 반응형 레이아웃(화면의 넓이가 달라질 때 마다 css 레이아웃 바뀌게 하는 것)을 구성할 때 @media 사용해 원하는 넓이마다 css 속성 적용 max-width : ~px / ~ 픽셀 이하 min-width : ~px / ~ 픽셀 이상 max-width: 1114px (태블릿용 화면) 화면 width 1114px 이하일 때 괄호... 반응형미디어쿼리반응형레이아웃CSSCSS SCSS 미디어쿼리(Media Query) SCSS를 이용해서 간편하게 미디어 쿼리를 적용하는 방법을 알아보자 먼저, SCSS는 Sass의 상위호환으로 CSS와 호환될 수 있는 문법을 갖고 있다. CSS와 문법이 좀 다른 Sass에 비해 SCSS는 거의 완벽히 CSS 문법과 호환이 되어 편리하다. SCSS를 기반으로 살펴보자! 변수를 사용할 수 있다. 변수 사용법 믹스인은 CSS를 묶어서 재사용할 수 있는 모듈로 만들어 준다. 이렇게... scssmedia query미디어쿼리media query
2021.07.09 CSS-8 Day10, 모바일, 웹브라우저 등 다양한 환경에서 적용할 수 있도록 하는 CSS코드인 미디어쿼리에 대해서 배웠다. 미디어쿼리 : 웹브라우저(PC), 모바일 등 다양한 환경에서 웹사이트로써 기능할 수 있도록 만들어 주는 CSS 코드 {.pc { }} └ 이때 .pc 는 내가 설정한 class 이름이기 때문에 각자가 설정한 class 이름으로 적용하면 됨! {.pc {color: greenye... CSS개발일지프론트엔드코린이미디어쿼리CSS 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 210712 개발일지 📌 학습한 내용 미디어쿼리 실습 1. PC version & mobile version 메뉴바 2. Helbak 메인 페이지 3. Bootstrap Agency 메인페이지 - Portfolio PC version PC version 2 mobile version 미디어쿼리를 적용하는 방법 1. CSS 파일 안쪽에 미디어 쿼리 코드 작성 (실무에서 가장 많이 사용) @media (min-wid... 웹프로그래밍대구AI스쿨실습미디어쿼리대구AI스쿨 웹 프로그래밍 #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 [210605 TIL] CSS 미디어 쿼리를 이용한 태블릿용 화면, 모바일용 화면 구성하기 반응형 레이아웃(화면의 넓이가 달라질 때 마다 css 레이아웃 바뀌게 하는 것)을 구성할 때 @media 사용해 원하는 넓이마다 css 속성 적용 max-width : ~px / ~ 픽셀 이하 min-width : ~px / ~ 픽셀 이상 max-width: 1114px (태블릿용 화면) 화면 width 1114px 이하일 때 괄호... 반응형미디어쿼리반응형레이아웃CSSCSS SCSS 미디어쿼리(Media Query) SCSS를 이용해서 간편하게 미디어 쿼리를 적용하는 방법을 알아보자 먼저, SCSS는 Sass의 상위호환으로 CSS와 호환될 수 있는 문법을 갖고 있다. CSS와 문법이 좀 다른 Sass에 비해 SCSS는 거의 완벽히 CSS 문법과 호환이 되어 편리하다. SCSS를 기반으로 살펴보자! 변수를 사용할 수 있다. 변수 사용법 믹스인은 CSS를 묶어서 재사용할 수 있는 모듈로 만들어 준다. 이렇게... scssmedia query미디어쿼리media query