⁂ HTML/: 기본 익히기

[HTML] #5 Meta 태그 알아보기

1. meta 태그가 뭐야? meta태그는 meta data에 대한 태그이다. meta data란, 웹페이지가 담고 있는 컨텐츠가 아닌 웹페이지 자체의 정보를 뜻한다. 이 meta 태그가 중요한 이유는 웹페이지의 정보를 알리는 것도 있지만 웹페이지의 요약이 되어주기도 하기 때문이다. 최근 들어 검색 엔진 마케팅(Search Engine Marketing)의 중요성이 끊임없이 상승하고 있기에, 웹페이지가 검색이 되는 첫 얼굴인 메타 태그(Meta TAG)는 더더욱 중요해지는 것이다. 그 중에서도 meta 태그 중 기본으로 들어가는 정보들을 알아보려한다. 이 내용은 W3Schools에도 올라가있으니 아래의 사이트를 참조해보아도 좋다. https://www.w3schools.com/tags/tag_meta.a..

[HTML] #4 서버에 대한 이해

1. 서버에서 보내주는 편지, HTML 서버(Server)란 어떠한 요청이 들어왔을 때 그 요청에 대한 응답을 줄 수 있는 것을 말한다. 네이버라는 사이트를 생각해보자. 하루에도 얼마나 많은 불특정 다수의 사람들이 네이버 사이트를 통해 다양한 요청을 넣을까. 서버는 이 요청들에 대해 응답을 준다. 그 때 응답을 어떻게 줄까? 바로 HTML 문서로 응답을 주는 것이다. 우리가 웹사이트를 연다면, 열어달라는 요청에 의해 서버가 요청에 맞는 사이트의 HTML 문서를 하나 열어준다는 뜻이다. 내가 열고 있는 사이트의 소스가 궁금할 때 볼 수 있는 방법이 있을까? 사이트의 빈 화면(마우스가 변하지 않는)에서 오른쪽 마우스 클릭을 하면 '페이지 소스 보기'라는 항목이 있다. 이것을 눌러보면 무수히 많은 코드들이 나..

[HTML] #3-3 시맨틱 요소(semantic element) 알아보기

1. 고정화 된 시멘틱 요소 이전 게시글(#3-1)에서도 언급했듯 개발자들이 웹페이지를 만들 때 사용하는 코드들은 대체적으로 유사하다. 그렇기에 그런 코드들을 하나로 묶어 하나의 코드화 시키는 과정들이 진행되며 새로운 요소들이 만들어졌다. 이를 시멘틱 요소, 라고 부른다. 시멘틱, 시멘틱. 고정되었다는 뜻이라고 하길래 공사장에서 흔히 쓰는 결합제인 시멘트(cement)인 줄 알았는데 전혀 아니다. (농담따먹기가 아니라, 진담이다 ㅎ) 시멘틱(semantic)은 '의미'라는 뜻이다. 즉 태그의 이름의 의미만으로도 그 용도를 짐작할 수 있는 태그라는 뜻이다. 우리는 이 전 게시물에서 헤더 부분을 만들 때 를 사용해서 블럭을 잡아주는 여러 코드를 입력해야했지만 코드 하나만으로 그 작업들을 모두 해준다는 의미다..

[HTML] #3-2 블럭(block!) 2 : 웹사이트 따라 만들어보기

1. Block, 사실 안쓰는 곳이 없다. 인터넷 사이트를 처음 열면 등장하는 인트로 화면을 떠올려보자(초록창이라등가, 구구리라등가). 이 화면은 구조보다는 디자인적 요소가 굉장히 강조되는 화면이다. 하지만 메뉴를 누르거나, 페이지를 살펴보다보면 비슷한 흐름과 비슷한 구조를 가진 화면이 반복되는 것을 발견할 수 있다. 이런 부분들을 뜯어보면 블록 요소가 안쓰인 곳이 없다. 이제 이 블록 요소를 활용해서 페이지를 만들어보려한다. 먼저 아래의 사이트를 참고해보자. https://www.w3schools.com/html/html_layout.asp HTML Layout Elements and Techniques W3Schools offers free online tutorials, references and ..

[HTML] #3-1 블럭(block!) 1 : 블럭이 뭐야?

1. 블럭, 블럭? 우린 결국 HTML에 문서를 작성하는 것이다. 그리고 블럭은 마우스로 드래그를 했을 때 글자들에 표시가 되는 것을 말한다. 이렇게! (지금은 글자색과 배경으로 만들었다). HTML에서의 블럭도 마찬가지다. 하지만 이것은 일반 문서가 아니기 때문에 내가 블럭을 주고 싶은 부분을 미리 구획해놓는 작업들이 필요하다. 그리고 CSS에서 작업을 할 때 블럭 단위로 작업을 할 수 있다. 그래서 블럭을 만들고, 블럭에게 이름을 준 뒤 그 이름으로 작업을 한다. (HTML 문서의 레이아웃을 잡는 것으로 이해해도 된다) HTML에서는 여는 태그와 닫는 태그가 존재하는 명령어들은 모두 블럭으로 묶어서 처리할 수 있다. 그리고 블럭 요소는 자신이 감싸는 내용과는 상관없이 자신의 영역을 가지고 있다. 물론..

[HTML] #2-4 HTML 파헤치기 4 : 폼의 속성

1. 폼의 속성들 결국 폼을 제대로 사용하려면 Backend단과의 연결이 필수적이다. 왜냐하면 버튼을 눌러도 무언가와 연동이 되지 않으면 빈 껍데기에 불과하기 때문이다. 그래서 우선 action! 이라는 요소를 사용해보려 한다. 이 action은 말 그대로 액션! 이다. 백앤드단과 연동시켜주는 것이다. 아이디: 비밀번호: 출력 결과는 아래와 같다. 아이디: 비밀번호: 이렇게 사용자가 아이디와 비밀번호를 누르고 전송을 누르는 액션을 하면 응답이 돌아와야 한다. 로그인 성공이라던가, 실패라던가, 다음 창으로 넘어간다거나. 이 요청과 응답, 그 안에서 벌어지는 모든 과정이 바로 서버라는 하나의 개념 안에서 이루어지는 것이다. (지금은 서버에 대한 이 정도의 개념만 잡아도 좋을 것 같다.) 폼의 속성을 만들어주..