CSS Border 직선부터 양각 테두리까지 예제와 살펴보기

CSS Border 테두리 속성은 어떤 기능이 있을까요? 테두리 선 종류, 두께, 색, 양 사이드의 곡률 조정까지 가능합니다. 개별로 지정하거나 상하좌우를 한 번에 변경할 수도 있습니다.

CSS border 테두리 선 종류

CSS border 스타일은 테두리 설정을 말합니다. border-style 속성명과 속성값은 아래 종류를 조합해서 사용합니다. CSS에서 테두리 영역이란 아래 그림의 부분을 말합니다.

CSS-Border

직선 테두리

border-style:solid;
<!DOCTYPE hyml>
<html>
  <head>
    <style>
      h2{
        border-style:solid;
      }
    </style>
  </head>
  <body>
    <h2>직선 테두리 solid</h2>
  </body>
</html>

마침표 점선 테두리

border-style:dotted;
<!DOCTYPE html>
<html>
  <head>
    <style>
      h2{
        border-style:dotted;
      }
    </style>
  </head>
  <body>
    <h2>마침표형 점선 테두리 dotted</h2>
  </body>
</html>

막대형 점선 테두리

border-style:dashed;
<!DOCTYPE html>
<html>
  <head>
    <style>
      h2{
        border-style:dashed;
      }
    </style>
  </head>
  <body>
    <h2>막대형 점선 테두리 dashed</h2>
  </body>
</html>

이중 테두리

border-style:double;
<!DOCTYPE html>
<html>
  <head>
    <style>
      h2{
        border-style:double;
      }
    </style>
  </head>
  <body>
    <h2>이중 테두리 double</h2>
  </body>
</html>

음각 테두리

border-style:groove;

음각이란 조각에서 판을 파내서 사물을 표현하는 방법입니다. grooved는 홈을 파낸이라는 의미를 가지고 있습니다.

아래 예시에서 테두리에 빨간색(border-color)을 주고, 테두리 두께(border-width)를 좀 늘리고 groove와 일반 solid 테두리를 비교해보면 차이를 알 수 있습니다. 위에는 테두리를 마치 조각도로 파낸것 처럼 효과를 준 것입니다.

잘 보면 끝에 검은색 그림자 같은 것이 보이면서 입체로 보입니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2.x{
        border-style:groove;
        border-color:red;
        border-width:5px;
      }
      h2.y{
        border-style:solid;
        border-color:red;
        border-width:5px;
      }
    </style>
  </head>
  <body>
    <h2 class="x">음각 테두리 groove</h2>
    <h2 class="y">일반 테두리 solid</h2>
  </body>
</html>

양각 테두리

border-style:ridge;

양각이란 음각과 반대로 표현하는 대상을 제외하고 나머지 부분을 파낸 효과입니다. 그래서 목표 부분만 솟아있습니다.

ridge는 산등성이라는 의미입니다. 그래서 산등성이 처럼 테두리 부분만 융기해 있는 모습입니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2.z{
        border-style:ridge;
        border-color:red;
        border-width:5px;
      }
      h2.x{
        border-style:groove;
        border-color:red;
        border-width:5px;
      }
      h2.y{
        border-style:solid;
        border-color:red;
        border-width:5px;
      }
    </style>
  </head>
  <body>
    <h2 class="z">양각 테두리 ridge</h2>
    <h2 class="x">음각 테두리 groove</h2>
    <h2 class="y">일반 테두리 solid</h2>
  </body>
</html>

측면 음각 테두리

bordert-style:inset

테두리는 음각을 좀 더 측면에서 구현한 모습인 것 같습니다. 그래서 음각 효과가 더 두드러집니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2.k{
        border-style:inset;
        border-color:red;
        border-width:5px;
      }
      h2.x{
        border-style:groove;
        border-color:red;
        border-width:5px;
      }
    </style>
  </head>
  <body>
    <h2 class="k">측면 음각 테두리 inset</h2>
    <h2 class="x">음각 테두리 groove</h2> </body>
