주요 내용 목차
- 간단한 용어 정리
- block vs inline
- auto vs 100%
- content-box vs border-box
웹 사이트를 만들기 위해서
- 웹 사이트의 레이아웃을 확인(큰 덩어리가 보는 것이 필요하다.)
- 세부적인 사항(디테일 / 글자폰트, 두께, 사이즈 등..) 을 먼저 보지 않고 큰 레이아웃부터 확인 후 웹사이트를 제작하는 것이 좋다.
간단한 용어 정리
<div> → 태그
<div> Contents </div> → 요소(Element)
div {
Style. → 선택자(Selector)
}
같은 div를 사용하더라도 어디에서 어떤 용도로 사용하는지에 따라 부르는 용어가 다르다는 것을 간단히 알고가도록 하자
/* CSS파일 */
div {
Type Selector(유형 선택자)라고 한다.
background-color : orange
/*property(속성) 구분자 value(속성값)*/
}
div태그와 같이 Class(.)나 Id(#)로 가져오는 것이 아니라 바로 태그로 가져오는 것은 Type Selector라고 한다.
Block요소(Block element)
- 블럭 요소는 내부에 inline요소와 block요소 등이 들어갈 수 있다
- 가로축 공간 한줄을 모두 차지
- width와 height 속성을 조절할 수 있다.
- 레이아웃을 작업하는 요소이다.
- width: auto; height: auto 가 default값이며 두개의 속성의 auto속성값은 서로 다른 의미를 나타낸다.
- 기본 display속성은 block이다.
block요소 종류 목록
div p ul ol li h1~h6 form header nav footer section
article aside table th td figure figcaption caption blockquote
Inline요소(Inline element)
- 자식요소인(ex. 텍스트)의 content넓이에 필요한 만큼만 가지고 있다.
- 상하 마진 적용 불가능하며 좌우 마진은 가능 상하좌우 패딩도 가능
- 가로축 방향으로 쌓인다.
- width와 height 속성값을 조절 할 수 없다.
inline요소 종류 목록
span a em b strong video audio
div요소(block-level elements)의 width와 height의 default값은 어떻게 될까?
부모요소로 부터 주어인 가용 너비
브라우저가 계산한 가능한 최대너비
우리가 width값을 설정을 해주지 않아도 default값으로 초기값(initial value)가 속성값으로 들어가 있다.
width height 모두 initial value로 auto 값이 들어간다.
div {
width: auto /* initial value */
}주의사항
- 요소별로 초기값이 정해지는 것이 아니고 속성을 기준으로 초기값이 정해진다는 것이다.
- 속성에 따라 결정된 initial valued와 브라우저에서 기본으로 제공하는 스타일(User agent stylesheet)는 완전히 다른것이다.
- user agent stylesheet 예시로는 body요소에 margin 8px이 자동으로 들어간 경우이다.
100% VS auto
두개는 완전히 다른 속성이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div class="box">
<div class="inner auto">
auto
</div>
</div>
<div class="box">
<div class="inner percent">
100%
</div>
</div>
<style>
.box {
width: 100px;
height: 100px;
}
.inner {
width: 100%;
height: 100%;
}
.auto {
background-color: blue;
width: auto;
}
.percent {
background-color: tomato;
width: 100%;
}
</style>
</body>
</html>
각각 auto/percent class에 대해서 padding을 20px 추가한 경우(그림참고)
width속성 - 각각 100% auto로 준 경우
- auto인 경우
margin, padding, border 등을 고려(포함)한 값으로 width값이 변경하게 되어서 조금 더 유연한 모습을 볼 수 있다.
결국 이것은 부모기준인 box class의 값을 따르는 것을 볼 수 있으며, 부모요소의 범위를 넘어가지 않는다.
전체 width = 100% - leftmargin-rightmargin이다.
- 100%의 경우
content(100px)의 크기는 변화가 없고 별도로 추가한 만큼 크기가 들어나는 것을 볼 수 있다.
그래서 overflow 현상이발생되기에 주의하자
height속성 - 각각 100% auto로 준 경우
- auto인 경우
height는 자식기준으로 값을 설정하게 된다. 내부의 text가 자식요소이기 때문에 height를 설정하고 그 높이에서 padding만큼 값을 더해준다.
- 100%의 경우
height는 부모요소의 크기와 동일하게 설정이 되며 width 100%와 똑같은 방식으로 작동하게 된다.
block요소에서의 width: auto; 와 height : auto; 는 아예 동작원리가 다르다는 것을 꼭 기억하고
block요소가 세로 방향으로 채워나가진다는 특성을 이해하면서 적용하도록 하자
↓
div {
width: auto; 부모기준 //100%와는 다르게 조금 더 유연하다.
height: auto; 자식기준
}border-box VS content-box
div {
box-sizing: border-box;
box-sizing: content-box;
}block 요소의 box-sizing 기본값은 content-box이다.
- content-box
width를 설정하면 전체너비가 그냥 width가 아니라 padding과 border이 더해진 형태이다.
- border-box
width를 설정하면 전체너비가 padding과 border를 포함한 넓이가 된다. content의 넓이가 축소가 되는 형태이다.
'Programming > Style' 카테고리의 다른 글
| RESET CSS (0) | 2022.09.08 |
|---|---|
| CSS란? (0) | 2022.09.08 |
| CSS 스타일 적용순서 (0) | 2022.09.08 |
| CSS margin 겹침현상 (0) | 2022.09.08 |
| CSS Box-sizing (0) | 2022.09.05 |