소상공인 감자네

웹페이지를 CSS로 꾸미다 보면 HTML 요소들은 하나의 상자안에 들어 있다는 것을 알 수 있다.이 상자 안에 텍스트를 넣을수도 이미지를 넣을수도 있는 것이다. 패딩(padding)은 이 상자에서 상자 속의 컨텐츠(텍스트, 이미지 등)와 상자의 테두리 사이에 존재하는 안쪽 여백을 조절하는 역할을 한다.여백을 조절함으로써 시각적으로 편안한 디자인을 보여줄 수 있다. padding 사용하기1. padding 각 방향 사용padding 속성은 4가지 방향 상(top), 하(bottom), 좌(left), 우(right)로 각각 조절 할 수 있다. .top { padding-top: 20px;}.bottom { padding-bottom: 20px;}.left { padding-left: 20px;}.ri..

웹사이트를 구성하는 HTML 의 각 요소들은 보이지 않는 상자(Box) 안에 존재한다고 할 수 있다.그럼 그 상자들의 사이즈는 어떻게 조절을 할 수 있을까? 상자의 크기는 너비를 표현하는 width 와 높이를 표현하는 height 를 통해 자유롭게 조절할 수 있다.웹사이트의 기본적인 크기의 단위인 px을 통해 값을 지정해 주면 된다.div { width: 200px; height: 200px; background: red;}span { width: 100px; height: 100px; background: blue;}"> 또한 %를 사용해서 상대적 크기를 지정할 수 있다.%를 사용하게 되면 부모 요소의 크기를 기준으로 비율을 지정하게 된다.// 부모 요소의 크기를 지정.parent { w..

웹페이지를 만들려면 HTML로 구조를 만들고 CSS를 통해 레고처럼 위치를 잡고 쌓는 과정을 해야한다.잘 만들어진 웹페이지들은 바로 이 HTML 요소들을 제각각 규칙에 맞게 배치한 결과라고 할 수 있다. 그 규칙을 만들게 도와주는 CSS 속성이 바로 Display. displaydispaly 속성은 HTML 요소가 화면에 어떻게 보여지고 주변 요소들과 어떤 상호작용을 할지를 결정한다.요소 하나하나 성격을 정의한다고 보면 되는데 모든 HTML 요소들은 기본적으로 display 속성을 가지고 있다. display를 처음 만나기 위해 가장 기본적이고 대중적인 세가지 요소를 먼저 알아보자. 1. display : block;block(블록)이라는 이름 답게 이 값은 HTML요소를 하나의 커다란 벽돌 처럼 취급한..