</html>

측면 양각 테두리

border-style:outset;

테두리는 양각을 좀 더 기울여서 표현합니다. 그래서 ridge 양각 테두리 보다 입체감이 큽니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2.n{
        border-style:outset;
        border-color:red;
        border-width:5px;
      }
      h2.y{
        border-style:ridge;
        border-color:red;
        border-width:5px;
      }
    </style>
  </head>
  <body>
    <h2 class="n">측면 양각 테두리 outset</h2>
    <h2 class="y">양각 테두리 ridge</h2>
  </body>
</html>

테두리 삭제

border-style:none;

테두리 없음을 나타냅니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2{
        border-style:none;
      }
    </style>
  </head>
  <body>
    <h2>테두리 없음 none</h2>
  </body>
</html>

테두리 숨김

border-style:hidden;

테두리 숨김을 정의합니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2{
        border-style:hidden;
      }
    </style>
  </head>
  <body>
    <h2>테두리 숨김 hidden</h2>
  </body>
</html>

테두리 상하좌우 혼합

border-style: 상 우 하 좌;

border-style은 위쪽, 오른쪽, 아래쪽, 왼쪽 순서로 선의 종류를 따로 설정할 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2{
        border-style:solid dotted double ridge;
        border-width:5px;
      }
    </style>
  </head>
  <body>
    <h2>테두리 상 우 하 좌</h2>
   </body>
</html>

CSS 테두리 두께

테두리 두께 고유 명사

border-width

border-width 속성명과 thin(얇은), medium(중간), thick(두꺼운)의 속성값을 조합해서 정의합니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2.x{
        border-width:thin;
        border-style:solid;
      }
      h2.y{
        border-width:medium;
        border-style:solid;
      }
      h2.z{
        border-width:thick;
        border-style:solid;
      }
    </style>
  </head>
  <body>
    <h2 class="x">얇은 테두리</h2>
    <h2 class="y">중간 테두리</h2>
    <h2 class="z">두꺼운 테두리</h2>
  </body>
</html>

테두리 두께 사용자 지정

border-width 속성명과 px, pt, cm, em 등의 단위 속성값을 조합해서 설정합니다. pt는 워드 등에서 사용하는 글씨 포인트를 말합니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2.x{
        border-width:1px;
        border-style:solid;
      }
      h2.y{
        border-width:0.2cm;
        border-style:solid;
      }
      h2.z{
        border-width:2pt;
        border-style:solid;
      }
      h2.k{
        border-width:0.2em;
        border-style:solid;
      }
    </style>
  </head>
  <body>
    <h2 class="x">테두리 두께 px</h2>
    <h2 class="y">테두리 두께 cm</h2>
    <h2 class="z">테두리 두께 pt</h2>
    <h2 class="k">테두리 두께 em</h2>
  </body>
</html>

테두리 두께 모서리 분할

border-width:상 우 하 좌; 순서로 테두리 위치별 크기를 개별 조절할 수 있습니다. 위쪽, 오른쪽, 아래쪽, 왼쪽 순서입니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2{
        border-width:1px 4px 8px 16px;
        border-style:solid;
      }
    </style>
  </head>
  <body>
    <h2>ㅇㅅㅇ</h2>
  </body>
</html>

CSS 테두리 색

테두리 색 고유 명사와 HEX 코드

border-color

border-color 속성명과 고유명사 색 이름 또는 HEX 코드를 속성값으로 사용해서 색을 표현합니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2.x{
        border-color:tomato;
        border-width:5px;
        border-style:dashed;
      }
      h2.y{
        border-color:#3CB371;
        border-width:5px;
        border-style:outset;
      }
    </style>
  </head>
  <body>
    <h2 class="x">테두리 tomato 색</h2>
    <h2 class="y">테두리 #3CB371 색</h2>
  </body>
</html>

테두리 색 모서리별 개별 설정

