23일차 - 프론트 엔드 HTML 문단, 태그, 속성, 컨테이너, 전역 속성, 링크, 타겟, 목록, 입력, 폼(form)

AI 솔루션 개발자과정(Java, Python) 2022. 11. 9. 12:17

웹 개발

- 프론트 엔드 : 사용자에게 보여지는 부분. ex) 네이버 다음 홈페이지

=> HTML, CSS, 자바 스크립트

- 백 엔드 : 사용자들이 이용할 수 있는 정보를 보관.관리하는 부분. ex) 데이터 서버

=> 자바, 파이썬, Golang 선택 가능

HTML

HTML은 HyperText Markup Language를 의미한다.

•HyperText : 하이퍼링크를 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트
•Markup : (콘텐츠를) 표시하다
•Language : 언어

HTML은 웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어이다.

HTML은 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어이다. 개발자는 HTML 코드로 웹페이지에 어떤 내용이 표시될지를 정의한 HTML 문서를 만든다.

완성된 HTML코드를 웹브라우저에서 로딩하면 웹페이지가 만들어진다. HTML 코드가 웹브라우저를 통해 해석되고 표현되는 과정을 렌더링이라 한다.

HTML 문서는 파일의 확장자가 html 또는 htm 이다.

파일(코드)을 수정하고 싶다면 텍스트 편집기로 열고, 결과(웹페이지)를 확인하고 싶다면 웹브라우저로 연다.

•대표적인 텍스트 편집기 : 기본 메모장, Brackets, VSCode(비주얼 스튜디오 코드) 등
•대표적인 웹브라우저 : 크롬, 파이어폭스, 사파리, 인터넷익스플로러, 엣지 등

개발자 도구

웹브라우저에는 개발자 도구가 탑재되어 있다.

개발자 도구란 웹사이트 개발용 도구로, 대부분의 최신 브라우저에는 개발자 도구가 탑재되어 있다.

HTML CSS 코드 확인, 모바일 모니터링, 네트워크 상태 점검, 스크립트 명령어 확인 등 다양한 기능을 통해 개발자에게 편의를 제공한다.

크롬은 F12 버튼을 통해 개발자 도구를 사용할 수 있다.

어느 홈페이지에서든 개발자 도구를 열면 HTML CSS코드를 확인할 수 있다.

코드 에디터

코드 에디터란 프로그래머가 프로그램 소스 코드를 편집하기 위해 사용하는 소프트웨어이다.

코드는 결국 텍스트이다. 그러나 이 텍스트를 더 빠르게, 더 편하게 작성하기 위해서는 코드 에디터를 사용하는 것이 좋다.

HTML은 언어이다.

한국어, 영어 등으로 사람들과 소통하기 위해 해당 언어의 문법에 맞는 표현을 사용해야 하듯, HTML 언어를 목적에 맞게 사용하기 위해서는 HTML의 문법에 맞는 표현을 사용해야 한다.

HTML의 문법은 딱 한 가지, 태그(tag)만 기억하면 된다.

태그란 HTML 코드에서 정보(콘텐츠)를 정의하는 형식이다.

HTML 태그 사용법

태그는 <> 과 기호를 사용해 콘텐츠의 시작과 끝을 표시한다. 각 태그는 콘텐츠를 감싸며, 태그명은 콘텐츠의 성격과 의미를 나타낸다.

index.html 이 보통 웹브라우저의 기본 페이지가 된다.

이 태그의 경우 <div> 태그로 감싸져 있다. 태그 사이에 콘텐츠를 기입한다.

태그는 <> 과 기호를 사용해 콘텐츠의 시작과 끝을 표시한다. 그러나 경우에 따라 시작과 끝을 구분할 필요가 없는 태그도 존재한다.

이를 단일 태그라 하며 단일 태그는 콘텐츠를 감쌀 필요가 없으므로 시작과 끝을 구분하지 않는다.

<hr>은 단일 태그로 웹브라우저에 가로로 긴 수평선을 한 줄 긋는다.

HTML 태그 사용법 : 속성(attributes)

속성은 태그의 부가적인 기능을 정의하는 것으로, 선택사항이다. 속성은 시작 태그의 내부에 정의한다. 속성의 개수에는 특별한 제한이 없다.

속성을 추가하기 위해서는 태그에 띄어쓰기 후 작성한다.

style 속성은 텍스트의 색을 변경한다.

HTML 태그 사용법 : 주석

주석은 사람에게는 보이지만, 컴퓨터(웹브라우저)에게는 보이지 않는 코드이다. 주로 코드에 대한 메모를 남기기 위한 용도로 사용된다.

이와 같이  사이에 들어가는 내용은 주석처리되어 아무런 영향을 주지 않는다.

HTML 문서의 구조

