도형9 CSS로 하트 모양 만들기 CSS만으로 하트를 만드는 방법은 사각형이나 원형과 같은 기본 도형을 조합하는 방식으로 구현할 수 있습니다. 주로 ::before, ::after 가상 요소와 border-radius를 사용하여 하트 모양을 구성합니다." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스/* 하트 모양 */.heart { position: relative; width: 100px; height: 100px; background-color: red; transform: rotate(-45deg); margin: 50px;}/* 하트의 왼쪽 원형 부분 */.heart::before,.heart::after { content: ''; position: absol.. 2024. 10. 10. 플로우(flow) 다이어그램 만들기 사각형과 삼각형을 합친 형태로 가상요소인 after, before를 동시에 사용하여 순서, 흐름을 표현해보도록 하겠습니다. 플로우 만들기(예시) HTML 먼저 자식 요소들을 감싸주는 태그를 지정합니다. 그 안에 플로우 요소(태그)들을 추가해나갑니다. 배송시작 배송중 배송완료 CSS 위 그림에서 보이는 것 처럼 왼쪽에서 오른쪽으로 가는 형태이므로, 부모요소를 flex로 감싸줍니다. 예시는 3개로 구성되어있기 때문에 폭을 약 33%로 지정해준 후, 각 스텝마다 after와 before를 삼각형으로 만들어줍니다. before삼각형은 after삼각형의 뒤에 배치되므로 포지션을 옮겨가면서 위치를 조정합니다. .step-box { display: flex; flex-wrap: nowrap; justify-conte.. 2023. 9. 13. 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. 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. css로 삼각형 만들기 2 삼각형 만들기 1편과 마찬가지로 border를 활용하여 삼각형 방향을 지정할 수 있습니다. 정삼각형과는 달리, 이번에 만들 삼각형은 너비(width)를 2곳만 지정합니다. 왼쪽 위 방향 top와 right에 수치를 넣어줍니다. 색상(border-color)은 top에만 넣고 나머지는 색상없음(transparent)으로 지정합니다. .triangle01 { width: 0; height: 0; border-style: solid; border-width: 80px 80px 0 0; border-color: #ffd67a transparent transparent transparent; } 오른쪽 위 방향 right와 bottom에 수치를 넣어줍니다. 색상(border-color)은 right에만 넣고 나머.. 2023. 3. 9. css로 삼각형 만들기 1 주로 border를 활용하여 삼각형을 만듭니다. 먼저, border-width에서 가리키고자 하는 방향의 반대방향의 수치를 적용합니다. 그리고 방향을 꼭지점까지 사선으로 감싸는 수치를 지정하게 되는데, 반대방향의 반만큼 지정합니다. 위쪽 방향 위쪽 방향은 bottom의 수치를 지정해주고, right와 left를 bottom의 1/2 수치로 지정해줍니다. .triangle01 { width: 0; height: 0; border-style: solid; border-width: 0 40px 80px 40px; border-color: transparent transparent #ffd67a transparent; } 아랫쪽 방향 아래쪽 방향은 top의 수치를 지정해주고, right와 left를 bottom.. 2023. 3. 9. 이전 1 다음
