css는 위대합니다. 광복절 기념 CSS로 태극기 그리기 정보
css는 위대합니다. 광복절 기념 CSS로 태극기 그리기
본문
와 정말 대단합니다..
7
베스트댓글
그런데 댓글로 
를 사용하면 너무 안 이쁘게 나와요 ㅠㅠ
본문처럼 예쁘게 나왔으면 좋겠어요. ㅠㅠ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>태극기</title>
<style>
:root {
--blue: #0047A0;
--red: #CD313A;
--black: #000000;
--white: #FFFFFF;
--trigrams-location-width: calc(cos(atan2(2, 3)) * (11 / 18));
--trigrams-location-height: calc(sin(atan2(2, 3)) * (11 / 12));
--brick-size: calc(1 / 6);
}
body {
background-color: var(--black);
}
.wrap {
position: relative;
width: 100%;
height: 0;
overflow: hidden;
padding-bottom: calc((2 / 3) * 100%);
}
.taegeukgi {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--white);
display: flex;
align-items: center;
justify-content: center;
}
.taegeuk {
position: absolute;
width: calc((1 / 3) * 100%);
height: 50%;
background: linear-gradient(var(--red) 50%, var(--blue) 0);
border-radius: 50%;
transform: rotate(calc(atan2(2, 3)));
}
.taegeuk::before {
position: absolute;
content: "";
width: 50%;
height: 50%;
border-radius: 50%;
background-color: var(--red);
margin: 25% 0;
}
.taegeuk::after {
position: absolute;
content: "";
width: 50%;
height: 50%;
border-radius: 50%;
background-color: var(--blue);
margin: 25% 50%;
}
.trigrams {
position: absolute;
width: calc((var(--trigrams-location-width) + var(--brick-size)) * 100%);
height: calc((var(--trigrams-location-height) + var(--brick-size)) * 100%);
display: grid;
grid-template-rows: repeat(2, 1fr);
gap: calc(((var(--trigrams-location-width) - var(--brick-size)) / (var(--trigrams-location-width) + var(--brick-size))) * 100%);
}
.top, .bottom {
display: flex;
justify-content: space-between;
}
.sky, .water, .fire, .earth {
width: calc((var(--brick-size) / (var(--trigrams-location-width) + var(--brick-size))) * 100%);
display: grid;
column-gap: calc((1 / 12) * 100%);
row-gap: calc((1 / 8) * 100%);
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(2, 1fr);
}
.brick {
background-color: var(--black);
}
.sky {
grid-template-columns: 1fr;
}
.water {
grid-template-columns: repeat(2, 1fr);
}
.water .brick:nth-child(3) {
grid-column: span 2;
}
.fire {
grid-template-columns: repeat(2, 1fr);
}
.fire .brick:first-child, .fire .brick:last-child {
grid-column: span 2;
}
.sky, .earth {
transform: rotate(atan2(3, -2));
}
.water, .fire {
transform: rotate(atan2(3, 2));
}
</style>
</head>
<body>
<div class="wrap">
<div class="taegeukgi">
<div class="taegeuk"></div>
<div class="trigrams">
<div class="top">
<div class="sky">
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
</div>
<div class="water">
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
</div>
</div>
<div class="bottom">
<div class="fire">
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
</div>
<div class="earth">
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
댓글 6개
제로초님은 역시나! ㅋㅋㅋ
그런데 댓글로 를 사용하면 너무 안 이쁘게 나와요 ㅠㅠ
본문처럼 예쁘게 나왔으면 좋겠어요. ㅠㅠ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>태극기</title>
<style>
:root {
--blue: #0047A0;
--red: #CD313A;
--black: #000000;
--white: #FFFFFF;
--trigrams-location-width: calc(cos(atan2(2, 3)) * (11 / 18));
--trigrams-location-height: calc(sin(atan2(2, 3)) * (11 / 12));
--brick-size: calc(1 / 6);
}
body {
background-color: var(--black);
}
.wrap {
position: relative;
width: 100%;
height: 0;
overflow: hidden;
padding-bottom: calc((2 / 3) * 100%);
}
.taegeukgi {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--white);
display: flex;
align-items: center;
justify-content: center;
}
.taegeuk {
position: absolute;
width: calc((1 / 3) * 100%);
height: 50%;
background: linear-gradient(var(--red) 50%, var(--blue) 0);
border-radius: 50%;
transform: rotate(calc(atan2(2, 3)));
}
.taegeuk::before {
position: absolute;
content: "";
width: 50%;
height: 50%;
border-radius: 50%;
background-color: var(--red);
margin: 25% 0;
}
.taegeuk::after {
position: absolute;
content: "";
width: 50%;
height: 50%;
border-radius: 50%;
background-color: var(--blue);
margin: 25% 50%;
}
.trigrams {
position: absolute;
width: calc((var(--trigrams-location-width) + var(--brick-size)) * 100%);
height: calc((var(--trigrams-location-height) + var(--brick-size)) * 100%);
display: grid;
grid-template-rows: repeat(2, 1fr);
gap: calc(((var(--trigrams-location-width) - var(--brick-size)) / (var(--trigrams-location-width) + var(--brick-size))) * 100%);
}
.top, .bottom {
display: flex;
justify-content: space-between;
}
.sky, .water, .fire, .earth {
width: calc((var(--brick-size) / (var(--trigrams-location-width) + var(--brick-size))) * 100%);
display: grid;
column-gap: calc((1 / 12) * 100%);
row-gap: calc((1 / 8) * 100%);
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(2, 1fr);
}
.brick {
background-color: var(--black);
}
.sky {
grid-template-columns: 1fr;
}
.water {
grid-template-columns: repeat(2, 1fr);
}
.water .brick:nth-child(3) {
grid-column: span 2;
}
.fire {
grid-template-columns: repeat(2, 1fr);
}
.fire .brick:first-child, .fire .brick:last-child {
grid-column: span 2;
}
.sky, .earth {
transform: rotate(atan2(3, -2));
}
.water, .fire {
transform: rotate(atan2(3, 2));
}
</style>
</head>
<body>
<div class="wrap">
<div class="taegeukgi">
<div class="taegeuk"></div>
<div class="trigrams">
<div class="top">
<div class="sky">
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
</div>
<div class="water">
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
</div>
</div>
<div class="bottom">
<div class="fire">
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
</div>
<div class="earth">
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
대단하네요 ㅋㅋㅋ
대박이네요...!!!!!
챗지피티가 알려줬어요.
태극기를 CSS를 사용하여 만드는 방법을 소개합니다. 아래의 코드는 HTML과 CSS로 태극기를 구현한 예제입니다.
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>태극기</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #fff;
}
.taegeukgi {
position: relative;
width: 300px;
height: 200px;
border: 1px solid #000;
background-color: #fff;
}
.taegeuk {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 50px;
margin-left: -50px;
margin-top: -25px;
border-radius: 50px;
background: linear-gradient(90deg, #c60c30 50%, #0033a0 50%);
}
.red {
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}
.blue {
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
}
.white-circle {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-left: -25px;
margin-top: -25px;
background-color: white;
border-radius: 50%;
z-index: 1;
}
.yin-yang {
width: 50px;
height: 50px;
position: relative;
border-radius: 50%;
overflow: hidden;
background-color: #fff;
z-index: 2;
}
.yin {
width: 100%;
height: 50%;
background-color: #000;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
}
.yang {
width: 100%;
height: 50%;
background-color: #fff;
position: absolute;
bottom: 0;
left: 0;
border-radius: 50%;
}
.small-white {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
position: absolute;
}
.small-red {
background-color: #c60c30;
}
.small-blue {
background-color: #0033a0;
}
/* 태극기의 4괘 (괘선) */
.gye {
position: absolute;
width: 10px;
height: 50px;
background-color: #000;
}
.gin {
position: absolute;
width: 50px;
height: 10px;
background-color: #000;
}
.gye1 { top: 0; left: 0; }
.gye2 { bottom: 0; left: 0; }
.gin1 { top: 0; right: 0; }
.gin2 { bottom: 0; right: 0; }
</style>
</head>
<body>
<div class="taegeukgi">
<div class="taegeuk red">
<div class="red"></div>
</div>
<div class="taegeuk blue">
<div class="blue"></div>
</div>
<div class="white-circle"></div>
<div class="yin-yang">
<div class="yin"></div>
<div class="yang"></div>
<div class="small-white" style="top: 20px; left: 20px;"></div>
<div class="small-red" style="bottom: 20px; left: 20px;"></div>
<div class="small-blue" style="top: 20px; right: 20px;"></div>
</div>
<div class="gye gye1"></div>
<div class="gye gye2"></div>
<div class="gin gin1"></div>
<div class="gin gin2"></div>
</div>
</body>
</html>
```
이 코드를 HTML 파일로 저장하고 웹 브라우저에서 열면 태극기가 표현됩니다. CSS의 `linear-gradient` 속성을 사용하여 태극기의 빨간색과 파란색 부분을 구현하였고, 원과 사각형을 활용하여 태극기 디자인의 요소들을 배치하였습니다. 필요에 따라 스타일을 조정하여 크기를 변경하거나 색상을 수정할 수 있습니다.
이 메시지는 Nova가 생성했습니다 - 무료로 다운로드 하세요: https://novaappai.page.link/LqPRSqjUHkq8BHZ18
