5일차 css 오늘의 학습은 레이아웃에 대해 배웠다. display 속성을 사용하여 웹안에서의 배치를 바꾸는 내용이 핵심이었다.

1) 학습내용

• Box model

우리가 웹사이트를 만들때 각 레이아웃의 공백이라던지 그 구조를 빠르게 파악할수있게 도와주는 일종의 옵션

margin
padding
border
contents

contents : 열린태그와 닫힌 태그 안에 있는 내용물을 컨텐츠라고 알고있으면 된다.

예를들어 div태그 기준으로는 hello world 가 컨텐츠

Body 태그 기준으로는 div태그가 컨텐츠이다.

마진 볼더 패딩의 정의
가운데 파란색은 컨텐츠

margin과 padding은 특정 오브젝트를 옮기고자 할때
특정 좌표배치작업을 할때 적용되는 css속성이다.

margin은 border를 기준으로 바깥쪽

padding은 border를 기준으로 안쪽

이 margin 과 padding 값을 주는방법은

  margin-left:100px;
   margin-top:100px;

   padding-right:100px ;
   padding-bottom:100px ;

대략 이런 모양으로 사용되지만, 좀 더 간편하게 값을 주는방법이 있다.

  margin: 100px 0 0 100px;

이렇게 적용할수있다. 이건 시계방향으로 적용된다.
순서대로 위, 오른쪽, 아래, 왼쪽 순서대로 적용된다.

코드를 줄이면 시간도 단축되지만 파일을 가져오는 시간도 단축되어서 웹사이트의 로딩속도가 빨라진다.

html, body{
margin: 0;
padding: 0;
}

우리가 나중에 사이트를 만들게되면
기본적으로 html과 body태그에 내장되어있는 마진과 패딩을
0으로 바꿔줘야 훨씬 깔끔하고 보기좋은 사이트를 만들 수 있다.

margin 과 padding 을 이용했을때 공간의 변화를 주고 싶지 않다면
Box-sizing:border-box로 값을 주면 된다.

• 마진 병합 현상

형제지간에 발생하는 마진병합현상



만약에 우리가 마진 탑에 100px 마진 바텀에 150px의 값을 준다면 당연히 가운데 공간에는 100px 과 150px의 합인 250px이 있어야한다. 하지만 형제지간에 발생하는 마진병합현상은
100px보다 더 큰 값인 150px에 서로 병합되어 가운데 공간의 크기는 150px이 되는것이다.

부모지간에 발생하는 마진병합현상


마찬가지로 부모지간에도 마진병합현상이 일어난다.
노란박스(부모) 와 파란박스(자식)이 있는데 노란박스의 높이를 없앤다면 어떻게 될까?
높이가 0인 박스는 width값이 있더라도 사라져서 보이지 않아야 한다. 그러나 파란박스(자식)과 병합된 부분의 높이는 남아있기때문에 노란박스도 파란박스의 높이와 같게 사라지지 않는다.

이러한 병합현상을 방지하기 위해서는

이후에 배울 position:absolute를 사용해야한다.

• Display

Inline과 Block요소

Block요소는 줄바꿈 Inline은 줄바꿈없이 나란히정렬이 기본적인 개념이다.

Block요소는 margin-top, padding-top같은 상하배치작업을 할수있다.

그러나 Inline요소는 공간만들수없고 상하배치작업이 불가능하다.

그러나 span 요소를 블록요소로 바꾸고

h1태그를 인라인요소로 바꿀 수 있게 사용하는것이

display이다.

Inline요소와 Block요소의 성격이 다들어갔으면 좋겠다면

= Inline-block

이 속성은 메뉴버튼을 만들때 자주사용된다.

인라인요소들은 기본적으로 약간의 공백을 가지고있다.

vertical-align: top;
}

이 속성을 사용하면 가장 크기가 큰 이미지를 기준으로 방향에 맞게 가장끝에 배치된다.
이 속성은 인라인 요소에만 사용이 가능하다

_Img 속성은 기본적으로 inline block 요소 둘다 가지고있다.

• position

position은 크게 4가지가 있다. position 별로 기능을 비교해보려면,

첫번째 margin-top 사용시 부모 자식 지간에 발생하는 마진 병합 현상이 일어나는지

두번째 top, right, bottom, left 이속성의 사용이 가능한지

세번째 자식의 높이 값이 부모에게 영향을 주는지

position : static 은 마진탑을 사용했을때 부모자식지간에 발생하는 마진병합현상이 발생하고, top, left, bottom, right를 사용할 수 없다. 부모가 높이값이 없을때 자식의 높이값이 영향을끼친다. 이러한 특징을 가진것이 2차원
position : static 은 2차원의 성질이다.

모든 html은 기본적으로 position:static의 상태이다.

position:fixed

화면을 내려도 픽스를 한 속성은 고정되서 적용된다.

이러한 기능은 주로 웹사이트의 배너광고나 메뉴바에 적용되어있으며,

부모지간에 발생하는 마진병합현상이 여기서는 적용되지않는다.

여기서는 top.bottom, left, right 사용가능하다.
사용했을때 사용기준은 왼쪽 상단(브라우저)를 기준으로 움직인다.

Position:relative

는 부모병합현상이일어난다,

Top:100px을 줬을때 이전과는 다르게 부모태그를 기준으로 움직인다.
부모가 높이값을 가지지 않았을때 부모에게 영향을 준다.
2차원의 특징과 3차원의 특징 양쪽 모두의 특징을 가지고 있다고 봐도 무방하다.

position:absolute

부모자식지간의 병합현상이 일어나지 않는다.

Top, left, right, bottom 을 사용할수있지만

그좌표의 기준점은 부모태그가아닌 브라우저를 기준으로 사용하고있다.

Position : alsolute 는 3차원적이다

포지션을 잡을때 부모의 속성이 static 이라면 브라우저를 기준으로 움직이지만.

나머지 3개를 가지고 있을때는 부모를 기준으로 형성되어있다.(내가 원하는 위치에 옮기고 싶다면, 부모태그에 적절한 position 값을 부여하고 absolute를 적용하면된다.

이해가 잘 안될때는 강사님께서 보여주신 사진을 참고하니 도움이되었다.

2) 학습내용 중 어려웠던 점

전체적으로 나에게 조금 헷갈리는 부분이 많았다. 어느하나를 콕집지는 못하지만
내가 웹사이트를 만들기 시작할 때 제대로 활용할 수 있을지 자신이 없었다.

3) 해결방법

김인권 강사님께서 추천하신 모든 경우의 수의 position을 연습해보기로했다.

부모의 포지션상태 4가지

자식의 포지션상태 4가지 4x4 = 16가지

첫번째 margin-top 사용시 부모 자식 지간에 발생하는 마진 병합 현상이 일어나는지

두번째 top, right, bottom, left 이속성의 사용이 가능한지

세번째 자식의 높이 값이 부모에게 영향을 주는지

이거 3가지 까지

4x4x3 총 48 가지의 경우의 수를 시간날때마다 실습해보려고한다.

4) 학습소감

진도가 생각보다 조금빠르지만 집중해서 학습 및 복습하면 충분히 할 수 있을거라 생각한다.

5일차 Github