html : 웹의 구조
CSS : 웹의 디자인
p태그
a태그 : 링크
개발자 도구 키기 : control + option + i
html의 구조에는 head와 body가 있고
body에는 실제 컨텐츠
head에는 타이틀, CSS 불러오기, 자바스크립트 불러오기
<html>
<head>
<title>필리에 오신걸 환영합니다!</title>
<link href="web.css" rel="stylesheet" />
<!-- 디자인을 담당하는 외부의 CSS를 가져온다.-->
<style>
p {
font-weight: 900;
}
</style>
<!-- 내부에서도 CSS 입력하게 도와줌-->
<!--외부에서 자바스크립트 파일 불러오는 걸 도와준다-->
<script src="web.js"></script>
<!--내부에서도 직접 자바스크립트 코드 짤 수 있다.-->
<script>
console.log("Welcome");
</script><!-- control option i 로 개발자 도구 키기 하면 로그 확인 가능-->
</head>
<body>
<p>Hello Pilly</p>
<p>Hello Pilly</p>
<p>Hello Pilly</p>
</body>
</html>
기본 태그
<html>
<head>
<title>Welcome to Pilly!</title>
</head>
<body>
<!--헤드라인 태그 h1 ~ h6까지 존재한다-->
<h1>Hello world</h1>
<h2>Hello world</h2>
<h3>Hello world</h3>
<h4>Hello world</h4>
<h5>Hello world</h5>
<h6>Hello world</h6>
<p>Hello~~</p>
<p>Hello~~</p>
<p>Hello~~</p>
<br />
<!--줄바꿈 태그-->
<p>Hello~~</p>
<a href="https://www.naver.com">Naver</a>
<img
src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293__340.jpg"
alt="Cloud Picture"
/>
<form action="">
<label>ID </label>
<input type="text" />
<br />
<label>Password</label>
<input type="password" />
<br />
<input type="submit" value="Submit" />
</form>
<div>
<p>This is cloud</p>
<img
src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293__340.jpg"
/>
</div>
</body>
</html>
h 태그 : 헤드라인 태그, 제목을 쓸 때 사용된다.
br 태그 : 줄바꿈 태그
p 태그 : 문단을 나눌때 사용하는 태그
a 태그 : 하이퍼링크 태그
img 태그 : 필수 속성으로 이미지를 넣어주어야 한다.
진짜 이미지를 넣거나 외부 이미지를 사용해도 된다.
alt 속성도 같이 이용한다. 이미지가 네트워크 오류나 서버 에러가 났을 때 제대로 보여지지 않았을 때 문구를 쓸 수 있다.
form 태그 : 사용자가 입력하는 것을 관리해주는 태그, 서버로 전송한다.
- label : 제목
- input : 입력
- type : 어떤 타입인지
- text
- password : 비밀번호
- submit : 서버로 보내준다
div 태그 : 하나의 박스라고 생각하면 된다. 박스안에 여러 컨텐츠를 넣고 관리한다.
ex) 로그인, 배너, 검색 등으로 나눌 때 많이 사용한다.
'📱 Full-Stack' 카테고리의 다른 글
| 리액트 (0) | 2021.09.18 |
|---|---|
| javascript (0) | 2021.09.15 |
| 웹 화면 구현하기 (0) | 2021.08.23 |
| CSS (0) | 2021.08.18 |