웹의 본질은 정보를 시각적으로 보여주고 HTML은 정보를 만들어서 보여준다.

HTML은 태그, 속성, 콘텐츠를 이해하면 된다.

 

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

<p>Hello Grab</p>

 

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

<a href = "htts://www.naver.com">네이버로 가기</a>

 

3.태그 안에 또 태그를 넣는다면

<div>

 <p>Hello every one</p>

</div>

 

4.콘텐츠가 따로 없다면 <태그 속성1="값" />

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

 

HTML에서 주석을 사용하려면

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

 

HTML에는 웹을 구현하기 위해 기본적으로 설정하는 태그 형식이 있다.

  • html 태그가 가장 밖에서 사용되며 그 안에 head , body 태그가 사용됩니다.
    • head 태그는 콘텐츠를 보여주는 것 이외의 모든 설정 태그를 넣습니다.
    • body 태그에는 실제로 화면을 구성하는 태그를 넣습니다.

 

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

<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>

h1,h2,h3,h4,h5,h6

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

  • 줄바꿈 : O
  • 기본 너비 : 부모 너비
<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

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

  • 줄바꿈 : O
  • 기본 너비 : 부모 너비

 

 

 

<br/> 줄바꿈할 때 사용

 

 

a

다른 링크로 넘어가도록 돕는 태그입니다. 필수 속성으로 href="넘어갈 주소" 를 적어야 합니다.

  • 줄바꿈 : X
  • 기본 너비 : 콘텐츠 너비

<a href="https://www.naver.com">네이버로 넘어가기</a>

 

 

img

이미지를 보여주는 태그입니다. 필수 속성으로 src="이미지 주소"를 적어야 합니다. alt 속성은 img가 제대로 보여지지 않았을 때 보여지게 될 문구입니다.

  • 줄바꿈 : X
  • 기본 너비 : 이미지 너비

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

 

alt는 이미지가 안 보이는 상황이라면 그것에 대한 설명혹은 문구를 적어줄 수 있다.

 

 

form , input

form 태그는 내부에 입력하는 값들을 관리해주는 태그입니다. 로그인, 상품 업로드 등 우리가 입력을 해야할 때 form 태그가 사용됩니다. form의 주요 속성 중 action 은 Submit(제출하기)가 눌렸을 때 입력된 서버 URL로 정보를 전송합니다.

form 태그 안에는 input 태그들이 들어갑니다. type 속성을 통해 text, password, radio, file, submit 등을 넣을 수 있습니다.

label 태그는 input 태그의 라벨을 붙일 때 사용합니다.

 

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

 

 

 

 

div

영역을 나누도록 도와주는 태그로 앞으로 굉장히 많이 사용하게 됩니다. div를 하나의 박스라고 생각하시면 됩니다. 박스 안에 다른 콘텐츠들을 넣어서 영역을 관리합니다.

  • 줄바꿈 : O
  • 기본 너비 : 부모 너비

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

span

div 와 함께 CSS를 이용해서 영역을 구성할 때 많이 사용합니다. div와 차이가 있다면 div는 줄바꿈이 되며 기본 너비가 부모의 너비를 차지한다면, span 태그는 줄바꿈이 되지 않고, 자식 콘텐츠의 너비만큼을 차지합니다.

  • 줄바꿈 : X
  • 기본 너비 : 콘텐츠 너비

💡 저는 보통 텍스트(문장)에 스타일을 씌울 때 span 태그를 사용합니다.

 

💡 실제로 태그들의 종류가 훨씬 다양합니다. 시멘틱(Semantic) 태그라고 해서 용도에 맞는 직관적인 이름을 가진 태그들이 있습니다(article, section, footer 등)

이번 수업에서는 div, span 등 기본 태그를 활용해서 화면을 구성할 계획입니다.

'코딩 > 코딩 기초' 카테고리의 다른 글

인프런 : 비전공자를 위한 올인원 개발 클래스 Javascript  (0) 2022.10.19
인프런 : 비전공자를 위한 올인원 개발 클래스 flex layout  (0) 2022.10.19
부스트코스 (풀스텍) -1. 웹 프로그래밍 기초  (0) 2022.10.18
부스트코스 (풀스텍) - OT  (0) 2022.10.18
인프런 : 비전공자를 위한 올인원 개발 클래스 CSS  (0) 2022.10.08

+ Recent posts

티스토리툴바