반응형
<!doctype html>
<html>
<head>
<title>WEB - CSS</title>
<meta charset="utf-8">
<style>
body {
margin : 0px;
}
a {
color:black;
text-decoration: none;
}
h1 {
font-size:45px;
text-align: center;
border-bottom : 1px solid gray;
margin: 0;
padding:20px;
}
ol {
border-right : 1px solid gray;
width : 70px;
margin : 0px;
padding : 30px;
}
#grid {
display : grid;
grid-template-columns: 150px 1fr;
}
#grid ol {
padding-left : 33px;
}
@media (max-width:600px){
#grid {
display : block;
margin : 10px;
}
h1 {
font-size: 30px;
border-bottom:none;
}
ol {
border-right : none;
}
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<div>
<h2>CSS</h2>
<p>
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
</p>
</div>
</div>
</body>
</html>이번에 새로운 코드다
}
@media (max-width:600px){
#grid {
display : block;
margin : 10px;
}
h1 {
font-size: 30px;
border-bottom:none;
}
ol {
border-right : none;
}
}여기 부분이 중요
@media로 반응형 디자인을 만들었다
이렇게 창이 움직이면 @meida 영역에 있는 것이 실행된다
웹은 모바일, pc 등 여러 화면에서 동작해야하기 떄문에 media 와 같은 반응형 디자인이 매우 중요해졌다.
반응형
'웹 프로그래밍 > CSS' 카테고리의 다른 글
| css에 폰트 적용하는 방법 (0) | 2021.09.29 |
|---|---|
| 생활코딩 css 마무리 (0) | 2021.07.14 |
| 생활코딩 css 코드의 재사용 - .css 파일을 만들자 (0) | 2021.07.14 |
| 생활코딩 css 그리드2 그리드 써먹기 (0) | 2021.07.14 |
| 생활코딩 css 그리드 (0) | 2021.07.14 |
| 생활코딩 박스모델2 줄긋기 (0) | 2021.07.14 |
| 생활코딩 박스모델 (0) | 2021.07.14 |
| 생활코딩 css 선택자를 스스로 알아내는 방법 (0) | 2021.07.12 |