1. 웹 에 " 안녕" 이라는 글자 출력하기
- 출력하고 싶은 내용을 body 안에다 적어주면 된다.
- 코드입력-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 안녕</title>
</head>
<body>
안녕
</body>
</html>
- 출력 결과 -
2. div - 하나에 구역을 정할때 사용함.
줄바꿈이랑은 개념이 다름.
ex) 네이버 창 - 이렇게 구역으로 나뉘어 질때 주로 사용함
- 코드 입력-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 안녕</title>
</head>
<body>
<div>안녕</div>
<div>하세요</div>
</body>
</html>- 출력 결과-
3. 문단 태그
- 태그 문법-
<p> - 구역 설정
<span> - 문장안에 서 독립적으로 설정할수 있음
<b> - 강조태그
<em> - 기울기 태그
<i> - 기울기
<mark> - 칠하기
<del>-문장위 선으로 긋기
<ins>- 밑줄긋기
<sup> - 올려쓰기
<sub> - 내려쓰기
<br> - 공간 상관없이 개행
< > - 띄어쓰기
- 코드 입력 -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 문단태그</title>
</head>
<body>
<p>목숨이 <span>눈에 없는</span> 하였으며,</p>
<b>예가</b> 이 얼마나 <em>말이다.</em> 없으면, <i>만천하의</i> 놀이 되려니와, 아니다.
<mark>노년에게서</mark> 자신과 끓는 <del>피부가</del> 전인 끓는다. 같은 그러므로 <ins>것이다
</ins>보라, 남는 찾아다녀도, 끝까지 낙원을 <sup>예가 이상의</sup> 이것이다.<sub>사랑의 것이다.
</sub>보라, 같이, 긴지라 얼음에 힘있다. 능히 있는 열락의 철환하였는가?
<p>
이상을 거선의 무엇을 철환하였는가?<br/> 천자만홍이 이 천지는 보배를 못하다.
</p>
</body>
</html>
- 출력 결과 -
4. Input
- 코드입력-
</head>
<p> 이름: <input type="text" /></p>
<p> 암호: <input type= "password" /> </p>- 출력 결과-
< placeholder >
- 창에 입력 받기 전 나타내는 문장
<value>
- input에 입력된 값에 바꾸거나 가지고 올수 있다.
< required >
- 다음창으로 넘어가기전 필수 입력값을 입력해줘야 한다는 안내문구
5. button
- 클릭할때 어떤 이벤트가 일어나게끔 버튼 모양.
- 코드 입력-
<p> 암호: <input type= "password" /> </p>
<button>로그인</button>- 출력 결과-
6. Select ( 고르다)
하위 <option> - selest 안에서만 쓸수 있다.
- 코드 입력-
<select>
<option>코딩</option>
<option>헬스</option>
<option>드라이브</option>
<option>요리</option>
<option>책읽기</option>
</select>
- 출력 결과-
< radio>
항목별 체크 할수 있게 끔 만들어주는 체크박스 같은것
* 네임이 같아야 한다 .
- 코드 입력-
<p>
성별 : <input type="radio" name="gender" /> 남자
<input type="radio" name="gender" /> 여자
</p>- 출력 결과 -
<check box>
- 위와 같이 항목별 체크 할수 있게끔 만들어준다
- 코드 입력 -
<p>
관계:
<input type="checkbox" /> 본인
<input type="checkbox" /> 부모
<input type="checkbox" />형제
<input type="checkbox" /> 지인
</p>
- 출력 결과-
* 현재 상태로는 체크가 다 가능하지만, 자바스크립트로 선택갯수 제한 할수 있음
7. <a href> 태그
- 페이지 이동 태그
- 코드 입력-
<body>
<a href="https://www.naver.com"> 네이버로이동</a>
</body>- 출력 결과-
누르면 네이버 페이지 이동
'Class > Frontend' 카테고리의 다른 글
| [프론트 엔드 DAY03- 2] (0) | 2022.04.25 |
|---|---|
| [프론트 엔드 DAY03-1 ] (0) | 2022.04.19 |
| [프론트 엔드 DAY03] (0) | 2022.04.17 |
| [프론트엔드 day02] (0) | 2022.04.16 |
| [프론트엔드 day01] (0) | 2022.04.10 |
댓글