21.07.19


Today I Learn


index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>네이버</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>

    <!-- 상단 영역 -->
    <header id="main_header">
        <div class="search_area">

            <div class="search_wrap">
                <input type="text">
                <!-- 
                    지금은 디자인 작업만 할거라 타입을 button으로 둠 
                    FM으로 하면 form태그를 더 만들고 버튼 타입을 submint으로 둬야 함
                -->
                <button type="button"></button>
            </div>

        </div>

        <div id="navbar">
            <div class="container">

                <ul>
                    <li><a href="#">메일</a></li>
                    <li><a href="#">카페</a></li>
                    <li><a href="#">블로그</a></li>
                    <li><a href="#">지식인</a></li>
                    <li><a href="#">쇼핑</a></li>
                </ul>

            </div>
        </div>
    </header>
    

    <!-- 본문 영역 -->
    <main role="main" class="container">
        <div id="main_left">

            <div id="banner_wrap"></div>

            <div id="news_wrap">

                <div class="news_header">
                    <h2>뉴스스탠드</h2>
                    <div class="news_btn_wrap">
                        <!-- button의 기본 타입은 button -->
                        <button class="setting_1"></button>
                        <button class="setting_2"></button>
                        <button class="setting_3"></button>
                    </div>
                </div>

                <ul class="news_lists">
                    <li class="news_list">
                        <!-- 
                            실제 네이버는 커서를 올리면 손가락 모양으로 변한다
                            그렇게 하려면 img 태그를 a태그로 감쌌어야 했는데
                            지금은 생략
                        -->
                        <img src="https://via.placeholder.com/45x20">
                    </li>
                    <li class="news_list">
                        <img src="https://via.placeholder.com/45x20">
                    </li>
                    <li class="news_list">
                        <img src="https://via.placeholder.com/45x20">
                    </li>
                    <li class="news_list">
                        <img src="https://via.placeholder.com/45x20">
                    </li>
                    <li class="news_list">
                        <img src="https://via.placeholder.com/45x20">
                    </li>
                    <li class="news_list">
                        <img src="https://via.placeholder.com/45x20">
                    </li>
                    <li class="news_list">
                        <img src="https://via.placeholder.com/45x20">
                    </li>
                    <li class="news_list">
                        <img src="https://via.placeholder.com/45x20">
                    </li>
                    <li class="news_list">
                        <img src="https://via.placeholder.com/45x20">
                    </li>
                    <li class="news_list">
                        <img src="https://via.placeholder.com/45x20">
                    </li>
                    <li class="news_list">
                        <img src="https://via.placeholder.com/45x20">
                    </li>
                    <li class="news_list">
                        <img src="https://via.placeholder.com/45x20">
                    </li>
                    <li class="news_list">
                        <img src="https://via.placeholder.com/45x20">
                    </li>
                    <li class="news_list">
                        <img src="https://via.placeholder.com/45x20">
                    </li>
                    <li class="news_list">
                        <img src="https://via.placeholder.com/45x20">
                    </li>
                    <li class="news_list">
                        <img src="https://via.placeholder.com/45x20">
                    </li>
                    <li class="news_list">
                        <img src="https://via.placeholder.com/45x20">
                    </li>
                    <li class="news_list">
                        <img src="https://via.placeholder.com/45x20">
                    </li>
                    <li class="news_list">
                        <img src="https://via.placeholder.com/45x20">
                    </li>
                    <li class="news_list">
                        <img src="https://via.placeholder.com/45x20">
                    </li>
                    <li class="news_list">
                        <img src="https://via.placeholder.com/45x20">
                    </li>
                    <li class="news_list">
                        <img src="https://via.placeholder.com/45x20">
                    </li>
                    <li class="news_list">
                        <img src="https://via.placeholder.com/45x20">
                    </li>
                    <li class="news_list">
                        <img src="https://via.placeholder.com/45x20">
                    </li>
                </ul>

            </div>

            <div id="blog_wrap">
                <div class="blog_header">
                    <div class="left_header">
                        <h3>오늘 읽을만한 글</h3>
                        <span>주제별 분류된 다양한 글 모음</span>
                    </div>
                    <div class="right_header">
                        <span class="count"><strong>1,853</strong> 개의 글</span>
                        <span>관심주제 설정</span>
                    </div>
                </div>

                <nav class="blog_nav">
                    <ul>
                        <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>
                    </ul>
                </nav>

                <div class="blog_list_wrap">
                    <ul>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/170x114">

                                <div class="blog_list_info">
                                    <span>경제M</span>
                                    <h4>Title</h4>
                                    <p>
                                        전립선 질환, 노년 남성들의 고민 해결하기! 
                                        #전립선 은 요도를 감싸면서 방광 아래에 위치한 분비선으로 일반적으로 호두 정도의 크기 입니다. 
                                        대표적 질환으로 #전립선염, #전립선
                                    </p>
                                    
                                    <div class="date_wrap">
                                        <span>뉴스얌</span>
                                        <span>4일 전</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/170x114">

                                <div class="blog_list_info">
                                    <span>경제M</span>
                                    <h4>Title</h4>
                                    <p>
                                        전립선 질환, 노년 남성들의 고민 해결하기! 
                                        #전립선 은 요도를 감싸면서 방광 아래에 위치한 분비선으로 일반적으로 호두 정도의 크기 입니다. 
                                        대표적 질환으로 #전립선염, #전립선
                                    </p>
                                    
                                    <div class="date_wrap">
                                        <span>뉴스얌</span>
                                        <span>4일 전</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/170x114">

                                <div class="blog_list_info">
                                    <span>경제M</span>
                                    <h4>Title</h4>
                                    <p>
                                        전립선 질환, 노년 남성들의 고민 해결하기! 
                                        #전립선 은 요도를 감싸면서 방광 아래에 위치한 분비선으로 일반적으로 호두 정도의 크기 입니다. 
                                        대표적 질환으로 #전립선염, #전립선
                                    </p>
                                    
                                    <div class="date_wrap">
                                        <span>뉴스얌</span>
                                        <span>4일 전</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/170x114">

                                <div class="blog_list_info">
                                    <span>경제M</span>
                                    <h4>Title</h4>
                                    <p>
                                        전립선 질환, 노년 남성들의 고민 해결하기! 
                                        #전립선 은 요도를 감싸면서 방광 아래에 위치한 분비선으로 일반적으로 호두 정도의 크기 입니다. 
                                        대표적 질환으로 #전립선염, #전립선
                                    </p>
                                    
                                    <div class="date_wrap">
                                        <span>뉴스얌</span>
                                        <span>4일 전</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="blog_media_wrap">
                    <ul>
                        <li>
                            <img src="https://via.placeholder.com/232x130">
                            <div class="blog_media_info">
                                <h4>Title</h4>
                                <span>신사임당</span>
                            </div>
                        </li>
                        <li>
                            <img src="https://via.placeholder.com/232x130">
                            <div class="blog_media_info">
                                <h4>Title</h4>
                                <span>신사임당</span>
                            </div>
                        </li>
                        <li>
                            <img src="https://via.placeholder.com/232x130">
                            <div class="blog_media_info">
                                <h4>Title</h4>
                                <span>신사임당</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="blog_list_wrap">
                    <ul>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/170x114">

                                <div class="blog_list_info">
                                    <span>경제M</span>
                                    <h4>Title</h4>
                                    <p>
                                        전립선 질환, 노년 남성들의 고민 해결하기! 
                                        #전립선 은 요도를 감싸면서 방광 아래에 위치한 분비선으로 일반적으로 호두 정도의 크기 입니다. 
                                        대표적 질환으로 #전립선염, #전립선
                                    </p>
                                    
                                    <div class="date_wrap">
                                        <span>뉴스얌</span>
                                        <span>4일 전</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/170x114">

                                <div class="blog_list_info">
                                    <span>경제M</span>
                                    <h4>Title</h4>
                                    <p>
                                        전립선 질환, 노년 남성들의 고민 해결하기! 
                                        #전립선 은 요도를 감싸면서 방광 아래에 위치한 분비선으로 일반적으로 호두 정도의 크기 입니다. 
                                        대표적 질환으로 #전립선염, #전립선
                                    </p>
                                    
                                    <div class="date_wrap">
                                        <span>뉴스얌</span>
                                        <span>4일 전</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/170x114">

                                <div class="blog_list_info">
                                    <span>경제M</span>
                                    <h4>Title</h4>
                                    <p>
                                        전립선 질환, 노년 남성들의 고민 해결하기! 
                                        #전립선 은 요도를 감싸면서 방광 아래에 위치한 분비선으로 일반적으로 호두 정도의 크기 입니다. 
                                        대표적 질환으로 #전립선염, #전립선
                                    </p>
                                    
                                    <div class="date_wrap">
                                        <span>뉴스얌</span>
                                        <span>4일 전</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/170x114">

                                <div class="blog_list_info">
                                    <span>경제M</span>
                                    <h4>Title</h4>
                                    <p>
                                        전립선 질환, 노년 남성들의 고민 해결하기! 
                                        #전립선 은 요도를 감싸면서 방광 아래에 위치한 분비선으로 일반적으로 호두 정도의 크기 입니다. 
                                        대표적 질환으로 #전립선염, #전립선
                                    </p>
                                    
                                    <div class="date_wrap">
                                        <span>뉴스얌</span>
                                        <span>4일 전</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="blog_media_wrap">
                    <ul>
                        <li>
                            <img src="https://via.placeholder.com/232x130">
                            <div class="blog_media_info">
                                <h4>Title</h4>
                                <span>신사임당</span>
                            </div>
                        </li>
                        <li>
                            <img src="https://via.placeholder.com/232x130">
                            <div class="blog_media_info">
                                <h4>Title</h4>
                                <span>신사임당</span>
                            </div>
                        </li>
                        <li>
                            <img src="https://via.placeholder.com/232x130">
                            <div class="blog_media_info">
                                <h4>Title</h4>
                                <span>신사임당</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

        </div>

        <div id="main_right">

        </div>
    </main>
