코딩/실습

HC-12 스튜디오 JT

haehaee 2026. 5. 8. 11:59

레퍼런스

https://studio-jt.co.kr/

 

워드프레스 제작 전문 업체 | 스튜디오 제이티 - 개발, SEO, 디자인, 기획을 골고루 잘하는 회사

워드프레스 제작 전문 업체 스튜디오 제이티. kakao·아모레퍼시픽·LG 등 다수 기업 프로젝트 수행. iF·Red Dot 어워드 수상. 브랜드 가치를 담는 홈페이지 제작·SEO·UI/UX. 전국 프로젝트 환영.

studio-jt.co.kr

패딩값 차이
모바일 - % 1~20%
랩탑 - 모바일온리(%)(실무용), 바디를 고정시켜버림(포폴용)

뽀짝한 마우스커서 이미지 같은거 쓰면 이슈가 생겨도 내가 알아서 찾아야함
귀찮은일이 많아져요~

푸터 맨 밑 기본마진 100px이상

리스트, 테이블, 박스 중 뭐가 최선일까?
리스트는 1~2개 정도로 가벼울때만 3개 이상부턴 박스로 하는게 좋음
테이블은 데이터를 다룰때 쓰기
결론 박스로 하는게 편하다! 

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3.0">
    <meta name="keywords" content="studio-jt">
    <meta name="description" content="studio-jt">
    <meta name="author" content="studio-jt">
    <title>studio-jt</title>
    <link rel="stylesheet" href="style.css">
    <style type="text/css"></style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript"></script>
</head>