border-color:상 우 하 좌; 순서로 테두리 색을 모서리별로 개별 설정할 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2{
        border-color:DarkBlue OrangeRed Gold LimeGreen;
        border-width:8px;
        border-style:solid;
      }
    </style>
  </head>
  <body>
    <h2>테두리 상 우 좌 하</h2>
  </body>
</html>

테두리 방향 개별 설정

위쪽 테두리

border-top
<!DOCTYPE html>
<html>
  <head>
    <style>
      h2{
        border-top-style:dashed;
        border-top-width:5px;
        border-top-color:crimson;
      }
    </style>
  </head>
  <body>
    <h2>Hello World!</h2>
  </body>
</html>

아래쪽 테두리

border-bottom
<!DOCTYPE html>
<html>
  <head>
    <style>
      h2{
        border-bottom-style:double;
        border-bottom-width:20px;
        border-bottom-color:teal;
      }
    </style>
  </head>
  <body>
    <h2>Hello World!</h2>
  </body>
</html>

왼쪽 테두리

border-left
<!DOCTYPE html>
<html>
  <head>
    <style>
      h2{
        border-left-style:solid;
        border-left-width:12px;
        border-left-color:navy;
      }
    </style>
  </head>
  <body>
    <h2>Hello World!</h2>
  </body>
</html>

우측 테두리

border-right
<!DOCTYPE html>
<html>
  <head>
    <style>
      h2{
        border-right-style:dotted;
        border-right-width:30px;
        border-right-color:tomato;
        font-size:50px;
      }
    </style>
  </head>
  <body>
    <h2>Hello World!</h2>
  </body>
</html>

CSS 테두리 속성 일괄 삽입

border 속성 또는 border-방향 속성은 border-style, border-width, border-color 등을 사용하지 않고도 일괄적으로 적용할 수 있습니다.

선 종류, 선 두께, 선 색상 순서는 상관없이 3가지 요소가 모두 들어갈 수 있습니다.

border:style, width, color;
<!DOCTYPE html>
<html>
  <head>
    <style>
      h2.x{
        border:dotted 5px MediumTurquoise;
      }
      h2.y{
        border-left:solid 12px crimson;
      }
    </style>
  </head>
  <body>
    <h2 class="x">Hello World!</h2>
    <h2 class="y">Hello!</h2>
  </body>
</html>

CSS 둥근 테두리

border-radius

border-radius 속성은 CSS 테두리 모서리의 각도를 조절합니다. px로 표현된 숫자는 테두리의 각도를 정의합니다. 하나의 숫자만 입력하면 양 모서리의 각도가 모두 일치합니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2.x{
        border-radius:15px;
        border:solid 5px MediumBlue;
      }
      h2.y{
        border-radius:50px 40px 20px 5px;
        border:solid 5px Fuchsia;
      }
    </style>
  </head>
  <body>
    <h2 class="x">둥근 테두리 border-radius</h2>
    <h2 class="y">둥근 테두리 개별 조절</h2>
  </body>
</html>

숫자를 네 가지 모두 적으면 각 모서리의 각도를 사용자 지정으로 정의합니다.

 

문제해결이 정확히 되지 않으신 경우 웹디자인, 웹퍼블리싱 등의 강좌를 들어보시는 것도 좀 더 근본적인 문제 해결에 도움이 될 수 있습니다.

 

웹디자인 강의 추천 5가지

1.디자인나스

http://www.designnas.com/

디자인나스는 웹디자인 학원중에서 가장 유명한 양성소중의 한 곳입니다.  HTML 및 CSS, JavaScript, 포토샵 등을 배우시는 목적이 웹디자인쪽이신 경우 적합한 강좌입니다.

웹디자인 강의 1

UI, UX 디자인, 대기업 공채 특성화반의 웹디자인 중심 강의가 주력이며 HTML, CSS, JavaScript, jQuery 등의 웹퍼블리싱 강좌도 있습니다.

