• 회원가입
  • 로그인
  • 구글아이디로 로그인

[outline] CSS - outline-width (아웃라인위드스) - 테두리 외곽 두께 (상속 X) : (IE8)

CSS outline-width 테두리 외곽 두께 (상속 X) : CSS2 (익스8 이상 주요 브라우저 지원)
 
 
테두리 외곽선의 두께를 결정하는 속성으로, 한번에 상하좌우 전체 지정도 가능하고, 개별 지정도 가능합니다.
단독 사용은 할 수 없고, 반드시 outline-style (테두리 외곽 스타일) 속성과 함께 사용해야 합니다.
 
선택자 {outline-width: 상하좌우;} (ex) outline-width:thin;
선택자 {outline-width: 상하 좌우;} (ex) outline-width:thin midium;
선택자 {outline-width: 상 좌우 하;} (ex) outline-width:thin midium thick;
선택자 {outline-width: 상 우 하 좌;}  (ex) outline-width:thin midium thick inherit;   (상단부터 시계방향)
 
 
 
상하좌우 속성값으로 올 수 있는 것들

thin
: 얇은 두께 (1px)
midium : 중간 두께 (3px) 기본값
thick : 굵은 두께 (5px)
 
길이 단위 px : (예) 5px
 
inherit : 부모 요소로부터 속성값 상속




예제

   <style type="text/css">
      div{
        text-align:center;
        border-style: solid;
        border-width: 10px;
        border-color:blue;
      outline-style: solid;
      outline-width: 10px;

        outline-color: red;
 
        padding:10px;
      }
     
    </style>
 
    <div>
      <h1>홈짱닷컴 (homzzang.com)</h1>
    </div>


분류 제목
css CSS - unset 속성값 - 상속값 존재 유무에 따라, inherit・initial 속성값 사용. (= …
selector CSS - [attribute^=value] 속성선택자 ★ - 지정 속성값 문자열로 시작하는 요소. (=시…
border CSS - border-bottom-width 속성 - 테두리하단너비 (= 테두리하단두께 = border-b…
responsive CSS - RES Grid-View - (그리드뷰 = 화면너비분할 = 화면분할 = 수동그리드)
selector CSS - [attribute~=value] 속성선택자 - 특정 속성값단어 (단독 또는 단어앞뒤공백)인 요소…
selector CSS - [attribute$=value] 속성선택자 - 지정 속성값 문자열로 끝나는 요소 (IE7)
selector CSS - :placeholder-shown 가상선택자 - 플레이스홀더 텍스트 표시 중인 요소 선택 (= :…
gradient CSS - linear-gradient() 함수 ★ - 선형 그레이디언트 배경이미지 (= 선형 그라디언트 …
border CSS - border-right-style 속성 - 테두리우측모양 (= border-right-style속…
border CSS - border-top-left-radius 속성 - 테두리상단왼쪽둥글기 지정 (= 보더탑레프트레이디…
shadow CSS - box-shadow 속성 - 요소 그림자 효과 주기 (= box-shadow속성 = 박스섀도속성)…
selector CSS - :only-child 가상선택자 - 그 부모의 유일자식요소 (유일선택자, IE9)
flex CSS - FlexBox (플렉스박스) 소개 ★★★ - 새로운 반응형 레이아웃 모델 ※ (가로/세로) (기본…
flex CSS - flex-basis 속성(I) ★ - 아이템 초기 길이 (= 아이템너비 = flex-basis속성…
column CSS - column-span 속성 - 컬럼 병합 여부 지정 (= 컬럼병합 = 컬럼확장 = column-s…
transform CSS - perspective 속성 - 3D요소의 원근 조망. (= perspective속성 = 퍼스펙티브…
text CSS - text-transform 속성 - 텍스트 대소문자 변환 (= text-transform속성 = …
transform CSS - transform-origin 속성 - 변형요소 위치 변경. ( = transform-origin…
box CSS - padding-right 속성 - 안쪽여백우측 (= padding-right속성 = 패딩라이트속…
gradient CSS - radial-gradient() 함수 ★ - 방사형 그레이디언트 배경이미지 (= 방사형 그라디언트…
17/27
목록
찾아주셔서 감사합니다. Since 2012