미새문지
Front End. Day02 HTML 본문
첫 기초인 HTML 시작입니다
HTML은 메모장이나 코딩 프로그램으로 코드를 실행시켜 인터넷 홈페이지에서 적용이 되는지 확인할 수 있습니다
HTML파일의 확장명은 .html( 예시) 메모장의 확장명은 .txt, 사진의 확장명은 .jpg)
< HTML의 구조 >
<html>
<head>
</head>
<body>
</body>
</html>head에 들어갈 글은 화면 맨위에 보이는 창 이름, 웹페이지 정보, 검색엔진에 노출될 정보입니다
body는 화면에 들어갈 내용입니다
모든 글과 사진 등은 전부 body안에서 작성해 표출하는거죠
< HTML의 태그 >
★div: 빈 박스, 하나의 구역
- 한 문단을 의미합니다. 예를 들어 네이버 중앙의 광고배너는 div태그로 한 문단을 만든 것입니다.
p : 한 줄단위이며, 위 아래 공간이 생깁니다
span : [단어] [단위] 구역 지정, 특정 구간을 분간
b, strong : 강조, 굵은 폰트
em, i : 폰트 기울기
mark : 형광칠
del : 가운데 밑줄
ins : 밑줄
sup, sub : 위 첨자, 아래 첨자
br : 줄 바꿈, 개행
: 띄어 쓰기
<, > : < > 생성
h1~h6 : 제목 태그, 폰트 크기, 굵기, 위 아래 공간, 숫자가 내려갈수록 커진다
<!-- --> : 주석
대략 이 정도의 태그가 있고 이 이외에도 무수한 태그들이 많습니다
태그 예시)
<head>
<title>문단태그</title>
</head>
<body>
<p>찰떡이네 아웃핏 <span>자 자랑해</span> 아무한테.</p>
<b>금상첨화네</b> <strong>손가락에</strong>
<em>자몽 색깔을</em> 띄는 <i>까라떼</i> 파란하늘과의 조합
<mark>까리해 꽤</mark> 아마 <del>어제보다</del>
더 <ins>아흔 아홉배</ins> 정도 <sup>거기에</sup> <sub>하나더</sub> 해
<p>
난 마치 활주로에서 출발할 때 <br/>대한항공의 <것과> 아시아나 비행기
</p>
</body>
</html>결과)
다음은 input 태그입니다
input 태그는 form 태그 안에서 추가되는 입력 요소중 가장 중요한 태그입니다
input 태그는 type이라는 속성을 사용해 입력 양식을 바꿔 사용됩니다
회원가입이나 로그인하는 그런 창들을 input 태그로 꾸미는거죠
< input의 주요 태그 >
type 태그
1. text : 텍스트
2. password : 암호
3. button : 일반적인 버튼
4. checkbox : 선택 박스
5. radio : 하나만 고르는 박스
속성 태그(attribute, attr)
1. placeholder : 텍스트창에 설명해놓는 글 ( 예)이름을 입력해주세요 )
2. required : 필수값을 지정 ( 예)이메일에 @를 빼고 작성 시 다시 입력하라는 경고창이 뜸 )
3. readonly : 수정 없이 오직 읽기만 가능함
4. value : 입력 창의 초기값, 사용자가 변경 가능
5. name : 이름
기본적인 로그인 화면 코드입니다
<head>
<title>input</title>
</head>
<body>
<p>
이름 :
<input
type="text"
placeholder="이름을 입력해주세요"
value="문미새"
required
readonly
/>
</p>
<p>암호 : <input type="password" /></p>
<button>로그인</button>
</body>
</html>결과)
이런 식으로 홈페이지 개발을 개발자가 자유롭게 만들 수 있습니다
다음은 a태그입니다
a태그는 링크, 페이지 이동할때 사용하는데, 원하는 글이나 사진을 작성하고 a태그로 링크를 붙이면 해당 링크로 이동합니다
<a href="링크"><a>로 작성하며 a태그 안에 title태그를 붙이면 링크에 부가설명이 붙습니다
a태그 예시)
<head>
<title>링크</title>
</head>
<body>
<a href="https://www.naver.com" target="_blank">네이버로 이동</a>
<a href="../misae.html">페이지 이동</a>
<a href="../misae.html" title="안녕하세요"><p>안녕하세요</p></a>
</body>
</html>결과)
다음은 img태그입니다
img태그는 사진을 적용하는 태그로 원하는 사진을 폴더에서 가져와 적용할 수 있습니다
<img src="사진위치"/>로 작성하며 바로 닫는 태그입니다
추가로 img태그 내에 alt태그를 쓸 수 있는데,
alt태그는 해당 페이지의 설명, 이미지가 뜨지 않을 때 대체되는 글입니다
img태그 예시)
<head>
<title>이미지</title>
</head>
<body>
<img src="./img/celebration.jpg" alt="celebration"/>
</body>
</html>결과)
<!-- 둘째 날에는 HTML에서 사용하는 주요 태그들을 공부했습니다
기본적인 태그들을 작성해보니까 벌써 홈페이지의 틀을 만드는 기분이 들어 진전감이 좋네요
셋째 날에는 남은 HTML의 주요 태그들을 공부하겠습니다 -->
'웹 프론트엔드' 카테고리의 다른 글
| Front End. Day06 CSS(3) (1) | 2022.04.26 |
|---|---|
| Front End. Day05 CSS(2) (1) | 2022.04.25 |
| Front End. Day04 CSS (1) | 2022.04.19 |
| Front End. Day03 HTML(2) (1) | 2022.04.18 |
| Front End. Day01 프론트엔드 첫걸음 (1) | 2022.04.16 |