5 ~ 6명 이하의 소수로 강좌가 이루어져서 1:1 개인 마크에 의한 포트폴리오 관리에 유용하고 그만큼 수강료가 가격이 있는 편입니다.

 

2.홍시디자인학원

http://www.hongsidesign.com/

홍시디자인 학원은 2005년에 설립된 디자인학원에서 유명한 아카데미입니다.

웹디자인 강의 2

웹과 모바일 디자인, UI/UX 디자인 관련 커리큘럼이 있고 포토샵이나 일러스트레이터 같은 순수 디자인 툴도 강좌로 준비하며 실업자 등의 국비지원 정부 지원 과정도 보유하고 있습니다.

웹디자인 쪽을 강화로 하고 계시다면 적합한 강좌입니다.

 

3.그린컴퓨터아카데미

https://greenart.co.kr/

그린컴퓨터아카데미는 대형 컴퓨터 전문 학원입니다. 전국에 지점이 많아 오프라인에서 본인의 소속 지역에서 쉽게 강의를 들을 수 있다는 것이 장점입니다.

웹디자인 강의 3

순수 웹디자인 이외에도 웹퍼블리싱이나 기타 컴퓨터 프로그래밍 강좌도 단과 형식으로 커리큘럼이 다양하다는 것이 특징입니다.

 

4.더조은컴퓨터아카데미

http://tjoeun.co.kr/

더조은컴퓨터아카데미는 2016년 메가스터디 그룹에 인수된 컴퓨터 교육 전문 아카데미입니다.

웹디자인 강의 4

웹디자인 강좌부터, 웹퍼블리싱이나 프론트앤드 개발자 등의 연계 강좌로도 다양한 단과 강좌가 있습니다.

좀 더 디자인 강의에 집중하고 싶다면 CG, VFX나 모션그래픽, 에프터이팩트, 게임 그래픽(유니티, 마야) 등의 강좌 연계도 가능합니다.

 

5.메가스터디 컴퓨터아카데미

메가스터디 컴퓨터아카데미는 웹디자인 정규과정과 단과과정으로 나눠서 커리큘럼을 운영하고 있습니다.

웹디자인 강좌 5

정구 교육과정에서는 실무 취업을 목표로 12명 이하의 소수정예로 강좌가 구성되며 웹디자인 이외에 그래픽 편집디자인, 모션 그래픽(2D, 3D), 3D 에니메이션, 인테리어디자인, 웹툰 디자인, 게임 원화가, 게임 그래픽 디자인, 순수 제품 디자인 등의 다양한 디자인 강좌 프로그램을 갖추고 있습니다.

 

웹퍼블리싱 강의 추천 9가지

1.생활코딩

https://opentutorials.org/

생활코딩은 비영리 무료 코딩 교육 강좌입니다. 유튜브를 중심으로 무료 강좌가 있습니다.

웹퍼블리싱 강의 001

HTML, CSS, JavaScript의 기초 웹퍼블리싱 강좌가 코딩을 전혀 몰라도 학습할 수 있도록 학습난이도가 낮고, 한 강좌가 짧아서 듣기에 부담이 적습니다.

그 밖에 파이썬, 자바, MySQL, PHP, 머신러닝 기초 등 백앤드 프로그래밍 강좌도 무료로 제공된다는 것이 장점입니다.

 

2.인프런

https://www.inflearn.com/

인프런은 프로그래밍 유료 강좌 종합 플랫폼입니다. 웹퍼블리싱을 위한 반응형 웹사이트 만들기, CSS 그리드 레이아웃, 자바스크립트 연계 등 웹퍼블리싱 강좌가 단과형식으로 배치되어 있습니다.

웹퍼블리싱 강의 002

또한 종합 프로그래밍 강좌 사이트이기 때문에 프론트앤드 개발, 백앤드 개발, 리액트, 노드 JS 등 원하는 방향으로의 강좌도 연계해서 볼 수 있다는 장점이 있습니다.

 

