비주얼 스튜디오 코드 43_웹 표준) 컨텐츠

☭DEVELOPER/#2 웹개발(자바기반 풀스택)

비주얼 스튜디오 코드 43_웹 표준) 컨텐츠

조반짝 2023. 6. 22. 14:05

728x90

컨텐츠 6개의 칸을 만들어서 바깥테두리 없이 레이아웃 진행

html 골격만들어주기

css 편집

표 위치와 영역 잡아주기

세번째 표의 보더를 없애주어야한다.

.col3 오른쪽 위 끝 위치해야하기 때문에 보더, 패딩, 마진을 0으로 해주어야 올라간다.

.col6도 똑같이 넣어준다.

각 표마다 아이콘 이미지 적용

img 에 아이콘 이미지를 적용했을 때 똑같은 이미지가 들어간다.

.cont .colum .ico img > .cont .col1 .ico_img 부터 각각 이미지의 좌표를 지정해주면 다르게 이미지를 적용할 수 있다.

마우스 오버시 다른 이미지가 나오도록 한다.

html 에서 각 col1 에 ir_pm을 적용하여 글씨를 없애준다.

다른 표에도 아이콘을 다르게 적용한다.

.ico_tit 와 ico_desc 을 편집하고 선을 추가해준다.

아이콘과 notice 배치하기

아이콘을 포지션을 띄우고 notice를 포지션 옆으로 올라가면 padding-left로 밀어준다.

img를 움직여주어야하기 때문에 position:absolute; 해주고 img의 부모인 column에 기준점을 넣어준다.

ico_tit 와 .ico_desc 을 pading-left 하여 아이콘사이 여백을 70px 준다.

게시판1 만들기

html 골격만들기

css 편집하기

.more 의 기준을 .notice1로 정해서 위치를 정해야한다.

게시판 1에 .notice2 편집하기

<html>

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

<head>
    <meta charset="UTF-8">
    <meta name="author" content="조반짝 팀프로젝트 이름(제작자)">
    <meta name="description" content="웹표준에 의한 웹페이지 샘플링입니다.(내용)">
    <meta name="keywords" content="웹표준, 조반짝, 하이미디어, 샘플사이트(키워드)">
    <meta name="generator" content="Visual Studio Code(작성도구)">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹표준_banner-contents</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/slick.css">
    <link rel="stylesheet" href="./css/style.css">


    <!-- 웹폰트 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet">
</head>

