:root{ --num-of-column: 6; } h3, p{ margin: 0; } .card-container{ display: flex; justify-content: space-around; flex-wrap: wrap; margin-top: 2rem; } .card-container .card{ width: calc(100vw / var(--num-of-column)); height: 15rem; background: #eee; box-shadow: 0rem 0rem .5rem rgba(0, 0, 0, .3); padding: 1rem; display: flex; flex-flow: column; justify-content: space-between; margin-bottom: 1rem; }..

This is Life ! body{ margin: 0; padding: 0; } .bg{ width: 100vw; height: 100vh; background-image: url(https://www.yachtandboat.com/wp-content/uploads/2018/12/hero-image-2.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; position: fixed; /* 백그라운드 배경 고정 */ display: flex; justify-content: center; align-items: center; font-size: 20rem; font-weight: bold; /* 투명..

https://hyoni-k.tistory.com/48 mix-blend-mode : 요소를 겹치는 효과 이미지 등의 요소가 겹치는 경우 중첩된 상태를 표시하는 방법에 대해 알아보고자 한다. 포토샵에서 사용하는 블렌드 모드와 유사한데, 이 효과를 css에서도 사용할 수 있다. 서로 다른 요소(ex. hyoni-k.tistory.com 핵심적인 아이디어는 mix-blend-mode 를 설정해서 각 레이어의 색상을 섞는 것이다. position: fixed 로 설정하면 배경화면은 무시하고, 아래쪽에 있던 글자들은 브라우저 상단으로 올라온다. 이때 position: fixed 로 설정한 배경화면의 레이어가 텍스트(position: static)보다 더 높기 때문에 글자는 아래쪽 레이어에 가려진다. 그래서 글자..

:root{ --num-of-column: 6; } h3, p{ margin: 0; } .card-container{ display: flex; justify-content: space-around; flex-wrap: wrap; margin-top: 2rem; } .card-container .card{ width: calc(100vw / var(--num-of-column)); height: 15rem; background: #eee; box-shadow: 0rem 0rem .5rem rgba(0, 0, 0, .3); padding: 1rem; display: flex; flex-flow: column; justify-content: space-between; margin-bottom: 1rem; }..

home instagram google github html 코드를 위와 같이 작성한다. 폰트아우썸 아이콘을 이용하여 드롭다운 메뉴를 만든다. a{ text-decoration: none; color: #333; } .dropdown-menu{ width: 20rem; padding: .5rem; background: #eee; z-index: 1; box-shadow: .3rem .3rem .5rem rgba(0, 0, 0, .3); } 이렇게 하면 아래와 같이 드롭다운 디자인이 완성된다. a{ text-decoration: none; color: #333; } .dropdown-menu{ width: 20rem; padding: .5rem; background: #eee; z-index: 1; box..

기본 개념은 리액트 파일을 빌드(여러파일을 하나의 파일로 합치는 과정)하면 기본적인 html, css, javascript 파일이 build 폴더에 생성되고, 해당 폴더 안의 파일들을 깃허브 저장소에 업로드하면 된다. 1. 깃허브 저장소 이름을 BrowserRouter 컴포넌트의 basename 으로 설정해준다. 2. package.json 파일에 homepage 주소를 설정해준다. 3. public/index.html 의 head 부분에 base 태그를 추가해준다. 4. 루트폴더에서 npm run build 를 한다. 5. build 폴더로 이동하여 build 폴더의 코드를 깃허브에 업로드한다. 6. 깃허브에서 깃허브 페이지를 설정한다. dongjin 은 깃허브저장소 이름의 예시이다. "homepage..

const theme = { brandColor1: "#BE2525", brandColor2: "#BE0000", }; const backcolor = { bgColor1: 'orange', bgColor2: 'yellow' } const params = [theme, backcolor] // strings 는 문자열이 있는 부분만 추출해서 배열에 저장함 // values 는 함수나 객체가 있는 부분만 추출해서 배열에 저장함 function css(strings, ...values) { console.log(strings) console.log(values) return strings.reduce((res, str, i) => { // 문자열이 있는 부분은 그냥 연결하고 함수나 객체가 있는 부분은 함수를..

index.html 에 위 코드를 추가하자! .track.earth{ width: 400px; height: 400px; border-radius: 50%; border: 2px solid #ccc; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; } .sun{ width: 100px; height: 100px; background-color: orange; border-radius: 50%; } 위와 같이 하면 하나의 궤도가 생기고 태양이 아래와 같이 궤도의 중심에 위치하게 된다. 하지만 다른 궤도도 마찬가지로 원의..

Loading ... index.html 파일에 로딩 애니메이션을 보여주기 위한 div 요소를 추가한다. .loading{ width: 200px; height: 200px; border: 15px dotted orange; border-radius: 50%; border-top: 15px dotted white; border-right: 17px dotted orange; border-bottom: 20px dotted orange; border-left: 30px dotted orange; /* loading 의 부모요소 중에서 position 이 static 이 아닌 */ /* 요소의 위치를 기준으로 loading 의 위치가 결정됨 */ position: absolute; left: 50%; top..

aaa bbb ccc index.html 을 위와 같이 작성하자! container 라는 div 엘리먼트 내부에 item 이라는 3개의 div 엘리먼트가 있다. body{ margin: 0; padding: 0; } .container{ border: 1px solid red; } .item{ border: 1px solid blue; } style.css 를 위와 같이 작성하자! div 엘리먼트는 블록요소이기 때문에 웹 화면에서 한줄 전체를 다 차지한다. 그리고 스택처럼 세로로 쌓인다. * 컨테이너에 flexbox 적용하기 body{ margin: 0; padding: 0; } .container{ border: 1px solid red; display: flex; /* 컨테이너에 플럭스박스 적용 */..