HTML part 1.

졀·2023년 8월 13일

UDR 언더독레볼루션

HTML&CSS

목록 보기

1/3

📕 HTML

📖 HTML

: HTML은 HyperText Markup Language를 의미

HyperText: 하이퍼링크를 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트
Markup: (콘텐츠를) 표시
Language: 언어 (사람과 웹브라우저 사이)
=> 하이퍼텍스트와 콘텐츠를 표시해주는 언어
📍 HTML은 웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어
-> 개발자는 HTML코드로 웹피이지에 어떤 내용이 표시될지를 정의한 HTML 문서를 만든다
-> 완성된 html코드를 웹브라우저에서 로딩하면 웹피이지가 만들어진다
-> HTML코드가 웹브라우저를 통해 해석되고 표현되는 과정을 렌더링이라 함

✏️ HTML 문서

: 파일의 확장자가 html 또는 htm
-> 파일을 수정하고 싶다면 텍스트 편집기로 열기
-> 결과(웹페이지)를 확인하고 싶다면 웹브라우저로 열기
대표적인 텍스트 편집기 : 기본 메모장, Brackets, VSCode 등
대표적인 웹프라우저 : 크롬, 파이어폭스, 사파리, 인터넷익스플로러, 엣지 등

📙 개발자 도구와 코드 에디터

📖 개발자 도구

: 웹사이트 개발용 도구, 대부분의 최신 브라우저에는 개발자 도구가 탑재돼있음.
HTML CSS 코드 확인, 모바일 모니터링, 네트워크 상태 점검, 스크립트 명령어 확인 등 다양한 기능을 통해 개발자에게 편의를 제공

<개발자 도구 열기>
1. 브라우저가 열려 있는 상태에서 F12 버튼을 누름 (크롬)
2. 우측 상단 메뉴 설정 -> 도구 더 보기 -> 개발자 도구 선택
-> 많은 메뉴 중 element: 현재 내가 펼쳐놓은 웹사이트의 소스 코드 보여줌

📖 코드 에디터

: 프로그래머가 프로그램 소스 코드를 (더 빠르고 편하게) 편집하기 위해 사용하는 소프트웨어.
코드는 결국 텍스트!
코드 에디터는 텍스트 자동 완성 + 하이라이팅 기능이 추가된 메모장이라고 생각하면 좋다.

📗 HTML 코드 기초 문법

: 한국어, 형어 등으로 사람들과 소통하기 위해 해당 언어의 문법에 맞는 표현을 사용해야하듯, HTML 언어를 목적에 맞게 사용하기 위해서는 HTML의 문법에 맞는 표현을 사용해야함
HTML의 문법은 딱 한가지, 태그(tag)만 기억하면 된다.

✏️ 태그

: HTML 코드에서 정보(콘텐츠)를 정의하는 형식

< HTML 태그 사용법 : 시작과 끝 >
: 태그는 <>과 </>기호를 사용해 콘텐츠의 시작과 끝을 표시
각 태그는 콘텐츠를 감싸며, 태그명은 콘텐츠의 성격과 의미를 나타냄
ex. <태그명>여기에 콘텐츠를 기입합니다</태그명>

단일 태그
: 경우에 따라 시작과 끝을 구분할 필요가 없는 태그도 존재함
ex. <태그명/> 또는 <태그명>
=> 단일 태그는 콘텐츠를 감쌀 필요가 업승므로 시작과 끝을 구분하지 않음
속성
: 태그의 부가적인 기능을 정의, 선택사항
시작태그의 내부에 정의, 속성의 개수에는 특별한 제한 x
ex. <태그명 속성명="속성값"> 내용이 들어감 </태그명>
<태그명 속성명="속성값"/>
=> 태그명과 속성 정의는 공백(space)로 구분하며, 큰따옴표를 사용
주석
: 사람에게는 보이지만, 컴퓨터(웹브라우저)에게는 보이지 않는 코드
주로 코드에 대한 메모를 남기기 위한 용도로 사용
총 7개의 기호를 사용해 작성 (기호를 통해 시작과 끝 구분)
ex.

실습방법

<p> Hello~~! </p>
<br><br><br><br />
<!--단일 태그의 또 다른 형태-->
<strong>Hello~!</strong>
<!-- strong과 p의 차이: 글자가 굵어짐-->
<!--br 태그는 줄과 줄 사이 공백 생김-->
<strong style="color:red;">Hello~!</strong>
<!--빨간색 속성 표시-->

<실습 결과>

📘 HTML 문서 기본 구조

: 일반적으로 HTML 문서는 다음과 같은 기본 구조를 가짐
HTML 코드를 작성할 때는 기본 문서 구조를 마련한 다음 작성

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>문서의 제목을 쓰는 곳</title>
    </head>
    <body>
        브라우저 화면에 표시할 내용을 작성하는 곳
    </body>
</html>

<!DOCTYPE html>: "이 문서가 html 최신 표준 문법으로 작성된 문서이다"라는 뜻
문서의 첫 부분에서 문서 유형을 지정하는 단일 태그 (문서 유형이란 웹 브라우저에게 '이 문서는 ㅇㅇ이니까 잘 처리해줘'라는 메시지 전달)
html은 첫 등장 후 시간이 흐르면서 버전 변경을 해왔는데, 현재 표준으로 사용되고 있는 HTML 버전을 사용하기 위해 적어주는 타입
<html> ~ </html>: html 문서의 시작과 끝, "~" 이 안에 들어가는 내용이 html 문서의 내용이 됨. 그 내용 또한 여러가지 종류의 태그로 구성이 될 수 있음. 태그 안에는 태그가 포함될 수 있음.
<html>에서부터 HTML 문서가 시작되고 </html>에서 HTML문서가 끝남. 이 태그의 내부에 다양한 태그들이 포함돼 문서의 내용을 구성
- <head></head>,<body></body>: html안에 head와 body 태그가 포함됨. 따라서 포함 관계를 나타내주기 위해 head와 body 태그 들여씀 (들여쓰기를 통해 포함관계 알 수 있음)
  head의 역할은 html 문서에 대한 정보를 나타내는 역할
1. <head>~</head>: 웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보들은 모두 이 태그에 들어감.
- <meta>: 단일태그
  => <meta charset="utf-8">: 문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 단일 태그, 문자 인코딩이란 한글을 표시하기 위해 문자 세트를 지정하는 작업으로 영문과 한글을 모두 사용하기 위해 utf-8 방식을 사용하는 것이 좋음
- <title></title>: 문서의 제목을 나타냄, 콘텐츠는 브라우저 탭에 표시
<body>~</body>: 실제 브라우저 화면에 표시될 내용을 입력하는 태그, 다음과 같은 유형의 태그들이 포함될 수 있음
- 텍스트를 표시하는 태그
- 이미지를 표시하는 태그
- 각종 사용자 인터페이스(버튼, 입력란, 드롭다운 메뉴 등)를 나타내는 태그

📕 텍스트 태그 사용 방법과 특징

문단(paragraph)
: p 태그는 문단 요소를 나타내는 태그로, 가장 많이 사용되는 텍스트 태그
하나의 p 태그는 하나의 문단을 표현한다. 문단과 문단 사이에는 공백이 있다
제목(headline)
: h 태그는 제목(표제) 요소를 나타내는 태그, 숫자와 함께 사용되며 숫자 1일 때 가장 크구ㅗ 6일 때 가장 작다
수평선
: hr 태그는 수평선을 표시하는 태그, 수평선은 주제 변경 또는 내용 구분을 위해 주로 사용됨. (단일 태그로 사용)

✏️ HTML 텍스트의 특징
: 일반적으로 엔터는 '줄바꿈'을 의미하는 입력이지만, HTML 코드에서는 이를 무시함. 또한 스페이스를 통한 공백도 한 번씩 밖에 인정되지 않음
HTML에서는 br 태그가 '줄바꿈'을 담당한다.
공백을 두 번 이상 표시하고자 할 때는  를 사용한다

실습 방법

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>문서의 제목을 쓰는 곳</title>
    </head>
    <body>
        <h1>텍스트 태그 연습</h1>
        <p>텍스트를 표시하고 있습니다.</p>
        <hr> <!--<hr/>로 사용가능-->
        <h2>작은 제목</h2>
        <p>제목의 크기가 바뀌었습니다.</p>
        <p>p 태그는 하나의 문단을 나타냅니다.</p>
        <p>따라서 하나의 p 태그는 자기만의 영역을 가집니다.

                  너무 덥다
            요즘
            너무 너무 덥다
            ㅎ하하하하
            <!-- p태그 안에는 다량의 내용의 문자가 출력하고 있지만 결국 하나의 p태그에 들어있는 내용이므로 결과로 보면 하나의 몸으로 구성-->
        </p>
        <p>스페이스와 엔터 출력하기
            <br>
            너무 덥다 
            <br><br><br>
            요즘
            너무 너무 덥다 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            ㅎ하하하하 </p>

    </body>
</html>

<실습결과>

📙 태그의 구분과 인라인 텍스트 요소

📖 태그의 구분

: 블록 레벨 요소를 만드는 태그 vs 인라인 요소를 만드는 태그

