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 속성을 가졌기 때문이다. 해당페이..

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

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(하이퍼링크)야" 라..