Today Topic : CSS 속성
🗝 Keywords
✅ CSS 속성의 종류
✅ 박스모델
✅ 글꼴
✅ 문자
✅
1. css 속성의 종류
- HTML의 속성은 Attributes라고 하고, css/js는 properties라고 함.
2. 박스모델
2-1) 너비(width,height)
🚀 너비
- 요소에 가로/세로 너비를 지정하는 속성. 기본값(요소에 이미 들어있는 속성의 값)
- width와 height에는 브라우저가 너비를 자동으로 계산하는 auto를 포함하고 있음. 따라서 각 속성에 값이 없더라도, auto가 적용됨.
- 단위 : 보통 px 단위로 지정함(그 외 픽셀 em,vw)
- span 인라인 요소는 요소의 기본적인 가로와 세로 사이즈는 auto라고 살펴봤음. 가로와 세로 너비가 컨텐츠의 크기 만큼 자동으로 줄어들게끔 설계가 되어있음.
- div 블록요소는 가로사이즈는 최대한 늘리도록 설정되었음. 요소의 크기를 최대한 늘려서 사용 세로크기는 반대로 가장 줄어들 수 있게 함.
- max-witdth : 최대 너비 제한 없음
- max-height : px
- min-width : 최솟값
- min-height : 최소값
2-2) 단위
<div class="parent">
<div class="child"></div>
</div>html {
font-size: 16px;
/* 기본적인 폰트 사이즈는 16픽셀 */
}
.parent {
width: 300px;
height: 200px;
background-color: royalblue;
font-size: 10px;
}
.child {
width: 50vw;
height: 30%;
background-color: orange;
}🚀 단위의 종류
- px : 픽셀(하나의 점을 의미함)
- % : 상대적 백분율. 만약 자식요소라면 부모요소의 퍼센트만큼 차지함
- em : 본인이 갖고 있는 요소의 폰트사이즈를 기준으로 박스의 크기를 설정함.
- rem : 루트요소(html)의 글꼴 크기 기본 html의 글꼴 크기는 16px
- vw : 뷰포트 가로 너비의 백분율. 100vw는 화면의 100%를 다 채움. 페이지 크기가 바뀔 때마다 변함
- vh : 뷰포트 세로 너비의 백분율. 페이지 크기가 바뀔 때마다 변함
2-3) margin
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>.container .item{
width: 100px;
height: 100px;
background-color: orange;
border: 4px solid red;
margin: -20px 10px
}🚀 margin
- margin이란, 요소의 외부 여백(공간)을 지정하는 단축 속성
- margin은 음수 사용가능
- 가로(세로) 너비가 있는 요소의 가운데 정렬에 활용
0 : 외부여백 없음
auto : 브라우저가 여백을 계산
단위 : px,em,vw 등 단위로 지정
% : 부모 요소의 가로 너비에 대한 비율로 지정
- margin에는 네 개의 개별 속성을 갖고 있음 margin : 위, 오른쪽, 아래, 왼쪽; 크기를 결정 위에서부터 시계방향으로 돌아가면서 적용
- margin에는 음수 값도 적용가능함. 음수를 적용하면 해당 값 만큼 겹쳐서 보이게 됨.
2-4) padding
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>.container .item{
width: 100px;
height: 100px;
background-color: orange;
border: 4px solid red;
}
.container .item:first-child{
padding: 20px;
}🚀 padding
- 요소의 내부 여백(공간)을 지정하는 단축 속성
- 0 : 내부 여백 없음
- 단위 : px, em, vw 단위로 지정
- % : 부모 요소의 가로 너비에 대한 비율로 지정
- padding도 margin과 같이 단축속성이므로 4개의 값을 추가할 수 있음
2-5)border
🚀 border
- border: 선-두께 선-종류 선-색상;
- border도 단축 속성이기 때문에 개별 값을 가질 수 있음.
🚀 border-with(선-두께)
- 기본값은 medium이고 thin,thick으로 설정 가능. 단위로 지정할 수 있음
- 개별속성이기 때문에 4개의 결과값을 가질 수 있고, 순서는 위와 똑같음.
🚀 border-style(선-종류)
- 기본값은 none이고, solid(실선)/dashed(파선) 등이 있음
🚀 border-color(선-색상)
- 여러가지 색깔 적용 가능함
- css 색상표현 방법(색상이름, 16진수색상(#000,#FFFFFF) RGB(rgb(255,0,100), RGBA:투명도추가(rgba(255,0,100,0.5))
🚀 border-방향-색상: 두께 종류 색상
🚀 border-radius
- 모서리를 둥글게 하는 것. 단축속성이기 때문에 4개의 값을 입력할 수 있고 왼쪽 상단부터 시계방향으로 돌아갈 수 있음.
2-6) box-sizing
🚀 box-sizing
- box-sizing의 기본값은 content box는 요소의 내용+크기
- border box는 요소의 내용+크기+패딩+마진 모두 다 합쳐서 크기를 계산하게됨.
2-7) overflow
🚀 overflow
- visible은 내용을 넘치게 두는 것
- hidden은 넘친 내용을 잘라내는 것
- scroll은 스크롤바(x축,y축) 모두를 사용
- auto는 넘침 부분만 스크롤을 만드는 것
- overflow-x, overflow-y는 각각 x축, y축 중 넘친 것 중 한 곳만 인식하게끔 설정함
2-8) display
<!DOCTYPE html>
<body>
<div class="container">
<div class="item">hello</div>
</div>
</body>.container {
margin: 20px;
}
.container .item{
display: none;
width: 120px;
height: 30px;
background-color: orange;
color:white
}
🚀 display
요소의 화면 출력(보여짐) 특성
- block : 상자(레이아웃)요소
- inline : 글자요소
- inline-block : 글자+상자 요소
- flex : 플렉스 박스(1차원 레이아웃)
- grid : 그리드 (2차원 레이아웃)
- none : 보여짐 특성 없음. 화면에서 사라짐
- 기타 : table, table-row, table-cell 등..
2-9) 투명도
<body>
<div class="container">
<div class="item">hello</div>
</div>
</body>.container {
margin: 20px;
}
.container .item{
width: 120px;
height: 30px;
background-color: orange;
opacity: 0.5;
}
🚀 opacity
- opacity는 투명도 조절 0~1사이에서 나눠질 수 있음.
3. 글꼴
<h1>hello world!</h1>>
<p>hello world!hello world!hello world!hello world!</p>h1 {
font-size: 24px;
font-weight: 700;
font-style: italic;
font-family: serif;
/* serif는 바탕체 */
}
p {
font-size: 16px;
width:350px;
padding: 10px;
border: 1px solid;
box-sizing: border-box;
line-height: 2;
}🚀 글꼴
- font-style: normal, italic(이탤릭체), oblique(기울어진글꼴, 사용 잘 안함)
- font-weight: normal,400(기본두께) bold,700(두껍게) bolder, lighter, 100~900(100단위의 - 숫자 9개 중에서 선택할 수 있음)
- font-size : 기본 크기(16픽셀) smaller,larger등이 있지만 추상적이여서 잘 사용안함
- line-height: 한 줄의 높이 행간과 유사함. 숫자(요소의 글꼴 크기의 배수로 지정)혹은 단위(픽셀)로 조정할 수 있음. 글자 크기가 바뀌면 line-height도 수정을 해줘야하기 때문에 가급적 배수개념으로 사용할 것.
- font-familt:글꼴1, "글꼴2", ... 글꼴계열; 여러 글꼴 후보 중에서 맨 앞의 글꼴을 사용함. 폰트 이름에 띄어쓰기가 있다면 따옴표를 꼭 넣어야만함.
4. 문자
<!DOCTYPE html>
<body>
<a href="https://google.com">google</a>
</body>
a {
display:block;
width:200px;
height: 100px;
background-color: orange;
font-size: 22px;
color:white;
text-decoration: none;
text-align: center;
line-height: 100px;
}🚀 문자
- text-indent: 들여쓰기. 양수(들여쓰기) 음수(내어쓰기) 모두 다 가능함.
- text-align:left,right,center,justify 기본값은 left
- text-decoration :none 장식 없음. underline 밑줄, overline윗줄, line-through 중앙 선'
프로그래밍으로 지속가능한 세상을 꿈꾸며