블록 레벨 요소 : 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성
인라인 요소 : 자기에게 필요한 만큼의 공간만 차지 (주변 요소에 특별한 영향을 미치지 않으므로 p태그와 같은 블록 태그의 내부에 인라인 요소를 넣어줘서 페이지 구성하는 경우도 존재)
+) strong 태그는 감싸고 있는 콘텐츠를 굵게 표시하는 태그, 인라인 요소를 만드는 태그
em 태그는 감싸고 있는 콘텐츠를 기울여 이탤릭체로 표시하는 태그, 인라인 요소를 만드는 태그
mark 태그는 감싸고 있는 콘텐츠에 형광펜 표시를 더해주는 태그, 인라인 요소를 만드는 태그

실습방법

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>문서의 제목을 쓰는 곳</title>
    </head>
    <body>
        <h1>제목을 표시하는 큰 텍스트!</h1>
        <p>문단을 나타내는 작은(?) 텍스트!
            이 태그는 블록 요소를 만들까요?
            아니면 인라인 요소를 만들까요!?
        </p> 
        <!--개발자도구에서 코드 위에 커서를 대면 영역 표시됨 -> 너비를 전부 차지함 결과적으로 h1을 비롯한 h태그와 문단을 표시하는 p태그는 모두 블록레벨요소를 만듦-->
        <strong>굵은 글자를 만들고 싶어요</strong>
        <em>기울어진 글자를 만들고 싶어요</em>
        <mark>형광색으로 칠한 글자를 만들고 싶어요</mark>
        <!--strong, em, mark공간 따로 만들어짐. 필요한 공간만 서로 차지 -->
        <br>
        <h1>제목을 표시하는 큰 텍스트!</h1>
        <p>문단을 나타내는 작은(?) 텍스트!
            <strong>태그 안에서 굵게 표시하기</strong>
            이 태그는 블록 요소를 만들까요?
            <p>블록 안에 블록을 넣으면 블록 안에 층이 생겨버려요!</p>
            <mark>p태그 안에서 밝게 표시하기</mark>
            아니면 인라인 요소를 만들까요!?
        </p>     
    </body>
</html>

<실습결과>

📗 이미지 표시하기

📖 img 태그

: 이미지를 표시할 때 사용하는 태그, 단일 태그로써 닫는 태그를 필요로 하지 않는다.
콘텐츠를 적어주는 대신 표시할 이미지에 대한 정보를 속성(여는태그 또는 단일태그에다가 부가적인 기능을 추가하는 방식 의미)으로 지정해주어야함

기본 형태) <img src="표시할이미지파일" alt="이미지설명" />

표시할 이미지 지정
: img 태그의 src 속성은 표시할 이미지의 위치정보와 파일명을 입력받는 속성이다. 즉, 이미지의 url을 입력받는다.
서버에 위치한 이미지 파일 가능, 내 컴퓨터에 저장된 이미지 파일도 가능
=> url이란 이미지ㅏㄱ 어디에 있는지 알려주기 위해 사용하는 규약(형식)이다

✏️ 이미지 설명 (alt)

: alternative의 약자로 대체 텍스트 역할을 함
이미지가 로딩되기 전이나 이미지 로딩에 실패한 경우 이미지 대신에 대체 텍스타가 표시
alt를 사용하면 이미지를 볼 수 없는 시각장애인에게 웹페이지를 서비스해야 하는 상황에 대한 대비가 가능(음성인식기가 이미지 대신 이를 활용)

이미지 크기 조절하기
: img 태그를 통해 이미지를 표시할 때는 이미지가 표시될 크기를 지정할 수 있음
이때 너비와 높이를 각각 지정할 수 있음
단위 없이 정수 값만 지정
ex. <img src="표시할이미지파일" alt="이미지설명" width="너비값" height="높이값"/>
=> 이때 너비와 높이는 각각 픽셀(px) 단위로 적용
( img 태그에 너비와 높이 값을 따로 지정하지 않는다면 원본 파일 크기 그대로 표시됨 )

실습 방법

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>이미지를 표시해보자</title>
    </head>
    <body>
        <h1>이미지를 표시해볼게요!</h1>
        <img src="images/images.png" width="300" height="300" />
        <!--이미지 유실 상태의 alt사용법-->
        <img src="images/imagesss.png" width="300" height="300" />
        alt="체세포 분열에 대한 이미지"
         <!--이미지 대신 alt나옴-->
        <p>이미지 표시에는 img 태그 </p>
    </body>
</html>

<실습결과>

📘 컨테이너 그리고 전역 속성

📖 컨테이너 태그

: 콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할을 하는 태그를 '컨테이너'라고 함
콘텐츠 내용을 구분하거나, 공통적인 스타일을 적용하고자 할 때 개발자는 컨테이너를 사용하는 것이 좋음

<div></div>: 블록 레벨 컨테이너
<span></span>: 인라인 컨테이너

