개발자 데뷔!

03. [FE] HTML 기본 본문

웹/Front End

03. [FE] HTML 기본

물꼮이 2022. 1. 12. 21:50

HTML은 기본적으로, '태그 구조'로 이루어진다. 

다음을 따라가보자

태그 구조

 기본적으로, 다음과 같이 한 쌍의 태그 사이에 콘텐츠가 표시되는 형태이다.

이 형태를 하나의  'element, 요소' 라고 한다.

<열린태그 속성="속성값"> 콘텐츠 </닫힌태그>
  1.  태그 : type을 나타냄
  2.  속성 : 태그가 가진 속성 
  3.  콘텐츠 : 실제 표시될 내용물
  • html 코드는 기본적으로 이같은 태그 구조로 이루어져있고, 
  • 태그구조 간에 포함관계가 성립될 수 있다. 
  • = 즉, 한 태그가, 다른 태그 내부의 '콘텐츠'로 사용될 수 있다.
  • 여러개의 속성이 한 태그안에 들어갈 수 있다. 

태그 종류

태그 역할 사용
<h> 제목(heading) - h1~h6까지 사용할 수 있다.
- h1이 가장 큰 제목, 숫자가 커질 수록 작은 제목
<a> 링크(anchor) - 인라인 요소 
- href 속성을 추가하여 사용 (현재페이지가 연결된 링크로 바뀜)
- ex) <a href="https://www.naver.com">  네이버링크 </a>
- href 속성에 이미지 링크를 넣으면, 이미지가 링크됨(target="photo ")
- target="_blank" 속성을 추가하여 사용 (연결된 링크가 새탭에서 열림)
- ex)  <a href="https://www.naver.com" target="_blank">  네이버링크 </a>
- 임의로 사용할 때는 주소대신 #을 넣는다 href="#"
<ul> 리스트(unordered list) - 번호 없는, 글머리(●)를 사용한 리스트
- 내부에 <li>태그를 포함해 리스트를 만든다.
- ex) <ul> 
          <li>리스트1</li>
          <li>리스트2</li>
       </ul>
<ol> 리스트(ordered list) - 번호 있는, 글머리(1. 2. ..)를 사용한 리스트
- 내부에 <li>태그를 포함해 리스트를 만든다.
- ex) <ol> 
         <li>리스트1</li>
         <li>리스트2</li>
       </ol>
<span>   - 인라인 요소
<p>   - 블록요소
<form> 양식 - 회원가입 등 양식 같은 것을 작성하는데 쓰임
- action 속성을 추가해 사용 (get, post 등)
<input> 입력창 - type 속성을 추가해 사용(type으로 입력받을 형태 지정)
- type 속성으로 text, checkbox, radio, 등등 사용 가능
- ex) <input type="text" placeholder="id를 입력하세요"/>
- placeholder 속성은, input 창에 미리 적혀있을 내용 표시
<img> 이미지(image) - 자동으로 src, alt 속성이 추가됨
- src에는 이미지의 경로, 삽입
- alt는 이미지 로드에 문제가 있을 때 대신할 대체텍스트를 입력한다.
<select> 선택 - <option> 태그를 자식으로 가짐
- ex) <select name="메뉴">
           <option>옵션1</option>.
           <option>옵션2</option2>
       </select>
<div> 구분(division) - 블록요소
- 요소들을 큰 덩어리로 구분하는데 유용하게 쓰임
- 잘 안쓴다
     
     
     
<br/> 한줄 띄우기 - inline 요소들 중, 사이 한 줄을 띄우고 싶을 때 끼워서 사용함
- 잘 안사용한다.

 

VSCode에서 .HTML

1. 기본 코드 작성

  • .html 확장자로 새파일 만든 후,
  • 빈 코드에 느낌표  ! 하나 입력 후, enter 치면
  • 하단의 emmet 기능으로 다음과 같은 html 기본코드가 자동완성된다. 

2. 실행 (서버 페이지 가동)

  • 코드 수정 후, 우클릭 > Open with Live Server [ALT+L] or [ALT+O] 를 클릭하면, 
  • 새 브라우저 창이 뜨면서, 내가 작성한 html 코드를 웹페이지로 확인할 수 있다.  
  • ????? → 어떤 extension 인지??

3. 단축키 모음

단축키 역할
Alt + Shift + (↓)방향키 복사 & 붙여넣기
   
   
   
   
   
   

 

 

 

 

HTML 기본구조

  • html 기본구조는 아래 코드와 같다. 
  • 다음과 같이 큰 <html>태그가 기본적으로 존재하고,
  • <head> 와, <body>, 두 태그가 다시 <html>태그 내부의 콘텐츠로 들어간다.
  • <head>에는 아래 쓰일 코드에 대한 개략적인 정보가 들어가고,
  • <body>에는 실제 웹페이지를 구성할 element가 작성된다.
<!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>Document</title>
        
       		<!-- head에 들어갈 내용 -->     
        
	</head>
    
    
	<body>
    
    		<!-- body에 들어갈 내용 -->
        
	</body>
    
</html>

 

↓

 

  • 위 html 기본코드에 각 line의 역할을 주석으로 달아 표시하면 다음과 같다.
<!DOCTYPE html>
<!-- 프로그래밍 언어 DOCTYPE    -- 브라우저에게, 아래 코드가 html5로 작성되었음을 알려줌-->

<html lang="en">
<!-- 언어                       -- 언어(language) 설정이 en(english)로 되어있음-->
    <head>
        <meta charset="UTF-8">
        <!-- 인코딩방식         -- 문자열 인코딩방식 = UTF-8-->

        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 크로스 브라우징    -- 필요할때 추가-->

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- 반응형 웹          -- 필요할때 추가-->

        <title>Document</title>
        <!-- 웹페이지의 제목-->

        <!-- head에 들어갈 내용-->
    </head>

    
    <body>
        <!-- body에 들어갈 내용 -->
    </body>
</html>

 

 

HTML 주석처리

  • 다음과 같이 태그 구조의 앞부분에 !--, 뒷부분에 --를 추가해 바꾸어 준다.
  •  
    주석 전 주석 후
    <> <!--  -->
    <a>  </a> <!--a>     </!--a--> 
<!-- 주석처리 -->

<!--h1>안녕 난 주석처리 될거야</!--h1-->

 

 

시멘틱 웹

: 컴퓨터가 쉽게 알아들을 수 있는 웹.

  기존의 HTML로 작성된 문서는, 컴퓨터보다는 사람의 눈으로 보기에 용이한 자연어로 기술된 문장이 많았다. 

 시맨틱 웹은 XML에 기반한 시맨틱 마크업 언어를 기반으로 한다. 

 

ex)

<div id="header"> 내용 </div>

↓

<header> 내용 </header>

'웹 > Front End' 카테고리의 다른 글

06. [FE] CSS Display 디스플레이 요소  (0) 2022.01.12
04. [FE] CSS 기본  (0) 2022.01.12
01. [FE] VS code 기본 & 시작하기  (0) 2022.01.12
00. [FE] 웹기술  (0) 2022.01.12
Vue.js 가상돔  (0) 2021.09.03
'웹/Front End' Related Articles more