HTML 과 CSS의 기본을 알아야 API를 배울 수 있다.
한시간으로 기본 개념을 끝낸다.
HTML의 기본구조
<html>
<head>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name= "viewport" content="sidth=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My First Paragraph</p>
</body>
</html><>꺽새 안에 들어있는 것들은 모두 "태그"라고 부른다.
html은 head와 body 태그로 이루어져 있다.
태그이름으로 시작해서 태그이름으로 끝나는 것을 element라고 부른다.
ex) <h1>My First Heading</h1>
>> html은 element의 조합이다.
element 종류
<h1> </h1> : 큰 제목 글씨
<p> </p> : 일반 본문 글씨
<img src= "~~" /> : 이미지 주소를 넣어 이미지 삽입
Attribute
: HTML element의 추가적인 속성을 관리하기 위한 요소.
element의 옵션 이라고 생각하면 쉬움!
ex) <h1 style= "color:red;"> My First Heading </h1>
style이라는 옵션을 추가함
attribute는 태크 내에 넣는 것 같다. 태그 사이에는 페이지에 나타내고자 하는 글(텍스트)를 넣는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name= "viewport" content="sidth=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>My First Heading</h1>
<p style="color:red;">My First Paragraph</p>
</body>
</html>
CSS
CSS는 디자인을 담당.
Head태그 안에 Style태그가 있는데, 이 안에 구현하게 되어있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name= "viewport" content="sidth=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.color-primary {
color:red;
}
</style>
</head>
<body>
<h1>My First Heading</h1>
<p style="color:red;">My First Paragraph</p>
</body>
</html>
CSS를 통해서 전체페이지 Element에 디자인을 한번에 쉽게 적용할 수 있다.
이때는 class attribute를 사용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name= "viewport" content="sidth=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.color-primary {
color:red;
}
</style>
</head>
<body>
<h1>My First Heading</h1>
<p class="color-primary">My First Paragraph</p>
</body>
</html>> 이와 같이 위 style태그에서 선언한 변수 color-primary를 class 옵션에 넣으면 red컬러의 글씨를 이전과 같이 사용할 수 있다.
여러 텍스트를 한번에 수정할 때 사용할 수 있다. (메인 컬러 수정 시)
색과 크기까지 같이 적용해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name= "viewport" content="sidth=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.color-primary {
color:red;
}
.font-primary {
font-size: 50px;
}
</style>
</head>
<body>
<h1>My First Heading</h1>
<p class="color-primary font-primary">My First Paragraph</p>
</body>
</html>> 이와 같이 띄어쓰기를 통해 두 가지 변수 (color-primary, font-primary)를 모두 적용시킬 수 있다.
만약 길어지게 되면 복잡해지니
css 파일을 따로 빼보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name= "viewport" content="sidth=device-width, initial-scale=1.0">
<title>Document</title>
<link rel= "stylesheet" href= "style.css">
</head>
<body>
<h1>My First Heading</h1>
<p class="color-primary font-primary">My First Paragraph</p>
</body>
</html>.color-primary {
color:red;
}
.font-primary {
font-size: 50px;
}> 두번쨰는 style.css 파일로 따로 구분했다.
그리고 첫번째 기존 파일( index.html)은 link 태그를 통해서 css 파일을 연결해준다.
Event
:웹페이지 내에서 클릭을 하거나, 스크롤을 하거나 할 때 이벤트가 발생한다.
이벤트를 인식하기 위한 코드를 element에 넣어준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name= "viewport" content="sidth=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.color-primary {
color:red;
}
.font-primary {
font-size: 50px;
}
</style>
</head>
<body>
<h1>My First Heading</h1>
<p class="color-primary font-primary">My First Paragraph</p>
<button type="button" onclick="javascript:alert('click button!!')'">Click</button>
</body>
</html>> button이라는 태그를 추가해준다.
onclick이라는 옵션은 사용자가 element를 클릭했을때 생기는 이벤트이다.
여기서는 'click button!!'이라는 문구가 뜨도록 이벤트를 설정했다.
ex) onfocus, onscroll 등 마우스 이벤트도 있다.
>> 30분 컷!
'API' 카테고리의 다른 글
| [FastAPI] API 구현 (GET, POST, DELETE) (0) | 2024.10.26 |
|---|---|
| FastAPI (속성 3일차) (0) | 2024.02.03 |
| Fast-API (속성 2일차) (0) | 2024.02.01 |
| Fast-API (속성 1일차) (2) | 2024.01.31 |
