HTML study

유요한·2022년 11월 22일
0

프론트(HTML & CSS & JS)

목록 보기
5/40

인터넷 개발자도구

● 사이트에서 f12를 눌르면 개발자 도구가 나온다.
● 여기서 HTML 공부하면서 연관된 것은 Elements다.
● Elements 현재 내가 펼쳐놓은 HTML 코드가 보인다.

코드 에디터

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

HTML

● HTML의 문법은 딱 한 가지, 태그(tag)만 기억하면 된다.
● 태그란?
	○ HTML 코드에서 정보(콘텐츠)를 정의하는 형식

HTML 태그 사용법 : 단일태그

● 태그는 <>과 </>기호를 사용해 콘텐츠의 시작과 끝을 표시한다.
  그러나 경우에 따라 시작과 끝을 구분할 필요가 없는 태그도 존재한다.
  이를 '단일태그'라 한다.
  • 단일태그 사용 형태
    <태그명/> 또는 <태그명>
    → 단일태그는 콘텐츠를 감쌀 필요가 없으므로 시작과 끝을 구분하지 않는다.
<p>Hello~~</p>
<!-- 단일태그 -->
<br><br><br><br>
<strong>Hello~!</strong>

HTML 태그 사용법 : 속성

● 속성은 태그의 부가적인 기능을 정의하는 것으로 선택사항이다.
  속성은 시작 태그의 내부에 정의한다. 속성의 개수에는 특별한 제한이 없다.
  • 속성이 추가된 태그의 예
    <태그명 속성명="속성값">내용</태그명>
    <태그명 속성명="속성값"/>
    → 태그명과 속성 정의는 공백으로 구분하며, 큰따옴표를 사용한다.
<p>Hello~~</p>
<br><br><br><br>
<!-- Hello~!가 빨강색으로 바뀌고 두꺼운 글씨로 바뀜 -->
<strong style="color:red;">Hello~!</strong>

태그 설명

● <head>~</head>
	○ 웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보들은 
      모두 이 태그에 들어간다.
      
● <meta charset="utf-8">
	○ 문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 단일 태그
    ○ 문자 인코딩이란 한글을 표시하기 위해 문자 세트를 지정하는 작업으로,
      영문과 한글을 모두 사용하기 위해 utf-8방식으로 사용하는 것이 좋다.
      
● <title>~<title>
	○ 문서의 제목을 나타낸다. 콘텐츠는 브라우저 탭에 표시된다.
    
● <body>~</body>
	○ 실제 부라우저 화면에 표시될 내용을 입력하는 태그
    ○ 여기에는 다음과 같은 유형의 태그들이 포함될 수 있다.
    	■ 텍스트를 표시하는 태그
        ■ 이미지를 표시하는 태그
        ■ 각종 사용자 인터페이스(버튼, 입력란, 드롭다운 메뉴 등)를 나타내는 태그

문단(paragraph)

 ● p 태그는 문단 요소를 나타내는 태그로써, 가장 많이 사용되는 텍스트 태그
   하나의 p 태그는 하나의 문단을 표현한다. 문단과 문단 사이에는 공백이 있다.
   
<p>안녕하세요! 이것은 문단을 표시하는 태그입니다.</p>
<p> 문단과 문단 사이에는 공백이 있습니다. 이 문단의 위쪽을 보시면 확인 가능.</p>
	출력:
    안녕하세요! 이것은 문단을 표시하는 태그입니다.
    
    문단과 문단 사이에는 공백이 있습니다. 이 문단의 위쪽을 보시면 확인 가능.

수평선

● hr 태그는 수평선을 표시하는 태그이다. 수평선은 주제 변경 또는 내용 구분을
  위해 주로 사용된다.

HTML 텍스트의 특징

● 일반적으로 엔터는 '줄바꿈'을 의미하는 입력이지만, HTML 코드에서는 이를 무시한다.
  또한 스페이스를 통한 공백도 한 번씩 밖에 인정되지 않는다.

줄바꿈 태그와 공백문자

