4회차강의

1. 레이아웃

1. 찾아본링크

• 참고글

2. 박스

• margin , boreder , padding , contents

• 열린태그랑 닫힌태그 안에있는걸 contents라 생각하면된다.

  • margin은 border 기준 바깥,
  • padding은 border 기준 안쪽,
    • 빈공간에 의해서 타의적으로 움직임.
  • margin과 border는 각각 뒤에
    left,top,right,bottom을 입력할수도 있지만,

    	margin-left: 100px;
    	margin-top: 100px;
    	margin-right: ;
    	margin-bottom: ;
    	padding-left: 100px;
    	padding-top: 100px;
    	padding-right: ;
    	padding-bottom: ;

  • 그냥 한줄로도 요약가능 이때의 수치값은 12시부터 시계방향
    top,right,bottom,left순

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

    • 짧게하는이유 로딩속도빠르게할려고

• 기본적으로 html이랑 body는 margin이랑 padding값을 가지고 있음.

  • 그러니 없애자

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

    • margin과 padding뒤에 숫자하나만 넣으면 4방향모두에 저값 적용

• padding을 쓰면 기본적인 컨텐츠에 + 되는개념이라 모양이 바뀌고 커짐 ,

  • 그걸 방지해보자

    box-sizing: border-box;

  • 이럴시 맨처음 기본으로 잡음 크기를 유지하면서 들어감

2. margin 병합현상

1. 찾아본링크

• 참고글

2. 형제지간

	<div class="margin-one"></div>
	<div class="margin-two"></div>

• 형제끼린 공유하는데 더큰값이 작은값을 먹어버린다.

  .margin-one{
  width: 100%;
  height: 100px;
  background-color: yellow;
  margin-bottom: 100px;}
  .margin-two{
  width: 100%;
  height: 100px;
  background-color: blue;
  margin-top: 50px;}

  • 이런경우 위에 100px 아래50px 을 잡아줘도
    겹쳐서 100px만 적용됨.
  • 만약 아래 top부분을 150px로 바꾸면 아래기준에서 150px만 적용
  • 값이 동일할시에는 똑같이 100px만 적용

3. 부모자식

<div class="margin-parent">
	<div class="margin-child"></div>
</div>

• 부모자식간은 더복잡하다

  .margin-parent{
  width: 300px;
  height: 300px;
  background-color: yellow;}
  .margin-child{
  width: 150px;
  height: 150px;
  background-color: blue;
  margin-top: 100px;}

  • 이러면, 파란값만 내려가는게 아니라 위에 같이있는 노란값도 같이 내려온다.
  • child 값에

    position: absolute;

  • 를 추가하면되지만 나중에 알아본다.

3. 디스플레이

1.찾아본링크

• 참고글
• 참고글2
• 참고글3

2.

• 일단 Block이랑 Inline을 이해

• y축느낌

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

  • 공간생성가능 등

• x축느낌

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

  • 공간생성 불가

• 이상태에서 각각에 margin-top을 넣어도 span엔 적용안됨

  	h1 {
  	width: 100px;
  	height: 100px;
  	background-color: yellow;
  	margin-top: 100px;}
  	span {
  	width: 100px;
  	height: 100px;
  	background-color: pink;
   	margin-top: 100px;}

• 이 상태에서 각각의 속성을 바꾸고 싶을때 display활용

  display: inline;
  display: block;

  • 이러면 각각 속성이 부여됨

• 양쪽모두의 성격을 갖고싶을때(x축정렬도하고 블록처럼쓰고싶을때

  display: inline-block;

• vertical-align 해보기

  <span class="inline">Inline</span>
  <span class="inline-block">Inline-Block</span>
  <img src="https://via.placeholder.com/200">

  • CSS

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

    • 이렇게하면 3개의 컨텐츠가 뒤에적힌 값에따라 정렬됨
    • top,middle,bottom 사용
    • 얘는 inline값에만 사용가능
    • block 값에 작성해도 적용안됨.
    • img태그 는 inline-block속성을 가지고있음

4. 포지션

1. 찾아본링크

• 참고글
• 참고글2
• 참고글3

2. 차원을 이해해보자

• 1차원 , 2차원 , 3차원(layer개념?)
• 홈페이지는 2차원과 3차원의 결합느낌

3. 알아봐야할것

• margin-top 사용시 부모 자식 지간에 발생하는 마진 병합 현상이 일어나는지
• top, right, bottom, left 속성을 사용할수있는지
• 자식의 높이 값이 부모에게 영향을주는지

1. Static

<div class="static-parent">
	<div class="static-child"></div>
</div>

• CSS

  .static-parent{
  width: 300px;
  height: 300px;
  background-color: yellow;}
  .static-child{
  position: static;
  width: 150px;
  height: 150px;
  background-color: blue;
  margin-top: 100px;}

• static일때 마진병합현상이 일어나는가? Yes

  top: 100px;

• top,right,bottom,left를 사용할수있는가? No

  .static-parent{
  width: 300px;
  /*height: 300px;*/
  background-color: yellow;}
  .static-child{
  position: static;
  width: 150px;
  height: 150px;
  background-color: blue;}

• 자식의 높이값이 부모에게 영항을 주는가? Yes
• 모든html태그는 static을 default값으로 가지고있다.
• 2차원중에하나

2. fixed

• html

  <div class="box1"></div>
  <div class="fixed-parent">
  	<div class="fixed-child"></div>
  </div>
  <div class="box2"></div>

• CSS

  .box1 {
  width: 300px;
  height: 200px;
  background-color: gray;}
  .fixed-parent {
  width: 300px;
  height: 300px;
  background-color: yellow;}
  .fixed-child {
  position: fixed;
  width: 100px;
  height: 100px;
  background-color: blue;}
  .box2 {
  width: 300px;
  height: 2000px;
  background-color: green;}

  • fixed 고정된거
    • 쇼핑몰의 배너같은느낌
      
  • fixed일때 마진병합현상이 일어나는가? No
  • top,right,bottom,left를 사용할수있는가? Yes
    • 기준점은 브라우저 왼쪽상단을 기준으로 움직임
  • 자식의 높이값이 부모에게 영항을 주는가? No
• Static과 완벽히 반대되는 결과
• 3차원 중에하나

3. relative

• html,css부분 모두 동일하나 fixed부분이 relative로 변경

• box2부분도 삭제

• relative일때 마진병합현상이 일어나는가? Yes

• top,right,bottom,left를 사용할수있는가? Yes
  - 기준점은 최초위치를 기준으로 움직임

• 자식의 높이값이 부모에게 영항을 주는가? Yes

• 2차원,3차원 특징을 모두갖고있다.

4. absolute

• absolute일때 마진병합현상이 일어나는가? No

• top,right,bottom,left를 사용할수있는가? Yes
  - 기준점 부모 포지션상태에따라 다름

• 자식의 높이값이 부모에게 영항을 주는가? No

• 3차원 특징을 갖고있다.

1. 추가특징

• absolute는 부모가 어떤 포지션 상태인지에 따라 top,right,bottom,left기준좌표점이 달라짐

5. 정리

2. 어려웠던점

• 슬슬 더 복잡해지는 기분이라서 그냥 한번만 설명듣고 바로 이해가 되지않는다.

3. 해결법

• 강의내용만 돌려보는게 아니라 구글링 통해서
  다른사람들이 올려놓은 정리글과 포스트를 같이 보면서 이해하려고 했다.

4. 소감

• 어제랑 다르게 복잡해져서 그런지 먼가 거리감이 다시 느껴지는 부분

오늘한파일 Git