Notice
Recent Posts
Recent Comments
Link
먼지나는 블로그
생활코딩 css 박스, 그리드 본문
1. 박스써먹기
<!doctype html>
<html>
<head>
<title>WEB2 - CSS</title>
<meta charset="utf-8">
<style>
body{
margin:0;
}
a {
color:black;
text-decoration: none;
}
#active{
color:red;
}
.saw {
color:gray;
}
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;
}
</style>
</head>
<body>
<h1><a href="index.html" >WEB</a></h1>
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw active" id="active">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<!--
<h1><a href="index.html"><font color = "red">WEB</font></a></h1>
<ol>
<li><a href="1.html"><font color = "red">HTML</font></a></li>
<li><a href="2.html"><font color = "red">CSS</font></a></li>
<li><a href="3.html"><font color = "red">JavaScript</font></a></li>
</ol>
-->
<p>
Cascading Style Sheets (CSS) is a style sheet language
used for describing the presentation of a document
written in a markup language such as HTML.
CSS is a cornerstone technology of the World Wide Web,
alongside HTML and JavaScript.
CSS is designed to enable the separation of presentation
and content, including layout, colors, and fonts.
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.</p>
<p style="margin-top:45px;">
css file which reduces complexity and repetition in the
structural content as well as enabling the css file
to be cached to improve the page load speed between
the pages that share the file and its formatting.</p>
<p>
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables */
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://web1-uwrtt5hwxf.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
</noscript>
</p>
</body>
</html>
2. 그리드
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>NAVIGATION</div>
<div>ARTICLE</div>
</body>
</html>
새롭게 grid를 알아보기위해 grid.html 파일을 만들어주었다
NAVIGATION ARTICLE이라는 문자를 각각 태그로 묶어 분리하려고 할때
단지 디자인 목적을 위해서만 사용할 수 있는 태그가 바로 div 태그이다
div 태그는 block level element로 화면 전체를 사용하기 때문에
자동적으로 줄바꿈이 되는 모습을 볼 수 있다
div 태그와 비슷한 목적으로 사용되는 태그가 하나 더 있는데
바로 span 태그이다 div태그와는 달리 inline element이다
따라서 inline과 block level element 중 필요한 것을 골라
span 태그나 div 태그 중에 아무거나 사용하면 된다
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#grid{
border:5px solid pink;
display:grid;
}
div{
border:5px solid gray;
}
</style>
</head>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>
</html>
div의 부피감을 보기 위해 테두리를 만들어 주었다
이때 display의 속성값으로 grid를 쓰고 grid-template-columns를
선택해 첫번째 칼럼인 NAVIGATION이 쓸 공간 150px을주고
두번째 칼럼 ARTICLE이 나머지 공간을 다 쓰게되는 1fr를 쓰게되면
아래와 같은 결과가 나타나게 된다
여기서 ARTICLE은 창을 늘리는 만큼 공간이 늘어난다
반면 NAVIGATION은 150px의 크기로 고정적이게 된다
이때 1fr은 만약 두 칼럼크기 모두 1fr로 적게 된다면
창을 늘리거나 줄이던 상관없이 같은 크기가 된다
추가로 만약 2fr과 1fr의 크기를 주었다면 2:1의 비율의
크기를 가지는 것을 알 수 있다
화면 전체를 쓰도록 조정하는 단위라고 생각하면 된다
번외: CSS/HTML/JavaScript 기술 중 현재 웹브라우저에서
해당 기술을 얼마나 채택하고 있는지 확인해볼 수 있는 사이트
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
3. 그리드 써먹기
<!doctype html>
<html>
<head>
<title>WEB - CSS</title>
<meta charset="utf-8">
<style>
body{
margin:0;
}
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:100px;
margin:0;
padding:20px;
}
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
#grid ol{
padding-left:33px;
}
#grid #article{
padding-left:25px;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</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.[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>