React

[React] Day4, Day 5

쿨키드 2022. 9. 20. 22:35
React
Day4, Day 5

 

리액트
컴포넌트들을 만들고 조립해서 html전체를 만든다.
값을 전달할 때는 매개변수로 전달한다. data가 있기 때문에 값을 전달함.
state[ ]  데이터를 조작하는 함수
function App() {
  return (
    <>
      <Header />  닫는태그없는 컴포넌트
      <div>나는 컴포넌트가 아님</div>
      <Main></Main> 닫는태그있는 컴포넌트
    </>
  );
}
 
컴포넌트는 대문자를 사용해서 구분한다.
컴포넌트는 굳이 닫는 태그로 안 써도 된다. 왜냐면 닫는 태그를 써서 안에 내용을 적어도 나타나지지 않음

 
 
function Header(props) {
    return (
        <header>
            {props.what}
            {props.member.map(el => <li key={el.id}>{el.name}</li>)}

👉아래의 li랑 같은 결과, 다른 식이다. li=key{el.id}로 정확하게 구분?을 해주고, map()함수를 써서 반복?되게 해줌

            {/* <li>{props.member[0].name}</li>
            <li>{props.member[1].name}</li>
            <li>{props.member[2].name}</li>
            <li>{props.member[3].name}</li> */}
        </header>
    )
}
export default Header;

 

스프라이트기법
백그라운드-포지션 이용함.  백그라운드-포지션은 수치가 있어서 애니메이션 적용 가능
svg가 나오고 난 뒤로는, 많이 사라졌으나 사용함
 
 
ctrl shift r : 강력한 새로고침
 
✋ 슬리이드에는dlisplay:flex(swipers는 display기반), 또는 float(슬릭은 float를 기반으로)주면 안됨
슬릭은, 높이가 고정된 상태에서 overflow:hidden을 주면 부모 박스 높이?에 영향을 줄 수 있음
그리고 슬릭 돌릴 때는 div 박스에 넣기보다, figure에 넣어줘야함. 슬릭 돌릴 때 자동으로 생성되는 div박스가 2개나 생겨서, nth:child를 잡기 어렵기 떄문!
 
텍스트 위에서는 슬라이드를 넘기지 못함

 

<figure> 
                <div class="inbox"> 
                    <img src="../img/hd01.jpg" alt=""> 
                </div> 
                <div class="cover"> 
                    <h3>주요사업 1</h3> 
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, esse.</p> 
                    <a href="">자세히보기</a> 
                </div> 
            </figure>


<!-- 이미지 오버플로우 히든 쉽게 때리기 위해서 div로 감 싸주는 방법 좋음 -->
.Business figure .cover {
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
           📌 display: flex;      
           📌 flex-direction: column;
👉h3와 p, a 간격을 떨어뜨리기 위해서 flex하고 방향을 열로 바꿔줌

            background: rgba(0, 0, 0, 0.75);
            color: #fff;
            transition: left 0.5s;
            📌 padding: 40px 10px;
👉 padding: 40px 10px; 을 줘서 박스 안에 공통된 간격을 줌
        }

        .Business figure:hover .cover {
            left: 0;
        }

        .Business figure .cover a {    
        📌 margin-top: auto;
👉 p의 길이에 상관없이 항상 같은 위치를 유지함
        }
  .Business figure .cover { 
            position: absolute; 
            top: 0; 
            left: -100%; 
            width: 100%; 
            height: 100%; 
            display: flex; 
            flex-direction: column; 
            background: rgba(0, 0, 0, 0.75); 
            color: #fff; 
            transition: left 0.5s; 
            padding: 40px 10px; 
        } 
        .Business figure:hover .cover { 
            left: 0; 
        } 
        .Business figure .cover a { 
            align-self: flex-start; 
            /* .Business figure .cover a가 cover에 flex(stretch가 특징)준 게 있어서 늘어나서  align-items: flex-start; */ 
            /* display: inline-block; */ 
            /* 늘어날 것을 대비해서 inline-block */ 
            border: 1px solid rgba(255, 255, 255, 0.5); 
            margin-top: auto; 
            padding: 10px 15px; 
        } 
        .Business figure p { 
            font-size: 15px; 
            font-weight: 300; 
            line-height: 1.25; 
        } 
        .Business figure h3 { 
            /* width: 100%;랑 같은 효과 = align-self:strech*/ 
            font-size: 21px; 
            font-weight: 500; 
            padding: 0 0 20px 0; 
            margin: 0 0 20px 0; 
            border-bottom: 1px solid rgba(255, 255, 255, 0.5); 
        }

 

 

📌📌html

gap말고 padding사용할 때, li에 padding잡는 게 아니라 a에 잡아서 손가락이 이어질 수 있게 한다.
margin은 겹침이 있지만, padding은 겹침이 없다.