CSS는 영역으로 나눌수 있다.
크게 블럭 이라고 부르자.
위 웹사이트를 보면 다양한 구분으로 블럭가 나뉘어 진것을 알수 있다. 이것은 실제로
이런식으로 블럭이 나뉘어 코드된 것을 알수 있는데, HTML에서 가장 기본적인 블럭는 <div></div> 였다.
실제 만들어보면
이렇게 3개의 기본블럭을 만들고 배경을 설정하면 몇개의 블럭에 설정이 될까?
: 모두다 설정이 된다. CSS에서 div를 가리켜 배경색을 바꿨으므로 모든 div태그들은 배경색이 바뀐다.
Block
: 옆에 아무것도 올 수 없다.
위그림을 보면 한개의 블럭이 잇으면 그영역상 해당 자리의 옆은 아무것도 오지 않는다.
이러한 특성은 모든 블럭들에게 적용된다.
<header>
<div>
<footer>
<address>
<p>
등등..
Inline (in the same line)
: 같은 줄에 있다.
블럭이 아닌 span tag 옆으로 오게되는데 블럭은 옆으로 오지 않는다.
<span>
<img>
<a>
<code>
등등..
block이 아닌 것은 얼마 없다. 즉, inline인 종류를 위 종류 몇개만 외우면 대부분이 Block이다.
그렇다면 inline을 block형태로 block형태를 inline형태로 바꿀수 는 없을까?
1.inline -> block
display라는 속성에서 block으로 바꾸면 된다. span 태그에서 display 속성의 기본 옵션은 inline이였으니까
2. block -> inline
div가 사라졌다.
이유는 : 어떠한 요소가 incline이라면 해당 요소는 height와 width를 가질 수 없다.
따라서 div가 사라진 것이고 div에 글자를 넣으면 높이는 해당 글자 크기 만큼 출력된다.
3. inline-block
인라인은 높이와 너비를 가질수 없다고 했다, 하지만 높이와 너비를 가진 상태로
박스들을 옆으로 붙이고 싶다면?
인라인 블럭은
- 높이와 너비
- 옆에 다른요소도 올 수 있고,
- margin도 올 수 있다.
하지만 inline-block은 별로다.
- default값에서 두요소 사이에 위와 같이 빈공간이 있다. (우리는 이러한 공간을 만든적이 없다. margin이 아니다.)
- 위와 같은 빈공간이 요소의 크기마다 일정하지 않다. (요소가 커질수록 이러한 빈공간은 작아진다. 왜? 몰라.)
- inline-block은 Responsive Design (반응형 디자인)을 지원하지 않는다. 모니터마다 다른사이즈를 지원하지 않음
- 구리다.
인라인은 높이와 너비를 가질수 없다고 했다, 하지만 높이와 너비를 가진 상태로
박스들을 옆으로 붙이고 싶다면? - 반응형 디자인을 지원하는 방법
4. flexbox
- 박스의 위치를 어디에나 위치시킬수 있고
- 반응형 디자인을 지원한다.
하지만 이것을 쓰기 위해서는 규칙이 필요하다.
1. 자식 element에는 명시하지 말고
2. 부모 element에만 명시한다.
-> 부모가 자식을 제어한다.
(* 부모, 자식 element가 무엇이냐? <body>는 <div>의 부모이다. <html>은 <body>의 부모이다.)
부모를 flex-container로 만들면 된다.
- 각각의 div 들은 여전히 block요소이다.
- justify-content라는 attribute를 이용하고 center라는 값을 주면 block들이 가운데로 온다.
- flex-end : block들이 끝으로 간다.
- flex-start : block들이 시작으로 간다.(default값)
- space-evenly : 빈 공간을 같은 크기로 나누어서 배치(고르게 배치) 등
Block( = Box)
box는 3가지 특성이 있다.
- margin
- border
- padding
3가지 특성을 알아보기 위해서 html 파일전체의 배경색과 div의 배경색을 달리 설정해보자
body부분에 대해서 CSS코드를 작성하지 않았는데 검사를 하면 위와 같이 적혀있다.
user agent stylesheet : 사용자 기본 설정
따라서 기본적으로 display와 maring이라는 옵션은 block과 8px라는 것으로 위와 같이 표시된 영역이
margin이며 8px인것을 알수 있다.
Margin
- html에서 border 바깥의 공간이다 : box의 경계 바깥의 공간
- 사방으로 공간을 갖고 있다.
body와 div에 margin을 수정해보자
- body의 margin이 0px이 되었고
- div의 margin-left가 100px이 되었다.
margin 값이 한개일 경우 : 상우하좌 적용
margin 값이 두개일 경우 : 상하, 좌우 적용
margin 값이 4개일 경우 : 상, 우, 하, 좌(시계 방향) 적용
Collapsing margin
- 두 박스의 margin의 상하 값이 브라우저 바깥으로 밀려나는 현상
- margin의 좌우 값은 밀려나지 않는다.
body의 margin값이 30px라고 하고 div의 margin값이 15px라고 한다면
div위 위는 30 + 15인 45px일까?
위 현상을 보자 사실상 div의 상하 margin값은 30px라는 것을 알수 있다.
div의 margin이 body의 margin을 15px정도 브라우저 화면 바깥으로 올려버린 것이다.
body margin-top 15px이 사라진것이 아니다.
그렇다면 div의 margin값을 45px로 하면 어떻게 될까
div의 margin-top 45px이 body의 margin-top 30px를 브라우저 화면 바깥으로 올려버리다가
div의 margin 경계가 브라우저 화면 바깥에 닿는다. 즉, body margin-top 30px이 브라우저에 안보이게 되는 것이다.
margin 좌우는 브라우저 바깥으로 밀려나지 않으므로 div의 좌 공백은 45px + 30 px인 75px이 된다.
Padding
-border 안쪽의 공간 : box의 경계로 부터 안쪽에 있는 공간
위 사진에 보면 body의 margin과 padding의 영역이 구분되어 있고 보인다.
이제 여러 div를 만들고 색깔을 넣어 구분지어 보자
- div를 여러개 만들어서 padding이용하여 간격을 주고 싶다.
- div 각각을 구분하기 위해서 각각 id를 만들고 css에서 색깔을 입히고 싶다.
1. id는 영문소문자 다음에 숫자가 오도록 지어야 한다.
2. css에서 id를 가리킬 때에는
#id {
내용
}
이러한 양식대로 넣어야 한다.
3. id는 고유한 번호이므로 다른 형식의 태그에 같은 id가 있다면 동작하지 않는다.
물론 간격을 줄때 css에서 각 id에 padding을 입력할 수도 있고 각 높이를 다르게 할수도 있지만
만약 같다면 div에서 수정하여 한꺼번에 같은 동작을 할수 있도록 하자
Border
- 말그대로 Box의 경계이다.
- border의 CSS는 좀 못생겼다.
- border의 속성 값은 순서 없이 적어도 된다. 다만 border-sytle은 다르다. (mdn 검색)
- 이 내용은 css 전체에 해당하는 뜻이된다.
* { 내용 }
Inline padding, margin
- inline 에서 padding은 상하좌우 모두 적용이되지만
- margin은 상하가 적용되지 않고 좌우만 적용된다.
- 위그림과 같이 span의 margin 값(50px)이 위아래가 적용이 안되고 좌우만 적용
- 위 그림과 다르게 padding값(20px)가 잘 들어갔다.
'CodeTech > HTML\CSS' 카테고리의 다른 글
| CSS - 4 [inline, block, Flexbox, Wrapping, Flex-grow] (0) | 2020.09.11 |
|---|---|
| CSS - 3 [Class] (0) | 2020.09.11 |
| CSS - 1 [How to contact HTML and CSS] (0) | 2020.09.02 |
| HTML - 5 [Form tag and Semantic tag] (0) | 2020.09.02 |
| HTML - 4 [head, body, meta 수많은 태그들] (0) | 2020.08.31 |
