media query
media query 는 웹 페이지의 내용이 모니터, 스마트폰 또는 태블릿과 같은 화면에서 페이지가 화면에 맞게 조정될 수 있도록
@media
min-width, max-width 를 사용하여 화면 가로 사이즈에 따라 조정될 수 있도록 설정합니다.
ex) min-width: 800px;, max-width: 800px;
코드
<style>
div {
border: 5px solid green;
font-size: 60px;
}
@media(max-width: 800px) {
div {
display: none;
}
}
</style>
<body>
<div>
Responsive
</div>결과
media query 사용하기
나머지 코드들은 냅두면서 화면 가로사이즈가 800px 이하일 경우(max-width:800px) 화면을 보기 편하게 변경해주는 작업을 진행합니다.
코드
@media(max-width:800px) {
#grid {
display: block;
}
ol {
border-right: none;
}
h1 {
border-bottom: none;
}
}결과
link tag
<link rel="stylesheet" href="style.css">
css 파일을 만들어서 html 파일과 연결하게 되면 여러개의 html 페이지를 한꺼번에 수정이 가능하여 유용하게 사용할 수 있습니다.
rel 뜻?
relationship 의 약자로 현재 문서와 링크되어야하는 자원과 연결해주는 속성(attribute)이다.
참고 및 출처: https://opentutorials.org/course/3086/18323
https://www.techopedia.com/definition/30449/media-query-responsive-web-design
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
프론트엔드 개발자입니다.