1. 문서의 골격
<!DOCTYPE html><html> </html>
<head> </head> 헤드<body> </body> 본문<p> </p> 일반적인 문단<foot> </footer> 웹페이지 맨 아래 써있는 내용. 대부분 저작권이 명시됨 ex.회사명, 대표이사 이름, 사업자등록번호, 주소, 전화번호
<meta charset="UTF-8"> 한글 입력에 필요<link rel="stylesheet" href="style.css"> css파일과 연결
<!--Index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!--한글 입력에 필요 -->
<title>김멋사의 이력서</title>
<link rel="stylesheet" href="codelion.css"> <!--css파일과 연결-->
</head>
<body>
<h1>김 멋 사</h1>
<p>HTML/CSS 개발자</p>
<footer>copyright CODE LION. All rights reserved.</footer>
</body>
</html>2. 가독성 챙기기
클래스명 설정
<태그명 class = "클래스명"> </태그명> 같은 태그여도 다른 속성을 위해 클래스를 지정할 수 있음.css파일에서는 반드시 클래스명 앞에 .을 붙여 .big-font와 같은 형태로 작성해야 클래스로 인식함
css 요소
글자색 color (색상코드 값으로 나타낼 수도 있음)
배경색 background-color
텍스트 정렬text-align
글자크기 font-size
<body>
<p class="big-font">내 이름은 김멋사</p>
<p class="small-font">코드라이언으로 코딩 배웠지</p>
<p class="small-font">반갑습니다</p>
<footer>copyright CODE LION. All rights reserved.</footer>
</body>//likelion.css
// 태그 꾸미기
footer {
text-align: center;
background-color: black;
color: white;
}
p {
font-size: 30px;
}
.big-font {
font-size: 40px;
}
.small-font {
font-size: 15px;
}'HTML, CSS , JavaScript' 카테고리의 다른 글
| [JavaScript] jQuery (미니 게임) (0) | 2023.02.21 |
|---|---|
| [JavaScript] 기념일 디데이 계산기 (0) | 2023.02.21 |
| [JavaScript] 글자 수 계산기 (0) | 2023.02.21 |
| [JavaScript] 로또 번호 추첨 (0) | 2023.02.21 |
| [JavaScript] 배열과 객체 (0) | 2023.02.21 |