</body>
</html>

style.css

/* CSS Reset */
* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

ol, ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: #000000;
}

img {
    vertical-align: middle;
}

.clearcix {
    clear: both;
}

.container {
    width: 1130px;
    margin: 0 auto;
}

button {
    border: none;
}

input, textarea {
    outline: none;
}


/* 상단 영역 */
#main_header {
    position: relative;
    background-color: #ffffff;
}
/*
    코드를 작성할 때 자신만의 방법으로 일관성있게 작성하는 것이 좋다.
    강사님의 경우 공간에 대한 속성 다음에 높이 넓이 배경색 다음에 폰트설정
*/
#main_header .search_area {
    display: flex;
	justify-content: center;
	align-items: center;
    position: relative;

    height: 160px;
    background-color: #ffffff;

    border-bottom: 1px solid #e4e8eb;
}

#main_header .search_wrap {
    /*
    input 요소와 button 요소를 한 줄에 배치하기 
    */
    display: flex;
    justify-content: space-between;
    align-items: center;

    position: relative;
    width: 582px;
    height: 52px;
    border: solid 2px #19ce60;
}

#main_header .search_wrap input {
    width: calc(100% - 52px);
    height: 100%;
    padding: 13px 15px;

    font-size: 22px;
    border: none;
}

/*
마우스로 선택했을 때 포커싱된 요소의 외곽선을 제거하겠다 
디폴트 값으로 주는 편
*/
#main_header .search_wrap input:focus {
    outline: none;
}

