미새문지

Front End. Day02 HTML 본문

웹 프론트엔드

Front End. Day02 HTML

문미새 2022. 4. 17. 12:27
728x90

첫 기초인 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 : 줄 바꿈, 개행

&nbsp; : 띄어 쓰기

&lt, &gt : < > 생성

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>
    난 마치 &nbsp;활주로에서 출발할 때 <br/>대한항공의 &lt것과&gt 아시아나 비행기
    </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의 주요 태그들을 공부하겠습니다 -->

728x90
저작자표시 비영리 변경금지

'웹 프론트엔드' 카테고리의 다른 글

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
'웹 프론트엔드' Related Articles more