<!-- 모바일에서 화면배율을 디바이스 크기 기준으로 설정 -->
<!-- 이게 안되면 pc에서의 100px과 모바일에서의 100px이 디바이스 성능에 따라 달라집니다. -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- 제이쿼리 불러오기 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- 폰트어썸 불러오기 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">


<div class="box-1 con">
    <div class="title-box row">
        <hgroup class="cell">
            <h1><span>PORT</span>folio</h1>
            <h2>This is My COOL <br>
                GRAPHIC DESIGN & EDITORIAL LAYOUT <br>
                PORTFOLIO.</h2>
        </hgroup>

        <div class="more-btn cell-right">
            <a href="/portfolio/nonghyup" target="_blank">READ<br>
            MORE</a>
        </div>
    </div>

    <ul class="row">
        <li class="cell">
            <div class="img-box">
                <img src="https://junekorea.github.io/img1/ph/nonghyup/nh-cp.jpg" alt="">
                <div class="link-txt"><i aria-hidden="true" class="fa fa-search"> view</i></div>
            </div>
            <div class="title"><a href="/portfolio/align" target="_blank">Align</a></div>
            <div class="des">코콤이 만든 프리미엄 브랜드<br>
                스마트 월패드 - 스마트홈 핵심 기기
            </div>
        </li>
        <li class="cell">
            <div class="img-box">
                <img src="https://junekorea.github.io/img1/ph/nonghyup/nh-cp.jpg" alt="">
                <div class="link-txt"><i aria-hidden="true" class="fa fa-search"> view</i></div>
            </div>
            <div class="title"><a href="/portfolio/align" target="_blank">Align</a></div>
            <div class="des">코콤이 만든 프리미엄 브랜드<br>
                스마트 월패드 - 스마트홈 핵심 기기
            </div>
        </li>
        <li class="cell">
            <div class="img-box">
                <img src="https://junekorea.github.io/img1/ph/nonghyup/nh-cp.jpg" alt="">
                <div class="link-txt"><i aria-hidden="true" class="fa fa-search"> view</i></div>
            </div>
            <div class="title"><a href="/portfolio/align" target="_blank">Align</a></div>
            <div class="des">코콤이 만든 프리미엄 브랜드<br>
                스마트 월패드 - 스마트홈 핵심 기기
            </div>
        </li>
        <li class="cell">
            <div class="img-box">
                <img src="https://junekorea.github.io/img1/ph/nonghyup/nh-cp.jpg" alt="">
                <div class="link-txt"><i aria-hidden="true" class="fa fa-search"> view</i></div>
            </div>
            <div class="title"><a href="/portfolio/align" target="_blank">Align</a></div>
            <div class="des">코콤이 만든 프리미엄 브랜드<br>
                스마트 월패드 - 스마트홈 핵심 기기
            </div>
        </li>
        <li class="cell">
            <div class="img-box">
                <img src="https://junekorea.github.io/img1/ph/nonghyup/nh-cp.jpg" alt="">
                <div class="link-txt"><i aria-hidden="true" class="fa fa-search"> view</i></div>
            </div>
            <div class="title"><a href="/portfolio/align" target="_blank">Align</a></div>
            <div class="des">코콤이 만든 프리미엄 브랜드<br>
                스마트 월패드 - 스마트홈 핵심 기기
            </div>
        </li>
        <li class="cell">
            <div class="img-box">
                <img src="https://junekorea.github.io/img1/ph/nonghyup/nh-cp.jpg" alt="">
                <div class="link-txt"><i aria-hidden="true" class="fa fa-search"> view</i></div>
            </div>
            <div class="title"><a href="/portfolio/align" target="_blank">Align</a></div>
            <div class="des">코콤이 만든 프리미엄 브랜드<br>
                스마트 월패드 - 스마트홈 핵심 기기
            </div>
        </li>
    </ul>
</div>
/*  폰트 적용 */
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

html {
    font-family: "Noto Sans KR", sans-serif;
}

/* 노말라이즈 */
body, ul, li, h1, h2, h3, h4, h5, h6 {
    margin:0;
    padding:0;
    list-style:none;
}

a {
    color:inherit;
    text-decoration:none;
}

/* 라이브러리 */
.con {
    margin:0 auto;
}

.img-box > img {
    width:100%;
    display:block;
}

.row::after {
    content:"";
    display:block;
    clear:both;
}

.cell {
    float:left;
    box-sizing:border-box;
}

.cell-right {
    float:right;
    box-sizing:border-box;
}

.block {
    display:block;
}

.inline-block {
    display:inline-block;
}

.text-align-center {
    text-align:center;
}

.line-height-0-ch-only {
    line-height:0;
}

.line-height-0-ch-only > * {
    line-height:normal;
}

.relative {
    position:relative;
}

.absolute-left {
    position:absolute;
    left:0;
}

.absolute-right {
    position:absolute;
    right:0;
}

.absolute-middle {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

/* 커스텀 */
.con {
    max-width:1140px;
}

.con-min-width {
    min-width:320px;
}

@media ( max-width:1200px ) {
    .con {
        max-width:940px;
    }
}

@media ( max-width:991px ) {
    .con {
        max-width:720px;
    }
}

html, body {
    overflow-x:hidden;
}

/* body */


/* .title-box */
.title-box {
    margin-top:30px; 
}

.title-box > hgroup > h1 {
    font-size:32px;
    font-weight:700;
    color:rgb(51,51,51);
}

.title-box > hgroup > h2 {
    font-size:14px;
    font-weight:400;
    color:#797979;
}

.title-box > .more-btn {
    color:#666;
    font-size:12px;
    border:1px solid #222;
    padding:10px 15px;
    cursor:pointer;
}

.title-box > .more-btn:hover {
    text-decoration:underline;
}

/* box */
.box-1 > ul {
    margin:0 -15px;/* 음수마진 */
}

.box-1 > ul > li {
    width:33.3333%;
    padding:0 15px;
    margin-top:30px;
}

.box-1 > ul > li:nth-child(3n+1){
    clear:both;/* 줄바꿈  */
}


.box-1 > ul > li > .img-box {
    position:relative;/* 가두기 */
    overflow:hidden;
    cursor:pointer;
}
/* 어두운 이미지 깔기. */
.box-1 > ul > li > .img-box::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0,0,0,0);
    transition:background-color 0.2s;
}

.box-1 > ul > li > .img-box:hover::before {
    background-color:rgba(0,0,0,0.3);
}
/* 돋보기 유령화 */
.box-1 > ul > li > .img-box > .link-txt {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    color:white;
    text-transform:uppercase;
    border-radius:5px;
    border:2px solid white;
    padding:3px;
    opacity:0;
    transition:opacity .2s;
}

.box-1 > ul > li > .img-box:hover > .link-txt {
    opacity:1;
}

.box-1 > ul > li > .img-box > img {
    transition:transform 0.2s;
    position:relative;/* 이미지 가두기 */
    z-index:-1;/* 우선수위 */
}

.box-1 > ul > li > .img-box:hover > img {
    transform:scale(1.2);/* 호버시 이미지 커지기 */
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.