HTML/CSS 기본
2023. 2. 21. 08:53ㆍHTML,CSS
HTML 기본 틀
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="xxxx.css"> css와 연결해주는 구문
<meta charset="UTF-8"> 한글 패치
<title>홍길동의 이력서</title>
</head>
<body>
<div class="main box"> div : 묶음
<h1>홍길동</h1> 제목 h1 ~ h6 (크기순)
<p>도적</p>
<a href="http://faceboo.com"><img src=경로></a> 경로 이동
</div>
<p class="big-font">내 이름은 홍길동</p>
<p class="small-font">내 이름은 박혁거세</p>
<footer>copyright CODE</footer>
</body>
</html>
head -> 부가 정보
body -> 주 내용*** CSS 기본 틀
꾸밀 태그 {
어떤 요소를: 어떻게 ;
꾸밈 1
꾸밈 2
}
footer {
text-align: center;
background-color: black;
color: white;
}
html파일의 footer태그
가운데 정렬,
배경 검정
글씨 흰색
.big-font {
font-size: 40px;
}.smal-font{
font-size: 15px;
}
앞에 .이 붙으면 class를 꾸며준다는 뜻
* div태그로 묶인 영역을 꾸밀 때 div = section = article
.mainbox{
border: 5px solid black; border : 두께 방식 색깔;
width: 610px;
text-align: center;
margin-left: auto; 박스 자체 가운데 정렬
margin-right: auto;
}
* padding과 margin
padding : 메인박스와 테두리 사이의 공간
margin : 테두리 바깥의 여백
'HTML,CSS' 카테고리의 다른 글
| [HTML] 기본 Form 구조 (0) | 2023.03.16 |
|---|---|
| HTML, CSS 작업을 도와줄 사이트 (0) | 2023.03.16 |
| [CSS] Flex와 Tailwind (0) | 2023.03.14 |
| Toast UI Editor (0) | 2023.03.07 |