#main_header .search_wrap button {
    width: 52px;
    height: 100%;
    background-color: #19ce60;
}


/* 그림자 */
#main_header #navbar {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%);
}

#main_header #navbar ul {
    padding: 11px 0;
}

#main_header #navbar ul li {
    display: inline-block;
    margin-right: 5px;
}

#main_header #navbar ul li a {
    color: #03c75a;
    font-size: 15px;
    font-weight: 700px;
}


/* 본문 영역 */
main {
    overflow: hidden;
    /* 
    header요소와 main 요소 사이에 공백이 있음 
    header 요소의 padding bottom에 공백을 주거나
    main 요소의 padding top에 공백을 줄 수 있음
    개발자 취향 차이
    */
    padding-top: 20px;
}

main #main_left {
    float: left;
    width: 750px;
    /* height: 2000px; */
    /* background-color: yellow; */
}

main #main_right {
    float: right;
    width: 350px;
    height: 2000px;
    background-color: pink;
}

main #banner_wrap {
    width: 750px;
    height: 135px;
    background-color: #000000;

    margin-bottom: 12px;
}

main #news_wrap .news_header {
    padding: 22px 0 16px 0;

    display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

main #news_wrap .news_header h2 {
    font-size: 14px;
    font-weight: 700px;
}

main #news_wrap .news_header .news_btn_wrap {
    display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

    width: 60px;
}

