CSS에서 BORDER 한줄로 출력하기
2017/11/15 - [기초] 티스토리 CSS 수정하기, 스킨 수정
2017/11/15 - 티스토리 CSS로 반응형 스킨 만들기
2017/11/18 - [기초] CSS (외 다수) 컬러 RGB 와 CMYK와의 차이, RGB 다루기, 컬러 추출
CSS에서 BORDER란 테두리를 의미합니다. 객체에 테두리를 부여하는 속성이라고 알아두시면 됩니다.
백문이 불여일견이듯이 실제 코드와 적용 모습을 보여드리겠습니다.
우선 BORDER속성을 사용하는 방법은 크게 두 가지가 있습니다.
BORDER의 세부 속성들을 한 줄씩 적느냐. 또 BORDER의 몇가지 세부 속성들을 한 줄에 나열 하느냐로 나뉩니다.
한 줄씩 적는 경우 각 변에 각기 다른 세부 속성을 적용할 수 있습니다.
한 줄에 나열하면 네 변에 한번에 적용하는 경우 코드를 단축 할 수 있습니다.
추가로 한 줄에 나열하는 다른 방법으로 하나의 세부속성을 각 변에 적용하는 방법입니다.
적용 예제를 보면서 설명드리겠습니다.
우선 한 줄씩 적용하는 경우를 살펴보겠습니다.
한 줄씩 적용
코드입니다.
<!DOCTYPE html> <html> <head> <style> div { border-style: double; border-left-color: red; border-right-color: red; border-width: 5px; border-top-left-radius: 30px; border-bottom-right-radius: 30px; padding: 10px; } </style> </head> <body> <div>IY의 블로그에 오신것을 환영합니다.</div> </body> </html>
결과입니다.
위 처럼 각 변, 각 모서리에 따로 따로 세부 속성을 적용할 수 있습니다.
위에서 사용한 border속성의 세부 속성은 총 네 가지 입니다.
- border-style : border의 스타일을 지정합니다. 10가지 정도의 세부속성이 있는데 solid나 double, dotted 정도만 기억하시길 추천드립니다. 사실상 그 외의 속성들은 지금 시대에 쓰일지 모르겠습니다. 한 번 Ridge 속성을 확인해 보겠습니다.
네, 윈도우 98을 보는 것같습니다. 넘어가도록 하겠습니다.
- border-width : 테두리의 두께입니다. 변경, 저장하시면서 원하는 두께를 설정하시면 됩니다.
- border-color : 테두리의 컬러입니다. 컬러에 대한 포스팅을 참조해주세요.
2017/11/18 - [기초] CSS (외 다수) 컬러 RGB 와 CMYK와의 차이, RGB 다루기, 컬러 추출
- border-radius : 모서리의 반지름입니다. 위의 코드처럼 각 모서리에도 적용 가능합니다. 모서리를 지정하지 않으면 네 모서리에 동시에 적용됩니다.
한 줄에 나열
코드입니다.
<!DOCTYPE html> <html> <head> <style> #b3 { border:dotted 3px #38f; } </style> </head> <body> <div id="b3">IY의 블로그에 오신것을 환영합니다.</div> </body> </html>
결과입니다.
이런 식으로 한 줄로 한 번에 적용하는게 가능합니다.
사용법은 border:style(필수) width color; 이런 순서로 띄어쓰기로 구분하여 나열해 주시면됩니다.
중간에 width를 지정하지 않으면 자동으로 3px이 지정됩니다.
3px를 원하시는 경우 width를 지정하지 않고 color를 바로 지정해주셔도 됩니다.
한 속성을 각 변(모서리)에 적용
코드입니다.
<!DOCTYPE html> <html> <head> <style> #b4 { border-style:solid; border-width:5px 10px 15px 20px; } </style> </head> <body> <div id="b4">IY의 블로그에 오신것을 환영합니다.</div> </body> </html>
결과입니다
어떻게 적용됐는지 보이시나요 ? 띄어쓰기로 구분하며 border-width:상 우 하 좌; 이렇게 세부속성이 적용됩니다.
위쪽부터 시계 방향으로 적용되는 겁니다. border-width뿐 아니라 padding등의 다른 속성들도 이 규칙을 따릅니다.
두 가지만 쓰게되면 border-width:상하 좌우; 로 적용됩니다.
그럼 세 가지만 쓰면 어떻게 될까요???
border-width:상 좌우 하; 로 적용됩니다. 시계방향대로 상->우->하에 적용한뒤 '좌'부분은 '우'의 속성을 받는다고 생각하시면 됩니다.
radius의 경우는 border-radius:왼쪽위 오른쪽위 오른쪽아래 왼쪽아래; 의 순으로 적용됩니다.
응용해서 바나나를 한 번 그려봤습니다.
바나나
<!DOCTYPE html> <html> <head> <style> #b5 { border-style:solid; border-radius:5px 100px 100px 5px; background-color:yellow; width:30px; height:100px; } </style> </head> <body> <div id="b5">바나나</div> </body> </html>
