22/04/23 CSS 강의 복습, 스터디 프로젝트 시작

220423 Today I learned!

---

• CSS 강의 복습
• 스터디 프로젝트 시작
• 백준 문제 풀이

---

1. Fact

(1) CSS 강의 복습

• 강의링크
• Section 2: Flex UI만들기를 혼자서 제작했다.

혼자서 구현하지 못한 코드

.user-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

text가 너무 길때, 말줄임표로 표시하는 방법이다. 공식문서1 공식문서2

overflow 속성은 요소의 콘텐츠가 너무 커서 요소의 블록 서식에 맞출 수 없을때 처리법을 나타낸다. hidden일 경우 보이지 않는다. 이런 overflow 속성이 효력을 갖기 위해서는 white-space: nowrap로 설정해야 한다.

text-overflow는 hidden overflow일 경우, 유저에게 어떻게 어떤 신호를 보내줄지 결정하는 속성이다. ellipsis의 경우 말줄임표 표시가된다.

@media (min-width: 600px) {
  .card {
    overflow-x: hidden;
  }

  .card-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1rem;
  }

  .card-item {
    width: 50%;
    padding: 0 1rem;
  }
}

반응형 웹을 구현할때, 카드 컴포넌트들을 한 열에 여러개 배치하기 위함이다.

overflow-x는 가로 스크롤이 생기는 것을 방지하기 추가한 속성이다. over-flow: hidden;을 하게 되면, 내용이 잘려서 스크롤 바가 나타나지 않는다.

margin: 0 -1rem;을 주는 이유는 양쪽에 생긴 공백을 제거하기 위함이다. (음수 마진을 사용하면 컨텐츠를 당기는 효과가 있다.)

(2) 스터디 프로젝트 시작

• 리액트를 활용한 토이프로젝트
  • 노마드 코더 리액트 강의에서 학습한 내용을 활용하여 웹사이트 제작
• 컴포넌트 구조 구상 & Button component 생성
• 리액트 복습 (다 잊어버렸다….😓)
  • 프로젝트 시작 방법
  • component 생성
  • Props, State의 활용

(3) 백준 문제 풀이

• 2146 다리 만들기
• 문제풀이

2. Feeling

CSS lay-out을 혼자 만들어 보면서, 실제로 머릿 속에 상상한 것을 구현할 수 있는데 도움이 많이 되는 것 같다.

리액트를 활용한 프로젝트의 경우.. 현재 진행이 엄청 더디다. 왜냐하면 현재 리액트 몰?루?상태이기 때문이다. 망각곡선이시여..

‘까짓것 지금부터 다시 배우면 되지…‘라는 생각으로 하나하나씩 시작하고 있다. 그래도 이 코드만 작성한 나.. 제법 실망스러워요 🥺

import styled from "styled-components";

function Button() {
  return (
    <div>
      <StyledButton>+</StyledButton>
    </div>
  );
}

const StyledButton = styled.button`
  border: none;
  border-radius: 50%;
  background-color: #ff9300;
  color: white;
  width: 50px;
  height: 50px;
  font-size: 2.5rem;
  position: fixed;
  top: 80%;
  right: 10%;

  &:hover {
    cursor: pointer;
    background-color: #ffd200;
  }
`;

export default Button;

3. Finding

CSS in JS (styled-components 라이브러리 활용법)

리액트에서 CSS를 어떻게 적용해야 할 지, 찾아보다가 CSS in JS 방식을 발견하게 되었다. 참고한 블로그 글

CSS in JS 방식은 다음과 같다.

1. HTML, CSS, JavaScript 3개로 분리하지 않는다.
2. 대신 component 단위로 제작한다.
3. 각 component에 HTML, CSS, JavaScript을 다 넣는다.

즉, CSS, HTML을 JavaScipt로 코드를 작성한다. styled-components 라이브러리는 생각보다 손쉽게 사용할 수 있었다.

4. Future Action & Feedback

Future Action	진행 상황	Feedback
DOM을 깨우치다	pause 🤦‍♀️	잠시 중단!
강의에서 학습한 flex-website 혼자 제작하기	in progress 🚀	현재 Section2까지 진행한 상태이다. 오는 주에 Section3를 할 예정이다.
1일 1알고! 🔥	in progress 🚀