일반적으로 HTML문서는 다음과 같은 기본 구조를 가진다.

DOCTYPE은 문저 유형을 지정하는 단일 태그이다.

HTML은 첫 등장 후 시간이 흐르면서 버전 변경을 해왔는데, 현재 표준으로 사용 되고 있는 HTML 버전을 사용하기 위해 적어주는 타입이 바로 ‘html’이다.

특별히 오래된 문서를 수정해야 하는 경우가 아니라면 이전 버전에 대한것은 몰라도 괜찮다.

html은 들여쓰기나 줄바꿈에 관대한 편이다. 들여쓰기를 사용하지 않아도 되며 태그사이의 공백에서 줄바꿈을 하여도 된다.

다만 가독성을 위해 적절한 줄바꿈과 들여쓰기를 하여야 한다.

<html> ~ </html> 태그는 문서 유형을 지정한 후 실제 문서가 시작되고 끝나는 것을 나타내는 태그이다.

이 태그의 내부에 다양한 태그들이 포함되어 문서의 내용을 구성한다.

<head> ~ </head> 태그

웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보들은 모두 이 태그에 들어간다.

<meta charset="UTF-8"> 태그

문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 단일 태그이다.

문자 인코딩이란 한글을 표시하기 위해 문자 세트를 지정하는 작업으로, 영문과 한글을 모두 사용하기 위해 utf-8 방식을 사용하는 것이 좋다.

<title> ~ </title> 태그

문서의 제목을 나타낸다. 콘텐츠는 브라우저 탭에 표시된다.

<body> ~ </body> 태그

실제 브라우저 화면에 표시될 내용을 입력하는 태그이다.

- 텍스트를 표시하는 태그
- 이미지를 표시하는 태그
- 각종 사용자 인터페이스(버튼, 입력란, 드롭다운 메뉴 등)를 나타내는 태그

기본 문서 구조를 통해 확인했듯이, 태그 안에 태그를 포함하는 방식으로 콘텐츠를 다양하게 구성할 수 있다.

Visual Studio Code는 live server라는 확장기능이 존재한다.

이 기능은 로컬호스트에 서버를 만들어 수정하면 즉시 확인할 수 있는 기능이다.

문단(paragraph)

<p> 태그는 문단 요소를 나타내는 태그로써, 가장 많이 사용되는 텍스트 태그이다.

하나의 p 태그는 하나의 문단을 표현한다. 문단과 문단 사이에는 공백이 있다.

문단끼리는 구분이 되며 문단의 위 아래로 여백이 한 줄 추가된다.

제목(headline)

<h> 태그는 제목을 나타내는 태그이다. 숫자와 함께 사용되며, 숫자 1일 때 가장 크고 6일 때 가장 작다.

수평선

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

HTML 텍스트의 특징

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

줄바꿈 태그와 공백문자

HTML에서는 <br> 태그가 ‘줄바꿈’을 담당한다. 공백을 두 번 이상 표시하고자 할 때는   을 사용한다.

<br> 태그로 줄바꿈이 실행되고,  이 띄어쓰기를 해준다.

태그의 구분

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

블록 레벨 요소 : 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다.

<html> 태그, <h> 태그, <p> 태그 등이 여기에 속한다.

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

<strong> 태그, <em> 태그, <mark> 태그 등이 여기에 속한다.

텍스트를 굵게 만드는 <strong> 태그

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

텍스트를 이탤릭체로 쓰는 <em> 태그

<em> 태그는 감싸고 있는 콘텐츠를 기울여 이탤릭체로 표시하는 태그이다. 인라인 요소를 만드는 태그이다.

텍스트에 형광펜 표시를 하는 <mark> 태그

mark 태그는 감싸고 있는 콘텐츠에 형광펜 표시를 더해주는 태그이다. 인라인 요소를 만드는 태그이다.

이미지를 보여주는 <img> 태그

<img> 태그는 이미지를 표시할 때 사용하는 태그이다. 단일 태그로써, 닫는 태그를 필요로 하지 않는다. 콘텐츠를 적어주는 대신 표시할 이미지에 대한 정보를 속성으로 지정해주어야 한다.

표시할 이미지 지정

<img> 태그의 src 속성은 표시할 이미지의 위치정보와 파일명을 입력받는 속성이다. 즉, 이미지의 url을 입력받는다.

서버에 위치한 이미지 파일이어도 되고, 내 컴퓨터에 저장된 이미지 파일이어도 된다.

=> url이란 이미지가 어디에 있는지 알려주기 위해 사용하는 규약(형식)이다.

작성하는 문서와 같은 폴더에 있거나 더 하위폴더에 있는 상대경로의 경우에는 다음과 같이 작성할 수 있다.

상위 폴더에 있는 경우에는 ../을 사용하여 작성한다.

같은 폴더에 있는 경우는 ./을 사용한다.

이미지 파일을 절대경로로 불러올 경우에는 다음과 같이 한다.

폴더에서 대상의 경로를 복사 붙여넣기 한 후, 파일명을 입력하면 된다.

단, live server에서는 이 절대경로로 변경된 부분에 대해서는 이미지 로드가 안된다.

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

alt는 alternative의 약자로 대체 텍스트 역할을 한다. 이미지가 로딩되기 전이나 이미지 로딩에 실패한 경우 이미지 대신에 대체 텍스트가 표시된다. 이는 이미지 유실 상황에 대응할 수 있다.

alt를 사용하면 이미지를 볼 수 없는 시각장애인이나 눈이 잘 안보이시는 어르신들에게 웹페이지를 서비스해야 하는 상황에 대한 대비가 가능하다(음성인식기가 이미지 대신 이를 활용).

이는 웹사이트를 이용하는 이용자의 폭이 넓어진다.

제약사항이 있는 이용자에게도 서비스가 제공될 수있도록 하는 것이다.

이를 가리켜 웹 접근성 향상 이라 한다.

이미지 크기 조절하기

<img> 태그를 통해 이미지를 표시할 때는 이미지가 표시될 크기를 지정할 수 있다. 이때 너비와 높이를 각각 지정할 수 있다. 단위 없이 정수 값만 지정한다.

이때 너비와 높이는 각각 픽셀(px)단위로 적용된다.

또한 두 수치중 하나만 지정하면 원본비율에 맞춰서 자동으로 적용된다.

컨테이너 태그

콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관 리하기 편하게 만드는 역할을 하는 태그를 ‘컨테이너’라고 한다.

콘텐츠 내용을 구분하거나, 공통적인 스타일을 적용하고자 할 때 개발자는 컨테이너를 사용하는 것이 좋다.

다음 두 가지 태그가 컨테이너 역할을 담당하는 태그들이다.

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

전역 속성

전역 속성(Global attributes)은 모든 HTML 태그에서 공통으로 사용할 수 있는 속성이다. 속성이란 태그의 부가적인 기능을 정의하는 것으로 선택사항이다.

속성은 시작 태그의 내부에 정의한다. 속성의 개수에는 특별한 제한이 없다.

• id : 요소에 고유한 이름을 부여하는 식별자 역할 속성.
• class : 요소를 그룹 별로 묶을 수 있는 식별자 역할 속성.
• style : 요소에 적용할 CSS 스타일을 선언하는 속성.
• title : 요소의 추가 정보를 제공하는 텍스트 속성. 사용자에게 툴팁 제공.
등등 많은 전역 속성이 존재한다.

그 외의 전역 속성은 다음 사이트를 참고하면 된다.

전역 특성 - HTML: Hypertext Markup Language | MDN (mozilla.org)

id는 특정 요소에 단 하나만 지정하는 고유한 식별자이다.

동일한 id가 2개 이상 존재할 경우, 브라우저에서 검색했을 때 처음 나오는 id만 검색된다.

id는 자바 스크립트를 통한 동작의 정의에 많이 사용된다.

class는 동일한 이름을 여러번 사용할 수 있고, 한 class에 둘 이상 존재할 수 있다.

class는 CSS를 통한 스타일의 정의에 많이 사용된다.

style은 사용할 요소에 CSS 스타일을 선언하는 속성이다.

title 속성은 마우스를 텍스트에 올렸을 때 툴팁(말풍선)을 출력해주는 속성이다.

다른 문서로 이동하는 링크 (anchor)

<a> 태그 요소는 href 속성을 통해 다른 페이지, 전화번호, 이메일 주소와 그 외 다른 url로 연결할 수 있는 링크(연결)를 만든다.

인라인 요소이며, 콘텐츠는 주로 링크의 목적지를 나타낸다.

텍스트에 하이퍼링크를 통하여 원하는 url으로 이동할 수 있게 된다.

새로운 문서를 새 탭에서 열게 해주는 타겟 (target)

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

타겟의 기본값은 현재 탭에서 여는 _self이다.

타겟을 _blank로 설정하면 새로운 탭에서 열 수 있다.

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

연관 있는 항목 나열하기

목록은 연관 있는 항목(item)들을 나열한 것을 의미한다.

HTML 목록은 ‘순서 없는 목록’과 ‘순서 있는 목록’으로 구분된다.

순서 없는 목록이란 단순히 문자와 기호를 이용하여 리스트를 나열한 것이다.

* 서울
* 경기
* 제주

순서 있는 목록이란 1,2,3 등으로 순서를 정하여 나열한 목록이다.

1.파이썬
2.자바
3.HTML

알파벳이나 로마숫자 등으로도 표현 가능하다.

목록 태그 구분

