프론트엔드 (Front-End)
: 접속하는 사용자(클라이언트, Client) 브라우저 상에서 보게 될 영역을 개발하는 부분.
- HTML(Hyper Text Markup Language)
- 구조를 정의.
- 자동차 핸들 : 스티어링 휠이 있다.깜빡이가 있다. 크락션이 있다. (정의만 한다.)
- CSS(Cascade Style Sheet)
- 구조의 생김새 설정.
- 자동차 핸들 : 스티어링 휠의 굵기, 색, 크기, 모양(둥근가, 네모난가)
- Javascript
- 구조의 동작 구현.
- 자동차 핸들 : 스티어링 휠을 돌리면 어떻게 되는가? 크락션을 누르면 어떻게 되는가?
IDE(Intergrated Development Environment) : Visual Studio Code 사용
백 엔드(Back-End)
: 서버 단에서 클라이언트가 요청(Request)한 데이터나 로직을 내부적으로 처리하는 부분.
로그인처리 / 회원가입 처리/ 게시글 작성 처리...
IDE : JetBrains Intellij Ultimate 사용
HTML
이 파일이 HTML이라는 걸 알려주기 위해서 적어줘야 한다.
!DOCTYPE html
해당 문서가 HTML문서이며, HTML 버전 5의 표준을 따른다는 선언
엄밀히 따르면 최신버전의 HTML을 따른다라는 의미이다. ( 가장 최신이 5버전 )
- 문서의 가장 위에 적는다.
자동줄변환 = alt + z
< 구조 >
태그(Tag)
: HTML 문서의 구조를 이루는 단위
- 여는 태그(Opening Tag) : 작성하는 태그의 시작. <태그이름> 형식으로 사용.
가령 <a>, <img> 등.
- 닫는 태그(Closing Tag) : 작성한 태그의 끝. 반드시 여는 태그보다 뒤에 나와야하며 쌍이 되는 여는 태그가 있어야 한다. </태그이름> 형식으로 사용.
가령 </a>, </img> 등.
- 열고 닫음 :
<a> A태그의 내용 </a>
- 자동으로 닫히는 태그(Self-Closing Tag) : 닫는 태그가 없는 태그.
<input>, <img>, <meta> 즉, </input>, </img>이나 <meta> 형식은 사용하지 않음.
HTML 기본 골격
HTML 태그 : HTML 문서의 모든 내용을 담은 태그
HEAD 태그 : 문서에 표시되진 않지만 문서의 제목, 정보(meta)내용, css내용, Javascript 내용 등을 포함하고 있다.
- HEAD 태그는 HTML 태그의 자식이며 HTML 태그는 HEAD 태그의 부모이다.
BODY 태그 : 문서에 표시될 본 내용 전체를 포함한다.
- BODY 태그는 HTML 태그의 자식이며 HTML 태그는 BODY태그의 부모이고, BODY태그는 HEAD 태그의 형제이다. 같은 부모를 가짐으로써 형제이다.
TITLE 태그 : 문서의 제목
- TITLE 태그의 부모는 HEAD 태그이고, 선조는 HTML태그이다.
반대로 봤을 때, TITLE 태그는 HTML 태그의 후손이다.
브라우저로 열게되면 제목이 나타난 것을 볼 수 있다.
부모위의 태그들은 모두 다 선조태그라고 얘기한다. (<-> 후손태그)
TITLE의 선조태그는 HTML이 될 수 있겠고 HTML에서 후손태그는 TITLE이 될 수 있겠다. HTML에서 직계존속이 아니고서야 다 남태그이다.
=> css로 넘어가게 되면 자손,부모의 개념이 중요하기 때문에 확실하게 이해하고 넘어가야한다.
META 태그 : 문서의 인코딩이나 정보를 포함하는 태그. Self-Closing 태그이다.
<meta charset="UTF8">
-
charset : 속성(Attribute) meta태그의 캐릭터셋 속성이다 라고 읽으면 된다.
meta의 타입. -
UTF8 : 속성 값(Value)
- UTF8이 바뀔 수도 있지만 99.999% 확률로 거의 고정값이다.
-
속성(Attribute) : 태그의 속성을 부여한다. 반드시 여는 태그에만 존재할 수 있음.
body안에 a 태그로 작성해보았다.
A태그 : Anchor, (단순 텍스트나 (빈도가 적다.) 링크를 걸기위해 사용한다.
< 브라우저 결과 >
<a href="https://www.naver.com">Hello</a>
이렇게 되면 우리 page에서 이동이 되기 때문에 우리 페이지가 사라진다.
href 속성 : 이동하고자 하는 페이지의 주소
- target 속성
- _self : 현재 탭에서 이동
- _blank : 새 탭에서 이동
<a href="https://www.naver.com" target="_blank">Hello</a>
< 결과 >
새 탭에서 열린다.
