전체 글48 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 ··· 3 4 5 6 다음
