본문 바로가기

HTML&CSS29

플로우(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.
ccs로 화살표 만들기 2 (가상요소 ::before, ::after 활용) css로 삼각형 만들기 1편에서 만든 삼각형에 가상요소를 생산하여, 가운데 막대를 만들어줍니다. 기본원리는 삼각형과 사각형의 조합입니다. 위쪽 방향 삼각형 위쪽 방향을 만든 후, 가상요소의 범위를 정하는 position: relative; 를 지정합니다. ::after에서는 사각형을 만든 후 top 위치를 삼각형의 높이 만큼 위치해줘야 면과 면이 닿을 수 있습니다. 사각형은 삼각형의 정중앙 바로 아래에 배치하기 위해 translate(-50%, 0%)을 사용합니다. -50%는 개체의 너비의 가운데에 위치시키는 것을 의미합니다. .arrow01 { position: relative; width: 0; height: 0; border-style: solid; border-width: 0 40px 60px 4.. 2023. 3. 13.
ccs로 화살표 만들기 1 너비와 폭을 같은 수치로 지정해서 정사각형을 만듭니다. 그리고 border로 테두리를 만들어주는데, 여기서 서로의 꼭지점이 연결되는 두 곳만 테두리를 만들어줍니다. (①border-top, border-left ②border-top, border-right ③border-bottom, border-left ④border-bottom, border-right) 다음으로 기울이기(ratate) 코드를 이용해서 방향을 맞춰줍니다. 위쪽 방향 정사각형 테두리가 왼쪽과 아랫쪽만 지정되어있으므로, 기울기를 135deg로 돌려줍니다. 활용 예) footer부분에서 페이지 상단으로 이동할 때 많이 쓰입니다. .arrow01 { display: inline-block; width: 50px; height: 50px; b.. 2023. 3. 13.
css로 별점 만들기(가상요소 ::before, ::after 활용) 우리가 흔히 쇼핑몰이나 호텔사이트 등 자주 볼 수 있는 별점 평가를 css로 표현해보겠습니다. 가상요소인 ::before와 ::after를 서로 다른 색상으로 겹쳐서 별점의 소수점까지 표현이 가능합니다. 별점 만들기 ::before에 베이스를 먼저 만들어준 후, 그 위에 ::after는 별점을 표현합니다. 아래의 예시는 font-size가 50px로 되어있습니다. 즉, 별 하나당 50px이며, 소수점은 0.5점은 50px의 반이므로 25px가 됩니다. 상세한 별점을 표시하고 싶을 때는 ::after의 width의 수치를 조절해주면 됩니다. 별이 5개이므로 최대치는 250px입니다. .rating { position: relative; font-size: 50px; } .rating::before{ con.. 2023. 3. 11.
css로 별모양 만들기(가상요소 ::before, ::after 활용) 같은 수치의 도형을 가상요소를 포함해 2개 이상만들어내서, 이번 파트의 핵심요소인 기울기(rotate)를 통해 다각형의 별 모양을 만들 수 있습니다. 오각별(오각성) 삼각형을 3개 생성한 후, 기울이기(rotate)를 사용하여 꼭지점 5개짜리 별을 만듭니다. .pentagram { position: relative; display: inline-block; width: 0px; height: 0px; margin: 50px 0; color: #ffd67a; border-right: 80px solid transparent; border-left: 80px solid transparent; border-bottom: 56px solid #ffd67a; transform: rotate(35deg); } .p.. 2023. 3. 11.
css로 다각형 만들기(가상요소 ::before, ::after 활용) 가상요소를 활용하기 앞서 가장 먼저 필수적인, 부모역할을 하는 본체에 position: relative; 를 지정해줍니다. 다음으로 부모라는 보호아래, 아이역할을 하는 ::before와 ::after에는 content: "";와 position: absolute;를 지정해주면서 포지션을 맞춰줍니다. 오각형 아래 본체(pentagon)는 사다리꼴(css로 사각형 만들기 참조)로 만든 후, 가상요소인 ::before로 삼각형(css로 삼각형 만들기 1 참조)을 만들어줍니다. .pentagon { position: relative; width: 50px; height: 0; border-style: solid; border-width: 45px 20px 0; border-color: #ffd67a transp.. 2023. 3. 10.
css로 사각형 만들기 사각형은 레이아웃을 구성하거나 표제어, 헤드라인 디자인에 많이 사용됩니다. 높이와 너비를 기본으로, 기울이기나 굵기를 사용하여 변형된 사각형을 만들 수 있습니다. 정사각형 너비와 높이를 같은 수치로 지정해줍니다. .square01 { width: 80px; height: 80px; background-color: #ffd67a; } 정사각형(반응형) 한계치 너비(max-width)를 임의로 지정하여 브라우저 너비에 따라 같은 형태로 크기만 달라집니다. 아래의 예시는 한계치 너비를 500px로 지정하였으므로 브라우저 너비가 500px 이하일 경우 크기가 줄어들며, 500px 이상일 경우에는 크기가 변하지않습니다. .square02 { max-width: 500px; } .square02 div { widt.. 2023. 3. 9.

티스토리툴바