<body>
    <!-- 스킵 네비게이션 -->
    <div id="skip">
        <a href="#cont_nav">전체 메뉴 바로가기</a>
        <a href="#cont_ban">배너 영역 바로가기</a>
        <a href="#cont_cont">컨텐츠 영역 바로가기</a>
    </div>

    <div id="wrap">
        <div id="header">
            <div class="container">
                <div class="header">
                    <div class="header_menu">
                        <a href="#">로그인 가입</a>
                        <a href="#">CONTACT US</a>
                        <a href="#">ENGLISH</a>
                    </div>
                    <div class="header_tit mt50">
                        <h1>하이미디어 구로캠퍼스</h1><br>
                        <a href="https://www.himedia.co.kr/">자바기반 풀스택 웹개발자3</a>
                    </div>
                    <div class="header_icon mt30">
                        <a href="#" class="icon1"><span>icon1</span class="ir_pm"></a>
                        <a href="#" class="icon2"><span>icon2</span class="ir_pm"></a>
                        <a href="#" class="icon3"><span>icon3</span class="ir_pm"></a>
                        <a href="#" class="icon4"><span>icon4</span class="ir_pm"></a>
                    </div>
                </div>
            </div>
        </div>
        <section id="contents">
            <article id="cont_nav">
                <div class="container">
                    <h2 class="ir_su">전체메뉴</h2>
                    <div class="nav clearfix">
                        <div>
                            <h3 class="h3">HTML5</h3>
                            <ol class="clearfix">
                                <li><a href="#">html1</a></li>
                                <li><a href="#">html2</a></li>
                                <li><a href="#">html3</a></li>
                                <li><a href="#">html4</a></li>
                                <li><a href="#">html5</a></li>
                                <li><a href="#">html6</a></li>
                                <li><a href="#">html7</a></li>
                                <li><a href="#">html8</a></li>
                                <li><a href="#">html9</a></li>
                                <li><a href="#">html10</a></li>
                            </ol>
                        </div>
                        <div>
                            <h3 class="h3">CSS3</h3>
                            <ol class="clearfix">
                                <li><a href="#">css1</a></li>
                                <li><a href="#">css2</a></li>
                                <li><a href="#">css3</a></li>
                                <li><a href="#">css4</a></li>
                                <li><a href="#">css5</a></li>
                                <li><a href="#">css6</a></li>
                                <li><a href="#">css7</a></li>
                                <li><a href="#">css8</a></li>
                                <li><a href="#">css9</a></li>
                                <li><a href="#">css10</a></li>
                                <li><a href="#">css11</a></li>
                                <li><a href="#">css12</a></li>
                            </ol>
                        </div>
                        <div>
                            <h3 class="h3">웹표준</h3>
                            <ol class="clearfix">
                                <li><a href="#">웹표준1</a></li>
                                <li><a href="#">웹표준2</a></li>
                                <li><a href="#">웹표준3</a></li>
                                <li><a href="#">웹표준4</a></li>
                                <li><a href="#">웹표준5</a></li>
                                <li><a href="#">웹표준6</a></li>
                                <li><a href="#">웹표준7</a></li>
                                <li><a href="#">웹표준8</a></li>
                            </ol>
                        </div>
                    </div>
                </div>
            </article>
            <article id="cont_tit">
                <div class="container">
                    <div class="tit">
                        <h2> &ldquo; 프론트 엔드는 너무 쉬워서 금방 끝난다.&rdquo; </h2>
                        <a href="#" class="btn"><span class="ir_pm">전체메뉴</span></a>
                    </div>
                </div>
            </article>
            <article id="cont_ban">
                <div class="container">
                    <div class="ban">
                        <div><a href="#"><img src="./image/ban1.png" alt="이미지1"></a></div>
                        <div><a href="#"><img src="./image/ban2.png" alt="이미지2"></a></div>
                        <div><a href="#"><img src="./image/ban3.png" alt="이미지3"></a></div>
                        <div><a href="#"><img src="./image/ban1.png" alt="이미지1"></a></div>
                        <div><a href="#"><img src="./image/ban2.png" alt="이미지2"></a></div>
                        <div><a href="#"><img src="./image/ban3.png" alt="이미지3"></a></div>
                    </div>
                </div>
            </article>
            <article id="cont_cont">
                <div class="container">
                    <div class="cont">
                        <div class="colum col1">
                            <h3>
                                <span class="ico_img ir_pm">아이콘1</span>
                                <em class="ico_tit">Notice</em>
                            </h3>
                            <p class="ico_desc">가장 웹페이지에서 기본이 되는 게시판 유형입니다.</p>
                            <!-- 게시판1 -->
                            <div class="notice1">
                                <h4 class="h4">웹퍼블리셔 면접질문</h4>
                                <ul class="w_q">
                                    <li><a href="#">display:inline과 display:block의 차이점은 무엇인가?</a></li>
                                    <li><a href="#">HTML 태그 중에 dl.dd.ul.ol.li의 차이점은 무엇인가?</a></li>
                                    <li><a href="#">HTML 태그 중에 strong과 em태그의 차이점은 무엇인가?</a></li>
                                    <li><a href="#">컨텐츠 요소를 가운데로 오게하는 방법을 알려주세요</a></li>
                                    <li><a href="#">독타입을 선언하는 이유에 대해서 설명하세요</a></li>
                                    <a href="#" class="more ir_pm">더보기</a>
                                </ul>
                            </div>
                            <div class="notice2">
                                <h4 class="h4">웹디자이너 면접질문</h4>
                                <ul class="d_q">
                                    <li>
                                        <a href="#">JPG,PNG,GIF의 차이점은 무엇인가?</a>
                                        <span>2023.06.11</span>
                                    </li>
                                    <li>
                                        <a href="#">UI디자인과 UX디자인의 차이점은 무엇인가?</a>
                                        <span>2023.06.15</span>
                                    </li>
                                    <li>
                                        <a href="#">인터랙션디자인의 핵심은 무엇인가?</a>
                                        <span>2023.06.17</span>
                                    </li>
                                    <li>
                                        <a href="#">포트폴리오를 하면서 가장 기억에 남는 점은 무엇인가?</a>
                                        <span>2023.06.17</span>
                                    </li>    
                                    <li>
                                        <a href="#">웹디자인과 모바일 디자인의 차이점은 무엇인가?</a>
                                        <span>2023.06.23</span>
                                    </li>
                                </ul>
                                <a href="#" class="more ir_pm">더보기</a>
                            </div>
                        </div>
                        <!-- 게시판2 -->
                        <div class="colum col2">
                            <h3>
                                <span class="ico_img ir_pm">아이콘2</span>
                                <em class="ico_tit">Notice</em>
                            </h3>
                            <p class="ico_desc">가장 웹페이지에서 기본이 되는 게시판 유형입니다.</p>
                        </div>
                        <div class="colum col3">
                            <h3>
                                <span class="ico_img ir_pm">아이콘3</span>
                                <em class="ico_tit">Notice</em>
                            </h3>
                            <p class="ico_desc">가장 웹페이지에서 기본이 되는 게시판 유형입니다.</p>
                        </div>
                        <div class="colum col4">
                            <h3>
                                <span class="ico_img ir_pm">아이콘4</span>
                                <em class="ico_tit">Notice</em>
                            </h3>
                            <p class="ico_desc">가장 웹페이지에서 기본이 되는 게시판 유형입니다.</p>
                        </div>
                        <div class="colum col5">
                            <h3>
                                <span class="ico_img  ir_pm">아이콘5</span>
                                <em class="ico_tit">Notice</em>
                            </h3>
                            <p class="ico_desc">가장 웹페이지에서 기본이 되는 게시판 유형입니다.</p>
                        </div>
                        <div class="colum col6 ">
                            <h3>
                                <span class="ico_img ir_pm">아이콘6</span>
                                <em class="ico_tit">Notice</em>
                            </h3>
                            <p class="ico_desc">가장 웹페이지에서 기본이 되는 게시판 유형입니다.</p>
                        </div>
                    </div>
                </div>
            </article>
        </section>
        <div id="footer">
            <div class="container"></div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="./js/slick.js"></script>

    <script>

        //네비게이션
        $(".tit .btn").click(function () {
            // $(".nav").show();
            // $(".nav").fadeIn(500);
            // $(".nav").slideDown(500);
            // $(".nav").css("display","block"); // block은 보여주는 기능도 있다.
            // $(".nav").toggle();
            $(".nav").slideToggle();

            $(this).toggleClass("on");

        });

        //slick
        $('.ban').slick({
            infinite: true, //무한반복
            slidesToShow: 3, //보여지는 슬라이드 갯수
            slidesToScroll: 3, //이동하는 슬라이드 갯수
            // autoplay: true, //자동으로 슬라이드 이동
            // autoplaySpeed: 3000,  //3초마다 자동으로 슬라이드 이동
            // fade:true, //이미지 슬라이드 효과(보이기/감추기)
            dots: true,
        });


    </script>

