인생은 여행 人生は旅

WEB2 - 그리드 본문

코딩 공부

WEB2 - 그리드

하늘빛 칵테일 2023. 12. 29. 18:28
<?DOCUTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#grid{
border:5px solid pink;
display:gird;
grid-template-columns: 150px 1fr;
}
div{
border:5px solid gray ;
}
</style>
</head>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>
</html>

뭔가 좀 다른 결과가 ^^;

수업중간에 빠뜨린 게 있는 건지 아무리 찾아봐도 모르겠어요 ㅎㅎ

<!doctype html>
<html>
<head>
<title>WEB1 - CSS </title>
<meta charset="utf-8">
<style>
body{
margin:0;
}
a {
color:black;
text-decoration: none;
}

h1 {
font-size:60px;
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"></a>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.ee WWW (disambiguation) and The Web (disambiguation).
</p>
</div>
</div>
</body>
</html>

 

이번엔 grid 와 padding , margin , width tag 등을 통해 선도 긋고 

글씨들은 보기좋게 정렬해 주어서 아래와 같은 화면이 만들어졌습니다 ^^

아직 많은 태그들을 공부한것도 아니고 저는 단순히 수업 듣고 따라 하는 정도인데,

아무것도 없는 상태에서 복잡한 웹페이지들을 어떻게 만드는지 정말 신기한 거 같아요 ^^

 

저작자표시 비영리 변경금지

'코딩 공부' 카테고리의 다른 글

WEB2 - JavaScript 수업시작  (0) 2024.01.03
WEB2 - 미디어 쿼리  (0) 2024.01.02
WEB2 - 박스모델 사용하기  (0) 2023.12.28
WEB2 - CSS 선택자의 기본 & 박스모델  (0) 2023.12.27
WEB2 - CSS 등장(Cascading Style Sheets)과 기본문법  (2) 2023.12.26
'코딩 공부' Related Articles more