3.노마드코더

https://nomadcoders.co/courses

노마드 코더는 콜롬비아 출신 개발자 니콜라스가 운영하는 코딩 교육 아카데미입니다.

웹퍼블리싱 3

클론 코딩(HTML, CSS), 바닐라 자바스크립트, CSS 레이아웃, FLEXBOX, SCSS, 그리드 등의 웹퍼블리싱 강좌를 실제 서비스를 클론 코딩으로 따라서 만들어보는 방식으로 구현되는 강좌입니다.

그 밖에 리액트, 암호화폐만들기, 인스타그램 클론 코딩하기, 유튜브 클론 코딩하기, 우버와 에어비앤디 클론코딩하기, 파이썬으로 웹 스크리퍼 만들기 등 확장되는 언어 학습도 실생활의 서비스와 연계된다는 점에서 재미있게 배울 수 있다는 것이 특징입니다.

약간의 HTML, CSS, JS 기초 지식을 알고 계시고, 실전 서비스의 벤치마킹을 통해서 좀 더 동기부여를 학습에 투여하고 싶으신분에게 적합한 웹퍼블리싱 강좌입니다.

 

6.W3Schools

https://www.w3schools.com/Html/

W3Schools는 노르웨이 Refsnes Date 소프트웨어 회사에서 1998년에 만든 온라인 코딩 교육 사이트입니다.

웹퍼블리싱 강좌 006

HTML, CSS부터 JavaScript의 웹퍼블리싱 등의 방대한 메뉴얼이 있고, 각 페이지마다 별다른 코드 에디터필요없이 홈페이지에서 바로 예제를 풀어볼 수 있다는 것이 특징입니다.

CSS 그라디언트, 색상, 모서리, 3D , 툴팁, 버튼 등 다양한 예제를 보유하고 있습니다.

 

7.Dev ED

https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q

Dev ED는 무료 유튜브 강좌 및 유료 홈페이지 강좌를 판매하고 있는 웹퍼블리싱 강좌 서비스입니다.

유튜브에서는 움직이는 CSS 및 자바스크립트 강좌 등이 예제와 함께 공개되어 있어 따라하기에 편리합니다. 특히나 JS와 CSS를 이용한 움직이는 에니메이션 효과를 잘 가르칩니다.

해당 개발자의 홈페이지에서는 HTML, CSS 강좌 등도 유료로 판매하고 있습니다.

https://developedbyed.com/p/the-creative-html5-css3-course

 

8.The Net Ninja

https://www.youtube.com/c/TheNetNinja/playlists

Net Ninja는 웹퍼블리싱을 비롯한 프론트앤드 개발자용 유튜브 강좌입니다.

웹퍼블리싱 강좌 007

CSS FLEX, 그리드, 반능형웹디자인, CSS 포지션, SASS 등의 웹퍼블리싱 집중 강좌부터 자바스크립트, 앵귤러, 노드 JS, 리액트, 부트스트랩, VUE, 타입스크립트 등 프론트앤드용 강좌도 분류가 잘되어 배치되어 있습니다.

 

9.CODER CODER

https://www.youtube.com/c/TheCoderCoder/featured

CODER CODER는 생활코딩, 노마드코더와 말투와 강의 방식이 정말 비슷한 코더용 강좌입니다.

웹퍼블리싱 인강 12

강좌수는 많지 않지만 CSS 등의 웹퍼블리싱 작업을 할 때 헷갈리기 쉬운 반응형 웹, 포지션, 레이아웃, Z-index, 미디어쿼리, 칼럼 나누기, 백그라운드 이미지 투명하게, 에니메이션 메뉴 만들기, 모바일 반능형, 그리드, SASS, Gulp, Flexbox 등을 예제와 함께 볼 수 있습니다.

영어의 경우 영어 자막을 켜고 배속을 0.75배 ~ 0.5배로 낮추면 좀 더 편하게 들어보실 수 있습니다.