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

미니님a

프로필 보기 이 회원 글보기

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

게시글 목록

번호	제목	글쓴이	조회	날짜
1717438	본문내 이미지 엑박 관련해서 올려놨습니다. 2	비버팩토리	103	1개월 전
1717431	세상에 오늘이 10월이라네요 14	쪼각조각	161	1개월 전
1717422	극도로 싫어라 했는데.. 4	해피아이	129	1개월 전
1717414	무엇을 그리워하는걸까요? 2	해피아이	108	1개월 전
1717412	아*웹 에디터가 어떻게 생겼나? 궁금함을 참지 못하고... 회원가입 9	김하늘™	193	1개월 전
1717407	요즘 유튜브용 동영상 편집기 뭘 쓰나요? 10	Gothrock	198	1개월 전
1717401	하루 푸~욱 쉬었다가 이제 작업 시작합니다. 5	김하늘™	111	1개월 전
1717393	안녕하세요 새로 가입했습니다.. 3	김테스트	88	1개월 전
1717386	공식 합법 승인을 받더라도... 크롤링은 어렵네요 10	미니님a	254	1개월 전
1717379	로그인 실패관련 고민이 많네요 3	북마크스	163	1개월 전
1717378	4연승은 그냥온게아니다 5	웅푸	158	1개월 전
1717365	어히없는 작업 사항	웅푸	137	1개월 전
1717364	아 글을 작성 삭제 를 반복했더니 레벨 급속 떨어지는 군요	웅푸	113	1개월 전
1717360	호구 == 동맹 6	Gothrock	199	1개월 전
1717359	리펙토링이 기대되면서, 업데이트가 두렵다.... 2	김하늘™	134	1개월 전
1717346	프롬프트 생성기를 만들어봤습니다. 1	nekoieye	198	1개월 전
1717344	유튜브 비슷하게 따라 해봐도 힘드네요 2	빠왕	154	1개월 전
1717333	sir.kr 홈페이지의 리팩토링을 진행하고 있습니다. 25	리자	442	1개월 전
1717327	저 섬 뒤로.... 2	해피아이	150	1개월 전
1717313	아침에 일어 났더니,,,, 11	亞波治	254	1개월 전
1717312	달려봅시다 1	하이루에야	134	1개월 전
1717310	너무 달렸나봅니다	김하늘™	115	1개월 전
1717307	무료 챗지피티 api 3	별찢이내린다샤랄랄라랄라	223	1개월 전
1717306	쥬꾸미?. 쭈꾸미 4	Gothrock	137	1개월 전
1717304	대단하네요.. 1	해피아이	135	1개월 전
1717291	대구시의 예술을 대하는 방식.... 12	그레이	251	1개월 전
1717283	성과는 없고, 시간은 흐르고, 명절은 다가오고, 입금은 감감무소식... 7	김하늘™	189	1개월 전
1717280	냑님들... 3	해피아이	131	1개월 전
1717268	대전 국가정보자원관리원 화재 덜덜 2	하이루에야	178	1개월 전
1717265	안녕하세요~~ 1	하이루에야	92	1개월 전

이전 다음

1 2 3 4

전체 목록

커뮤니티