20240802수업
layout창을 만들땐 폴더를 따로 지정해주는 것이 좋다.
ㅣlayout만드는 방식
1.table tag
2.div float style
3.html5 header
4.css flexbox
5.css frid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{box-sizing: border-box;}
/* 블락엘리먼트 는 모바일로 가면 바껴서 표현될수 있음 장치에 반응하는 디자인>>반응형 웹디자인
테이블태그로는안되고 디브로 해야함*/
a {text-decoration: underline; color: blue;}
table{width: 100%;}
#header{
height: 150px;
background-color: #666666;
color: white;
text-align: center;
font-size: 40px;
font-weight: bold;}
/* bold=700px */
#nav{
width: 20%;
height: 300px;
background-color: #CCCCCC;
vertical-align: baseline;
padding-top: 30px;
padding-left: 15px;
color: blue;
}
#section{
width: 80%;
height: 300px;
vertical-align: baseline;
padding-top: 30px;
padding-left: 15px;
padding-right: 15px;
background-color: #F1F1F1;
}
#Footer{
background: #777; /*=축약표현 background: #777777*/
color: white;
text-align: center;
height: 80px;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="2" id="header">Cities</td>
</tr>
<tr>
<td id="nav">
<div><a href="layout1.html">Lodon</a></div>
<div><a href="paris.html">Paris</a></div>
<div><a href="seoul.html">Seoul</a></div>
</td>
<td id="section">
<p style="font-weight: bold; font-size: 18px;">Lodon</p>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</td>
</tr>
<td colspan="2" id="Footer">Footer</td>
<td></td>
<tr>
<td></td>
</tr>
</table>
</body>
</html>위 html코드를 복사해서 같은 layout폴더 아래에 paris.html과 seoul.html파일을 생성에 코드를 붙여넣기 한다음 selection에 대해서만 내용을 수정해주면 된다.
See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.
이때 실무에서는 디자인이나 형식에 좀 더 집중하기위해 내용은 Lorem Ipsum으로 작성한다.
loream ipsum 생성 사이트:https://www.lipsum.com/
한글로렘입숨 생성 사이트 : https://hanipsum.com/
Lorem Ipsum - All the facts - Lipsum generator
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type spec
www.lipsum.com
한글입숨 생성기 - Hanipsum
hanipsum.com
'HTML|CSS' 카테고리의 다른 글
| [html/css]웹사이트 제작하기 (0) | 2024.08.06 |
|---|---|
| [html/css]Flex box, Grid를 이용한 정렬 (0) | 2024.08.06 |
| [html/css] Selector(선택자) 총 정리 (0) | 2024.08.04 |
| [html/css]favicon 사용, map태그, area태그, 이미지 좌표 확인 방법, 다각형 링크 (0) | 2024.08.04 |
| [html/css]링크 버튼 만들기,vertical align (0) | 2024.08.03 |