css는 위대합니다. 광복절 기념 CSS로 태극기 그리기

미니님a

프로필 보기 이 회원 글보기

· 1년 전 · 조회 1220 1220 · 댓글 6 6

와 정말 대단합니다..

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 6개

베스트 댓글

키스

프로필 보기 이 회원 글보기

1년 전 BEST

그런데 댓글로 를 사용하면 너무 안 이쁘게 나와요 ㅠㅠ

본문처럼 예쁘게 나왔으면 좋겠어요. ㅠㅠ

[code]

<!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>

[/code]

원댓글 보기 →

Rerepr

프로필 보기 이 회원 글보기

1년 전

리오닥터

프로필 보기 이 회원 글보기

1년 전

제로초님은 역시나! ㅋㅋㅋ

키스

프로필 보기 이 회원 글보기

1년 전

그런데 댓글로 를 사용하면 너무 안 이쁘게 나와요 ㅠㅠ

본문처럼 예쁘게 나왔으면 좋겠어요. ㅠㅠ

[code]

<!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>

[/code]

아이스웨덴™

프로필 보기 이 회원 글보기

1년 전

대단하네요 ㅋㅋㅋ

감독님

프로필 보기 이 회원 글보기

1년 전

대박이네요...!!!!!

스카이라이퍼

프로필 보기 이 회원 글보기

1년 전

챗지피티가 알려줬어요.

태극기를 CSS를 사용하여 만드는 방법을 소개합니다. 아래의 코드는 HTML과 CSS로 태극기를 구현한 예제입니다.

```html

<!DOCTYPE html>

<head>

<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>

</div>

</div>

</div>

</body>

</html>

```

이 코드를 HTML 파일로 저장하고 웹 브라우저에서 열면 태극기가 표현됩니다. CSS의 `linear-gradient` 속성을 사용하여 태극기의 빨간색과 파란색 부분을 구현하였고, 원과 사각형을 활용하여 태극기 디자인의 요소들을 배치하였습니다. 필요에 따라 스타일을 조정하여 크기를 변경하거나 색상을 수정할 수 있습니다.

이 메시지는 Nova가 생성했습니다 - 무료로 다운로드 하세요: https://novaappai.page.link/LqPRSqjUHkq8BHZ18

게시글 목록

번호	제목	글쓴이	조회	날짜
1716512	아이고...KT도... 3	해피아이	187	1개월 전
1716495	케데헌 헌트릭스 주인공들을 그려봤습니다. 14	그레이	365	1개월 전
1716484	강력히(?) 요구 합니다. 11	해피아이	336	1개월 전
1716479	네...? 맞긴 한데요... 11	nanati	246	1개월 전
1716466	맨날...커피만.. 6	해피아이	158	1개월 전
1716451	미사일 튕겨내는 UFO 영상 : '미연방 하원 공개' 7	플래토	300	1개월 전
1716448	오늘은 특별한게 없다는.. 6	해피아이	195	1개월 전
1716444	책상을 이렇게 쓰는 사람과는 친구도 하지마세요. 11	Gothrock	375	1개월 전
1716426	결국 참지 못하고... 그런데 너무 억울하다. ㅠ 5	김하늘™	403	2개월 전
1716422	본문에 있는 링크의 팁을 사용 중인 운영자님은 꼭 확인하세요	미니님a	235	2개월 전
1716417	배고파서 빵 사왔는데... 헉. 공갈빵인가 ㅠㅠ 10	김하늘™	399	2개월 전
1716415	또 다시 그누보드에 감사의 뜻을... 가을을 맞아 더욱...	xpem	191	2개월 전
1716409	영카트 데모에서 2	웹학교	360	2개월 전
1716395	간만에 프로필 사진 좀 바꿔봤습니다 (며칠 전에) 20	nanati	319	2개월 전
1716393	추가 배송비 플러그인 만들었습니다. 3	비버팩토리	253	2개월 전
1716384	필수 지참해야 할.. 5	해피아이	218	2개월 전
1716383	9월 1일 부터 새직장에서.. 2	오빠야	337	2개월 전
1716375	요즘 피싱 실력 대단하네요 4	해피정	413	2개월 전
1716374	지난 주 로또 당첨 판매점 보셨나요?	미니님a	227	2개월 전
1716372	간만에.... 3	오빠야	282	2개월 전
1716363	무섭게 생긴사람 일자리가 생겼네요. 3	수평선1203	296	2개월 전
1716358	대도서관 소식... 남일 같지 않아요. 6	김하늘™	335	2개월 전
1716357	@무신사1 난 그누보드를 중국이 베끼려한다고 한 적 없는데.. 4	그레이	315	2개월 전
1716342	무기력증? 7	해피아이	244	2개월 전
1716317	모니터 분할 고정적으로 하기 2	스카이라이퍼	449	2개월 전
1716316	에센피 이렇게 시작하면 될까요..? 5	수도사	307	2개월 전
1716313	4일을 쉬고 출근을 했더니 2	미니님a	227	2개월 전
1716309	협업하기 싫어서리 파라미터 아무꺼나 보내라고 했는데 이해를못하네 3	옵션	346	2개월 전
1716302	파워볼 드디어 끝났네요 10	마젠토	276	2개월 전
1716298	렙 5를 향하기가..... 3	비버팩토리	192	2개월 전

이전 다음

5 6 7 8 9

전체 목록

커뮤니티