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가지
폰트 이미지 배치 레이아웃
뜨내기 FE 개발자