2017. 2. 22. 18:01ㆍWork/CSS
가시 속성
- 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 속성
|
-- 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;
}
-> 둥근 사각형 또는 둥근 원을 만들수 있다.