🔗 수평 / 수직 정렬(align)
text-align: 2행 이상부터 사용 가능vertical-align: inline, inline-block, table 요소에서만 사용 가능margin/padding: 편한 방법이지만 정확하게 맞추기 힘듬line-height: 부모와 자신의 높이 조절position: margin/padding과 동일하게 정확하게 맞추기 힘듬gribox- flexbox의 정렬 속성(
justify-content,align-items, etc...) : 가장 사용하기 좋음
📘 가운데 정렬 예시 1
.box1 {
border: 2px solid tomato;
height: 100px;
}
.box2 {
border: 2px solid teal;
text-align: center;
line-height: 100px;
margin: -2px -2px;
}
📘 가운데 정렬 예시 2 (주로 사용되는 방법)
.box1 {
border: 2px solid tomato;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.box2 {
border: 2px solid teal;
text-align: center;
}
🔗 CSS 리셋 코드
✨ Eric Meyer’s CSS Reset
주로 사용되는 코드
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
🔗 반응형 웹
화면 너비에 따라서 반응하는 동적인 웹
PC 웹, 태블릿 웹, 모바일 웹 3가지로 구분
✨ 반응형 웹 만드는 방법
- PC 웹과 모바일 웹을 별도로 제작 ex) 네이버의 PC 웹, 모바일 웹
- 반응형으로 해상도에 따라서 동적인 배치
📏 디바이스별 일반적인 화면 크기
PC 화면너비 : width 960px 이상
태블릿 화면너비 : width 768px 이상, 959px 이상
Mobile 화면너비 : width 767px 이하
/* PC 해상도 */
/* 960px <= width */
@media screen and (min-width: 960px) {
body {
background-color: tomato;
}
}
/* 태블릿 해상도 */
/* 768px <= width <= 959px */
@media screen and (min-width: 768px) and (max-width: 959px) {
body {
background-color: teal;
}
}
/* 모바일 해상도 */
/* width <= 767px */
/* orientation: portrait(휴대폰 세로일 때), landscape(가로로 눕혔을 때) */
@media screen and (max-width: 767px) and (orientation: portrait) {
body {
background-color: olivedrab;
}
}
@media screen and (max-width: 767px) and (orientation: landscape) {
body {
background-color: greenyellow;
}
}⛓️💥 반응형 웹과 flex 연결
1. PC 화면
/* PC해상도 */
.wrap {
display: flex;
/* 주축방향 row, 줄바꿈 wrap */
flex-flow: row wrap;
}
.wrap div {
display: flex;
justify-content: center;
align-items: center;
}
.header {
background-color: greenyellow;
height: 100px;
/* flex - grow basis */
flex: 1 100%;
}
.main {
background-color: coral;
height: 400px;
flex: 1 100%;
}
.ad {
background-color: blueviolet;
height: 100px;
flex: 1 50%;
}
.info {
background-color: lightskyblue;
height: 100px;
flex: 1 50%;
}
.footer {
background-color: brown;
height: 100px;
flex: 1 100%;
}
2. 태블릿 화면
/* Tablet 해상도 */
@media screen and (max-width: 959px) {
.header {
flex: 1 100%;
order: 0;
}
.ad {
flex: 1 20%;
order: 1;
height: 400px;
}
.main {
flex: 1 60%;
order: 2;
height: 400px;
}
.info {
flex: 1 20%;
order: 3;
height: 400px;
}
.footer {
flex: 1 100%;
order: 4;
}
}
3. 모바일 화면
/* Mobile 해상도 */
@media screen and (max-width: 767px) {
.header {
flex: 1 80%;
order: 0;
}
.ad {
height: 100px;
flex: 1 20%;
order: 1;
}
.main {
flex: 1 100%;
height: 400px;
order: 2;
}
.info {
height: 0;
visibility: hidden;
order: 3;
}
.footer {
height: 100px;
flex: 1 100%;
order: 4;
}
}
🔗 Vendor Prefix
CSS 표준안으로 확정되지 않았거나 특정 브라우저에서만 지원되는 CSS 속성으로, 기능을 지원하지 않는 브라우저에서도 해당 기능을 사용할 수 있게 해준다.
브라우저 별 CSS 지원 정보를 확인할 수 있는 웹사이트
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
🚀 사용법
-ms-: IE or Edge-webkit-: Chrome, Safari, Android Browser-moz-: Firefox-o-: Opera
아래와 같이 속성 앞에 기능을 지원하는 브라우저의 접두어를 넣어주면 됨
-ms-border-radius: 10px; /* 인터넷 익스플로러 */
-webkit-border-radius: 10px; /* 크롬, 사파리 */
-moz-border-radius: 10px; /* 파이어폭스 */
-o-border-radius: 10px; /* 오페라 */
🧰 vendor prefix 신경쓰지 않고 모든 CSS 속성들을 사용 할 수 있게 해주는 JS 파일
prefixfree.min.js
0.01MB
아래와 같이 코드를 head 태그 안에 넣어주면 됨
/* https://projects.verou.me/prefixfree/ */
<script src="prefixfree.min.js"></script>
✈️ 출처
한국경제신문 x 토스뱅크 풀스택 훈련