<body>

    <header>
        <div class="logo">
            <span>S</span>
            <span>T</span>
            <span>U</span>
            <span>D</span>
            <span>I</span>
            <span>O</span>
            <span class="blue-wave">〰</span>
            <span>J</span>
            <span>T</span>
        </div>
        <h4>아름답고 유용하며 의미있는 <span class="typings" id="typings"></span></h4>

        <div class="menu-wrapper">
            <div class="menu-text">menu</div>
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>

    </header>

    <main>
        <article class="homep">

            <section>
                <p>SANC 기업 대표 홈페이지</p>
            </section>

            <section>
                <p>OKSURO PROMRT</p>
            </section>

            <section>
                <p>KAKAO 대표 홈페이지 UI/UX 개편</p>
            </section>

            <section>
                <p>퓨리토 서울</p>
            </section>

            <section>
                <p>2025 뭘 좀 아는 사람들 캠페인</p>
            </section>

            <section>
                <p>꼬띠샵</p>
            </section>
        </article>
    </main>


    <article class="projt">
        <p>스튜디오 제이티는 매 프로젝트를 ‘기준을 올리는 과정’으로 바라봅니다. <br />
            브랜드 경험 디자인, UI/UX, SEO, 워드프레스 CMS 제작 전 영역에서 우리는 내부 기준을 한 단계 더 높이고, 그 원칙을 흔들림 없이 지켜냅니다. 이 철학이 우리가 말하는
            ‘제이티스러움’을 완성합니다.</p>

        <a href="#">우리의 프로젝트 더 보기 <span>➜</span></a>

    </article>

    <article class="awardjt">
        <h2>주요 수상 내역</h2>
        <div>
            <section>
                <div>
                    <img
                        src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fy1pLs%2FdJMcaaLWCBE%2FAAAAAAAAAAAAAAAAAAAAAGGEYTrXpy7A4dsi6H-RnLSgdV6jfbUoOZHC3NOAD5qb%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1780239599%26allow_ip%3D%26allow_referer%3D%26signature%3DVJAQbg1lB23H2a4xmTWGCU3V8pg%253D">
                    <div>
                        <p class="awardmain">OKSURO</p>
                        <div>

                            <p>Communication & website / Winner</p>
                            <p>Winner</p>
                        </div>

                    </div>
            </section>

            <section>
                <div>
                    <img
                        src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fy1pLs%2FdJMcaaLWCBE%2FAAAAAAAAAAAAAAAAAAAAAGGEYTrXpy7A4dsi6H-RnLSgdV6jfbUoOZHC3NOAD5qb%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1780239599%26allow_ip%3D%26allow_referer%3D%26signature%3DVJAQbg1lB23H2a4xmTWGCU3V8pg%253D">
                    <div>
                        <p class="awardmain">웅진씽크빅 SUPERPOT ENGLISH</p>
                        <div>

                            <p>User Experience UI</p>
                            <p>iF DESIGN AWARD</p>
                        </div>
                    </div>
                </div>
            </section>

            <section>
                <div>
                    <img
                        src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FkEQ2n%2FdJMcaaLWCBF%2FAAAAAAAAAAAAAAAAAAAAAFacXXiSKV2UlWKzEQm2B7kKnbhJ6c1N0mFXLx0b6oKS%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1780239599%26allow_ip%3D%26allow_referer%3D%26signature%3DMpJuvYXe26b2wgJqtqIVQvLORTw%253D">
                    <div>
                        <p class="awardmain">브로앤팁스</p>
                        <div>
                            <p>Reddot winner 2020 Brands & Communication</p>
                            <p>BEST OF THE BEST</p>
                        </div>
                    </div>
                </div>
            </section>

            <section class="lastborder">
                <div>
                    <img
                        src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FkEQ2n%2FdJMcaaLWCBF%2FAAAAAAAAAAAAAAAAAAAAAFacXXiSKV2UlWKzEQm2B7kKnbhJ6c1N0mFXLx0b6oKS%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1780239599%26allow_ip%3D%26allow_referer%3D%26signature%3DMpJuvYXe26b2wgJqtqIVQvLORTw%253D">
                    <div>
                        <p class="awardmain">필보이드</p>
                        <div>

                            <p>Reddot winner 2020 Brands & Communication</p>
                            <p>Winner</p>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <a href="#">수상내역 전체보기 <span>➜</span></a>

    </article>

    <article class="storyjt">
        <h2>제이티 이야기</h2>
        <div>
            <section>
                <img
                    src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbmgMx8%2FdJMcah5nkFs%2FAAAAAAAAAAAAAAAAAAAAABkq3VCtWRbxT4GiyoF_t1w00JZsgzWUtRgXc9IpHLku%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1780239599%26allow_ip%3D%26allow_referer%3D%26signature%3DTo0fgl5O0Mgxxyko%252FcgBCS5qjos%253D">
                <p>GEO란 무엇인가: 생성형 AI가 출처를 선택하는 방식</p>
                <a href="#">view more <span>➜</span></a>
            </section>

            <section>
                <img
                    src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FWsAAk%2FdJMcah5nkFu%2FAAAAAAAAAAAAAAAAAAAAAKhrNMwJ2XjixB8OfVBdwtAVeXs9zrU-ACQ1WLjNXfnE%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1780239599%26allow_ip%3D%26allow_referer%3D%26signature%3DM%252BfDnAOEc6lSdSmrpBQ6%252FojQCcs%253D">
                <p>스튜디오 제이티 디자인팀도 즐겨쓰는 저작권 걱정 없는 무료 이미지 사진 사이트 BEST5+</p>
                <a href="#">view more <span>➜</span></a>
            </section>

            <section>
                <img
                    src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FSCh6T%2FdJMcah5nkFt%2FAAAAAAAAAAAAAAAAAAAAAI357fIYzSXJgGv7rPG1sI0OSdQ_jOzYWQ_CQSRkXkdJ%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1780239599%26allow_ip%3D%26allow_referer%3D%26signature%3D%252FapEA3fsaZ5JXeZcoJ9cOEmtEKA%253D">
                <p>AI 검색 최적화를 위한 ai.txt 및 llms.txt 설정 가이드 (초보자용 SEO/AEO/GEO)</p>
                <a href="#">view more <span>➜</span></a>
            </section>
        </div>
        <a href="#">제이티 이야기 전체보기 <span>➜</span></a>


    </article>

    <footer>
        <article>
            <section class="foobtn">
                <button>AI 이미지</button>
                <button>프로젝트 의뢰하기
                </button>
            </section>

            <section class="fooadr">
                <h4>BUSAN OFFICE</h4>
                <p>
                    부산광역시 해운대구 센텀서로30,
                    knn타워 26층 <br />
                    010-8542-4711<br />
                    contact@studio-jt.co.kr</p>
                <img
                    src="https://blog.kakaocdn.net/dna/bu1I08/dJMb990A5L6/AAAAAAAAAAAAAAAAAAAAADx3vhdRSDIJVI07_blo_NvWTGroVwqbFA8PTyyIsSKn/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1780239599&allow_ip=&allow_referer=&signature=V1t2HQ1MhCgj46ANc0L2ySOlvPU%3D">
            </section>
            <hr>
            <section class="foosns">
                <img
                    src="https://blog.kakaocdn.net/dna/dEznu9/dJMcaf7wjih/AAAAAAAAAAAAAAAAAAAAAL30TqYNn9tT3COkz_phHozaSlPlJKleJG34CxVt0bQ9/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1780239599&allow_ip=&allow_referer=&signature=Uwzst61LzB3tG32Bc2bhJdz%2FIBs%3D">
                <img
                    src="https://blog.kakaocdn.net/dna/d99Zhg/dJMcagk31f2/AAAAAAAAAAAAAAAAAAAAAPwLIFXd28zT3cnBFEEXaYzsFfwSSlsAvEnXiDqSwsRg/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1780239599&allow_ip=&allow_referer=&signature=K5LlvffYGMaf6hbDbpjNTNYaQxY%3D">
                <img
                    src="https://blog.kakaocdn.net/dna/So6Hr/dJMcaffrHkz/AAAAAAAAAAAAAAAAAAAAAEGYXBrWKIlIgTccAYDwH9QBy7PMDtcPG0c0FqKJabcb/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1780239599&allow_ip=&allow_referer=&signature=uevwB2NNsFlj%2BKVCrWNzkyvgvfg%3D">
                <img
                    src="https://blog.kakaocdn.net/dna/cmpcnq/dJMcabjNVtv/AAAAAAAAAAAAAAAAAAAAAJxMB_ko37L9gbA13EIHYP-bQYA_ETo9fim1BOK0PRFQ/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1780239599&allow_ip=&allow_referer=&signature=0VOMP%2FeC74d6d97FRntQG20EATU%3D">
            </section>
            <p>COPYRIGHT 2012-2026 STUDIO-JT. ALL RIGHTS RESERVED.</p>
        </article>
    </footer>

    <script>
        //노출될 문구 리스트
        const texts = [
            "UX / UI 디자인",
            "홈페이지 제작",
            "워드프레스 제작",
            "브랜드 경험 디자인",
            "검색엔진최적화(SEO)"
        ];
        //typings를 찾아와서 여기에 글자를 써라
        const typingElement = document.getElementById("typings");

        let textIndex = 0;
        let charIndex = 0;
        let isDeleting = false;

        function type() {
            const currentText = texts[textIndex];

            if (isDeleting) {
                typingElement.textContent = currentText.substring(0, charIndex--);
            } else {
                typingElement.textContent = currentText.substring(0, charIndex++);
            }

            let speed = isDeleting ? 50 : 100;

            if (!isDeleting && charIndex === currentText.length + 1) {
                speed = 1500;
                isDeleting = true;
            }

            if (isDeleting && charIndex === 0) {
                isDeleting = false;
                textIndex = (textIndex + 1) % texts.length;
                speed = 500;
            }

            setTimeout(type, speed);
        }

        type();
    </script>

