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

미니님a

프로필 보기 이 회원 글보기

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

게시글 목록

번호	제목	글쓴이	조회	날짜
1717042	귀차니즘 발동 10	메이드	208	1개월 전
1717041	여기를.. 7	마젠토	174	1개월 전
1717036	다~~알~•달.. 4	해피아이	130	1개월 전
1717025	롯데카드.. 3	해피아이	170	1개월 전
1717024	playlist 그때 그시절 싸이월드 미니홈피 감성음악 ai음악	부이	106	1개월 전
1717016	관리자 페이지 공유해요 4	비버팩토리	231	1개월 전
1717014	너무 소스만 들여다 보니 머리 아픈데, GPTs와 관련된 서적 추천하실 만한 것 있나요? 4	김하늘™	126	1개월 전
1717006	해지는거 구경하는 고양이 6	예뜨락	171	1개월 전
1717004	구독자 늘리기 힘드네요 9	빠왕	212	1개월 전
1716995	컨텐츠 몰 구매 해 보신분? 7	토끼엄마	200	1개월 전
1716986	역시..커.. 4	해피아이	158	1개월 전
1716982	안녕하세요? 5	정보통	104	1개월 전
1716978	Signal for Love	부이	75	1개월 전
1716974	심부름 갔다 왔더니 - 손흥민 골 4	마젠토	143	1개월 전
1716968	하루 쉼을 가진 시간 /w 석모도 4	techstar	117	1개월 전
1716966	아래 HTML Editor 개발 관련 글을 보고 4	마젠토	201	1개월 전
1716952	알림에 글추천 알림 원래 있지 않았던가요? 7	예뜨락	149	1개월 전
1716945	에디터 제작 경과 보고(?)겸 하나 올려봐요. 9	김하늘™	217	1개월 전
1716934	오늘 2만원 아낀 썰 12	Gothrock	275	1개월 전
1716926	안녕하세요~ 10	반타블랙	172	1개월 전
1716920	아쉽습니다... 4	해피아이	154	1개월 전
1716915	최고의 운동화 찌든때 제거법 4	Gothrock	201	1개월 전
1716914	주말엔 프리미어 리그 축구 4	마젠토	122	1개월 전
1716912	사업 아이디어 (Yelp + 인스타그램+ 미니홈피 ) 2	울라프	201	1개월 전
1716906	재벌집... 1	해피아이	152	1개월 전
1716903	동업하자는 조건 조언좀 3	유앤텔	173	1개월 전
1716902	주문하신 오징어 다리 안주와 계란 초밥입니다. 1	김하늘™	145	1개월 전
1716899	한탄... 4	해피아이	136	1개월 전
1716894	playlist 발라드 선곡 플레이리스트	부이	137	1개월 전
1716892	만들고 있는거 자랑질 : ) 2	예뜨락	172	1개월 전

이전 다음

2 3 4 5 6

전체 목록

커뮤니티