프로그래밍/CSS
18 미디어쿼리와 시맨틱태그
윤지(●'◡'●)
2021. 5. 9. 23:54
반응형
미디어쿼리(media query)
미디어쿼리는 width, height, color .. 속성과 같은 미디어 관련 표현식을 통해 스타일이 적용되는 범위를 조절할 수 있다.
미디어 쿼리를 사용하면 컨텐츠를 별도로 변경하지 않아도 웹 페이지 접속하고 있는 기기에 알맞은 형태로
스타일이 조정된다.
[문법]
@media 매체유형 and(표현식){
css 스타일 코드
...
}
매체유형
| 매체유형 | 설명 |
| all | 모든매체에 사용 |
| screen | 컴퓨터나 태블릿, 스마트폰등 에 사용 |
| speech | 스크린 리더에 사용 |
| 프린터 기기에 사용 |
예시
@media screen and (min-width: 1024px) {
/*만약 최소 사이즈가 1024보다 크다면 body색 변경*/
body{background-color: deepskyblue;}
}
HTML5 시맨틱 태그
시맨틱은 의미, 의미론적인 이라는 뜻으로 HTML5에 도입된 개발자와 브라우저에게
의미있는 태그로 제공되는 요소이다.
굉장히 종류가 많지만 자주 사용되는 몇가지만 알아보자!
| 태그 | 설명 |
| <header> | 주로 머릿말, 제목등을 표현하기 위해 내용을 적는 영역 |
| <nav> | 컨텐츠를 담고 있는 문서를 사이트간에 서로 연결하는 링크(메뉴)를 넣는 영역 |
| <section> | 컨텐츠의 분류를 넣는 영역 |
| <aside> | 사이드바라고 부르며, 본문 이외의 내용을 넣는 영역 |
| <summary> | 세부정보를 담는 태그의 제목을 넣는 영역 |
| <details> | 세부정보를 담는 영역 |
| <footer> | 회사소개, 저작권, 약관등의 정보를 담는 영역 |
미디어 쿼리를 이용하여 반응형 웹사이트를 만들어보자
| 기기 | viewport px값 |
| 구형폰 | 320px |
| 최신폰 | 360px~375px |
| 태블릿 | 768px~ |
| PC | 1024px~1280px |
HTML
<body>
<div id="container">
<header>
<nav>
<ul>
<li>인스타그램</li>
<li>트위터</li>
<li>페이스북</li>
</ul>
</nav>
</header>
<div id="contents">
<section id="intro">
<img src="./image/instagram.png" alt="인스타그램">
<img src="./image/twitter.png" alt="트위터">
<img src="./image/facebook.png" alt="페이스북">
</section>
<section id="desc" class="text">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Deserunt deleniti error, quo dolorum incidunt tenetur est molestias
ratione eos vel vero. Expedita enim est ad tenetur hic dolores commodi autem.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Atque voluptatum architecto cupiditate sapiente accusantium
in aliquam quod illum voluptatibus, inventore dolorem eveniet corrupti
nulla temporibus doloremque magni? Labore, necessitatibus impedit.
</p>
</section>
</div>
<footer>
<p>copyright 2021 by 이윤지</p>
</footer>
</div>
</body>
</html>
CSS
/*웹폰트*/
@font-face {
font-family: 'Cafe24Oneprettynight';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Oneprettynight.woff') format('woff');
font-weight: normal;
font-style: normal;
}
*{/*모든 영역에 스타일 적용*/
font-family: 'Cafe24Oneprettynight'; /*폰트적용*/
margin: 0;
padding: 0;
box-sizing: border-box;
}
#container{ /*기기별로 가로 사이즈가 상이하므로 px가 아닌 %로 설정*/
width: 100%;
}
header{
width: 100%;
background-color: black;
}
nav > ul {
height: 50px;
margin: 0;
list-style: none;
color: white;
}
nav > ul > li {
float: left;
padding: 10px;
margin: 5px 5px;
}
/*
구형폰 : 320px
(핸드폰 px가 아니라 viewport)
현재폰 : 360px~375px
*/
nav, #contents{
width: 310px; /*핸드폰 화면 사이즈에 맞추기*/
margin: 0 auto; /*중앙 정렬*/
}
#intro{
width: 100%;
margin-bottom: 20px;
}
#intro > img {
width: 100%;
padding: 10px;
}
#desc {
width: 100%;
padding: 10px;
line-height: 1.5; /*줄 간격*/
font-size: 20px;
}
footer{
width: 100%;
height: 50px;
padding: 20px;
background-color: black;
color: white;
}
footer > p {
text-align: center;
line-height: 10px;
}
/*
테블릿 : 768px~
*/
@media screen and (min-width: 768px){ /*최소사이즈가 768보다 크다면*/
nav, #contents{
width: 750px;/*태블릿 사이즈에 맞추기*/
margin: 0 auto;
}
#intro{
width: 100%;
}
#intro > img {
width: 20%;
padding: 10px;
}
#desc{
width: 100%;
padding: 10px;
margin: 10px auto;
}
footer{
height: 70px;
padding: 30px;
background-color: gray;
}
}
/*
데스크탑 가로사이즈 : 1024px ~ 1280px
*/
@media screen and (min-width: 1024px) { /*최소사이즈가 1024보다 크다면*/
nav, #contents{
width: 1000px; /*pc 사이즈에 맞추기*/
margin: 0 auto;
}
#intro > img{
width: 20%;
padding: 10px;
float: left;
}
#desc{
display: inline-block;
width: 250px;
height: auto;
padding: 10px;
border: 3px dashed black;
margin-left: 10px;
margin-bottom: 20px;
}
footer{
clear: both;
height: 100px;
padding: 50px;
background-color: black;
}
footer > p{
line-height: 5px;
}
}
핸드폰
태블릿
PC
열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.
수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>
반응형