</body>

</html>
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+KR:wght@100..900&display=swap');

/* .montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.noto-sans-kr {
  font-family: "Noto Sans KR", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
} */

/* 스마트폰
540

테블릿
754

랩탑-테블릿 가로모드 경계
1024

랩탑
1445

QHD, 4K
1785

1400부터 푸터 백그라운드 픽스
모바일 390 랩탑 1920 최적화

5/13 코드리뷰
금월화 */
* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    outline: 0px solid silver;

}

a:hover,
button:hover,
.hamburger:hover,
.projt a:hover,
.awardmain:hover,
.awardjt a:hover,
.storyjt section img:hover,
.storyjt section a:hover,
.storyjt>a:hover,
.foobtn :nth-child(1):hover,
.foobtn :nth-child(2):hover,
.foosns img:hover {
    cursor: url('https://studio-jt.co.kr/wp-content/themes/studio_jt/images/layout/cursor-hand.png'), auto;
}

body {
    font-family: 'Montserrat', 'Noto Sans KR' sans-serif;
    font-size: 1rem;
    line-height: 1rem;
    letter-spacing: 0.1px;
    color: #000;
    cursor: url("https://studio-jt.co.kr/wp-content/themes/studio_jt/images/layout/cursor-pointer.png"), auto;
}

