전체 글 279

block형과 inline형 tag

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

Website/HTML 2022.02.05

About id=""

tag와 함께 활용하면 강력한 기능을 나타낼 수 있는 attribute 중 'id'에 대해 알아보자 id는 여러 중요한 attribute 중 하나이다. 웹 페이지를 꾸미는 도구인 CSS를 사용할 때 많이 사용하기 때문이다. id는 안에 어떠한 tag에도 넣을 수 있는 Global attribute이다. 어떠한 tag에도 넣을 수 있는 이유는 id가 unique identifier(고유식별자)이기 때문이다. 쉽게 말해 '유일하다' 인 것. 만약 내가 어떠한 tag안에 id="monday" 라고 사용을 했으면 다른 어떠한 tag에서도 똑같은 id를 쓸 수 없다는 것이다. 엄밀히 말해 쓸 수는 있지만(=browser가 error를 내지 않겠지만) brower와 약속된 것이 아니기 때문에 원하는 결과값이 도출되..

Website/CSS 2022.02.05

Tag Attributes

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

Website/HTML 2022.02.05

HTML 태그를 찾는 방법

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

Website/HTML 2022.02.04

HTML Tag

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

Website/HTML 2022.02.04

What is CSS?

https://mozzang.tistory.com/3 (HTML이란?)을 먼저 보고 오길 바랍니다. CSS : Cascading Style Sheet ??? 단어의 뜻을봐서는 감이 잘 안올 것이다. 자, 쉽게 말해보자면 CSS는 browser에게 웹사이트의 그 content가 어떻게 보여야하는지에 대해 알려주는 도구이다. 예를들면, HTML은 "browser야 이건 title이야" 라고 한다면 CSS는 "browser야 그 title은 녹색이어야 해" 라고 하는 것이다. HTML은 "browser야 이건 사진(이미지)이야" 라고 한다면 CSS는 "browser야 그 사진(이미지)는 가로 25px, 세로 100px 이어야해" 라고 하는 것이다. HTML은 "browser야 이건 link(하이퍼링크)야" 라..

Website/CSS 2022.02.03

What is HTML?

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

Website/HTML 2022.02.03

What makes a Website?

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

Website/HTML 2022.02.03