다이어그램2 플로우(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. 이전 1 다음
