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

미니님a

프로필 보기 이 회원 글보기

· 1년 전 · 조회 1219 1219 · 댓글 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

게시글 목록

번호	제목	글쓴이	조회	날짜
1716888	휴일은 누구를 위해 존재하는가? 7	김하늘™	234	1개월 전
1716864	기분 급상승하게 만드는 짤 11	Gothrock	365	1개월 전
1716861	너무 도도한거 아냐? 7	해피아이	286	1개월 전
1716856	도메인 변경 요청 오면 따라야 할까요 ? 4	미니님a	299	1개월 전
1716851	간단한 AI 웹사이트 빌더. 앱도 가능 10	솔그루	573	1개월 전
1716850	게시글에 있는 유튜브를... 2	마젠토	196	1개월 전
1716848	새로운 숙소에는… 8	亞波治	226	1개월 전
1716843	감성음악 PLAYLIST	부이	82	1개월 전
1716841	봇 차단 datadome.co	엘뤼아르	129	1개월 전
1716834	둑이 무너지려고 하는데, 손이 모자라요 ㅠㅠ 4	김하늘™	195	1개월 전
1716830	@nanati 나나티님께.. 2	해피아이	182	1개월 전
1716828	Because You're Free [Synthwave \| Dream Pop Ballad]	부이	90	1개월 전
1716821	치타 김밥 5	Gothrock	175	1개월 전
1716819	그누보드3를 컨버터 만들었습니다. ^^ 1	해피정	226	1개월 전
1716815	앞으로 냑은.. 3	해피아이	194	1개월 전
1716811	드디어.. 3	해피아이	143	1개월 전
1716809	바람과 구름 2	DSKim	120	1개월 전
1716808	아직은 좀.. 1	해피아이	114	1개월 전
1716795	영카트 스킨 어떤주제로 할까요 2	비버팩토리	228	1개월 전
1716791	정말 한 6~7년 만에 오는듯 합니다. 3	바꾸나	226	1개월 전
1716784	명동에 다녀왔습니다. 4	무쏘	192	1개월 전
1716783	국세청 전자세금계산서 형식의 피싱 메일이 오네요 2	해피정	190	1개월 전
1716781	1픽셀의 감동이 소비자를 움직인다	김하늘™	157	1개월 전
1716773	애틋한..사랑.. 5	해피아이	189	1개월 전
1716765	포트폴리오.. 8	해피아이	258	1개월 전
1716761	초등학교 동창 민정이는 요즘 뭘하는지? 8	김하늘™	316	1개월 전
1716759	깝깝합니다. 정말 1	웅푸	181	1개월 전
1716743	오늘의 활동 일지..... 8	해피아이	207	1개월 전
1716734	그누보드 기반 미니홈피 개발중입니다 8	해피정	354	1개월 전
1716733	시간먹는 하마 1	뽕꽤브라	169	1개월 전

이전 다음

3 4 5 6 7

전체 목록

커뮤니티