CSS개념잡기

버튼을 만들어서 부트스트랩과 똑같이 만들고자 한다.

 

 

왼족은 부트스트랩이고 오른쪽은 부트스트랩의 CSS를 그대로 따라한 것이다.

 

여기에서 디자인 시 고려해야 할 중요한 사항 3가지가 있다. 디자인을 CSS로 하기 때문에 어렵다고 생각하지만,

 

 

 

 

버튼을 파워포인트에서 만든다고 했을 때를 상상하면 쉽게 부트스트랩을 베낄 수 있다.

 

1. Layout을 찾는다.

버튼이 글(inline)처럼 쓰일 것인지, 블록처럼(block) 쓰일 것인지 결정해야한다. 그런데 버튼의 기본 속성은 inline-block으로 결정되어있다.

 

>> 해당 Layout은 비단 버튼에만 해당하는 것이 아니다. 어떤 요소를 배치하기 전에 display : block등이나 display : flex이나 grid의 구조를 잡는다고 보면 된다.

 

기본적으로 display를 잡았다면, margin,padding으로 얼마나 떨어뜨릴 지 고려한다.

그 다음엔 text-align, vertical-align등으로 정렬자체를 결정한다. float도 추가하면 된다.

 

2. font를 결정한다.

    font-size: 1rem;

    font: 400 16px Arial;

    font-weight: 400;

    line-height: 1.5;

등이 속성으로 쓰인다. 상상이 잘 안되면 powerpoint를 생각하면 쉽다.

 

3. background를 결정한다.

 

background-color나 cover등을 결정한다.