쫑's바른생활

[코딩 초보 개발일지] 입문_04-1. css 작업물 만들기 본문

개발일지/입문

[코딩 초보 개발일지] 입문_04-1. css 작업물 만들기

쫑이야기 2023. 4. 5. 22:32
728x90
반응형

해당 게시글은 
clearfix, 블록/인라인요소, a태그, hover, 이미지삽입방법 등에 대해 이해한 뒤 작업하시기 바랍니다.
 
 

<설정가이드>

전체(wrap), 로고 네비(header), 이미지(banner), 공지~바로가기(contents), 로고~사이트(footer)

 

<작업방법 순서_개인취향에 따라>

  1. 외부스타일 파일 생성
  2. html 초기설정값(외부스타일 링크포함) 작성
  3. css 초기설정값(reset) 작성
  4. html_body_id선택자(부모) 작성 : wrap, header, banner, contents, footer 등
  5. css_id선택자에게 정렬, background color, width, height 부여 : 블록위치 미리 인지하기
  6. html_class(자식) 넣어주기 : header먼저
  7. css_header class(자식) 꾸미기 : background color, width, height, float, clearfix(부모에게)
  8. html_class(손자) 넣어주기 : heder먼저
  9. html_6~8과정을 id선택자 별로 하나씩 수행
  10. css_필요없는 css값 지우기

 
<html 값>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>작업물 03</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div id="wrap" class="clearfix">
        <header id="header" class="clearfix">
            <h1 class="logo">
                <a href="#">
                    <img src="./images/logo.png" alt="바다와여행">
                </a>
            </h1>
            <div class="nav">
                <ul>
                    <li>
                        <a href="#">MENU-1</a>
                    </li>
                    <li>
                        <a href="#">MENU-2</a>
                    </li>
                    <li>
                        <a href="#">MENU-3</a>
                    </li>
                    <li>
                        <a href="#">MENU-4</a>
                    </li>
                </ul>
            </div>
        </header>
        <section id="banner">
            <img src="./images/slide.jpg" alt="슬라이드이미지">
        </section>
        <section id="contents" class="clearfix">
            <div class="notice">
                <h3>공지사항</h3>
                <ul></ul>
            </div>
            <div class="gallery">
                <h3>갤러리</h3>
                <ul>
                    <li>
                        <img src="./images/gallery1.jpg" alt="갤러리사진1">
                    </li>
                    <li>
                        <img src="./images/gallery2.jpg" alt="갤러리사진2">
                    </li>
                    <li>
                        <img src="./images/gallery3.jpg" alt="갤러리사진3">
                    </li>
                </ul>
            </div>
            <div class="link">
                <h3>바로가기</h3>
                <ul></ul>
            </div>
        </section>
        <footer id="footer" class="clearfix">
            <div class="footlogo">로고</div>
            <div class="copy">카피라이트</div>
            <div class="site">사이트</div>
        </footer>
    </div>
</body>
</html>

<css 값>

728x90
@charset "utf-8";

/*reset*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li{
    list-style: none;
}
a{
    color: #333;
    text-decoration: none;
}
img{
    display: block;
}
h1,h2.h3,h4,h5,h6{
    font-weight: normal;
    font-size: 20px;
}
.clearfix::after, .clearfix::before{
    content: "";
    display: block;
    clear: both;
}


#wrap{
    width: 1200px;
    margin: 0 auto;
}

/*header 영역*/
#header .logo{
    float: left;
}
#header .logo>a>img{
    width: 200px;
    height: 100px;
}
#header .nav{
    background-color: #81d4fa;
    float: right;
    margin-top: 50px;
    margin-right: 20px;
}
#header .nav>ul>li{
    float: left;
    width: 200px;
    height: 50px;
}
#header .nav>ul>li>a{
    display: block;
    text-align: center;
    line-height: 50px;
    font-size: 25px;
}
#header .nav>ul>li>a:hover{
    background-color: #29b6f6;
    color: #fff;
}

/*contents 영역*/
#contents div{
    width: 400px;
    height: 200px;
    float: left;
    padding: 10px;
}
#contents div>h3{
    background-color: #01579b;
    color: #fff;
    width: 100px;
    height: 50px;
    text-align: center;
    line-height: 50px;
}
#contents div>ul{
    border-top: 3px solid #01579b;
}
#contents .notice{
    background-color: #81d4fa;
}
#contents .gallery{
    background-color: #29b6f6;
}
#contents .gallery>ul{
    padding-top: 25px;
}
#contents .gallery>ul>li{
    float: left;
    padding-right: 10px;
}
#contents .gallery>ul>li:nth-child(3){
    padding-right: 0px;
}
#contents .link{
    background-color: #039be5;
}

/*footer 영역*/
#footer div{
    float: left;
    width: 200px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 25px;
    font-weight: bold;
}
#footer .footlogo{
    background-color: #90caf9 ;
}
#footer .copy{
    width: 800px;
    background-color: #64b5f6 ;
}
#footer .site{
    background-color: #42a5f5 ;
}

<최종결과물(이미지는 개인이미지 활용)>

< 끝 >

728x90
반응형

'개발일지 > 입문' 카테고리의 다른 글

[코딩 초보 개발일지] 입문_04-3. css 작업물 만들기(백그라운드 네비)  (0) 2023.04.16
[코딩 초보 개발일지] 입문_04-2. css 작업물 만들기(네비게이션)  (0) 2023.04.10
[코딩 초보 개발일지] 입문_03-2. css 작업물 만들기  (0) 2023.04.03
[코딩 초보 개발일지] 입문_03-1. css 작업물 만들기  (0) 2023.04.03
[코딩 초보 개발일지] 입문_02. html 배우기  (1) 2023.04.02
'개발일지/입문' Related Articles more
Comments