실습결과

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>영역을 구분해보자</title>
    </head>
    <body>
        <h1>일단 문서를 만들자</h1>
        <hr>
        <div>
        <h2><span>공부</span> 다짐하기</h2>
        <img src="images/images.png"
        width="300"
        alt="체세포분열"   />
        <p>생명 공부를 열심히 하기로 했다!</p>
        </div>
        <hr>
        <!--hr은 표면적으로 구별, 코드적으로는 구별 x-->
        <!--div) 레이아웃이나 모양에 영향을 주지 않고 단지 영역을 묶음, 문서의 결과에는 변화 없으나 개발자 도구에서보면 영역 구분된 것을 알 수 있음 -->
        <div>
        <h2><span>운동</span> 열심히 하기</h2>
        <p>건강을 위해 운동을 열심히 하자!</p>
        </div>
        <!--span 역시 레이아웃이나 모양에 영향을 주지 않지만 단어를 묶어둔 것 확인 가능-->

    </body>
</html>

<실습결과>

📖 전역속성

: 전역 속성(Global attributes)은 모든 HTML 태그에서 공통으로 사용할 수 있는 속성
(속성이란 태그의 부가적인 기능을 정의하는 것으로 선택사항임. 속성은 시작 태그의 내부에 정의하며 속성의 개수에는 특별한 제한이 없음)

속성을 추가히는 방법 ) <태그명 속성명="속성값" 속성명-="속성값" >콘텐츠</태그명>

대표적 전역 속성

id: 요소에 고유한 이름을 부여하는 식별자 역할 속성
class: 요소를 그룹 별로 묶을 수 있는 식별자 역할 속성
style: 요소에 적용할 CSS 스타일을 선언하는 속성
title: 요소의 추가 정보를 제공하는 텍스트 속성. 사용자에게 툴팁 제공. (툴팁이란 요소에 마우스 커서를 놓았을 때 나타나는 작은 말풍선)

<!> 아이디나 클래스는 정해져있는 어떤 값 중에서 선택해서 지정하는 것이 아니라 직접 코드를 작성하는 개발자 지어주는 것

실습방법

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>영역을 구분해보자</title>
    </head>
    <body>
        <h1>일단 문서를 만들자</h1>
        <hr>
        <div id="study">
        <h2 class="title"><span>공부</span> 다짐하기</h2>
        <img src="images/images.png"
        width="300" title="체세포분열과정!""
        alt="체세포분열"   />
        <p>생명 공부를 열심히 하기로 했다!</p>
        </div>
        <hr>
        <!--hr은 표면적으로 구별, 코드적으로는 구별 x-->
        <!--div) 레이아웃이나 모양에 영향을 주지 않고 단지 영역을 묶음, 문서의 결과에는 변화 없으나 개발자 도구에서보면 영역 구분된 것을 알 수 있음 -->
        <div id="workout">
        <h2 class="title"><span>운동</span> 열심히 하기</h2>
        <p>건강을 위해 운동을 열심히 하자!</p>
        </div>
        <!--span 역시 레이아웃이나 모양에 영향을 주지 않지만 단어를 묶어둔 것 확인 가능-->
        <!--id는 고유한 식별자로 사용, 모든 태그에는 id가 추가될 수 있지만 모든 id가 서로 다른 값을 가지고 있어야함 -->
        <!--문서에는 div 2개 존재하지만 id가 study인 div이렇게 지정 가능 -->
        <!--클래스는 모든 태그에 추가될 수 있으며 여러개의 태그가 동일한 클래스 식별자 가질 수 있음-->
        <!--각각의 h2에 title이라는 클래스를 지정해둠 -> 각각의 h2는 각 영역의 제목 역할을 하므로 다 타이틀이다라고 식별자를 지정 -->
        <!--즉 클래스가 타이틀인 요소라고 하게 되면 이 두 요소 모두 선택하는 것 -->
        <!--study, title, workout 등의 식별자는 사용자 정의 값임-->
        <!--속성 이름인 title 알아보기: title 속성은 해당 요소에 대한 텍스트 부가 설명 -> 이미지 요소에다가 마우스를 대면 말풍선(툴팁) 뜸-->
        <!--툴팁은 타이틀에 의해서 만들어지는 요소-->
    </body>
</html>

<실습결과>

졀

다음 포스트

HTML part 1.

HTML&CSS

📕 HTML

📖 HTML

✏️ HTML 문서

📙 개발자 도구와 코드 에디터

📖 개발자 도구

📖 코드 에디터

📗 HTML 코드 기초 문법

✏️ 태그

실습방법

📘 HTML 문서 기본 구조

📕 텍스트 태그 사용 방법과 특징

실습 방법

📙 태그의 구분과 인라인 텍스트 요소

📖 태그의 구분

실습방법

📗 이미지 표시하기

📖 img 태그

✏️ 이미지 설명 (alt)

실습 방법

📘 컨테이너 그리고 전역 속성

📖 컨테이너 태그

실습결과

📖 전역속성

실습방법

HTML part 2.

0개의 댓글