반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>블록라벨(80%), 인라인 구조(20%)</title>
<style>
*{margin:10px;}
h1{border-width:2px;border-color:red;}
</style>
</head>
<body>
<h1>title</h1>
<span>text</span>
<span>text</span>
<p>text</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css기초4 - 스타일의 상속</title>
<link rel="stylesheet" href="./css/style.css">
<!-- 헤드 태그 안 link 태그로 스타일 파일을 상대경로로 연결하여 파일을 분리하여 업데이트 해도 쉽게 동기화 된다. -->
</head>
<body>
<div class="box">
<h1>TITLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css 파일을 따로 분리</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="box">
<h1>TITLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>반응형
'IT > HTML&CSS' 카테고리의 다른 글
| [CSS] 웹폰트, inline vs block(2021-10-05) (0) | 2021.11.18 |
|---|---|
| [CSS] 스타일 상속 및 Font 관련 CSS 속성(2021-09-28) (0) | 2021.11.18 |
| [HTML] CSS 기초 - 관계선택자_족보관계를 이용(2021-09-23) (0) | 2021.11.17 |
| [HTML] CSS 기초 - 관계선택자_족보관계를 이용(2021-09-16) (0) | 2021.11.09 |
| [HTML] CSS 기초 - 선택자(2021-09-16) (0) | 2021.11.09 |