absolute4 CSS로 팝업만들기 팝업만들기(예시)HTML 오늘의 작업 닫기 css로 팝업만들기 CSS.bg{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.75); transition: opacity 300ms; z-index: 1; opacity: 0; visibility: hidden;}.bg:target{ opacity: 1; visibility: visible; }.popup{ display: block; position: fixed; top: 50%; lef.. 2023. 9. 29. 플로우(flow) 다이어그램 만들기 사각형과 삼각형을 합친 형태로 가상요소인 after, before를 동시에 사용하여 순서, 흐름을 표현해보도록 하겠습니다. 플로우 만들기(예시) HTML 먼저 자식 요소들을 감싸주는 태그를 지정합니다. 그 안에 플로우 요소(태그)들을 추가해나갑니다. 배송시작 배송중 배송완료 CSS 위 그림에서 보이는 것 처럼 왼쪽에서 오른쪽으로 가는 형태이므로, 부모요소를 flex로 감싸줍니다. 예시는 3개로 구성되어있기 때문에 폭을 약 33%로 지정해준 후, 각 스텝마다 after와 before를 삼각형으로 만들어줍니다. before삼각형은 after삼각형의 뒤에 배치되므로 포지션을 옮겨가면서 위치를 조정합니다. .step-box { display: flex; flex-wrap: nowrap; justify-conte.. 2023. 9. 13. 연혁(History) 다이어그램 만들기 일반적으로 회사나 박물관 등 기관 홈페이지의 연혁페이지에서 자주 볼 수 있는 항목입니다. 연혁 표 만들기(예시) HTML 연도를 묶는 dl태그를 사용하고 dt를 연도를 지정합니다. 그리고 dd는 그 연도에 해당하는 사건을 기입합니다. 그 아래에 dl태그를 추가해나가면서 연도를 늘려나갑니다. 2020 회사 창립 2021 서울지사 설립 2022 코스닥 상장 2023 2호점 출점 CSS .history dl:before는 선을 깔아 주고, 그 위에 .history dt:before에는 원을 배치시킵니다. .history dl{ position: relative; padding: 0 0 30px 48px; display: flex; flex-wrap: nowrap; justify-content: space-be.. 2023. 9. 13. position: absolute; 로 중앙(가운데)에 맞추기 position: absolute; 를 사용하여 요소를 컨텐츠의 중앙에 위치시켜보겠습니다. 정중앙에 위치시키고자하는 요소에 transform: translate(-50%,-50%);를 지정할 필요가 있으며, 지정했을 때와 안했을 때의 차이까지 알아보겠습니다. 상하좌우 중앙 정렬(정중앙) 부모요소에 position: relative;를 해주면서 자식요소가 그 범위안에 움직일 수 있도록 position: absolute;와, top와 left를 각각 50%씩 그리고 transform: translate(-50%,-50%);를 지정해줍니다. HTML CSS .middle { position: relative; width: 200px; height: 200px; background-color: #ffd67a; .. 2023. 3. 14. 이전 1 다음
