Mo's Develog

Semantic HTML은 문서를 보기만해도 그 의미를 짐작할 수 있는 것을 뜻한다. 과거에는 아무의미 없지만 구분하기 위해 사용하는 tag를 많이 사용하였다. 물론 지금도 많이 쓴다. 하지만 코드를 작성하면서 대부분을 div를 사용하여 구분한다면 코드를 볼 때 어떤 의미인지 알기가 힘들다. 때문에 이럴 때는 누구나 봤을 때 내용을 알 수 있게 해주는 tag인 Semantic tag를 쓰는걸 권장한다. 예시를 보자. 과거에는 위의 코드처럼 div와 id를 이용하여 구분하는 것들을 많이 사용했다고 한다. 하지만 페이지나 사이트가 커질수록 div가 떡칠되어 있어 가독성에 있어서도 불편했다고 한다. 따라서 요즘은 아래와 같이 많이 사용하는 추세이며 권장한다. 같은 내용이고 출력값 또한 같지만 누구나 봐도 내용..

tag 중 라는 tag를 한번 쯤은 본적이 있을 것이라고 생각한다. 라는 tag는 division으로 HTML에서는 특정부분을 구분하고 싶을 때 사용한다. 정리를 할 때 쓰는 서랍이나 박스라고 생각하면 좋다. 나름의 이유로 A와 B를 구분하고 싶을 때 쓰는 것이다. 예시를 보자 라고 입력한다면 결과물은 라고 표시될 것이다. 하지만 나는 둘은 반대 의미이고 붙어있기보다는 보기좋게 구분하고 싶기에 를 써보자. 결과물은 ▼ 보다시피 자동 줄바꿈이 되면서 출력이 되었다. 또 중요하게 알아야 할 것은 는 block형 tag라는 것이다. '막다'라는 의미를 가진 block의 의미처럼 자신 외에는 주변에 아무것도 올 수 없도록 막는 tag라는 것이다. 또한 위에서 는 박스라고 생각하면 좋다고 했다. 기본적으로 box..

tag는 우리가 browser에게 content의 종류와 위치 등을 알려주는 역할을 한다. tag만 있다면 그것이 끝이다. 하지만 Attribute(속성)과 함께라면 더욱 엄청난 힘을 갖게 된다. Attribute(속성)은 tag의 안에 넣으므로써 추가적인 기능들을 제공하게 된다.' 아래의 예시를 보자 tag 는 정말정말 중요한 tag중 하나인데 우리말로 닻을 뜻하는 영어 'anchor'에서 가져온것이라 한다. 이 tag는 설정해놓은 다른 페이지로 가는 기능인 링크(link)를 수행하는 tag이므로 꼭 알고 있어야한다. 아무튼 위 처럼만 입력한다면 결과물은 다음과 같다. ▲ text는 출력되었지만 링크(link)의 기능은 없는 상태이다. Why? ▼ link 기능을 가지려면 다음과 같이 입력해주어야 한다..

HTML에는 정~말 많은 tag들이 있다. 이걸 다 외운다고? 노노노 무리데스~ 개발하시는 분들중에도 다 외우면서 하시는 분들은 없을 것이다. 주요 tag들을 익숙해져서 자연스럽게 외워버리겠지만. 때문에 우리 모~두 모르는 tag, 궁금한 tag가 있다면 구글링을 하면 쉽게 찾아볼 수 있다. 오늘은 개인적으로 추천(?)하는 방법을 소개해보겠다. ▲ 구글검색창에 위와 같이 검색하고 HTML 요소 참고서에 들어가보시라 다양한 tag들이 친절한 설명과 함께 정리되어 있다. 재밌어보이는 tag들을 직접 써본다면 자연스럽게 외워지면서 쓸 수 있을 것이다. 참고로 위에서 mdn은 한번씩을 들어봤을 웹 브라우저 'Firefox'를 만든 Mozilla에서 운영하는 사이트이다. 꼭 같은 방법이 아니더라도 자신만의 검색방..

What is HTML 편에서 HTML은 뼈대이면서 browser에게 content를 알려주는 도구라고 했다. 즉, "browser야 이건 큰 제목이야"라고 알려주기 위해 우리는 'tag' 라는걸 쓴다. 맞다 그 tag, 옷에 붙어 있는 그것 이 옷이 얼마고 어떠한 재질로 되어 있는지 등 설명이 담겨 있는 tag는 HTML에서도 browser에게 설명을 해주는 도구이다. 아래의 tag 예시를 보자 ▲ 와 사이에 정보를 넣으면 browser는 '아하! 여기서부터 여기까지는 tag구나'라고 알게되는 것이다. (*실제로는 라는 tag는 존재하지 않는다. 이해를 돕기위해 만든 것이다.) 또 다른 예시를 보자 ▲ 같은 문장을 하나는 tag 사이에, 다른 하나는 그냥 입력해보면 다음과 같은 결과가 나온다. ▲ 위쪽..

제목이 곧 내용입니다. ▲ 거의 모든 Web page를 만들 때 기초적이고 기본적인 뼈대가 되는 세트(?)

자 지금부터 HTML에 대해 알아보도록 하자. HTML이란 Hypertext Markup Langauge의 약자로... HTML을 처음접하는 사람이 사전적 정의부터 보면 조금 머리가 아플 수도 있다. 나 또한 무슨말인지 싶었다. 무슨 언어라는 것 같은데... 이해를 위해 가장 많이 비유를 드는 것이 뼈대이다. Website의 뼈대를 만들기 위한 도구라는 것이다. 뼈대를 만들기위해 컴퓨터(브라우저)와 소통을 해야하는데 컴퓨터는 인간의 언어를 이해할 수 없으니 서로의 의사소통을 위해 만들어진 것이 바로 HTML이라고 생각하면 쉽다. ▼공사장을 지나가다 보면 굵직한 철근으로 뼈대만 새워놓은 모습(=HTML) ▼학창시절 과학실에 가면 꼭 있는 해골(?)들(=HTML) 위 예시처럼 우리가 늘 사용하는 네이버, 카..

현 시대를 살아가는 우리에게는 숨쉬는 것만큼 자연스러운 것이 바로 Website의 존재이다. 우리는 그 Website를 당연한듯 많이 사용은 하지만 정작 들여다 보지는 않는다. 나 또한 그랬다. 하지만 아는만큼 보인다고 했던가, 코딩을 공부한 이후로는 드래곤볼의 천진반처럼 제 3의 눈이 생긴 듯 Website를 보는 또다른 시선이 생겨버렸다. Website, 우리가 방문하는 수많은 '홈페이지'는 크게 3가지의 구성요소로 만들어 진다. 1. HTML 2. CSS 3. JavaScript 다음 게시물부터 각각의 구성요소에 관해 조금 더 자세히 알아보도록 하자.