HTML, CSS , JavaScript

[HTML] 문서의 골격

jny0 2023. 2. 21. 23:24

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;
}