</body>

</html>

<css>

@charset "utf-8";

#wrap{
    width: 100%;
}

#header{
    width: 100%;
    height: 325px;
    /* 헤더 이미지 높이 고려 */
    background: url(../image/header_bg.jpg) no-repeat top center;
    /* 이미지를 고정하기 위해 no-repeat을 해주고 위치를 잡아주어야하고 repeat으로 변경*/
}

#contents{}
#cont_nav{
    width: 100%;
    /* height: 200px; */
    /* background-color: lightcoral; */
}
#cont_tit{
    width: 100%;
    background-color: lightcyan;
}
#cont_ban{
    width: 100%;
}
#cont_cont{
    width: 100%;
    /* height: 200px;
    background-color: lightgreen; */
}

#footer{
    width: 100%;
    height: 220px;
    background-color: lightseagreen;
}

/* container */
.container{
    width: 990px;
    margin: 0 auto;
    height: inherit;
    background-color: rgba(255,255,255,0.3);
}

/* skip */
#skip{
    /* 기준점 잡아주기 */
    position: relative;
}
#skip a{
    position: absolute;
    width: 140px;
    background-color: #333;
    color: #fff;
    height: 30px;
    text-align: center;
    line-height: 30px;
    /* 탭 위치 설정 */
    left:0;
    top: -40px;
}
/* 스킵 네비게이션 활성화 */
#skip a:active,
#skip a:focus{
    top: 0;
}

