2. Header 꾸미기!
구현된 화면
코드
CSS 시작 세팅!
기본적인 색상, 폰트, 사이즈들은 자주 사용하는 속성들이기 때문에, 여러 부분에 재사용하기 용이하게 먼저 정의를 해준다. 이 부분이 이번 클론 코딩하면서 얻어갈 중요한 것 중 하나라고 생각한다.
:root {
/* color */
--white-color: #fff;
--black-color: #140a00;
--blue-color: #045fd4;
--red-color: #ff0000;
--grey-dark-color: #909090;
--grey-light-color: #e0e0e0;
/* size */
--padding: 12px;
--avatar-size: 36px;
/* font size */
--font-large: 18px;
--font-medium: 14px;
--font-small: 12px;
--fint-micro: 10px;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
/* 너비 계산시 padding, marign 포함 계산됨 */
}
body {
font-family: Roboto;
}
Header
위 root에서 정의한 내용을 사용할때는 color: var(--white-color);식으로 활용한다.
/* Header */
header {
display: flex;
justify-content: space-between;
padding: var(--padding);
background-color: var(--black-color);
color: var(--white-color);
}
header .logo {
font-size: var(--font-large);
}
header .logo i {
color: var(--red-color);
}
header .icons .fa-search {
margin-right: var(--padding);
}
Author And Source
이 문제에 관하여(2. Header 꾸미기!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@starkdy/2.-Header-꾸미기
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
CSS 시작 세팅!
기본적인 색상, 폰트, 사이즈들은 자주 사용하는 속성들이기 때문에, 여러 부분에 재사용하기 용이하게 먼저 정의를 해준다. 이 부분이 이번 클론 코딩하면서 얻어갈 중요한 것 중 하나라고 생각한다.
:root {
/* color */
--white-color: #fff;
--black-color: #140a00;
--blue-color: #045fd4;
--red-color: #ff0000;
--grey-dark-color: #909090;
--grey-light-color: #e0e0e0;
/* size */
--padding: 12px;
--avatar-size: 36px;
/* font size */
--font-large: 18px;
--font-medium: 14px;
--font-small: 12px;
--fint-micro: 10px;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
/* 너비 계산시 padding, marign 포함 계산됨 */
}
body {
font-family: Roboto;
}
Header
위 root에서 정의한 내용을 사용할때는 color: var(--white-color);식으로 활용한다.
/* Header */
header {
display: flex;
justify-content: space-between;
padding: var(--padding);
background-color: var(--black-color);
color: var(--white-color);
}
header .logo {
font-size: var(--font-large);
}
header .logo i {
color: var(--red-color);
}
header .icons .fa-search {
margin-right: var(--padding);
}
Author And Source
이 문제에 관하여(2. Header 꾸미기!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@starkdy/2.-Header-꾸미기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)