반응형

 

안녕하세요.

(주)맑은커뮤니케이션의 여전히 나이막내(?) 스물다섯스물하나입니다.

2019년이 되었는데요.

2018년에는 다들 어떠셨나요.?

잘 되신 분들은 앞으로도 잘 되시기를 바라고

잘 안되었던 분들은 앞으로 하는 일 모두 잘 되시기를 바랍니다.

 

 

 

 

웹퍼블리싱 작업을 하다보면 아무래도 매번 쓰던속성만 쓰게되어

가까운 길을 냅두고 먼길을 돌아가는 상황을

셀프(?)로 만들때가 종종 있더라구요.

 

 

 

 

뿌엥...

 

 

그래서 셀프뺑뺑이(?)를 방지하기 위해

CSS탐방을 떠나보기로 했습니다.

 

 

 

세상은 넓고 CSS는 무궁무진하게 많다!

(※ 세상은 넓지만 CSS는 무궁무진하게까지 많지는 않습니다)

 

 

 

원래는 CSS4가 어디까지 작업이 되고 있나 한번 구경을 가볼까 하였는데요.

아직도 안되는 것들이 많아서... 패쑤!

 

 

그럼 본격적으로 같이 한번 떠나보겠습니다!

(제 기준에서 작성된 내용입니다 ㅠㅜ

어떤분들은 자주 사용하는 속성일수도 있어요.)

 

 

 

 

 

 

오늘의 첫번재 주인공은 바로

 

 

 

 

 

 

 

 

border(보더) 입니다.

 

 

◎ border

◎ border-bottom

◎ border-bottom-color

◎ border-bottom-style

◎ border-bottom-width

◎ border-color

◎ border-left

◎ border-left-color

◎ border-left-style

◎ border-left-width

◎ border-radius

◎ border-right

◎ border-right-color

◎ border-right-style

◎ border-right-width

◎ border-style

· · ·

 

보더에는 다양한 속성들이 있는데요.

저는 주로

1px solid #컬러컬러 형식을

99%정도로 대단히 많이 사용하는 것 같습니다

라인은 자고로 쏠리드(?)가 제맛이죠

 

 



보더스타일은 솔리드 밖에 모르는 바보였는데

최근에 어마어마한 속성이 존재하다는 것을 알게 되었습니다.

바로  border-image입니다.

 

 

 

이름만 봐도 딱 느낌이 오시죠?

같이한번 알아보도록 하겠습니다.

 

 

 

1.border-image

 

See the Pen Untitled by Jong Sang Park (@JongS) on CodePen.

 

설명

보더를 이미지로 지정

(기본적으로 border 스타일을 선언해 주어야 함)

 

 

 

속성
 
border-image : [ source slice width outset repeat ] | initial | inherit

 

border-image-source : 보더로 사용될 이미지 경로 (url형식으로 시작)

 

 

border-image-slice : 브라우저에게 테두리 조각을 만들기 위해 이미지를 슬라이스할 위치를 알려준다. 

이미지는 4개 모서리, 4개 측면, 중앙의 9개 섹션으로 나뉜다.

 

 

border-image-width : 보더 이미지의 넓이를 제어

 

 

border-image-outset : 보더 이미지가 컨텐츠 영역 확장 거리를 제어

 

 

border-image-repeat : 보더영역을 채우기 위한 반복형태를 제어

 

 
 
 IE chrome  Firefox safari
 11+ 4+ -webkit, 16+ 3.5+ -moz-, 15+  3.1+ -webkit-, 6+

 

 
 
 
저는 이 속성을 한번도 사용해본적이 없는데요.
용어의 설명도 생소하여 생각보다 어려운 부분이 있었지만
이번에 여러분께 소개드리기 위해 학습을 해 보며 느낀점은
[최신브라우저만 맞춘다면 유용하게 쓰일것 같다] 였습니다.
 
저한테는 생소한 속성들이어서
조금 이해 안되는 부분만 짚어보도록 하겠습니다.
 
 
 
 

border-image-slice

 

브라우저에게 테두리 조각을 만들기 위해 이미지를 슬라이스할 위치를 알려준다. 

 

 

border-image-slice: [ number | percentage ] | fill | initial | inherit
 
 

See the Pen Untitled by Jong Sang Park (@JongS) on CodePen.

 
slice 속성은 padding , margin과 마찬가지로 4방향을 설정할수 있고, 위아래 및 좌우 까지
설정법은 똑같습니다.
 
 
 
 

border-image-outset

 

보더 이미지가 컨텐츠 영역 확장 거리를 제어

 
 

See the Pen Untitled by Jong Sang Park (@JongS) on CodePen.

 

 

border-image-repeat

 

보더영역을 채우기 위한 반복형태를 제어

 
 
 

See the Pen Untitled by Jong Sang Park (@JongS) on CodePen.

 

 

 

reapeat 와 outset은 예제만 보더라도 바로 이해하실수 있을것 같아

별도의 설명은 생략하겠습니다.

 

 

border-image 속성을 이용하면 보더에 그라디언트를 넣을수 있습니다.

 

 

See the Pen Untitled by Jong Sang Park (@JongS) on CodePen.

 

 

이런식으로 말이죠!

이 글을 적으면서 여러 사이트들을 훓어보던 중

 

 

 

보더와 그라디언트를 활용한 사이트 몇개가 눈에 띄었습니다.

허나 아직은 다들 많이 안쓰시는것 같아요(저 포함).

하지만 잘 활용만 한다면 멋진 사이트를 만들수 있을것 같습니다.

 

 

 

오늘은 보더에 대해서 탐방을 해 보았는데요. 

다음번에는 더 재밌는 주제로 찾아오도록 할게요.

부족한부분, 잘못된 부분, 질문이 있으시다면 댓글 부탁드리겠습니다.

그럼 안녕~

 

 

 

 

 

반응형

+ Recent posts