목차
리액트를 공부하면서 리액트 공식문서로만 공부해서는 절대 안되겠다는 것을 직감했고
css에 대해 설렁 설렁 넘어간 것 같아 유튜브 클론 코딩을 진행해 보았다.
코드 구현 방향
css방식: Styled-component
typescipt도 겸사겸사 공부하고자 tsx로 만들어 주었다.
다음은 css 배운점들이다..
z-index
const Styledfunc = styled.div`
z-index: 2;
width: 358px;
height: 34px;
border-radius: 10px;
position: relative;
display: flex;
text-align: center;
top: 195px;
left: 50%;
background-color: #ffffff;
border: 1px solid #ccc;
`;
const Shortcover = styled.div`
z-index: 0;
position: relative;
left: 270px;
top: 210px;
display: flex;
flex-direction: column;
width: 1700px;
border-bottom: 1px solid #ccc;
height: 591px;
`;z-index숫자가 낮을 수록 컴포넌트가 아래로 깔린다.
상속되는 css속성들
상속되는 속성
종류(글자색 등 글자 디자인과 관련된 속성)
- color
- font-size
- font-family
- letter-spacing
상속되지 않는 속성
종류 (공간과 관련된 속성)
- outline
- margin
- border
- padding
- position
relative와 absolute 그리고 fixed
relative
요소를 일반적인 문서 흐름에 따라 배치한다.
요소 자기 자신의 원래 위치(static일 때의 위치)를 기준으로 배치한다.
- 원래 위치를 기준으로 위쪽(top), 아래쪽(bottom), 왼쪽(left), 오른쪽(right)에서 얼마만큼 떨어질 지 결정한다.
- 위치를 이동하면서 다른 요소에 영향을 주지 않는다.
- 문서 상 원래 위치가 그대로 유지된다.
absolute
요소를 일반적인 문서 흐름에서 제거한다.
가장 가까운 위치에 있는 조상 요소를 기준으로 배치한다.
- 조상 요소 위치를 기준으로 위쪽(top), 아래쪽(bottom), 왼쪽(left), 오른쪽(right)에서 얼마만큼 떨어질 지 결정한다.
- 조상 중 Position을 가진 요소가 없다면 초기 컨테이닝 블록(<body>요소)를 기준으로 삼는다. (static을 제외한 값)
- 문서 상 원래 위치를 잃어버린다. (아래에 있는 div가 해당 자리를 차지한다)
fixed
- 어떤 엘리먼트의 position 속성을 fixed로 지정해줄 경우, 해당 엘리먼트는 부모 엘리먼트로 부터 완전히 독립되어 브라우저 화면(viewport) 상에서 어디든지 원하는 위치에 자유롭게 배치시킬 수 있게 됩니다.
- 브라우저 화면을 스크롤했을 때도 영향을 받지 않기 때문에, 다른 엘리먼트들이 상하좌우로 움직일 때, position 속성이 fixed로 설정되어 있는 엘리먼트는 그 자리에서 움직이지 않습니다.
flex
유튜브 클론 코딩하면서 가장 많이 쓴 것같다....
align 그리고 justify 헷갈려 여러 사이트 찾아 다녔다..
[CSS_Flexbox] align-items, align-self, align-content 차이점
CSS의 Flexbox를 공부하다보면 align-items, align-self, align-content 등 align에 관련된 속성이 많이 있어서 헷갈리는 경우가 있습니다. 이 글을 다 읽으면 아마 명확하게 이들의 차이점을 알 수 있게 될 겁니
kariu.tistory.com
https://ipex.tistory.com/entry/CSS3-flex-Box-justifycontent-alignitems
[CSS3] flex Box - justify-content, align-items
안녕하세요 이번 flex에서는 container 속성에서 기존에 있던 direction 속성을 알아야 사용할수가 있는 속성인 justify-content 와 align-items 속성에 대해서 포스팅을 하려고합니다. 알아야 하는 이유는 just
ipex.tistory.com
프롭스로 css 전달하기
const Styledicon = styled.div<{ bgImage: string }>`
width: 24px;
height: 24px;
background-image: url(${(props) => props.bgImage});
background-size: cover;
`;스타일드 컴포넌트와 ts의 환장의 조합..
svg아이콘
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
무료 아이콘 svg를 쓰는데 매우 편리하다.
대충 완성된 모습
'프로젝트' 카테고리의 다른 글
| [재활용 프로젝트][리액트] 카카오맵 api 내 위치 기능 구현 (0) | 2024.04.11 |
|---|---|
| [재활용 프로젝트][리액트] 카카오 api 맵 코드 리뷰하면서 배운 점 정리 (0) | 2024.04.05 |
| [재활용 프로젝트][리액트] 카카오 api map scss모듈 적용 (0) | 2024.04.04 |
| [재활용 프로젝트][리액트] 카카오 api Typescript 맵 구현 (0) | 2024.04.01 |
| [프로젝트] git 협업 시에 pull request및 코드 리뷰 방법 (0) | 2024.03.24 |
