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

미니님a

프로필 보기 이 회원 글보기

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

게시글 목록

번호	제목	글쓴이	조회	날짜
1717252	인덱스는 열리는대 그 안에 그누보드 게시판이 갑짜기 안 열려요 7	jazzlab	194	1개월 전
1717247	대전 국정자원 화재...!! 8	그레이	194	1개월 전
1717243	Google Nest Hub vs Amazon Echo Show 5: which is best? 3	울라프	131	1개월 전
1717237	영롱합니다... 6	해피아이	183	1개월 전
1717225	작업 하나 해 두고.. 8	해피아이	226	1개월 전
1717214	반응이 좋으면 진행중인 에디터 살짝 보여드.... 5	김하늘™	232	1개월 전
1717208	진작에 나왔어야 할 법인데.. 8	그레이	229	1개월 전
1717203	Q & A 글 쓴 이후 목록 2	예뜨락	135	1개월 전
1717189	해는 안보이지만 예뻐서 몇장 찍었습니다 : ) 12	예뜨락	255	1개월 전
1717183	카톡 업데이트 1	비버팩토리	193	1개월 전
1717177	홈페이지 제작 업체 모집 공고 7	해피아이	352	1개월 전
1717172	디자인 공모전 준비 중입니다... 1	bbebbee	134	1개월 전
1717163	마이산 4	jaick	154	1개월 전
1717162	공모전 본선진출했습니다 7	카깡	247	1개월 전
1717156	투덜.. 투덜.. 에디터 안에 테이블 하나 넣는 것이 이렇게 어려울 줄이야... 5	김하늘™	191	1개월 전
1717154	이런 14색 조카 크레파스들 3	엘뤼아르	183	1개월 전
1717153	멜론에 등록된 ai로 제작한 내 앨범 2	부이	215	1개월 전
1717141	유령도시 미단시티 6	반타블랙	200	1개월 전
1717140	상품 이미지 엑박 스킨 4	비버팩토리	139	1개월 전
1717138	오늘은.. 2	해피아이	109	1개월 전
1717113	새로운 숙소 밑에는…. 8	亞波治	207	1개월 전
1717111	커뮤니티와 통합된 Flarumix Shop 을 준비중 입니다. 6	UXUI	220	1개월 전
1717105	회원 아이디를 숫자로 바꾸는게 막막하네요. 9	시린♡	207	1개월 전
1717099	팀을 꾸려보고 싶은데 막막합니다. 6	신현우	212	1개월 전
1717085	Tp-Link TL-WA850RE 이건 벽에 어떻게 매다나요? 6	울라프	196	1개월 전
1717076	계속 실패하다 이제서야 9	Gothrock	257	1개월 전
1717072	같이 살고 있는 여자 사람의 따님이 유튜버가 되고 싶다는데... 9	김하늘™	239	1개월 전
1717065	천고마비(天高馬肥) 2	빛날현	135	1개월 전
1717062	안녕하세요 영카트기반 쇼핑몰 유지보수하고 있는 개발자입니다. 2	koualaKim	198	1개월 전
1717050	AI로 음악 만들어서 음반 발매 및 저작권 등록성공! 6	부이	256	1개월 전

이전 다음

1 2 3 4 5

전체 목록

커뮤니티