HTML 익히기

jw·2022년 3월 1일

learn-all-with-javascript

목록 보기

2/33

1. HTML 태그 기본 문법

HTML 태그는 정보를 보여주는 역할을 한다. 이미지, 텍스트, 비디오, 입력창 등의 개별 정보는 전부 HTML로 부터 만들어진다.
이 정보들을 HTML 언어로 표시하기 위해선 태그와 속성, 콘텐츠를 이해해야 한다. 이 때 콘텐츠는 태그가 될 수 있다.

기본 형식: <태그>콘텐츠</태그>

<p>Hello</p>

속성이 있다면? <태그 속성1="값" 속성2="값">콘텐츠</태그>
a는 링크 태그다.

<a href="https://www.naver.com">Naver</a>

태그 안에 태그 넣기

<div>
  <p>Hello everyone!</p>
</div>

콘텐츠 없으면? <태그 속성1="값" />

<img src="사진주소" />

주석 사용

<!-- 나는 주석이다. 코드에 영향을 끼치지 않지.-->

2. HTML 웹 기본 구성

head 태그: 콘텐츠 보여주는 것 이외의 모든 설정 태그를 넣는다.
body 태그: 실제로 화면을 구성하는 태그를 넣는다.
<link href="style.css" rel="stylesheet" />: CSS를 로드하는 태그

<html>
    <!--화면에 보이는 요소들 외의 모든 것들(메타정보, 탭에 보이는 제목 설정 등)를 담는 공간-->

    <head>
        <!--브라우저 탭에 보이는 제목-->
        <title>쇼핑몰에 오신 것을 환영합니다</title>
		<meta charset="utf-8">
        <!--CSS를 로드하는 태그 : link, style-->
        <!--link : 외부 리소스(CSS, 폰트)등을 외부에서 가져올 때 사용 -->
        <link href="style.css" rel="stylesheet" />

        <!--style : CSS를 html 내부에서 직접 적용할 때 사용 -->
        <style type="text/css">
            html {
                background-color: white;
            }
        </style>

        <!--Javascript를 로드하는 태그 : script-->
        <!--외부에서 파일을 가져오거나 직접 내부에서 입력할 수 있음-->
        <script type="text/javascript" src="script.js" />   
        <script type="text/javascript">
            console.log("코드에 문제있어?")
        </script>
    </head>

    <!-- 화면을 구성하는 요소들을 적는 공간 -->
    <body>

    </body>
</html>

3. HTML 주요 태그들

h1,h2,h3,h4,h5,h6

-> headline의 약자로 일반적으로 제목을 표시할 때 사용하는 태그다.

p

일반적으로 문단(paragraph)을 나눌 때 사용하는 태그.
일반 텍스트를 표시할 때 주로 사용한다.

br

줄바꿈을 할 때 사용하는 태그

a

다른 링크로 넘어가도록 돕는 태그
줄바꿈 x
href="넘어갈 주소"

img

이미지를 보여주는 태그
src="이미지 주소"

<img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293__340.jpg"  alt="구름 사진" />

alt 속성은 img가 제대로 보여지지 않았을 때 보여지게 될 문구

form

내부에 입력하는 값들을 관리해주는 태그
로그인, 상품 업로드 등 우리가 입력을 해야할 때 사용된다.
form의 주요 속성 중 action은 submit가 눌렸을 때 입력된 서버 url로 정보를 전송한다.
label 태그는 input 태그의 라벨을 붙일 때 사용한다.

<form action="">
	<label>아이디 입력 </label>
	<input type="text" />
	<br/>
	<label>패스워드</label>
	<input type="password" />
	<br/>
	<input type="submit" value="전송" />
</form>