a:link {
    color: #000;
    text-decoration: none;
    display: block;
}

a:visited {
    color: #666;
}

a:hover {
    color: blue;
}

a:focus {
    color: blue;
}

a:active {
    color: blue;
}

h1,
h2,
h3,
h4 {
    font-family: 'Noto Sans KR', sans-serif;
}

h1 {
    font-size: 2rem;
    line-height: 4rem;
    text-transform: uppercase;
}


h2 {
    font-size: 1.8rem;
    line-height: 3rem;
    text-transform: uppercase;
}

h3 {
    font-size: 1.6rem;
    line-height: 2rem;
}

h4 {
    font-size: 1rem;
    line-height: 2rem;
}


p {
    line-height: 1rem;
}

button {
    font-size: 0.8rem;
    text-transform: uppercase;
    padding: 12px 15px;
    border: 2px solid #fff;
    border-radius: 3px;
    background: white;
    transition: 0.2s;
}

button:hover {
    background: none;
    border: 2px solid #fff;
    color: white;
    border-radius: 3px;
    cursor: pointer;
}



/* mobile start */


header {
    position: relative;
    width: 100%;
    height: 100px;
    padding: 25px 3%;
    margin: 0 0 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.logo {
    width: 60px;
    height: 60px;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8rem;
    font-weight: 600;
}

.logo span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 33.33%;
    height: 20px;
}

.blue-wave {
    color: blue;
    font-weight: bold;
    font-size: 0.7rem;
}

header h4 {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
}

.typings {
    border-right: 3px solid white;
    padding: 0 5px;
    white-space: nowrap;
    overflow: hidden;
    animation: blink 0.7s infinite;
    color: blue;
}

.menu-wrapper {
    display: flex;
    line-height: 3.5rem;
    gap: 10px;
}

.menu-text {
    display: none;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
}

.hamburger {
    width: 23px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    align-items: flex-start;
}

.hamburger span {
    height: 2px;
    background-color: #333;
    transition: 0.2s;
}

.hamburger :nth-child(1),
.hamburger :nth-child(3) {
    width: 100%;
}

.hamburger :nth-child(2) {
    width: 60%;
}

.hamburger:hover :nth-child(2) {
    width: 100%;
}



.homep {
    margin: 0 4%;
}

.homep section {
    position: relative;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 70px auto;
}

.homep p {
    position: absolute;
    display: flex;
    bottom: -30px;
    font-weight: 500;
}

.homep> :nth-child(1) {
    background: url(https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fcdet5Y%2FdJMcaiiSDWO%2FAAAAAAAAAAAAAAAAAAAAAM1udNcEEteUUUiGs0FTF6SZtCqPLHfroujk5ScY-loQ%2Fimg.webp%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1780239599%26allow_ip%3D%26allow_referer%3D%26signature%3D%252BC7sqh8tJUwdLY29PG7rU3rhZWA%253D) no-repeat;
    background-position: center;
    background-size: cover;
}

