CSS3 03

2017. 2. 22. 18:01Study/CSS

728x90

가시 속성

- display 속성

-- none : 태그를 화면에 보이지 않게 만든다.

#box{display : none;}

-- block : 태그를 block 형식으로 지정

#box{display : block;}

-- inline : 태그를 inline 형식으로 지정

#box{display : inline;}

-- inline-block : inline-block 형식으로 지정, margin 속성이 div 태그에 의해 차이 벌림

#box{display : inline-block;  margin: 10px;}


- visibility 속성

-- visible : 태그를 보이게 만듭니다.

#box{visibility: visible;}

-- hidden : 태그를 보이지 않게 만듭니다. 영역은 그대로 차지

#box{visibility: hidden;}

-- collapse : table 태그를 보이지 않게 만듭니다. 익스플로러와 파이어폭스에서만 작동

 #box{visibility: collapse;}

-- inherit : 부모 요소를 상속

#box{visibility:inherit}


- opactiy 속성

 #box{opacity: 0.2;}

-> 태그의 투명도 조절

-> 가시 속성은 태그가 화면에 보이는 방식을 지정하는 속성


박스 속성

 margin 속성

border 속성

padding 속성

글자 (height 속성, width 속성)




-- width , height 속성 : 글자를 감싸는 영역의 크기를 지정

#box{width: 10px; height: 10px;}


-- margin , padding 속성

#box{margin: 10px; padding: 10px;}

-> margin은 바깥쪽 여백, padding은 안쪽 여백을 조절한다.

-> 웹페이지 레이아웃 구성이 가장 중요 스타일 속성


- box-sizing 속성

-- content-box : 기본으로 적용되는 키워드

 div{     margin: 10px; padding: 10px;

           width: 10px; height: 10px;

           border: 10px solid black;

           box-sizing: content-box; }

->  박스 너비 = width 속성 + 2 * (margin 속성 + border 속성 + padding 속성)

박스 높이 = height 속성 + 2 * (margin 속성 + border 속성 +padding 속성)

-- border-box : 테두리를 포함한 영역의 크기 지정

 div{

            margin: 10px; padding: 10px;

            width: 10px; height: 10px;

            border: 10px solid black;

           box-sizing: border-box;

        }

->   박스 너비 = width 속성 + 2 * margin 속성

박스 높이 = height 속성 + 2 * margin 속성


테두리 속성

- border-width

-- inherit : 테두리를 안보이게 합니다.

div{

            margin: 10px; padding: 10px;

            width: 10px; height: 10px;

            border: 10px solid black;

            background-color: aqua;

            border-width:inherit;

        }

-- medium : 테두리 중간 사이즈

-- thick : 테두리 두꺼운 사이즈

-- thin : 테두리 얇은 사이즈

- border-style

-- dashed : 점선형태 테두리

 div{

            margin: 10px; padding: 10px;

            width: 10px; height: 10px;

            border: 10px solid black;

            background-color: aqua;

            border-style: dashed;

        }

-- dotted : 점선이 듬성듬성 찍힌

-- double : 이중선

등등

- border-radius 

div{

            margin: 10px; padding: 10px;

            width: 10px; height: 10px;

            border: 10px solid black;

            background-color: aqua;

            border-radius: 20px;

        }

-> 둥근 사각형 또는 둥근 원을 만들수 있다.



728x90

'Study > CSS' 카테고리의 다른 글

CSS3 06  (0) 2017.02.23
CSS3 05  (0) 2017.02.23
CSS3 04  (0) 2017.02.22
CSS3 03  (0) 2017.02.22
CSS3 02  (0) 2017.02.21
CSS3 01  (0) 2017.02.18
1 ··· 4 5 6 7 8 9 10