/* header */
.header{    
    /* height: 325px; */
}

.header .header_menu{
    /* background-color: aqua; */
    /* 메뉴 오른쪽으로 정렬하기 */
    text-align: right;
}
.header .header_menu a{
    color: #fff;
    /* top,left,bottom 여백주기 */
    padding: 10px 0 10px 20px; 
    /* 윗쪽여백이 안 먹힘 > inline-block 을 사용함 */
    display: inline-block;
    /* 마우스 오버 속도 넣기 */
    transition: all 0.5s;
}

.header .header_menu a:hover{
    /* 마우스 오버시 글자색 바뀔수 있도록 한다. */
    color: #333;
}

.header .header_tit{
    /* background-color: red; */
    text-align: center;

}
.header .header_tit h1{
    color: #fff;
    background-color: #4aa8d4;
    font-size: 28px;
    /* 글자에만 색칠해주기 문제는 a태그에 붙게됨 */
    display: inline-block;
    padding: 5px 20px;
    transition: all 0.5s;
    text-shadow: 0 2px 2px darkblue;
    
}

.header .header_tit h1:hover{
    background-color: darkblue;
    cursor: pointer;
}

.header .header_tit a{
    font-size: 18px;
    background-color: #2698cb;
    display: inline-block;
    /* 위아래 박스 여백이 없어짐 */
    padding: 5px 20px;
    color: #fff;
    /* 위아래 박스 겹쳐지게하기 */
    margin-top: -7px;
}

.header .header_icon{
    text-align: center;
}
.header .header_icon a{
    width: 60px;
    height: 60px;
    background-color: #333;
    /* 인라인 구조이기 때문에 display: inline-block 적용*/
    display: inline-block;
    /* 양옆 여백주기 */
    margin: 0 5px;

    /* 아이콘 이미지 넣어주기 */
    background: url(../image/icon.png);
}

.header .header_icon a.icon1{
    background-position: 0px 0px;
    /* 백그라운드 포지션으로 이미지의 위치(X,Y)를 지정해준다.  */
}
.header .header_icon a.icon2{
    background-position: 0px -60px;
}
.header .header_icon a.icon3{
    background-position: 0px -120px;
}
.header .header_icon a.icon4{
    background-position: 0px -180px;
}

.header .header_icon a.icon1:hover{
    background-position: -60px 0px;
}

.header .header_icon a.icon2:hover{
    background-position: -60px -60px;
}
.header .header_icon a.icon3:hover{
    background-position: -60px -120px;
}
.header .header_icon a.icon4:hover{
    background-position: -60px -180px;
}

.header .header_icon a span{
    font-size: 0;
    /* lineheight 값이 먹기 때문에 매번 주기가 번거롭다. */
}

/* nav */

.nav{
    padding: 30px 0;
    /* background-color: #4aa8d4; */
    display: none;
}
.nav > div{
    float: left;
    width: 40%;
    /* 전체너비의 40%사용 */
}

.nav > div:nth-of-type(3){
    width: 20%;
    /* 마지막 div 전체너비의 20%사용 */
}

/* .nav > div > h3{
    font-size: 18px;
    font-weight: bold;
    color: #25a2d0;
    하단 여백 띄워주기
    margin-bottom: 4px;
} */

.nav > div > ol{}
.nav > div > ol > li{
    width: 50%;
    float: left;
}

.nav > div:nth-of-type(3) li{
    width: 100%;
}

.nav > div > ol > li > a{}

.nav > div > ol > li > a:hover{
    text-decoration: underline;
}

/* .tit */
.tit{
    position: relative;
}
.tit h2{
    font-size: 40px;
    /* 아이콘 사이여백 넣기 위해 10px 추가 */
    height: 70px;
    line-height: 70px;
    text-align: center;
    font-family: 'Black Han Sans', sans-serif;
}
.tit a.btn{
    width: 60px;
    height: 60px;
    background: url(../image/icon.png) 0px -600px;
    display: block;
    position: absolute;
    right: 0;
    top: 5px;
}

