css 박스 만들기, border 기본과 속성값 정리.

페이지는 기본적으로 영역으로 나뉘어 있습니다. 대표적으로 영역을 구분하는 태그는 <div>태그를 이용하게 됩니다. 여기서 배치를 통해 원하는 위치의 레이아웃을 형성하게 됩니다. 이렇게 구성되는 영역은 기본적으로 사각형으로 이루어져 있으며, 해당 영역을 꾸며줄 수 있는 box모델의 대표적인 css는 border를 이용해 표시하는 방법입니다.

 

간단하게 살펴보는 css box 만들기 입니다. 기본부터 적용 방법, 그리고 지정할 수 있는 속성값들에 대해서 살펴보겠습니다. 티스토리 블로그에도 적용할 수 있는데, 적당한 디자인 요소를 가미한다면 멋진 스킨으로 커스튬이 가능할 것이라 생각이 드네요.

 

 

css box 만들기, 기본.

border를 활용한 box 꾸미기.

css를 태그에 적용하는 방법은 크게 3가지로 구분할 수 있습니다. 인라인 스타일을 사용하는 방법, 내부 스타일을 지정하는 방법, 외부 스타일 시트를 이용하는 방법이 있습니다. 티스토리의 경우라면 외부 스타일 시트를 이용하는 방법을 활용하는 것이 좋습니다.

 

• 티스토리 외부 스타일 시트란, 스킨 편집에 있는 css 편집창을 의미합니다. 이미 연결되어 있는 스타일 시트를 온라인으로 편집할 수 있게 해주는 기능이죠. 생각보다 편리합니다. 태그를 찾아 적용해주시면 됩니다.
• css는 인라인 스타일 지정이 아니라면 [선택자]가 필요합니다. 어떤 태그에 적용할 것인지 지정해주는 역할을 하며, 수많은 태그에서 원하는 태그를 찾아가는 길잡이가 되어 줍니다.

 

border css

css의 다양한 명령어 중 border은 특정 영역의 테두리를 만드는 역할을 합니다. 하나의 영역은 페이지에서 기본적으로 사각형을 이루고 있습니다. 이렇게 이루어진 사각형에 테두리를 표시하는 것으로 box가 만들어지게 됩니다. 여기서 다양한 디자인 속성값을 적용하면, 원하는 모양의 css box를 만들 수 있습니다.

 

• border 기본 설정.

border: 1px solid black;

우선 가장 기본이 되는 것은 위의 코드입니다. 티스토리 기본 코드 블럭은 테두리가 없죠. 인라인 스타일 지정으로 스타일을 넣었습니다. 위 코드 블럭의 검은색 테두리가 그것입니다. 

 

• 몇가지의 선 종류를 살펴볼게요.

See the Pen Untitled by copens (@copens) on CodePen.

위에는 선 종류를 지정한 경우입니다. 간단하게 4가지를 살펴봤습니다. 이보다 더 많은 선 종류가 있습니다. 필요에 따라 선택적으로 사용할 수 있겠죠. 

 

•  border 선 종류
  • solid
  • dotted
  • dashed
  • double
  • outset
  • inset
  • groove
  • ridge
• 각각을 적용하시면서 감을 익혀보는 것이 도움이 될 것입니다.

 

border 관련 꾸미기.

위에서 기본적으로 활용할 수 있는 박스 테두리를 살펴봤습니다. 아주 과거에는 박스모양만으로 스타일을 마무리하곤 했습니다. 그런 웹페이지를 자주보곤 했죠. 컴퓨터 속도와 인터넷 속도를 고려한 조치가 아닐까 생각합니다. 지금은 웬많나 디자인요소를 많이 넣어도 크게 느리지 않습니다. 그만큼 빠른 인터넷 환경에서 사용하고 있다는 뜻이죠. 한국의 경우 가장 대표적인 빠른 인터넷 환경이라고 합니다.

 