● HTML에서는 br태그가 '줄바꿈'을 담당한다.
● 공백을 두 번 이상 표시하고자 할 때는 $nbsp;를 사용한다.

태그의 구분

● 블록 레벨 요소를 만드는 태그 vs 인라인 요소를 만드는 태그
	○ 블록 레벨 요소 :
    	자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다.

	○ 인라인 요소 :
    	자기에게 필요한 만큼의 공간만 차지한다.

텍스트를 굵게 만들자

● strong 태그는 감싸고 있는 콘텐츠를 굵게 표시하는 태그이다.
● 인라인 요소를 만드는 태그이다.

img

● img 태그는 이미지를 표시할 때 사용하는 태그이다.
● 단일 태그로써, 닫는 태그를 필요로 하지 않는다.
● 콘텐츠를 적어주는 대신 표시할 이미지에 대한 정보를 속성으로 지정해야 한다.
 기본형태
<img src="표시할이미지파일" alt="이미지설명"/>

표시할 이미지 지정

● img 태그의 src 속성은 표시할 이미지의 위치정보와 파일명을 입력받는 속성이다.
  즉, 이미지의 url을 입력받는다.
  → url이란 이미지가 어디에 있는지 알려주기 위해 사용하는 규약(형식)이다.
● 서버에 위치한 이미지 파일이어도 되고, 내 컴퓨터에 저장된 이미지 파일이어도 된다.
  • 파일에 있는 저장된 이미지 적용
	이미 로컬에 저장되어 있는 파일이 있다면 파일명을 이용하여 삽입이 가능하다.
    대신, 작업하는 웹 폴더 내에 해당 이미지 파일이 저장되어 있어야 한다. ('바탕화면', '
    카오톡받은파일' 등에 저장된 파일은 안 된다는 사실)
    코드는 다음과 같다. 
<img src="파일명.확장자">

이미지 설명(alt)의 중요성

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

이미지 크기 조절하기

● img 태그를 통해 이미지를 표시할 때는 이미지가 표시될 크기를 지정할 수 있다.
  이때 너비와 높이를 각각 지정할 수 있다. 단위 없이 정수 값만 지정한다.
  
	<img src="표시할이미지파일" alt="이미지설명"
   		width="너비값" height="높이값"/>
      → 이때 너비와 높이는 각각 픽셀(px) 단위로 적용된다.

컨테이너 태그

● 콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하게
  편하게 만드는 역할을 하는 태그를 '컨테이너'라고 한다.
● 콘텐츠 내용을 구분하거나, 공통적인 스타일을 적용하고자 할 때 개발자는 컨테이너를
  사용하는 것이 좋다.
  
● 다음 두 가지 태그가 컨테이너 역할을 담당하는 태그들이다.
	<div></div>		: 블록 레벨 컨테이너
    <span></span>	: 인라인 컨테이너

전역 속성

● 전역 속성(Global attributes)은 모든 HTML 태그에서 공통으로 사용할 수 있는
  속성이다. 속성이란 태그의 부가적인 기능을 정의하는 것으로, 선택사항이다.
  속성은 시작 태그의 내부에 정의한다. 속성의 개수는 특별한 제한이 없다.
  
	속성을 추가하는 방법 :
    	<태그명 속성명="속성값" 속성명="속성값">콘텐츠</태그명>

대표적인 전역 속성들

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

▲ 위에서 팽귄의 다짐이라는 말풍선이 나오는데 이것이 툴팁

링크

● 링크란 현재 문서에서 다른 문서로 이동할 수 있는 수단이다.

링크는 anchor

● a 태그 요소는 href 속성을 통해 다른 페이지, 전화번호, 이메일 주소와 그 외
  다른 url로 연결할 수 있는 링크(연결)를 만든다.
  인라인 요소이며, 콘텐츠는 주로 링크의 목적지를 나타낸다.

	▲ 여기서 a 태그는 인라인 요소이기 때문에 <br>로 한줄 내려줘야 한다.
      아니면 한줄로 나옴.

새 탭에서 열고 싶다.

● a 태그의 target 속성을 이용하면 새로운 문서를 열 때 현재 탭에서 열지, 
  새로운 탭에서 열지 결정할 수 있다.

							▲ target="_self"는 링크를 클릭했을 때 현재 페이지
                              target="_blank"는 링크를 클릭했을 때 새로운 페이지

연락을 해보자

● a 태그의 href에는 웹문서의 주소 뿐 아니라 전화번호나 메일 주소 등을
  지정할 수도 있다. 이 때 각 유형별로 추가되는 텍스트가 있다.

목록

● 목록은 연관 있는 항목(item)들을 나열한 것을 의미한다.
● HTML 목록은 '순서 없는 목록'과 '순서 있는 목록'으로 구분된다.

목록의 태그의 구분

● 순서 없는 목록 :
	 <ul></ul>
● 순서 있는 목록 :
	<ol></ol>

항목 태그는 같은 것을 쓴다.

● <li> 태그는 목록에 들어가는 항목 하나 하나를 표현할 때 사용하는 태그이다.
● 항목들(<li> 태그들)을 감싸는 태그가 무엇이냐에 따라 기호가 달라진다.

input

● 사용자로부터 값을 입력받을 수 있는 대화형 컨트롤 또는 필드를 나타낸다.
● 기본적으로 인라인 요소이며, 단일 태그이다.

input의 핵심, type 속성

● type의 값에 따라 입력 요소의 형태나 입력 데이터 유형 등이 달라진다.
● 사용 가능한 type은 20여 가지이며, 기본값은 text이다.

● type의 값이 달라짐에 따라 적용할 수 있는 추가 속성의 종류도 조금씩 차이를 보인다.


이름을 지어주세요

● input 태그에는 name 식별자를 추가할 수 있다.
● 이는 각각의 입력 항목에 대한 이름이다.

보기 중에 골라보자

● select는 다수의 옵션(선택지)을 포함할 수 있는 선택 메뉴이다.
● 메뉴 안에 포함되는 옵션은 option 태그를 사용해 표시한다.

이름과 값

● select는 input과 마찬가지로 name을 지정할 수 있으며, 각각의 option에는
  value 속성을 지정할 수 있다. value는 실제로 처리될 값을 나타낸다.

  					▲ name과 value를 추가한다고 해서 표면적으로 달라지는 것은 없지만
                      HTML문서를 사용한 사용자가 요소에서 무언가를 선택했을 때
                      어떤 결과물을 내는 서버 프로그램을 다룰때는 중요하다!

▲ multiple을 쓰면은 여러개를 선택할 수 있게 해주는데 여러개를 클릭하는 방법은
  Ctrl을 눌르고 클릭하면 된다.
  

▲ selected하면 기본적으로 선택이 되어 있다. 
  지금같은 경우는 고양이가 기본적으로 선택이 되어 있는 것이다.

textarea

● textarea는 여러 줄의 일반 텍스트를 입력할 수 있는 입력 요소이다.
● textarea 역시 name을 추가하여 구별해줄 수 있는 입력 요소이다.

						▲ rows는 '몇행' 즉, 행의 수를 몇개로 할 것이냐
          				  cols는 '열수' 열수라는 것은 가로 넓이를 의미한다.
          				  지금은 cols="10"이라고 적어놨는데 문자 10개'정도'
                          들어간다는 의미이다. 정확히 10개가 아닐 수 있다.
                          그 이유는 글꼴이나 문자에 따라서 넓이가 다르기 때문이다.

form을 학습하기 전에

● form은 사용자가 입력한 데이터(입력값)를 서버로 보내기 위해 사용하는 태그
  • 서버
    정보를 제공하는 호스트(host)이다!

서버와 클라이언트

● 클라이언트(사용자)가 요청을 하면, 서버는 그에 대한 응답으로 정보를 제공!

● 클라이언트가 어떤 요청을 보내는가에 따라, 응답은 달라질 수 있다.

form

● form은 입력 요소들을 감싸며, 입력 값을 서버 측으로 제출(submit)할 수 있다.

form의 내용을 제출

● form의 내용(입력값)을 제출하기 위해 input 태그의 submit 타입 사용 가능!

form의 속성

● action : 입력값을 전송할 서버의 url
● method : 클라이언트가 입력한 데이터를 어떤 식으로 전송할지(GET or POST)

GET vs POST

  • GET : 서버에 요청을 보내어 응답을 받아낸다.
    서버로부터 정보를 '가져오겠다'는 성격의 요청이다.
  • POST : 서버에 요청을 보내어 작업을 수행한다.
    서버에 있는 데이터를 추가/수정/삭제 한 후에 응답을 받아낸다.
    서버의 정보를 '조작하겠다'는 성격의 요청이다.

meta 태그

● meta 태그는 HTML 문서에 대한 메타데이터를 정의한다.
    	→ 메타데이터란 데이터에 대한 데이터 즉, '정보'를 의미한다.
● meta 태그는 항상 head 태그의 안에 들어가며, 일반적으로 문자 세트, 페이지 설명,
  키워드, 문서의 작성자 및 뷰포트 설정을 지정하는데 사용된다.

meta 태그를 사용하는 이유?

웹페이지에 대한 정보를 제공하므로 검색엔진이 페이지를 검색할 때 참고할 수 있고,
검색 결과에도 반영할 수 있다.

charset : 문자세트
http-equiv : 콘텐츠 속성 정보에 대한 http 헤더
name : 문서정보
content : 메타데이터 내용

charset

● 문자 인코딩에 대한 요약 정보를 기입하는 속성이다.
	○ 문자 인코딩 :
    	■ 한글을 표시하기 위해 문자 세트를 지정하는 작업으로, 영문과 한글을
          모두 사용하기 위해 utf-8 방식을 사용하는 것이 좋다.

http-equiv

● 콘텐츠 속성의 정보/값에 대한 HTTP 헤더를 제공한다.
  HTTP란 인테넷에서 데이터를 주고 받을 수 있는 프로토콜이다.

name

● name 속성을 이름으로 content 속성을 값으로 하여 문서 정보를 이름 + 값 쌍의
  형태로 제공할 때 사용할 수 있다.

뷰포트(viewport)

● 현재 화면에 보여지고 있는 영역을 의미한다.
● 기기 별로 뷰포트가 다르기 때문에, 동일한 웹 페이지라도 기기에 따른 배율
  조정이 발생해 화면의 크기가 다르게 보이는 현상이 나타난다.
  

							▲ 동일한 HTML 문서를 각각 PC와 모바일로 확인한 결과

왜 이런 현상이?

● 태블릿, 스마트폰 등 모바일 기기가 등장하기 전에는 웹 페이지가 컴퓨터 화면만을
  위해 설계되었다.
● 컴퓨터 화면에서의 웹 페이지는 웹 브라우저라는 소프트웨어를 통해 페이지 크기를
  조절해가며 웹을 조회할 수 있지만, 모바일 기기에서는 고정된 사이즈(스크린 크기)로
  조회해야 하므로 웹의 모든 콘텐츠를 표시하기 위해서는 배율 조정을 해야 한다.
  → 그렇기 때문에 PC용 웹 페이지와 모바일 웹 페이지를 따로 만드는 경우도 있다!

name="viewport"

● 기기 별로 뷰포트가 다르기 때문에 발생하는 배율 문제에 대응하기 위해 
  meta 태그를 통해 뷰포트 관련 설정을 추가 할 수 있다.

									→ 우측 상단에 있는 이 버튼을 눌르면
                                      모바일에서는 어떻게 보여주는지 확인 가능
                                      한글파일의 미리보기 느낌이다.

		→ 모바일에서는 이렇게 작게나온다.

→ with=device-width 디바이스가 표시하고 있는 넓이를 실제 넓이로 계산해서
  화면 조정을 하겠다.
→ initial-scale=1.0 해준다는 것은 확대나 축소 없이 그대로 해주겠다는 것이다. 

		→ 모바일에서도 글씨 변경없이 그대로 나와서 모바일버전을 따로 만들필요가 없다.
profile
유요한
발전하기 위한 공부
이전 포스트

HTML day 04

다음 포스트

HTML day 05

0개의 댓글