index.html 파일을 위와 같이 작성하자! body{ margin: 0; padding: 0; background-color: #0e1111; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } .window{ width: 500px; height: 300px; background-color: wheat; transition: .5s; } .window:hover{ width: 100vw; height: 100%; } style.css 파일을 위와 같이 작성하자! 핵심은 슬라이드 이미지를 감싸고 있는 컨테이너인 body 요소에 플럭스박스를 적용하고 justify-content 와 alig..

* position: relative - 자신의 현재위치를 기준으로 상대적으로 배치 실습을 위하여 아래와 같이 코드를 작성한다. static relative .container{ background-color: #ccc; } .static, .relative{ width: 200px; height: 200px; } .static{ background-color: yellowgreen; } .relative{ background-color: blue; } .container{ background-color: #ccc; } .static, .relative{ width: 200px; height: 200px; } .static{ background-color: yellowgreen; } .relative{ ..

https://seokzin.tistory.com/entry/SCSS-SCSS-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC [SCSS] SCSS 문법 정리 프로젝트 규모가 커지고 복잡해질수록 순수 CSS의 한계를 많이 느끼게 됩니다. 그래서 SCSS나 CSS-in-JS의 도입은 사실상 필수가 되었습니다. 이 글을 통해 CSS의 문제점을 개선한 SCSS에 대해 알아보 seokzin.tistory.com 7. 함수 (Function) 박스 1 박스 2 박스 3 $max-width: 100%; // 부트스트랩 그리드 시스템처럼 12개의 컬럼 중에서 특정 비율만큼 가져감 @function columns($number: 1, $columns: 12){ @return $max-width * ..

컨테이너 container 마진이 적용된 컨테이너 (반응형) 이미지 img-fluid 반응형 이미지 rounded-circle 둥근 이미지 텍스트 text start 좌측정렬 text end 우측정렬 fw-bold 볼드체 fs-1 폰트크기 display-4 fs-1 보다 큰 글씨체 Small 작은 텍스트 text-info 텍스트 색상 text-warning 텍스트 색상 text-dark 텍스트 색상 text-muted 텍스트 색상 (회색) text-center text-sm-start 기본적으로는 텍스트를 중앙에 정렬하고 디바이스 크기가 좀 더 커지면 왼쪽으로 정렬함 배경색 bg-dark 배경색 설정 bg-opacity-75 배경색 투명도 설정 opacity-50 투명도 50% 버튼 btn-info 버튼..

https://stackoverflow.com/questions/42273135/why-does-absolute-positioned-element-is-displayed-over-a-static-one Why does absolute positioned element is displayed over a static one? I know absolute positioning breaks normal flow but since the order in HTML is absolute element first then static one, I was expecting it to be reflected in the display order too. .absolute { stackoverflow.com 이미지 텍스트..

컨테이너에 table 을 적용하고 아이템에 table-cell 을 설정하면 아이템들을 수평으로 나열할 수 있다. .container{ width: 100%; height: 70px; border: 3px solid #333; display: table; } .container .item{ width: 100px; height: 100%; background-color: #333; border: 1px solid orange; margin: 10px; display: table-cell; } 각 아이템의 너비도 다르게 지정이 가능하다. .container{ width: 100%; height: 70px; border: 3px solid #333; display: table; } .container .ite..

ci vision history 보고 싶은 탭을 클릭하세요! ci 첫번째 탭 vision 두번째 탭 history 세번째 탭 section{ display: none; } #ci:target{ display: block; } #ci:active #vision, #ci:active #history{ display: none; } #vision:target{ display: block; } #vision:active #ci, #vision:active #history{ display: none; } #history:target{ display: block; } #history:active #ci, #history:active #vision{ display: none; }

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; /* 컨테이너에 플럭스박스 적용 */..