[CSS] 2. 앨리먼트에 테두리를 쳐보쟈. (border) 강의이야기 | Posted on 2012. 2. 4. 22:21
해당 강의의 저작권은 Pure Ani's Blog의 주인장 Pure Ani에게 있습니다.
이번에는 저번 강의에서 사용한 border에 대해서 알아보겠습니다.
border는 테두리를 두르는 명령어입니다.
사용예입니다.
border:1px solid red; // 1px의 테두리가 생깁니다. 테두리는 빨강색의 실선입니다.
border-(top || right || bottom || left):1px solid red; // 상하좌우 중에 설정된 위치에 1px의 빨강색 실선이 생깁니다.
선의 옵션의 경우는 주로 사용하는게 크게 3가지 입니다.
1. solid // 실선
2. dotted // 점선
3. dashed // 점선이지만 점이 길게 있습니다.
색상의 경우는 제가 사용한것처럼 색상을 지정해줘도 되고..
#을 쓰신후 색상코드를 입력해주시면 됩니다.
예 : #FFFFFF // 흰색
팁 : 같은 코드가 6번 중복될경우 3번만 써도 적용이 됩니다.
예 : #FFF
그러면 몇가지 테스트를 해보겠습니다.
<div style="width:100px; border-bottom:1px solid red">a</div>
<div style="width:100px; border-bottom:1px dotted blue;">b</div>
<div style="width:100px; border-bottom:1px dashed #c9c9c9;">c</div>
출처 : Pure Ani's Blog
이번에는 저번 강의에서 사용한 border에 대해서 알아보겠습니다.
border는 테두리를 두르는 명령어입니다.
사용예입니다.
border:1px solid red; // 1px의 테두리가 생깁니다. 테두리는 빨강색의 실선입니다.
border-(top || right || bottom || left):1px solid red; // 상하좌우 중에 설정된 위치에 1px의 빨강색 실선이 생깁니다.
선의 옵션의 경우는 주로 사용하는게 크게 3가지 입니다.
1. solid // 실선
2. dotted // 점선
3. dashed // 점선이지만 점이 길게 있습니다.
색상의 경우는 제가 사용한것처럼 색상을 지정해줘도 되고..
#을 쓰신후 색상코드를 입력해주시면 됩니다.
예 : #FFFFFF // 흰색
팁 : 같은 코드가 6번 중복될경우 3번만 써도 적용이 됩니다.
예 : #FFF
그러면 몇가지 테스트를 해보겠습니다.
<div style="width:100px; border-bottom:1px solid red">a</div>
<div style="width:100px; border-bottom:1px dotted blue;">b</div>
<div style="width:100px; border-bottom:1px dashed #c9c9c9;">c</div>
출처 : Pure Ani's Blog
