Mo's Develog

Padding은 Margin과 반대방향의 속성이다. Padding이란? box의 경계로부터 '안쪽'에 있는 공간이다. Padding 적용 전과 적용 후 예시를 각각 보자. 이제 Padding을 적용해보면 ▲위와 같이 body에 Padding값을 주니까 body의 border(경계)를 기준으로 안쪽으로 공간이 생긴 것을 볼 수 있다. padding값을 좀 더 세밀하게 조정하고 싶을 때는 아래와 같은 방법을 사용하면 된다.

앞서 살펴본 block형과 inline형의 내용에서 는 block형이라고 하였다. 그리고 는 box형이다. 즉 box는 기본적으로 block의 속성을 가지고 있다. 는 아무의미 없지만 구분하기 위해 우리가 사용하는 박스 또는 서랍과 같은 존재이다. 이런 box는 정말 중요하고 재미있는 속성을 가지고 있다. 바로 Margin, Border 그리고 Padding이라는 속성이다. ▲ CSS에서 박스 모델(Box model)은 정말 정말 중요하다. 이번글에서는 Margin에 대해 적어본다. Margin이란? Box(박스)의 Border(경계)의 바깥에 있는 공간이다. ▼ 아래과 같이 에 크기 값을 주고 box형 모델을 만들어 보자. ▼ 출력된 값은 다음과 같다. 보시다시피 주황색 box()와 녹색의 html사이..

HTML에서 사용하는 tag들의 속성에는 block과 inline 속성이 있다. block 속성을 가진 tag들은 자신의 옆에 다른 누구도 올 수 없도록, 말그대로 'block=막다' 의 의미를 가진 tag이고 inline 속성을 가진 tag들은 자신의 옆에 다른 tag들도 위치할 수 있는, 'in the same line=같은줄에' 라는 의미의 tag이다. 예시를 보자. ▲ 다음과 같이 입력하면 출력값은 아래와 같이 나온다. 모두 다른 줄에 입력을 했지만 에 해당하는 내용은 옆에 다른 누가 오는 것을 허용하지 않았다. 하지만 에 해당하는 내용은 나란이 출력된 것을 볼 수 있다. 는 box형, 즉 기본적으로 block의 속성을 가진 tag이고, 은 기본적으로 inline 속성을 가졌기 때문이다. 해당페이..

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

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

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

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를 만들 때 기초적이고 기본적인 뼈대가 되는 세트(?)