웹/CSS8 [CSS] Div 안에 margin 적용하면 밖으로 나가는 현상 const TodaySentencePage = () =>{ return ( 뼈가 자라는 여름 슬픔을 병처럼 여기지 않겠다고 말하면서 나는 조금씩 의연해졌다. 슬픔에게도 비밀이 있을거라고. 그 비밀을 추궁하지 않기로 했다. 저자: 백년의 고독 분야: 소설 출판사: 민음사 책 보러가기 확인 ) } const OneSentenceContainer = styled.div` background-color: white; width: 1295px; height: 554px; border-radius: 50px; `; const BookContainer = styled.div` display: flex; margin: 80px 90px; `; 왜 BookContainer에 margin값을 주면 밖으로 나가지? 어쨌든 .. 2023. 9. 12. [CSS] div 안에 이미지 꽉 채우기 const GridBox1 = styled.div` `; const Imgdiv = styled.div` width: 228px; height: 299px; margin: 25px; margin-bottom: 3px; `; const BookImg = styled.img` background-image: url("https://image.aladin.co.kr/product/2584/37/coversum/8998441012_3.jpg"); width: 100%; height: 100%; background-repeat: no-repeat; background-size : cover; /* border: transparent; */ /* object-fit:cover; */ `; 알라딘 도서 api를 사용.. 2023. 8. 30. [CSS] 태그에 직접 스타일 속성 적기, 표기법 종류 리액트를 사용해서 프론트를 만들고 있다. 더해서 스타일 컴포넌트도 이용하고 있다. 스타일 컴포넌트에 적는 속성의 형식과 태그에 직접 적는 속성의 형식이 달라서 매번 헷갈린다. 스타일 컴포넌트 같은 경우const OneSentenceContainer = styled.div` display: flex; justify-content: center; `;와 같이 세미콜론으로 속성들을 나누고, 케밥 표기법을 사용한다. 케밥 표기법이란 꼬치에 고기가 끼워져 있는 것 처럼 '-' 하이픈으로 단어와 단어 사이를 이어준다. justify-content같은 형식이다. 그에 반해 태그에 직접 속성을 지정하는 경우는 이와 같이 일단 style을 {{}} 중괄호 두개로 감싸고, 쉼표로 속성들을 나눈다. 속성명에는 카멜 표기법을.. 2023. 8. 26. [CSS] 수평중앙정렬 전체 코드 const TodaySentencePage = () => { return ( 오늘의 문장 고독을 배설한 자리에서 내려앉는 환희. 이 달콤함을 위해 그는 예술을 표방한다. 뼈가 자라는 여름 슬픔을 병처럼 여기지 않겠다고 말하면서 나는 조금씩 의연해졌다. 슬픔에게도 비밀이 있을거라고. 그 비밀을 추궁하지 않기로 했다. 저자: 백년의 고독 분야: 소설 출판사: 민음사 ) } const OneSentenceContainer = styled.div` /* display: flex; */ justify-content: center; padding-top: 70px; background-color: white; width: 1295px; height: 554px; border-radius: 50px; `;.. 2023. 8. 25. 이전 1 2 다음
