외부 디스플레이 타입
inline : 인라인 박스로 유형 결정
div{ display:inline }
block : 블록 박스로 유형 결정
div{ display:block }
inline block : 한 줄에 여러 요소가 존재함, inline + block 특징이 함께 존재
div{ display:inline-block }
내부 디스플레이 타입
box-sizing
box-sizing: border-box;
절대길이단위
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은 텍스트요소 외부로 넘어가면 자르고, 자리는 차지한다.
display:none : 전체 컨텐츠 블록이 사라진다
조금은 이해할 수 있는 것 같은데 완벽하게 이해가 되지는 않는다 ㅠㅠ
주말에 다시 공부해봐야겠다..!
가장 기초
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%);