순서 없는 목록은 <ul> </ul>으로 구분하고,

순서 있는 목록은 <ol> </ol>으로 구분한다.

항목 태그

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

<li>태그는 목록에 들어가는 항목 하나 하나를 표현할 때 사용하는 태그이다.

항목들(<li>태그들)을 감싸는 태그가 무엇이냐에 따라 기호가 달라진다.

circle

square 등

항목 표시 기호를 변경할 때는 CSS 코드를 사용한다.

순서 표시 기호는 type 속성으로 변경 가능하다.

목록의 중첩

목록에 목록을 추가하여 중첩할 수 있다.

입력 <input> 태그

입력 태그는 렌더링 이후의 결과물에다가 내용을 새롭게 기입할 수 있는 태그이다.

사용자로부터 값을 입력받을수 있는 대화형 컨트롤(또는 ‘필드’)을 나타낸다.

기본적으로 인라인 요소이며, 단일 태그이다.

<input>의 핵심, type 속성

type의 값에 따라 입력 요소의 형태나 입력 데이터 유형 등이 달라진다.

사용 가능한 type은 20여 가지이며, 기본값은 text이다.

value는 모든 입력 요소에 대해 '입력값'을 뜻하는 역할을 한다.
text는 문자열을 입력한다.
passward는 입력값을 블라인드처리한다.
radio는 체크할 수 있는 기호를 만들어준다.
checkbox도 체크할 수 있는 기호를 만든다.

이름을 붙이는 name

input 태그에는 name 식별자를 추가할 수 있다. name은 입력 요소용 식별자이다.

이는 각각의 입력 항목에 대한 이름이다.

radio와 checkbox 속성에 name을 붙이면 하나의 문제가 되고, 각 요소들은 선택지가 된다.

특징으로는 radio는 하나의 버튼만 선택 가능하다.

하지만 checkbox는 중복 선택 가능하다.

<label> 과 </label> 으로 문장을 감싼다면 텍스트를 클릭해도 체크박스를 체크할 수 있다.

input 외 입력 요소들

옵션(선택지)를 추가하는 select

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

이름과 값(name, value)

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

각각의 option에는 value를 지정하여 추후 처리를 준비한다.

(자바스크립트를 통한 입력 값 처리에 value가 사용될 수 있다)

textarea

textarea는 여러 줄의 일반 텍스트를 입력할 수 있는 입력 요소이다.

textarea 역시 name을 추가하여 구별해줄 수 있는 입력 요소이다.

양식을 만들어주는 form 태그

form은 사용자가 입력한 데이터(입력값)를 서버로 보내기 위해 사용하는 태그이다.

서버란, 정보를 제공하는 호스트(host)이다.

서버와 클라이언트

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

1 클라이언트가 인터넷 주소창에 네이버홈페이지 주소를 입력하면 서버에 요청이 간다. 2 서버에서 홈페이지html문서를 보내준다.(요청에 대한 응답으로 네이버 웹페이지를 보내준다.)

3 웹브라우저에 홈페이지가 뜬다.

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

로그인창에서 정보를 입력 후 로그인버튼을 눌렀을 때, 입력값이 맞다면 로그인이 될것이고,

입력값이 다르면 비밀번호가 틀리다는 경고가 뜬다.

form

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

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

form의 속성

action은 입력값을 전송할 서버의 url을 지정하는 속성이다. 아무 값을 입력하지 않을 때 '#'을 임시로 넣는다.

method는 클라이언트가 입력한 데이터를 어떤 식으로 전송할지(GET or POST)지정하는 속성이다.

onsummit은 summit이 반환되지않고 종료되도록 하는 속성이다.

GET 과 POST

GET : 서버에 요청을 보내어 응답을 받아낸다. 서버로부터 정보를 ‘가져오겠다’는 성격의 요청이다.

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

'AI 솔루션 개발자과정(Java, Python)' 카테고리의 다른 글

25일차 - CSS / flexbox, 선택자, 의사 클래스, 의사 요소, 상속과 공용 키워드, z-index, %와 미디어 쿼리, 변형과 전환, 애니메이션 (0)	2022.11.11
24일차 - HTML 마무리(뷰포트, 시맨틱 태그, 미디어 태그), CSS 선택자, 텍스트 관련 속성, 박스 모델, 부동 요소 (0)	2022.11.10
22일차 - 문자 스트림, 파일 시스템, NIO, 쓰레드 (0)	2022.11.08
21일차 - 스트림, 시간과 날짜에 관련된 클래스, 파일 입출력(I/O) 모델과 스트림, 파일입출력 필터 스트림과 버퍼링 기능. (0)	2022.11.07
20일차 - 람다와 함수형 인터페이스, 메소드 참조, Optional 클래스, 스트림 (0)	2022.11.04

ABOUT ME