멋쟁이 사자처럼 FE 2기 - 8

10929 단어 CSSCSS

8일차 과제(220407)

1. 오늘 공부했던 것 중 중요하다고 생각한 것을 정리

2. overflow : hidden vs display:none 차이

3. CSS 중앙정렬 정리

css 정리

외부 디스플레이 타입

  • inline : 인라인 박스로 유형 결정

    	div{ display:inline }

  • block : 블록 박스로 유형 결정

    	div{ display:block }

  • inline block : 한 줄에 여러 요소가 존재함, inline + block 특징이 함께 존재

    	div{ display:inline-block }

내부 디스플레이 타입

  • flex : 내부 자식 요소들의 위치를 부모 요소안에서 X축 또는 Y축의 단방향으로 설정하는 속성
  • grid : X축과 Y축을 모두 이용해 배치하는 속성

box-sizing

box-sizing: border-box;

  • 박스 모델중에 보더 박스의 영역까지 성정한 width, height 값으로 적용.
  • 매우 직관적으로 요소의 크기를 설정하는 것이 가능 !

절대길이단위

    px : 절대길이단위, 기본 크기 16px
		 css에서 가장 많이 쓰이는 기본 단위
		 직관적을 사용자가 선언한 크기 그대로 나타낸다

상대길이단위

	em : 배수단위, 부모 요소 기준
    % : 백분율단위, 부모 요소 기준
    rem : 최상위요소(html) 기준
    vw : 백분율단위, 화면 넓이 기준 
    vh : 백분율단위, 화면 높이 기준 
	vmin : 백분율단위, 넓이와 높이 중 작은 값을 기준
	vmax : 백분율단위, 넓이와 높이 중 큰 값을 기준
     <style>
      body {
        font-size: 10px;
      }
      .one {
        font-size: 25px;
      }
      .two {
        font-size: 2em;
      }
      .three {
        font-size: 2rem;
      }
      .four {
        width: 50%;
        height: 50px;
        background: rgb(233, 65, 65);
      }
      .five {
        width: 50vw; /*vh(높이), vw(넓이)*/
        height: 50px;
        background: rgb(255, 245, 58);
      }
      .six {
        width: 50vh; /*vh(높이), vw(넓이)*/
        height: 50px;
        background: rgb(37, 51, 255);
      }
    </style>
  </head>
  <body>
    <div>rem</div>
    <div class="one">px</div>
    <div class="two">em</div>
    <div class="three">rem</div>
    <div class="four">%</div>
    <div class="five">vw</div>
    <div class="six">vh</div>
  </body>
</html>

overflow 중요 속성

hidden : 콘텐츠를 요소의 크기만큼 맞추기 위해 잘라낸다.
float나 margin 합침 현상 등에서 자식요소의 넓이나 높이를 포함 시키기 위해 사용 
scroll : 잘려진 나머지 부분을 확인 할 수 있도록 스크롤 바를 제공

background

background-image : url을 이용해 이미지의 주소에서 이미지를 불러온다.
background-color : background의 색을 지정
background-repeat : 배경이미지의 반복을 지정
background-position : 배경이미지의 위치를 지정
background-attachment : 배경이미지를 고정

overflow : hidden vs display:none 차이

overflow : hidden은 텍스트요소 외부로 넘어가면 자르고, 자리는 차지한다.
display:none : 전체 컨텐츠 블록이 사라진다

조금은 이해할 수 있는 것 같은데 완벽하게 이해가 되지는 않는다 ㅠㅠ
주말에 다시 공부해봐야겠다..!

3. 중앙정렬 정리

가장 기초

margin-left: auto;
margin-right: auto;

모든 인라인 요소 가운데 정렬

text-align: center;

메인 컨텐츠 컨테이너를 수평 중앙 정렬
(display가 inline, inline-block이면 제대로 작동 x)

body {
	width: 100%;
    padding: 0;
    margin: 0;
}
main {
	width: 100%;
    max-width: 1120px;
    margin: auto;
}

블록레벨 요소 안의 텍스트, 버튼의 이미지 등 절대위치를 적용하기 힘들때도 중앙 정렬 

	display: flex;
    justify-content: center;
    align-items: center;

절대적 위치값으로 정렬

	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

오늘의 꿀팁

  • 폰트 이용할때 좋은 사이트
    눈누
    지마켓
    산스
    부스트랩 폰트어썸 cdn
  • 홈페이지 이쁘게 만드는 4가지
    폰트 이미지 배치 레이아웃
(java/자바) 매개변수와 this / Getter Setter 메소드
Phaser3 게임 제작(2) : 화면에 오브젝트 띄우기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage