Facts
프로젝트
css
- 로그인 페이지 기본적인 거 달았다.
- 포스팅에 보더를 넣고 유저 이미지를 원으로 깎아 넣었습니다
Feelings
- css 디자인은 너무나도 어렵다.
Findings
padding: 안쪽 여백
margin: 바깥쪽 여백
border-box: 보더 박스의 크기 결정
const GlobalStyles = css`
@import url("https://fonts.googleapis.com/css?family=Dancing+Script&display=swap");
* {
text-align: center;
}
`;
const titleFont = styled.h1`
font-family: "Dancing Script";
font-size: -webkit-xxx-large;
`;글로벌 스타일로 커스텀 font를 불러와서 쓸 수 있다.
그 불러온 정의된 font를 styled 방식으로 적용을 하면 font 적용이 된다.
emotion vs styled component
두 라이브러리 모두 css-in-js 방식이므로 결국엔 js syntax 안에 css 코드가 들어가는 것이므로 관심사를 분리하는 것은 간단했습니다
emotion은 태그에 css를 적용시킬 시에 클래스를 주듯이 css=로 주면 된다.
//css
const button = css`
border: 2px solid black;
font-size: 20px;
`;
const whiteButton = css`
${button}
label: white-button;
background-color: white;
color: black;
`;
//js
+
</button>
<button css={[whiteButton, blackButton]} onClick={subCount}>
-
</button>styled 컴포넌트는 태그 자체를 css 적용된 걸 만들어서 불러와서 그 태그 대신 쓴다.
const Button = styled.button`
border: 2px solid black;
font-size: 20px;
`;
const WhiteButton = styled(Button)`
background-color: white;
color: black;
`;Future Action
- 디자인에 소질이 없어 보이니 그냥 다른 sns 사이트에 들어가서 괜찮은 거 베끼자.