'미디어쿼리' 태그의 글 목록

[HTML&CSS] Media Queries

2023.06.01

[HTML&CSS] Media Queries ( UPDATE 2023 - 05 - 31 ) Media Queries Media Query Media query는 반응형 웹을 만들 때 사용한다. (웹사이트를 보고 있는 사용자의 스크린 사이즈 기준) @media screen and (max-width: 0px) {} 을 이용하여 스크린 사이즈 별로 달라보이도록 만들 수 있다. - min 사이즈와 max사이즈를 조절하여 스크린 사이즈 별로 CSS 적용 device toolbar 브라우저의 개발자도구 inspect에서 device toolbar를 이용하여 기기 별 사이즈로 브라우저를 볼 수 있다. orientation: landscape 가로모드 적용 orientation: portrait 세로모드 적용 Me..

🌱 코린이를 위한 GUIDE/🗂️ OpenSource

13 CSS의 미디어쿼리를 사용해서 반응형 웹 페이지 만들기 (화면 크기에 따라 글씨 내용과 색깔이 달라져요)

2023.05.31

CSS의 미디어쿼리를 사용해서 반응형 웹 페이지 만들기 (화면 크기에 따라 글씨 내용과 색깔이 달라져요) CSS의 미디어쿼리를 이용해서 해상도에 따른 색상과 멘트의 변경을 코딩했다. 결과적으론, 두 가지 방식으로 코딩을 했다. 처음엔 무작정 헤딩을 하며 코딩을 했는데.. 완성하고 보니, 아쉬운 마음이 들었다. 왠지 이 것보다는 더 나은 구조로도 만들 수 있을 것 같았다. 결국, 두 번째에는 여러 자료를 구글링 해서 코드 구조를 개선할 수 있었다. display: inherit; 역시 아는 것이 힘이다. *내 노트북 해상도를 기준으로 만들었다. 실제 해상도와는 차이가 있다.😓 처음 작성한 코드 여러 화면 크기로 살펴보세요! 일반 PC 저해상도 PC 일반 태블릿 저해상도 태블릿 body { backgroun..

🌸 나의 다이어리

[D+4] 2023-05-12 아는 것이 힘이다

2023.05.30

[D+4] 2023-05-12 아는 것이 힘이다 CSS의 미디어쿼리를 이용해서 해상도에 따른 색상과 멘트의 변경을 코딩했다. 결과적으론, 두 가지 방식으로 코딩을 했다. 처음엔 무작정 헤딩을 하며 코딩을 했는데.. 완성하고 보니, 아쉬운 마음이 들었다. 왠지 이 것보다는 더 나은 구조로도 만들 수 있을 것 같았다. 결국, 두 번째에는 여러 자료를 구글링 해서 코드 구조를 개선할 수 있었다. display: inherit; 역시 아는 것이 힘이다 ㅋㅋ🔥 🌱오늘의 잔디 심기🌱 클릭

[HTML&CSS] Media Queries

13 CSS의 미디어쿼리를 사용해서 반응형 웹 페이지 만들기 (화면 크기에 따라 글씨 내용과 색깔이 달라져요)

[D+4] 2023-05-12 아는 것이 힘이다

티스토리툴바