main #news_wrap .news_header .news_btn_wrap button {
    width: 15px;
    height: 15px;
    background-color: blue;
}

 #news_wrap .news_lists {
    overflow: hidden;
    border: solid 1px #dae1e6;
}

#news_wrap .news_lists .news_list {
    position: relative;
    float: left;
    width: 16.66%;
    height: 65px;
    background-color: #ffffff;

    border-bottom: solid 1px #e4e8eb;
    border-right: solid 1px #e4e8eb;

    text-align: center;
}


/* #news_wrap .news_lists .news_list:nth-child(12), */
/* #news_wrap .news_lists .news_list:nth-child(18), */
/* #news_wrap .news_lists .news_list:nth-child(24) */ 
#news_wrap .news_lists .news_list:nth-child(19),:nth-child(6n) {
    border-right: none;
}

#news_wrap .news_lists .news_list:nth-child(19),
#news_wrap .news_lists .news_list:nth-child(20),
#news_wrap .news_lists .news_list:nth-child(21),
#news_wrap .news_lists .news_list:nth-child(22),
#news_wrap .news_lists .news_list:nth-child(23),
#news_wrap .news_lists .news_list:nth-child(24) {
    border-bottom: none;
}

#news_wrap .news_lists .news_list img {
    position: relative;

    /* Y축 중앙정렬 공식 꼭 기억하기! */
    top: 50%;
    transform: translateY(-50%);
}

main #blog_wrap {
    padding-top: 35px;
}

main #blog_wrap .blog_header {
    display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

    padding-bottom: 17px;
}

main #blog_wrap .blog_header .left_header {
    display: flex;
	flex-wrap: wrap;
	align-items: center;
}

main #blog_wrap .blog_header .left_header h3 {
    font-size: 14px;
    margin-right: 8px;
}

main #blog_wrap .blog_header .left_header span {
    font-size: 12px;
    color: gray;
}

main #blog_wrap .blog_header .right_header {
    display: flex;
	flex-wrap: wrap;
    justify-content: flex-end;
	align-items: center;
}

main #blog_wrap .blog_header .right_header span {
    font-size: 12px;
    color: gray;
}

main #blog_wrap .blog_header .right_header .count strong {
    color: #000000;
}

main #blog_wrap .blog_nav ul {
    overflow: hidden;

    border: solid 1px #dae1e6;
}

main #blog_wrap .blog_nav ul li {
    float: left;
    width: 12.5%;
    height: 49px;

    border-right: solid 1px #dae1e6;
}

main #blog_wrap .blog_nav ul li:last-child {
    border-right: 0;
}

main #blog_wrap .blog_nav ul li a {
    display: block;
    width: 100%;
    height: 100%;

    /* 동일한 높이값을 적용하면 Y축 중앙정렬됨 */
    line-height: 49px;
    text-align: center;
}

main #blog_wrap .blog_list_wrap {
    padding-top: 19px;
    border-bottom: solid 1px #dae1e6;
}

main #blog_wrap .blog_list_wrap li {
    margin-bottom: 18px;

}

main #blog_wrap .blog_list_wrap li a {
    display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

main #blog_wrap .blog_list_wrap li img {
    width: 170px;
    height: 114px;
    margin-right: 21px;
}

main #blog_wrap .blog_list_wrap li .blog_list_info {
    width: 559px;
    padding-right: 47px;
}

main #blog_wrap .blog_list_wrap li .blog_list_info span {
    font-size: 12px;
    color: #35ae5e;
}

main #blog_wrap .blog_list_wrap li .blog_list_info h4 {
    font-size: 13px;
}

main #blog_wrap .blog_list_wrap li .blog_list_info p {
    font-size: 13px;
}

/* 캐스케이딩 */
main #blog_wrap .blog_list_wrap li .blog_list_info .date_wrap span {
    color: #505050;
}

main #blog_wrap .blog_media_wrap ul {
    display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

    padding: 18px 0;

    border-bottom: solid 1px #dae1e6;
}

main #blog_wrap .blog_media_wrap ul .blog_media_info {
    padding-top: 12px;
}

main #blog_wrap .blog_media_wrap ul .blog_media_info h4 {
    font-size: 13px;
}

main #blog_wrap .blog_media_wrap ul .blog_media_info span {
    font-size: 12px;
}

Review


今日は官カレーを作りました.カードピカを作るときに学んだことを引き続き身につけることができ、自分のCSSコードの書き方を工夫しているようです.