1. CSS display
- block
- 한 줄을 차지
- width, height, padding, margin 지정 가능 - inline
- 요소를 가로로 나열
- width, height, padding, margin 지정 불가능
- line-height : 글자 한 줄의 높이 - inline-block
- 위에 있는 모든 성질들을 다 적용받는 요소
- inline처럼 가로로 나열되면서 width, height, padding, margin 지정 가능해짐 - none
- 웹 페이지에서 해당 요소가 나타나지 않고 레이아웃에서 사라짐
2. box-sizing
- 위에 예시처럼 두 개의 width나 height를 똑같이 만들어주기 위해서는 border 크기나 padding, margin 크기를 계산해서 width나 height를 설정해줘야 한다.
- 그렇게 되면 불필요하게 계산을 해야되는 불편함이 있다.
- 그래서 나온것이 box-sizing이다. box-sizing을 사용하게 되면 우리가 설정한 border 크기, padding, margin 크기를 자동으로 계산해서 width, height를 설정해준다.
- 한 마디로 계산할 필요없이 맞추고 싶은 크기를 써주면 자동으로 border 크기, padding, margin 크기를 계산해서 width, height를 설정해준다.
3. border와 border-radius
- border
- border는 테두리를 설정해주는 속성
border: 선굵기 선종류 색깔;
- solid : 실선
- dashed : 실선과 점선 사이
- dotted : 점선
- border-radius
- border-radius는 테두리를 깍아서 보여주는 속성- 다 다른 크기로 깍을 때
border-radius: (왼쪽 위부터 깍아낼 x축 길이) / (왼쪽 위부터 깎아낼 y축 길이) - 대각선끼리 같은 값으로 깍을 때
border-radius: top-left-x top-right-x / top-left-y top-right-y - 모든 x,y축의 길이가 같은 크기로 깍을 때
border-radius : 15px;
border-radius : 50%; --> 원
- 다 다른 크기로 깍을 때
'웹개발 > CSS' 카테고리의 다른 글
[CSS] 미디어 쿼리(Media Query) - 반응형 개발, 가상 요소 (0) | 2022.05.11 |
---|---|
[CSS] CSS position, z-index (0) | 2022.05.11 |
[CSS] background(배경) (0) | 2022.05.09 |
[CSS] font(폰트) (0) | 2022.05.07 |
[CSS] CSS 적용하는 방법, 우선순위 및 상속 (0) | 2022.05.04 |