대략적으로 꾸미기 전 구체적으로 생각을 해봅시다. 어떤 모습으로 꾸미면 좋을까요. 그래야 그에 맞는 요소를 빠르게 찾을 수 있습니다. 박스모습이니까, 배경도 있으면 좋겠습니다. 테두리 색도 바꾸고 싶고요. 조금더 모나지 않는 부드러운 테두리면 좋겠습니다. 또, 그림자도 있으면 좋겠죠.

 

위에서 언급한 기능들을 모두 사용할 수 있습니다.

• 박스 테두리 굵기 : 위에서 보여드린 코드에서 px값을 늘리면 됩니다.
  • ex : {border: 100px solid black;}
• 박스 테두리 색 변경 : 선 굵기, 종류 다음 색상입니다. 색상값을 변경할 수 있습니다. rgb, rgba, 색 명칭등의 방법을 사용할 수 있습니다.
  • ex : {border: 1px solid blue;} 
• 박스 테두리 둥글게 만들기: 이 부분은 새로운 명령어를 추가합니다.
  • border-radius
  • ex: {border-radius: 10px;}
  • 당연하지만, 테두리가 지정되어야 둥글게 정도가 보입니다. border를 지정하지 않으면 아무것도 보이지 않아요. 이 당연한 이야기를 언급하는 이유는, 제가 처음에 그랬습니다. '왜 적용이 안되냐면서..' 멍청하지만 그랬습니다.
• 박스 그림자 넣기 : 새로운 명령어를 추가합니다.
  • box-shadow
  • ex : {box-shadow: 10xp, 10px, 10px;}
  • 3개의 속정 지정값이 존재합니다. 앞에 2개는 방향이며, 마지막은 투명도, 다시 말해 퍼진 정도를 의미합니다. 조절하면서 적용하시면 멋진 box를 만들수 있겠죠.

css box에 관련해서 이정도만으로도 충분히 멋진 영역을 만들어 낼 수 있습니다. 여기에 background-color, background-img등의 명령어와 애니메이션, 미디어, hover, after, before등의 요소를 더 추가하시면 역동적인 모습을 보실 수 있습니다. 간단하게 hover만 살펴볼게요.

 

See the Pen border hover by copens (@copens) on CodePen.

- 마우스를 올려보시면 테두리 색이 변화하는 것을 보실 수 있습니다. 페이지에서 가장 많이 쓰는 동작이기도 하지 않을까요. 대표적으로 a태그 혹은 버튼 형식에서 주로 사용됩니다. 응용하기 나름이니까 어디든 적용해서 사용할 수 있습니다. 단지, 사이트 성능에 영향이 있을 수 있습니다.

 

마지막, 티스토리 블로그에 적용하기.

이제 사이트 혹은 티스토리 블로그에 적용하는 방법을 간략하게 소개합니다. 간략하기 때문에 순서만 알려드릴게요.

1. 지정하고자 하는 요소의 태그 혹은 id, class를 찾습니다.
   • tips! : 개발자 도구를 이용하세요. 거의 모든 브라우저에서 지원합니다. f12 단축키를 눌러보면 해당 페이지의 html을 볼 수 있습니다. 여기서 찾으시면 됩니다.
2. 블로그 관리자 모드에서 스킨편집 메뉴 중 css 편집기로 접근합니다.
3. 선택자를 지정하고 css를 입력합니다.
   • 규칙에 맞춰 입력한 후, 새로고침 혹은 블로그 페이지를 띄워서 잘 적용이 되었는지 확인할 수 있습니다.
   • tips! : 만약 적용이 안되었다면 css 순서에서 밀렸을 수 있습니다. 이런 경우 html을 통해 id, class를 지정해 주거나, 부모태그를 이용할 수 있습니다. 또는 밀리게 한 css를 찾아 수정할 수 있습니다.

 

마치며.

디자인의 끝은 없다고 생각합니다. 마음에 들어 수정해도, 다시 마음에 드는 부분들이 생기고, 수정 보완을 반복할 수 있습니다. 이유야 어찌됐든 원하는 모습이어야 하겠죠. 그럴 때 시간을 단축하기 위해서는 관련 지식을 알아두는 것이 도움이 되는 것 같습니다. 개인적인 경험이었습니다.