티스토리 뷰
[WEBn] WEB2 - CSS
생활코딩 강의를 들었던 것을 정리를 하겠습니다.
생활코딩 미디어 쿼리 강의와 이전 정리 내용을 가지고
같은 것을 만들었습니다.
<!doctype html>
<html>
<head>
<title>WEB2 - CSS></title>
<meta charset="utf-8">
<style>
body{
margin: 0;
border-bottom: 1px solid gray;
}
a {
color: black;
text-decoration: none;
}
#active {
color: red;
}
h1 {
font-size: 45px;
text-align: center;
border-bottom: 1px solid gray;
margin:0;
padding:20px;
}
ol {
border-right: 1px solid gray;
width:100px;
margin: 0;
padding: 20px;
}
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
#grid ol{
padding-left: 32px;
padding-right: 1px;
}
#article h2, p{
margin-left: 10px;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1.html" title="HTML이란">HTML</a></li>
<li><a href="2.html" title="CSS이란" id="active">CSS</a></li>
<li><a href="3.html" title="JavaScript">JavaScript</a></li>
<li><a href="Iron man.html" title="아이언맨 슈트 변화">Iron man</a></li>
</ol>
<div id="article">
<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 like HTML.<br>
CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.<br>
CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.<br>
This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.<br>
Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.<br>
</p>
</div>
</div>
</body>
</html>
생활코딩을 보고 이 내용을 가지고 반응형 웹을 설명하겠습니다.
첫번째 사진과 다르게
창을 줄이게 되면
이러한 사진과 같이 줄어 들게 됩니다.
그렇기 때문에 조금더 효과적인 웹이 필요할 것 같습니다.
디자인과 코드는 살려두고 시작하겠습니다.
우선 800px 보다 작아지면 불편하기 때문에
800px 보다 작았을 경우 반응을 하는 웹을 필요할 것 같습니다.
@media(max-width : 800px){
}
이렇게 800px 보다 크게되면 블록을 하면 될 것 같습니다.
찾아보니 grid 부분을 바꾸면 될 것 같습니다.
@media(max-width : 800px){
#grid{
display: block;
}
}
이렇게 블록을 하게 되면
조건이 맞았을 경우
사진과 같이 변경됩니다.
다음으로
선을 지워야 될 것 같습니다.
찾아보게 되면
찾아보니
ol 태그에
border-right: 1px solid gray;
이부분인 것 같습니다.
제목 'web' 아래에 있는 선도 지워야 될 것 같습니다.
찾아보니
h1 태그에
border-bottom: 1px solid gray;
인거 같습니다.
이 부분들을 이렇게 바꾸게 되면
@media(max-width:800px){
#grid{
display: block;
}
ol{
border-right: none;
}
h1{
border-bottom: none;
}
}
이렇게 됩니다.
최종적으로 보시게 되면 이렇게 나오게 됩니다.
mediaquery는 무엇인가? 를 간략하게 설명했습니다.
반응형 디자인과 미디어 쿼리 소개 강의
https://opentutorials.org/course/3086/18323
'WEBn > WEB2 - CSS' 카테고리의 다른 글
| [WEBn] WEB2 - CSS - 코드의 재사용 (0) | 2018.05.02 |
|---|---|
| [WEBn] WEB2 - CSS - 그리드 (0) | 2018.05.01 |
| [WEBn] WEB2 - CSS - 박스모델 (0) | 2018.04.30 |
- Total
- Today