CSS25 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. 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 2 3 다음
