||HTML & CSS|| HTML basic

윤코코·2021년 10월 19일

HTML & CSS

목록 보기

2/3

🚩 HTML의 정의 & 가장 많이 사용되는 tag 알아보기

HTML: HyperText Markup Language

은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. "Hypertext(하이퍼텍스트)"란 웹 페이지를 다른 페이지로 연결하는 링크를 말합니다. 링크는 웹의 근본적인 속성으로, 인터넷에 자료를 올리고 다른 사람이 만든 페이지로 링크함으로써 여러분도 월드 와이드 웹 세계의 능동적인 일원이 될 수 있습니다.
(* 출처: https://developer.mozilla.org/ko/docs/Web/HTML)

HTML 연습환경 만들기

폴더를 생성한다
vsc에서 연다
.html 파일을 만든다
브라우저로 파일을 연다

※ 브라우저는 코드 오류를 알려주지 않는다.
항상 콘텐츠를 표기해주려 하기 때문에 존재하지 않는 태그를 사용해도 에러가 발생하지 않는다. 그래서 개발자는 에디터나 콘솔을 확인한다. 이것의 장점은 일반적인 유저의 방문에는 영향을 끼치지 않는다는 것이다.

HTML tags

2020년 10월 기준, 가장 많이 쓰이는 태그 32가지.
새로운 태그나 몰랐던 속성(attribute)을 알아보자.
아래 코멘트들은 MDN에서 가져온 설명이다.

+label, ol, address

<!DOCTYPE html>
<html lang="kr"> 
//html: HTML 문서의 루트(최상단 요소)를 나타내며, "루트 요소"라고도 부릅니다. 모든 다른 요소는 html 요소의 후손이어야 합니다.
//lang: 스크린 리더가 음성 표현에 사용할 언어를 선택할 때 도움이 됩니다. 언어 식별 태그는 페이지의 주 언어를 가리켜야 합니다.
<head> 
//head: 브라우저에 표시되는 body요소와 다르게, head의 내용는 페이지에 표시되지 않습니다. 대신에 페이지에 대한 metadata를 가집니다. 
	<title></title> 
	//title: HTML문서 전체의 타이틀 표현하기 위한 메타데이터
	<meta charset="utf-8"> 
	//meta: 데이터를 설명하는 데이터. 기본적으로 name과 content로 이루어짐.
		name 은 메타 요소가 어떤 정보의 형태를 갖고 있는지 알려줍니다. content는 실제 메타데이터의 컨텐츠입니다.
	//charset: 문서에서 허용하는 문자 집합에 대해서 간단히 표시
	//utf-8: 전세계적인 character 집합으로, 이는 웹 페이지에서 어떤 문자라도 취급할 수 있다는 것을 의미합니다.
	<meta name="description" content="~~~"> 	
	//description: 사이트 설명
	<link rel="shortcut icon" href="~~~">
	//link: 현재 문서와 외부 리소스의 관계를 명시합니다. 스타일 시트를 연결할 때 제일 많이 사용하지만, 사이트 아이콘("파비콘"과 홈 화면 아이콘) 연결 등 여러가지로 쓰일 수 있습니다.
	//shortcut icon: 탭에 표시되는 아이콘
	<link rel="stylesheet" href="my-css-file.css">
        <style>
            p {color: red;}
        </style>
	//style: 문서나 문서 일부에 대한 스타일 정보를 포함합니다. 그러나, 일반적으로 스타일은 외부 스타일 시트에 작성하고, link 요소로 연결하는 편이 좋습니다.
</head>
<body> 
//body: HTML 문서의 내용을 나타냅니다. 한 문서에 하나의 body 요소만 존재할 수 있습니다.
	<header>
	//header: 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다.
	</header>
  
	<main>
	//main: body의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다. 
	hidden 속성 없이는 문서에 하나보다 많은 main 요소가 존재해선 안됩니다.
        <nav>
        //nav: 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다. 자주 쓰이는 예제는 메뉴, 목차, 색인입니다.
        nav 하나는 사이트 전체 탐색, 다른 하나는 현재 페이지 내 탐색으로 사용하는 등, 하나의 문서에서 여러 개의 nav 태그를 가질 수 있습니다. 
                <ul>
                //ul: 정렬되지 않은 목록을 나타냅니다. 보통 불릿으로 표현합니다.
                        <li type="i"></li>
                        //li: list item. 반드시 정렬 목록(ol), 비정렬 목록(ul), 혹은 메뉴(<menu>) 안에 위치해야 합니다.
                        <ol start="4">
                        //ol: 정렬된 목록을 나타냅니다. 보통 숫자 목록으로 표현합니다.
                        ul과 ol은 필요한 만큼 중첩할 수 있고, 서로 교차할 수도 있습니다.
                                <li></li>
                        </ol>
                        <li><a href="~~~" target="~~~"></a></li>
                        //a: href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다.
                        //target: 링크한 URL을 표시할 위치. 가능한 값은 브라우징 맥락으로, 즉 탭, 창, iframe의 이름이나 특정 키워드입니다.
                </ul>
                <form>
                //form: 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다.
                        <label for="A"></label>
                        <input id="A" type="~~~" value="~~~" placeholder = "~~~" />
                        //input: 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. HTML에서 제일 강력하고 복잡한 요소 중 하나입니다. 
                        //type: input 요소의 동작 방식은 type 특성에 따라 현격히 달라집니다.
                        //value: The input control's value. When specified in the HTML, this is the initial value.
                </form>
        </nav>
          
        <h1></h1> 
        <h2></h2> 
        <h3></h3>
        //h: 6단계의 구획 제목을 나타냅니다. 구획 단계는 h1이 가장 높고 h6은 가장 낮습니다.
        //글씨 크기를 위해 제목 태그를 사용하지 마세요. 대신 CSS의 font-size 속성을 사용하세요.
        //제목 단계를 건너뛰는 것을 피하세요. 언제나 h1로 시작해서, h2, 순차적으로 기입하세요.
        
        <div></div>
        //div: division. "순수" 컨테이너로서 아무것도 표현하지 않습니다. 블록 레벨 요소.
        div 요소는 의미를 가진 다른 요소(article, nav 등)가 적절하지 않을 때만 사용해야 합니다.
        <span></span> 
        //span: 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다.
        적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 합니다.
        <p>
        //p: 하나의 문단을 나타냅니다. HTML에서 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수 있습니다.
        문단은 블록 레벨 요소이며, 자신의 닫는 태그(/p) 이전에 다른 블록 레벨 태그가 분석되면 자동으로 닫힙니다.
            <br>
            //br: 텍스트 안에 줄바꿈(캐리지 리턴)을 생성합니다.
            문단 사이에 여백을 두기 위한 용도로 사용하지 마세요. 대신 p 요소로 감싼 후 CSS의 margin 속성으로 여백의 크기를 조절하세요.
            <strong></strong>
            //strong: 중대하거나 긴급한 콘텐츠를 나타냅니다. 보통 브라우저는 굵은 글씨로 표시합니다. b 태그와 다른점은 중요도의 의미가 있느냐 없느냐
            <i></i>
            //i: 텍스트에서 어떤 이유로 주위와 구분해야 하는 부분을 나타냅니다. 보통 기울임꼴로 표시합니다.
        </p> 
        <img src="~~~" alt="~~~"> 이미지 태그

        <iframe src="~~~" title="iframe Example 1" width="400" height="300"></iframe>
        //iframe: 인라인 프레임. 중첩 브라우징 맥락을 나타내는 요소로, 현재 문서 안에 다른 HTML 페이지를 삽입합니다.
        <button></button>
        //button: 클릭 가능한 버튼. button 요소는 input 요소보다 스타일을 적용하기 훨씬 수월합니다. 
        양식 제출용 버튼이 아니라면 type 특성을 button으로 지정하는걸 잊지 마세요. 
        기본값에서는 버튼을 눌렀을 때 양식 데이터를 제출하고, (존재하지 않는) 응답을 불러오려고 시도하는 과정에서 문서의 현재 상태가 사라질 수 있습니다.
    </main>
      		
    <footer>
    //footer: 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.
        <address>
        //address: 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타냅니다.
            <a href="kim@gmail.com">kim@gmail.com</a><br>
            <a href="tel:+212341234">(02) 1234-1234</a>
        </address>
    </footer>
      
    <script src="javascript.js"></script>
    //script: 데이터와 실행 가능한 코드를 문서에 포함할 때 사용하며 보통 JavaScript 코드와 함께 씁니다.
</body>
</html>