CSS 레이아웃(1)

📌학습 내용

※본 페이지 이미지 속 모든 녹색 선은 해당 위치에 여백이 있음을 나타내기 위함임

📖박스모델

• 각 레이아웃의 공백이나 구조를 빠르게 파악할 수 있도록 도와주는 옵션

💡 margin, padding, border, content
•margin: border를 기준으로 바깥 쪽
•padding: border와 content의 사이
•Object는 주체적으로 움직이는 게 아니라 공백으로 밀려나며 움직임

      .box-model{
          width: 200px;
          height: 200px;
          background-color: yellow;

          border: solid 10px red;
          margin-left: 100px; 
          padding-left: 100px;
      }

💡 마진과 패딩 한꺼번에 넣기
• 코드가 짧을수록 용량이 줄어 웹페이지 로딩 속도가 빨라짐
• 시계방향으로 top, right, bottom, left 넣어주기

        margin: 100px 0 0 100px;
        padding: 100px 0 0 100px;

💡 html과 body의 공백 없애기
html과 body 태그에 자체적인 마진과 패딩이 들어가기 때문에 아래 코드를 디폴트로 적용해주는 것이 좋음

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

💡 padding 분리하기
• 콘텐츠의 공간은 패딩 공간과 합쳐져 크기가 변함
• 패딩 공간을 포함하지 않으려면 border-box를 활용
• 박스 영역 밖으로 패딩 영역의 크기가 추가되지 않고, 박스 영역 안으로 크기를 공유하는 패딩 공간이 추가됨

	box-sizing: border-box;	
	width: 200px;
	height: 200px;

	border: solid 10px;    
        padding: 100px 0 0 100px;    

📖Display

inline 요소를 block으로 활용하거나 block 요소를 inline으로 활용하고 싶을 때 변환해줌

참고) Inline과 Block
https://velog.io/@naheeyu/210630

📎HTML

	 <h1>Block</h1>
	 <h1>Block</h1>
	 <h1>Block</h1>

	 <span>Inline</span>
	 <span>Inline</span>
	 <span>Inline</span>

📎CSS display 적용

      h1 {
          display: inline;
      }

      span {
          display: block;
      }    

💡 inline-block
가로 정렬이면서(inline) 공간에 크기를 주고 상하배치 작업을 가능하게(block) 하고 싶을 때 씀
ex) 메뉴 버튼 만들 때 흔히 사용

      h1 {
          display: inline-block;
      }

📖Vertical-align

• 아래처럼 inline, inline-block 요소 배치가 뒤죽박죽일 때 수직 정렬을 깔끔하게 함
• 실무에서 많이 쓰이는 배치는 vertical-align: middle;

📎HTML

    <span class="inline">Inline</span>
    <span class="inline-block">Inline-block</span>
    <img src="https://via.placeholder.com/200">
    <!-- img 태그는 inline-block에 해당함 -->

📎CSS

      .inline-block {
          display: inline-block;

          width: 100px;
          height: 100px;
          background-color: yellow;
      }

      .inline, .inline-block, img {
          vertical-align: middle;
      }

📖마진 병합

• 레이아웃 상하 배치 작업에서 흔히 만나는 문제 현상
• 다음 항목인 Position으로 해결할 수 있음

(1) 형제 간에 발생하는 마진 병합
margin-top과 margin-bottom이 모두 적용되지 않고 작은 값이 큰 값에 병합됨

(2) 부모 자식 간에 발생하는 마진 병합
자식 요소에 적용하려는 margin이 부모 요소에 함께 적용됨

📖Position

• 레이아웃에서 가장 중요하고 동시에 어려운 개념
• 웹페이지는 2차원과 3차원을 적절히 사용해야 함
• position은 특정 영역이 2차원인지 3차원인지를 정해주는 것

💡 Position 속성값 4가지
• 각 속성값의 특징을 확인하려면 자식 요소에 속성값을 주어 확인하면 됨
• 아래 세 가지를 기준으로 포지션 속성값이 가진 특징을 파악하자
—margin top 사용시 부모자식 간 마진 병합 현상이 일어나는지
—top, right, bottom, left 속성을 사용할 수 있는지
—자식의 높이 값이 부모에게 영향을 주는지

(1) Static = 2차원
모든 html 태그는 기본적으로 position: static;의 상태

      .class {
          position: static;
      }

—부모 자식 간의 마진 병합 현상 일어남
—top, right, bottom, left를 사용할 수 없음
—자식의 높이값이 부모에 영향을 줌: 부모의 높이값을 없애면 자식의 높이값이 적용됨

(2) Fixed = 3차원
요소가 브라우저 최초 위치에 고정되어 나타남

      .class {
          position: fixed;
      }

—부모 자식 간의 마진 병합 현상 일어나지 않음
—브라우저 왼쪽 상단 기준으로 top, right, bottom, left 사용 가능
—자식의 높이값이 부모에게 영향을 주지 않음: 부모의 높이값을 없애면 부모 요소가 사라짐

(3) Relative = 2차원 + 3차원

      .class {
          position: relative;
      }

—부모 자식 간의 마진 병합 현상 일어남
—자식 요소의 최초 위치를 기준으로 top, right, bottom, left가 주체적으로 사용됨
—자식의 높이값이 부모에 영향을 줌

(4) Absolute = 3차원

      .class {
          position: absolute;
      }

—부모 자식 간의 마진 병합 현상 일어나지 않음
—top, right, bottom, left를 사용 가능함: 부모가 Static이면 브라우저를 기준으로 하지만, 부모가 3차원 포지션이면 부모 요소를 기준으로 움직임
—자식의 높이값이 부모에게 영향을 주지 않음

강사님 Tip⭐⭐⭐
부모와 자식의 position 조합 경우의 수 48가지를 파악하면 레이아웃이 쉬워진다!

박용 멘토님: CSS Position 참고
https://medium.com/@yeon22/css-css-position-%EC%84%A4%EB%AA%85-f2c0a0b26556

✍개념 이미지 참고

📌어려운 점

내 타자가 느린지 강사님 코드 작성 속도 따라가기가 힘들어서 자꾸 멈추게 됨😭

포지션 개념이 어렵다. 오늘은 강의를 막 들었으니 이해가 되지만 나중에 내가 스스로 적용할 수 있을지가 걱정이다.

📌해결 방법

이미지로 개념을 잡아보려고 구글링을 했는데 오늘 배우지 않은 sticky position이라는 것도 있고 해서 더 추가적으로 알아야 할 게 남은 것 같다.

📌느낀 점

처음으로 영상 듣던 중에 머리가 아파졌다. 🤦‍♀️

📌Remind!!!

주말에 CSS Position에 대해서 찾아보기