.homep> :nth-child(2) {
    background: url(https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FcBugUm%2FdJMcaaLWCBK%2FAAAAAAAAAAAAAAAAAAAAAJHJVh7im1B8aTeDRdNU3oAK6bJWbHcI0XBsUdQ5WyuR%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1780239599%26allow_ip%3D%26allow_referer%3D%26signature%3D6upRa%252BgJIIWWIB22WIme89xjQrE%253D) no-repeat;
    background-position: center;
    background-size: cover;
}

.homep> :nth-child(3) {
    background: url(https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FciZtEW%2FdJMcajaZVxr%2FAAAAAAAAAAAAAAAAAAAAABXzMEmxoEaxbZWXeqxRq-EDjDvCFaBimPL664uS-1Ev%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1780239599%26allow_ip%3D%26allow_referer%3D%26signature%3D0c04SUj5qblF6NGPwUIL%252B7D6GtA%253D) no-repeat;
    background-position: center;
    background-size: cover;
}

.homep> :nth-child(4) {
    background: url(https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbnaD9O%2FdJMcajaZVxs%2FAAAAAAAAAAAAAAAAAAAAAEnSsbL4xDNAssOBUyVgUqtBbi0r7w_wB17FsgPRzQYX%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1780239599%26allow_ip%3D%26allow_referer%3D%26signature%3D0OslZuHMMUs%252BtmH%252FyzhhPaSQii0%253D) no-repeat;
    background-position: center;
    background-size: cover;
}


.homep> :nth-child(5) {
    background: url(https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fbcbe5Z%2FdJMcaiiSDWR%2FAAAAAAAAAAAAAAAAAAAAAEHQIuUB6LfGasgOT5ilO3UHLqN38SqrsF58_8t3ryMB%2Fimg.webp%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1780239599%26allow_ip%3D%26allow_referer%3D%26signature%3DK%252BKS5EgvcUVHlco%252BWWME6DVnXiY%253D) no-repeat;
    background-position: center;
    background-size: cover;
}