.tit a.btn:hover{
    background-position: -60px -600px;
}

.tit a.btn.on{
    background-position: 0px -660px;
}

.tit a.btn.on:hover{
    background-position: -60px -660px;
}

/* ban */
.ban{
    padding: 30px 0 30px 20px;
    position: relative;
}
.ban .slick-prev {
    position: absolute;
    top: 60px;
    left: -80px;
    width: 43px;
    height: 43px;
    background: url(../image/icon.png) -150px 0px;
    font-size: 0;
    line-height: 0;
    text-indent: -99999px;
}
.ban .slick-next{
    position: absolute;
    top: 60px;
    right: -80px;
    width: 43px;
    height: 43px;
    background: url(../image/icon.png) -150px -43px;
    font-size: 0;
    line-height: 0;
    text-indent: -99999px;
}
.ban .slick-prev:hover{
    background-position: -193px 0px;
    cursor: pointer;
}
.ban .slick-next:hover{
    background-position: -193px -43px;
    cursor: pointer;
}

.ban .slick-dots{
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 0;
}
.ban .slick-dots li{
    display: inline-block;
    margin: 10px;
}
.ban .slick-dots li button{
    width: 15px;
    height: 15px;
    background-color: #2698cb;
    border-radius: 50%;
    font-size: 0;
    line-height: 0;
    text-indent: -99999px;
}
.ban .slick-dots li.slick-active button{
    background-color: darkblue;
}

/* cont */
.cont{
    overflow: hidden;
    /* 닷 밑 여백 주기 */
    padding-top: 30px;

}
.cont .colum{
    /* 표의 크기 */
    width: 289px;
    height: 363px;
    /* background-color: #eee; */
    /* 표 위치 잡아주기 */
    float: left;
    /* 표사이 여백 넣어주기 */
    margin: 0 30px 30px 0;
    /* 표 안쪽 여백 주기 */
    padding-right: 30px;
    border-right: 1px solid #c8c8c8;
    /* img의 기준점 */
    position: relative;
}





.cont .col1{}
.cont .col2{}


.cont .col3{
    /* 보더,패딩,마진을 0으로 해주어야 위로 올라간다. */
    border-right:0; 
    padding-right: 0; 
    margin-right: 0;
}
.cont .col4{}
.cont .col5{}
.cont .col6{
    border-right: 0;
    padding-right: 0;
    margin-right: 0;
}

.cont .colum .ico_img{
    display: block;
    width: 60px;
    height: 60px;
    background: url(../image/icon.png);
    /* 아이콘이미지 위치시키기 */
    position: absolute;
    left: 0;
    top: 0;
}

