본 포스팅은 동영상 강의의 요약 설명본으로
자세한 내용은 유튜브를 참고해주시길 바랍니다.
(유튜브 업로드 예정)
<Editor>
수많은 에디터가 존재하고 어떤 걸 사용하셔도 상관은 없지만 MS사에서 나온 visual studio code를 사용하도록 하겠습니다. Mac과 window환경 어디에서든 동작을 하기때문에 환경에 제약이 없이 사용이 가능하다는 게 장점입니다.를 다운로드할 환경이 안된다면 codepen.io사이트에서도 간단하게 연습을 할 수 있습니다.
군대와 같이 인터넷 사용이 제한된다면 메모장을 이용해서도 연습을 해 볼 수 있는데 뒤쪽 강의에서 사용하는 방법을 같이 알려드리도록 할게요.
-vscode
먼저 installer를 다운받기 위해 구글에 vscode를 검색해줍니다.
홈페이지에 들어가면 os환경에 맞게 다운로드 버튼이 보이게 되는데 다운로드를 눌러주고 설치를 쭉 진행해 줍니다.
-codepen
간단하게 연습을 해볼 수 있는 사이트로 구글에 codepen을 검색후 페이지로 들어가 줍니다.
가입을 하지 않아도 start coding버튼을 눌러 바로 연습을 해볼 수 있습니다.
-chrome
크롬은 에디터는 아니지만 웹 개발의 표준 브라우저로 자리 잡았습니다.이번 강의는 크롬을 통해 진행되므로 크롬이 설치가 안 돼있다면 크롬을 설치해주면 됩니다.
구글에 크롬을 검색 후 다운로드하여주시면 돼요!
이제 프런트엔드의 필수 요소를 하나씩 배워볼까요?
먼저 HTML에 대해서 알아보도록 하겠습니다.
<HTML>
1. Html이 뭔가요?
HyperTextMarkupLanguage의 약자로서 HyperText를 표현하기 위한 마크 업 언어입니다. 생소한 단어들이 나왔는데 하나하나 보도록 할게요.
HyperText란 사용자가 특정 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트라고 하는데 예시를 들면 구글에 검색을 했을 때 제목을 누르면 새로운 창이 열리고 해당페이지로 이동을 하게 됩니다. 이처럼 다른문서로 접근할 수 있는 문자를 hypertext라고 해요.
마크업은 마크 혹은 태그로 둘러싸인 언어를 말합니다. 어떠한 내용을 표현해줄 수 있는 태그를 의미하는데 이 태그라는 건 <>이렇게 생긴 문자를 태그라고 부릅니다. 앞으로 자주 사용하게 될 거예요.
태그는 기본적으로 <여는 태그></닫는 태그>로 구성되어있고 여는 태그와 닫는 태그 사이에 내용이 들어가게 됩니다. 태그마다 기능을 조금씩 다르고 앞으로 천천히 배워보도록 할게요. 마크 업 언어에는 HTML, XML 등이등이 있으며 구조가 동일합니다.
2. 여러 browser와 Html의 역사
HTML은 1991년에 HTML1.0 버전에 나오게 됐습니다.그 뒤 여러 버전이 추가적으로 나왔고 현재는 2007년에 나온 html5 버전을 계속 이어서 사용 중이에요. 보게 되면 제일 상단에 <! DOCTYPE html>이렇게 적어주고 시작하는데 버전을 적어주지 않으면 최신 버전을 사용한다는 뜻이 됩니다. 사실 html5 버전 외에는 사용할 일이 없기 때문에 지루한 역사에 대해서는 요정도만 하고 넘어갈게요.
브라우저라는 말을 많이 들어보셨을까요? 흔히 인터넷 익스플로러(지금은 죽어가는 중이죠…), 크롬, 파이어폭스, 사파리 등 수없이 많은 브라우저가 존재를 합니다. 브라우저는 html문서를 html문서와 그림, 멀티미디어 파일 등 웹을 기반으로 한 인터넷의 콘텐츠 검색 및 열람을 위한 응용프로그램을 의미합니다.
Html로 코드를 작성하고 작성한 코드를 네이버처럼 내용을 확인할 수 있게 봐야 할 때 사용이 되는 거죠.
이제 간략한 html이 무엇인지와 역사를 훑어봤으니 본격적으로 코드를 작성해보도록 할게요
3. Html의 기본 구조
<! DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
지금 보는 것처럼 제일 상단에는 html의 버전을 명시하고 그 하단부터 html의 시작을 의미합니다.
<html></html> => 문서의 모든 부분을 감싸주는 태그입니다.이 html태그 안에 해당 문서에 대한 모든 정보를 입력을 해줘야 정상적으로 화면에 출력이 되게 됩니다.
<head></head> => 문서의 메타데이터를 입력하고 트위터 카드, 여러 가지 정보들이 들어가는 부분인데 실제로 사용자의 눈에는 보이지 않는 정보들을 설정할 수 있는 부분이에요.
잠깐 단어정리를 하고 넘어가도록 할게요
메타데이터 -> 다른 데이터를 설명해주는 데이터를 의미합니다. 동영상 혹은 소리 문서와 같이 실제로 존재하거나 사용할 수 없는 데이터지만 실제 데이터들과 연결을 해주는 다리 역할을 하는 데이터입니다.
트위터 카드 -> 크게 오픈 그래프와 트위터 카드를 많이 사용하는데 친구에게 카카오톡으로 링크 주소를 복사해서 보내볼까요? 해당 페이지의 사진과 페이지 이름, 페이지 설명이 들어가게 됩니다. 이런 부분을 설정하는 방법이 트위터 카드와 오픈 그래프가 있는 거예요
Javascript -> 프로그래밍 언어 중 하나로 주로 html내부의 요소들을 동적으로 처리하거나 서버에 데이터 요청을 할 때도 사용이 됩니다. 예전에는 브라우저에서만 작동을 할 수 있었지만 최근 nodejs를 통해 서버를 만들 수도 있는 각광받고 있는 언어 중 하나입니다.
Css -> html 코드를 작성해보고 결과를 보면 알게 되겠지만 css가 없으면 페이지를 이쁘게 만들어 줄 수가 없습니다. 페이지에 대한 디자인을 위해 css를 사용해서 페이지를 이쁘게 꾸밀 수 있어요.
<body></body> => 눈치채셨을까요? 이 안에 작성한 모든 내용이 사용자에 눈에 보이게 됩니다. Body태그 안에 사용자에게 보여줄 모든 요소를 입력을 할 수 있습니다. 이 안에 다양한 태그를 잘 조합해서 시맨틱 하게 코드를 작성해야 나중에 css와 javascript를 추가할 때도 문제가 생기지 않습니다.
시맨틱 하다?처음 들어보는 단어일 수도 있어요. 컴퓨터가 태그를 통해 태그 안에 콘텐츠의 뜻을 이해하고 논리적 추론까지 하는 웹을 시맨틱 웹이라고 합니다. 조금 어렵죠? 간단하게 구글에 검색을 해보도록 할게요
이때 A라는 사이트는 <게시물 이름> A </게시물 이름> 이렇게 html문서에 작성을 해놓은 반면 B라는 사이트는 <???> A </???>이렇게 작성을 해놓은 거예요.그러면 사용자가 구글에 A를 검색했을 때 A사이트가 먼저 나올 수밖에 없습니다. 이밖에도 다양한 분야에서도 적용이 됩니다. 그렇기 때문에 시맨틱 하게 코드를 작성하는 게 매우 중요해요.
4. Head
Head태그에는 메타데이터가 들어간다고 설명을 했었죠? Head태그 안에 들어가는 여러 가지 태그들을 알아볼게요
1. <title></title> : 특정 사이트를 들어갈 때 브라우저 상단 탭에 나오는 이름을 정해줄 수 있는 부분입니다. <title> 네이버 </title>라고네이버</title>라고 하게 되면 해당 페이지로 들어갔을 때 네이버라고 브라우저 상단 탭에 나오게 되죠
2. <script></script> : 자바스크립트 코드를 작성하거나 파일을 가져올 수 있는 부분입니다. 자바스크립트의 경우 페이지 내에서 작성을 하기도 하지만 코드의 가독성을 고려했을 때 파일로 빼놓고 script태그를 이용해서 가져오는 형식으로 많이 사용하게 됩니다. 속성값으로는 src가 있는데 자바스크립트 파일 위치를 입력해서 가져올 수 있습니다.
3. <style></style> : css 코드를 입력할 수 있는 부분입니다. 현재 문서 내에서 디자인을 하고 싶을 때 사용할 수 있습니다.
4. <link/> : 처음으로 닫힌 태그만 사용하는 부분이 나왔네요. 태그는 일반적으로 열리는 태그와 닫히는 태그로 구성이 되어있지만 태그 사이에 들어갈 내용이 없는 경우 닫히는 태그만 사용할 수 있습니다. 또한 마지막에 /를 붙여서 단일 태그라고 해 줄 수 있지만 제거해도 동작은 똑같습니다. Link태그의 경우 css파일을 가져와야 될 경우 사용할 수 있습니다. Script태그와 마찬가지로 코드의 가독성을 생각해서 파일로 빼두고 link태그를 통해 가져오는 것이 일반적입니다. Rel속성에는 stylesheet를 적어주고 href에 css 위치를 적어주면 파일을 가져올 수 있습니다.
5. <meta /> : 페이지 내에 다양한 메타데이터를 설정할 수 있습니다. 예를들어 charset, 문자 인코딩 방식 혹은 http-equiv, name, content속성을 이용한 다양한 정보 저장을 할 수 있습니다. 앞서 언급했던 트위터 카드와 오픈 그래프를 meta태그 안에서 사용을 할 수 있습니다.
트위터 카드는 트위터를 통해 공유될 때 나오는 페이지 이미지와 설명을 보여줄 수 있고 오픈그래프는 카카오, 페이스북과 같은 sns로 공유가 될 때 나오는 이미지와 설명을 보여줍니다. 일반적으로 두 개를 모두 설정해 두니 알아두면 좋을 거예요!
A. Name : Twitter:card / Content: summary, photo, player => 트위터카드의 종류를 설정할 수 있다. Summary : 웹페이지에 대한 요약정보를 보여주는 카드, 우측에 썸네일을 보여주고 그 옆에 페이지의 제목과 요약 정보를 보여준다.
Photo : 이미지를 전체적으로 보여줌
Player 오디오혹은 비디오를 보여줌
B. Name : twitter:url / content : https://dd.com => 트위터 카드를 사용하는 url
C. Name : twitter:title / content => 카드에 나타낼 제목
D. Name : twitter:description / content : hello => 카드에 나타낼 요약 설명
E. Name : twitter:image / content : img.url => 카드에 보여줄 이미지
F. Property : og:type / content : website, video.movie => 페이지의 유형
G. Property : og:site_name / content : dd => 사이트의 이름
H. Property : og:title / content : dd => 페이지의 이름
I. Property : og:description / content : dd : 페이지의 간단한 설명
J. Property : og:image / content : img url => 대표 이미지
K. Property : og:url / content : url => 페이지 주소
6. Head 태그 에서 자주 사용되는 태그들을 알아봤습니다. Link와 script는 매우 많이 사용됩니다. 트위터카드, 오픈그래프는 만든 사이트를 실제로 서비스할 때 적용시켜두면 좋을 거예요.이제 눈에 보이는 부분에 대해서 공부를 하러 가볼까요?
5. Body
1. 이제 눈에 안 보이는 부분이 아닌 눈에 보이는 부분, 컨텐츠를 채워 넣으러 가 볼게요
Body태그 안에는 사용자들 눈에 보이는 부분을 입력할 수 있다고 했습니다. 혹시 앞선 강의에서 말했던 시맨틱 웹에 대해서 생각이 나실까요? 시맨틱하게 코드를 작성하기 위해서 꼭 필요한 태그들을 배워보도록 할게요. 태그마다 의미가 다르고 기본적인 속성들 그리고 기능이 다른 경우도 있습니다. 예전에 사용하던 태그들은 강의에 담지 않았고 최근 많이 사용되는 코드 위주로 강의를 진행하겠습니다. 예전 코드는 MDN에 들어가면 확인해 보실 수 있지만 많이 사용되지 않는 태그를 알 필요는 없다고 생각해서 강의에는 담지 않았습니다.
2. 구분
A. 먼저 구역을 나누는 태그들을 알아보도록 할게요.
구역을 나눈다는 것은 같은 카테고리의 콘텐츠끼리 묶어준다는 뜻이에요.
예를 들어서 메뉴가 있다면 메뉴에 들어가는 콘텐츠들을 묶어서 이 안에는 메뉴가 있어라고 알려줄 수 있는 태그가 있다면 나중에 코드를 수정하기 매우 편리하겠죠? 그렇기 때문에 구역을 잘 나눠주는 것이 좋습니다.
B. <header></header> : 모든 콘텐츠 중 머리 부분을 의미해요. 이 태그 안에는 내비게이션 혹은 문서의 대제목이 들어갈 수 있겠죠?
C. <footer></footer> : 제일 하단에 들어가는 콘텐츠들을 의미하는데 네이버를 들어갔을 때 페이지 제일 하단에 사업자라던가 특정 메뉴 등이 있는 부분을 푸 터라고 합니다.
D. <main></main> : 이름만 봐도 어떤 느낌인지 알 수 있겠죠? Header와 footer를 제외한 모든 콘텐츠를 묶어둘 수 있는 공간을 의미해요 그래서 크게 header, main, footer의 삼단 구조로 코드를 작성하는 게 좋아요. 어떤 페이지는 메뉴가 왼쪽에 있던데요? 하고 의문이 들 수도 있어요. Html코드를 작성할 때는 디자인에 대한 부분은 전부 베제 하고 작성을 해야 됩니다.앞으로 나올 태그들 중 기본 스타일이 있는 태그가 매우 많아요 근데 그런 디자인 적인 요소들은 css를 통해서만 바꿔줘야 되고 html은 매우 시맨틱 하게,의미적으로 잘 맞게 작성을 잘해주는 것이 중요하답니다.
E. <section></section> / <article></article> : 두가지 태그 모두 main태그 안에서 구역을 나눌 때 사용할 수 있습니다.
F. <aside></aside> : 광고가 들어갈 부분에 이 태그를 사용해 줄 수 있어요
G. <nav></nav> : 메뉴에 들어가는 내용을 묶어줄 수 있습니다.
H. <address></address> : 주소에 대한 정보를 묶어줄 때 사용합니다.
I. <div></div> : 위의 태그들에 적합한 태그가 없을 때 사용할 수 있는 태그입니다. 특정 요소를 디자인을 위해 묶어야 할 경우, 자바스크립트를 통해 제어를 하기 위해 묶어야 되는 경우 등 여러 가지 상황에서 적합한 태그가 없을 때 이 div태그로 묶어줄 수 있습니다. 물론 이 태그로 모든 요소들을 묶어도 동작은 잘 되지만 시맨틱 웹에는 적용되지 않기 때문에 위의 태그를 사용하다 묶어줄 방법이 없을 때 div태그를 사용할 것을 추천드립니다.
3. 컨텐츠
A. <h1></h1> : 페이지의 대 제목을 의미합니다. H는 headline이라는 뜻을 가지고 있는데 1~6까지 있습니다. 숫자가 높아질수록 크기가 작아지며 갖는 의미의 중요도가 낮아집니다. 일반적으로 h1태그는 하나의 html에 한 개만 존재하는 게 시맨틱 하게 작성하는 방법이며 h2~h6까지는 중복해서 사용해도 문제는 없지만 같은 뎁스를 유지해주는 게 좋습니다.
여기서 말하는 뎁스라는 것은 코드를 작성할 때 태그 안에 태그가 들어가는 경우가 매우 많습니다. 그때 들어가는 깊이를 의미해요. 후반부에 해볼 클론 코딩에서 경험해 보도록 합시다.
B. <a></a> : html의 풀네임이 기억날까요? Hypertext 이 친구의 역할을 해주는 태그가 a태그입니다.의 약자로 이 태그로 감싸진 콘텐츠를 클릭하면 연결된 url로 이동하게 됩니다. 이렇게 이동을 시켜주기 위해서는 태그 안쪽에 속성을 작성해 줘야 합니다. <a href=”url”> 이렇게 href를 통해 url을 입력해주면 클릭했을 때 해당 url로 이동하게 됩니다. 추가적으로 target이라는 속성을 추가해 이동할 url이 현재 탭에서 이동될지 새로운 탭이 열릴지를 설정할 수 있습니다. 기본값은 _self로 작성을 하지 않아도 적용되는 값으로 현재 페이지에서 이동함을 의미하며 새로운 탭에서 열고 싶을 때는 target속성을 _blank로 입력해주면 됩니다.
C. <strong></strong> : strong 하면하면 강해 보이는 이미지가 떠오르지 않나요? 이태그를 사용하면 강조의 의미를 가지게 됩니다. 기본 스타일 값도 bold로 표시가 되게끔 나와있어요.
D. <pre></pre> : 혹시 강의를 들으면서 엔터 혹은 스페이스바를 많이 입력해본 적이 있을까요? Html은 기본적으로 모든 공백을 스페이스바 한 칸으로 인식합니다. 오류나 버그가 아니에요 그런데 그런 공백들을 내가 입력한 대로 출력하고 싶어!라는 생각이 들었다면 그때 pre태그를 사용해주면 됩니다. Pre태그 안에 모든 문자는 눈에 보이는 대로 화면에 출력되게 돼요.
E. <p><p> : Paragraph의 약자로 문단을 뜻합니다.
F. <hr/> : 자주는 아니지만 간혹 쓰이는 경우가 있어요. Horizontal Rule의 약어로 문단 분리를 위해 수평선을 넣어줄 때 사용됩니다.
G. <i></i> : 아이콘을 사용할 때 사용되는 태그입니다.
H. <code></code> : 이 태그도 자주 사용하지는 않지만 만약 테크 블로그를 만들고 싶을 때는 사용하게 될 것 같아서 소개해드립니다. 프로그래밍언어를 사용한 코드를 묶어줄 때 사용됩니다.
I. <ol></ol> / <ul></ul> : 각각 ordered list, unordered list를 의미하며 순서가 있는 리스트를 표현할 때는 ol, 순서가 없는 리스트를 표현할 때는 ul을 사용해주면 됩니다.
J. <li><li> : ol태그와 ul태그의 직계 자식으로는 li태그만 올 수 있습니다. 이 태그를 통해 리스트를 생성할 수 있어요.
K. <span></span> : 컨텐츠 안에 특정 요소를 묶어야하는 경우 사용할 수 있습니다. 컨텐츠 안에 특정 문자가 의미적으로 강조되는 건 아니지만 스타일적으로 바꿔주고 싶을 때 사용할 수 있습니다.
L. <img / > / <audio /> / <video /> : 세가지 태그 모두 멀티미디어를 다룰 때 사용되는 태그로서 태그 이름과 같은 뜻을 가지고 있어요. src속성을 통해 파일을 가져올 수 있습니다. 태그별로 조금씩 다른 속성들이 있어서 알아보도록 할게요.
i. Img : alt -> 이미지의 대체 텍스트 / 이미지가 어떠한 오류 때문에 화면에 정상적으로 출력되지 않을 때 어떤 이미지인지 알려줄 대체 텍스트입니다.
ii. Audio
1. Autoplay : 브라우저에서 오디오를 사용할 준비가 완료되면 자동으로 재생한다는 뜻
2. Controls : 오디오 컨트롤 바를 화면에 보여줌(재생 정지 등)
3. Loop : 끝까지 재생이 끝나면 다시 처음부터 재생
4. Muted : 음소거를 할 수 있다.
iii. Video
1. 앞서 말한 오디오 속성을 모두 사용할 수 있으며 추가적인 기능이 있다.
2. Poster : 동영상의 썸네일 이미지 url
M. <form></form> : 로그인 또는 회원가입을 할 때 필요한 정보들을 묶어주는 태그입니다.
Action : 태그 안에 입력된 정보들을 전송할 url을 담아줍니다.
Method: post와 get으로 구분되며 서버로 데이터를 전송하는 방식을 정할 수 있다.
Form태그의 경우 프런트보다 백엔드에서 중요하게 여기는 부분이기 때문에 여기서는 깊게 다루지 않겠다.
i. <input /> : 사용자로부터 입력을 받을 수 있는 태그
A. Type
i. Checkbox
ii. Color
iii. Email
iv. File
v. Hidden
vi. Image
vii. Number
viii. Password
ix. Radio
x. Range
xi. Reset
xii. Tel
xiii. Text
xiv. url
B. value
i. Autocomplete : on/off 값을 할당해서 자동완성 여부를 넣어줄 수 있다.
ii. Autofocus : 페이지가 로드될 때 자동으로 포커싱 됨
iii. Checked : type이 checkbox, radio일 때일때 체크 속성을 줄 수 있다
iv. Disabled : 비활성화
v. Multiple : 파일의 경우 여러 파일 업로드 시,이메일일 경우, (콤마)로 구분
vi. Placeholder : 입력할 값의 힌트
vii. Readonly : 읽기 전용
viii. Value : 초기값
ii. <label><label/> : input 태그와태그와 연결해서 이름을 달아줄 수 있는 태그
iii. <button></button> : 버튼
1. Button : 버튼
2. Submit : 전송
3. Reset : 초기화
iv. <textarea></textarea> : 게시판등 긴 글을 입력받을 때 사용되는 태그
v. <select></select> : 셀렉트박스를 만들 수 있다
vi. <option></option> : 셀렉트 박스 안에 선택지를 추가할 수 있다.
vii. 폼태그에는 위에 설명한 속성 외에도 다양한 속성이 있지만 백엔드 개발자들이 사용하는 속성이므로 본 강의에서는 넘어간다
viii. 간단한 페이지 마크업 - 1
ix. 간단한 페이지 마크업 – 2
4. 공통 속성
A. 모든 태그는 id와 class를 가질 수 있다.
i. Id = 태그가 가지는 고유한 식별 값으로 문서 내에 단 하나만 존재할 수 있다. 중복으로 선언을 해도 동작은 하지만 css, javascript 등의등의 동작이 원하는 대로 작동하지 않을 것이다.
ii. Class = 스타일, 기능 등을 위해 사용할 수 있는 식별자이다. 동일한 모양의 버튼이 많이 있다면 같은 클래스를 설정해서 해당 버튼에 대한 식별자를 만들어서 스타일 정의가 가능하며 id와 다르게 중복이 가능하다.
iii. Style = css스타일을 주는 방법은 head태그에서 style태그를 열거나 link태그를 통해 css파일을 가져오거나 태그에 style속성을 통해서 줄 수 있다. 자세한 내용은 css강의에서 이어서 하겠다
iv. Data-* = 사용자 정의 속성 값이다.클래스 혹은 다른 속성 값으로 정의하거나 저장하기 어려운 값을 저장할 수 있다. Data-로 시작하며 뒤에는 이름을 지어주면 된다. 예를들어 data-user-id=’kade’ 이런식으로 정의가 가능하며 css, javascript를 통해서 접근도 가능하다.