.homep> :nth-child(6) {
    background: url(https://blog.kakaocdn.net/dna/I7qBr/dJMcaiiSDWS/AAAAAAAAAAAAAAAAAAAAALWt0_qV-dvJGdOI2WUzt2PGpjiWb8Xucj9F0edc8lRV/img.gif?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1780239599&allow_ip=&allow_referer=&signature=W9aH6BWyJV2kl7hmAFk6f3GcKmE%3D) no-repeat;
    background-position: center;
    background-size: cover;
}


.projt {
    width: 90%;
    margin: 140px 5% 100px;
    padding: 0 5%;
}

.projt p {
    font-size: 1.05rem;
    line-height: 1.7rem;
    font-weight: 600;
    text-align: center;
}

.projt a {
    margin: 20px auto;
    font-size: 0.9rem;
    text-align: center;
    font-weight: 500;
    color: #000;
    transition: 0.3s;
}

.projt a:hover {
    color: blue;
}

.projt a span {
    font-size: 1.1rem;
    margin: 0 0 0 6px;
}

.awardjt {
    margin: 0 4%;
}

.awardjt h2 {
    margin: 0 0 30px;
    text-align: center;
}

.awardjt img {
    width: 25px;
    height: 25px;
}

.awardjt section {
    border-top: 1px solid #000;
}

.awardjt section>div {
    margin: 20px auto;
    display: flex;
}

.awardjt section>div>div {
    margin: 0 10px;
    display: flex;
    flex-direction: column;
}

.awardmain {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 3px 0 12px;

    transition: 0.5s;
}

.awardmain:hover {
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 5px;
}

.awardjt section>div>div>div :nth-child(1) {

    font-size: 0.7rem;
    color: #444;
}

.awardjt section>div>div>div :nth-child(2) {
    font-size: 0.9rem;
    font-weight: 500;
}

.lastborder {
    border-bottom: 1px solid #000;
}

.awardjt a {
    margin: 40px auto;
    font-size: 0.9rem;
    text-align: center;
    font-weight: 500;
    color: #000;
    transition: 0.3s;
}

.awardjt a:hover {
    color: blue;
}

.awardjt a span {
    font-size: 1.1rem;
    margin: 10px 0 6px;
}

.storyjt {
    margin: 0 4%;
}

.storyjt h2 {
    margin: 115px 0 30px;
    text-align: center;
    font-weight: 500;
}


.storyjt div {
    display: flex;
    justify-content: space-between;
}

.storyjt section {
    width: 48%;
}

.storyjt section img {
    width: 100%;
    transition: 0.2s;
}

.storyjt section img:hover {
    transform: translateX(-10px) translateY(-10px);
}

.storyjt>div> :nth-child(3) {
    display: none;
}

.storyjt section p {

    margin: 10px 0;
    font-weight: 600;
    line-height: 1.6rem;
    font-size: 0.9rem;
}

.storyjt section a {
    font-weight: 500;
    color: #888;
    font-size: 0.8rem;
    transition: 0.3s;
}

.storyjt section a:hover {
    color: #444;
}

.storyjt>a {
    margin: 40px auto 0 0;
    font-size: 0.9rem;
    text-align: center;
    font-weight: 500;
    color: #000;
    transition: 0.3s;
}

.storyjt>a:hover {
    color: blue;
}

.storyjt>a span {
    font-size: 1.1rem;
    margin: 0 0 0 6px;
}

footer {
    background: #222;
    margin: 100px auto 0;
    padding: 25px 0;
}

.foobtn {
    text-align: center;
    display: flex;
    justify-content: space-between;
    margin: 10px 20px;
}

.foobtn :nth-child(1),
.foobtn :nth-child(2) {
    font-weight: 600;
    width: 49%;
}


.foobtn :nth-child(2) {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: blue;
    border: 2px solid blue;
    color: white;
}

.foobtn button img {
    display: none;
}


.foobtn :nth-child(2):hover {
    background: none;
    border: 2px solid yellow;
    color: yellow;
}

.fooadr {
    width: 270px;
    text-align: left;
    margin: 20px 5%;
}



.fooadr h4 {
    color: #ddd;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4rem;
}

.fooadr p {
    color: #888;
    font-weight: 600;
    font-size: 0.7rem;
    line-height: 1.4rem;
}

.fooadr img {
    width: 12px;
    filter: contrast(0.1);
    margin: 10px 0;
}

hr {
    border: none;
    height: 1px;
    box-shadow: 0 0.1px 0 0 rgba(255, 255, 255, 0.9);
}

.foosns {
    width: 170px;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
}

.foosns img {
    width: 33px;
    border-radius: 8px;
    filter: contrast(0.4);
    transition: 0.3s;
}

.foosns img:hover {
    filter: contrast(1);
}

footer>article>p {
    width: 200px;
    margin: 0 auto;
    font-size: 0.7rem;
    font-weight: 600;
    color: #888;
    text-align: center;
}

/* pc start */


@media screen and (min-width: 1366px) {

    * {
        outline: 0px solid silver;
    }

    header {
        padding: 90px 50px;
        margin: 0 0 0px;
    }

    .logo {
        width: 100px;
        height: 100px;
        font-size: 1.3rem;
        position: fixed;
        top: 70px;
        left: 50px;
        z-index: 1;
    }

    .logo span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 33.33%;
        height: 25px;
    }

    .blue-wave {
        color: blue;
        font-weight: bold;
        font-size: 0.9rem;
    }

    header h4 {
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        text-align: center;
        font-size: 1.3rem;
        font-weight: 600;
    }

    .menu-wrapper {
        position: fixed;
        top: 70px;
        right: 50px;
        z-index: 1;
    }

    .hamburger {
        border: 1px solid black;
        width: 70px;
        height: 70px;
        padding: 25px 23px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        align-items: flex-start;
    }


    .hamburger span {
        height: 3px;
        background-color: #333;
        transition: 0.2s;
    }

    .menu-wrapper .menu-text {
        display: block;

    }

    .homep {
        margin: 0 13%;
        display: flex;
        flex-wrap: wrap;
    }

    .homep section {
        width: 50%;
        margin: 0;

    }

    .homep p {
        bottom: 30px;
        left: 30px;
        font-weight: 600;
        font-size: 1.1rem;
        color: white;
    }

    .projt {
        width: 60%;
        margin: 250px auto 300px;
    }

    .projt p {
        font-size: 1.3rem;
        line-height: 1.9rem;
        font-weight: 700;
    }

    .projt a {
        margin: 48px auto 0;
        font-size: 1rem;
    }

    .awardjt {
        margin: 0 13%;
    }

    .awardjt h2 {
        margin: 0 0 50px;
        font-size: 2.5rem;
    }


    .awardjt section>div {
        display: flex;
        align-items: center;
        padding: 20px 0;
    }

    .awardjt section>div>div {
        display: contents;
    }


    .awardmain {
        order: 1;
        flex: 1;
        margin: 0;
        font-size: 1.2rem;
        font-weight: 700;
    }


    .awardjt section>div>img {
        order: 2;
        width: 35px;
        height: 35px;
        margin: 0 40px;
    }


    .awardjt section>div>div>div {
        order: 3;
        width: 200px;
        display: flex;
        flex-direction: column;
    }

    .awardjt section>div>div>div :nth-child(1) {
        width: 180px;
        font-weight: 600;
        font-size: 0.8rem;
        line-height: 1.3rem;
        margin-bottom: 4.8px;
    }

    .awardjt a {
        margin: 50px auto;
        font-size: 1rem;
    }


    .storyjt {
        margin: 0 13%;
    }

    .storyjt h2 {
        margin: 0 0 50px;
        font-size: 2.5rem;
        font-weight: 700;
    }

    .storyjt section {
        width: 28%;
    }

    .storyjt>div> :nth-child(3) {
        display: block;
    }

    .storyjt section p {
        margin: 32px 0 10px;
        line-height: 2rem;
        font-size: 1.1rem;
    }

    .storyjt section a {
        font-size: 0.9rem;
    }

    .storyjt section a span {
        font-size: 1rem;
        margin-left: 12px;
    }

    .storyjt>a {
        margin: 80px auto 0 0;
        font-size: 0.95rem;
    }


    footer {
        position: relative;
        margin: 230px 13% 0;
        padding: 135px 0 80px;
    }

    .foobtn {
        position: absolute;
        width: 450px;
        height: 60px;
        right: 130px;
        top: 70px;
    }

    .foobtn :nth-child(1) {
        width: 43%;
    }

    .foobtn :nth-child(2) {
        width: 55%;
    }


    .fooadr {

        width: 270px;
        text-align: left;
        margin: 0 5% 150px;
    }


    .fooadr h4 {
        color: #ddd;
        font-size: 0.8rem;
        font-weight: 600;
        line-height: 1.4rem;
    }

    .fooadr p {
        color: #888;
        font-weight: 600;
        font-size: 0.7rem;
        line-height: 1.4rem;
    }

    .fooadr img {
        width: 12px;
        filter: contrast(0.1);
        margin: 10px 0;
    }

    hr {
        margin: 0 10% 60px;
    }

    .foosns {
        margin: 20px auto 40px;
    }


    footer>article>p {
        width: 500px;
        font-weight: 500;
    }

}

 

index.html
0.01MB
style.css
0.02MB

'코딩 > 실습' 카테고리의 다른 글

ui-kit  (0) 2026.04.23
AWD 디자인 리뉴얼  (1) 2026.04.21
AWD 콘텐츠 리뉴얼  (0) 2026.04.17
RWD 디자인 리뉴얼  (0) 2026.04.16
RWD 콘텐츠 리뉴얼  (0) 2026.04.16

'코딩/실습'의 다른글

  • 현재글HC-12 스튜디오 JT

관련글

티스토리툴바