.cont .colum .ico_tit{
    font-size: 16px;
    color: #2c94c4;
    padding-left: 70px;
}
.cont .colum .ico_desc{
    border-bottom: 1px solid #d0d0d0;
    padding-left: 70px;
    /* 선 배치시키기 */
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.cont .col1 .ico_img{background-position: 0px -240px;}
.cont .col1 .ico_img:hover{background-position: -60px -240px;}

.cont .col2 .ico_img{background-position: 0px -300px;}
.cont .col2 .ico_img:hover{background-position: -60px -300px;}

.cont .col3 .ico_img{background-position: 0px -360px;}
.cont .col3 .ico_img:hover{background-position: -60px -360px;}

.cont .col4 .ico_img{background-position: 0px -420px;}
.cont .col4 .ico_img:hover{background-position: -60px -420px;}

.cont .col5 .ico_img{background-position: 0px -480px;}
.cont .col5 .ico_img:hover{background-position: -60px -480px;}

.cont .col6 .ico_img{background-position: 0px -540px;}
.cont .col6 .ico_img:hover{background-position: -60px -540px;}

/* notice1 */
.notice1{
    /* more의 기준점 */
    position: relative;
    /* notice2 사이 여백 >> 일률적으로 명령어 주는 것이좋음*/
    margin-bottom: 15px;
}
.notice1 ul{}
.notice1 ul li{
    /* background-color: antiquewhite; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1px 0;
    position: relative;
}   

.notice1 ul li::before{
    content: "";
    position: absolute;
    width: 3px;
    height: 3px;
    background-color: #0093bd;
    top: 10px;
    left: 2px;
}

.notice1 ul li a{
    padding-left: 10px;
}
.notice1 .more, .notice2 .more{
    position: absolute;
    top: 0;
    right: 0;
    width: 17px;
    height: 17px;
    background: url(../image/icon.png) -150px -90px;
    display: block;   
}

/* notice2 */
.notice2{
    position: relative;
}
.notice2 ul{
    
}
.notice2 ul li{
    overflow: hidden;
    position: relative;
    padding: 1px 0;
}
.notice2 ul li::after{
    content: "";
    position: absolute;
    width: 3px;
    height: 3px;
    background-color: #0093bd;
    left: 2px;
    top: 10px;
}

.notice2 ul li a{
    display: block;
    width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    float: left;
    padding-left: 10px;
}
.notice2 ul li span{
    display: block;
    width: 25%;
    float: right;
}

<reset.css>

@charset "utf-8";

/* 여백 초기화 */
body,div,ul,li,dl,dt,ol,h1,h2,h3,h4,h5,h6,input,fieldset,legend,p,select,table,
th,td,tr,textarea,button,form{margin: 0; padding: 0;}

/* a 링크 초기화 */
a {color: #222; text-decoration: none;}
a:hover {color: #390;}

/* 폰트 초기화 */
body, input, textarea, select, button, table {
    font-family:'Nanum Gothic',AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;
    color: #222; font-size: 13px; line-height: 1.5;}

/* 폰트 스타일 초기화 */
em,address {font-style: normal;}

/* 블릿기호 초기화 */
dl,ul,li,ol,menu {list-style: none;}

/* 제목 태그 초기화 */
h1,h2,h3,h4,h5,h6 {font-size: 13px; color:#222; font-weight: normal;}

/* 테두리 초기화 */
img,fieldset {border:0 none;}

/* 이미지 블럭화 */
img{display: block;}

/* 버튼 초기화 */
button {border:0;}

/* clearfix */
.clearfix::before, .clearfix::after{
    content: "";
    clear: both;
    display: block;
}

/* IR 효과 */
.ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;} /* 의미있는 이미지의 대체 텍스트를 제공하는 경우 */
.ir_wa {display: block; overflow: hidden; position: relative; z-index: -1; width: 100%; height: 100%;} /* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고하 할 때 */
.ir_su {overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px;} /* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */

/* margin, padding */
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt30 {margin-top: 30px !important;}
.mt35 {margin-top: 35px !important;}
.mt40 {margin-top: 40px !important;}
.mt45 {margin-top: 45px !important;}
.mt50 {margin-top: 50px !important;}


/* class */
.h3 { font-size: 18px; font-weight: bold; color: #25a2d0; margin-bottom: 4px;}
.h4 { font-size: 14px; color: #0093bd; padding-bottom: 3px; font-weight: bold;}

728x90

저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

비주얼 스튜디오 코드 45_웹표준) 컨텐츠 (0)	2023.06.23
[JAVASCRIPT] 자바스크립트 이벤트 연결하기 (0)	2023.06.22
비주얼 스튜디오 코드 42_ 지도 넣기 (0)	2023.06.22
[JAVASCRIPT]요소 선택하기 (0)	2023.06.21
비주얼 스튜디오 코드 42 _ slick, dots, autoplay (0)	2023.06.21

현재글비주얼 스튜디오 코드 43_웹 표준) 컨텐츠

조반짝의 도전일지

공부, 취미, 여행 모두 경험해보고 싶은 조반짝의 도전일지입니다. ✨contact_ looby777@naver.com ✨Instagram_holylovuuu_illust

비주얼스튜디오코드, 이클립스, media, 자바스크립트, offset, 코딩테스트, 프론트엔드, For문, ACTIVE, SQL, 자바, HTML, Java, float, CSS, position, if문, Parallax, JavaScript, 웹디자인,

Today :
Yesterday :

조반짝의 도전일지