사이트 제작_html, position 속성

코딩을 하는데 있어서 중요한 순서 

 

1. html 구조 작성 

2. 스타일 시트(CSS)를 작성 - 사이트 작업시에느 외부스타일로 작성하고 따로 폴더를 만들어서 작업해야한다.

3. images 폴더 같은 폴더에 있지 않으면 경로에 문제가 생기기 때문에 이미지가 로딩되지 않는 경우가 있기 때문에 항상 같은 같은 폴더에 이미지 css 등 따로 폴더를 만들어서 진행해야한다.

 

---

- 브랜드 페이지 제작

html을 작성하는데 있어서 기본적으로 들어가는 레이아웃을 먼저 잡아주고 시작하는것이 기본이다.

헤더가 여러가지 컨텐츠가 들어가 있을 경우 행을 나눠 진행한다. (위는 로고가 있는 1행과 네비가 있는 2행으로 나뉜다.) 또한 기본적으로 코딩은 왼쪽에서 시작해서 가는것이 기본이지만 접근성에 따라서 읽어야 하는 중요도에 따라서 코딩 순서를 정해서 하는것이 좋다.

여기서는 중앙 로고가 제일 첫번째이기 때문에 flex 태그에서 순서를 바꾸는 내용을 넣어 줄 수 있다.

<header id="header">

            <div class="header_top">

                <h1 class="logo">

                    <a href="#">

                        <img src="./images/logo_jeju.png" alt="THE SUITES HOTEL LOGO">

                    </a>

                </h1><!--logo-->

                <div class="rever-area">

                    <a href="#" class="btn-rever">예약하기</a>

                    <a href="#" class="btn-cancel">예약조회/취소</a>

                </div>

                <ul class="social-area">

                    <li>

                        <a href="#" class="btn-social">

                            <img src="./images/ico_facebook.png" alt="facebook">

                        </a>

                    </li>

                    <li>

                        <a href="#" class="btn-social">

                            <img src="./images/ico_blog.png" alt="blog">

                        </a>

                    </li>

                    <li>

                        <a href="#" class="btn-social">

                            <img src="./images/ico_insta.png" alt="instargram">

                        </a>

                    </li>

                    <li>

                        <a href="#" class="btn-social">

                            <img src="./images/ico_trip.png" alt="trip">

                        </a>

                    </li>

                </ul>

            </div><!--header_top-->

            <div class="header_nav">

                <nav class="nav">

                    <ul class="gnb">

                        <li>

                            <a href="#" class="btn-link">

                                스페셜오퍼

                            </a>

                        </li>

                        <li>

                            <a href="#" class="btn-link">

                                객실

                            </a>

                        </li>

                        <li>

                            <a href="#" class="btn-link">

                                미팅&연회

                            </a>

                        </li>

                        <li>

                            <a href="#" class="btn-link">

                                웨딩

                            </a>

                        </li>

                        <li>

                            <a href="#" class="btn-link">

                                레스토랑

                            </a>

                        </li>

                        <li>

                            <a href="#" class="btn-link">

                                부대시설

                            </a>

                        </li>

                    </ul>

                </nav>

            </div><!--header_nav-->

        </header><!--header-->

 

위와 같이 중요한 순서에 맞게 넣어주면 된다. (예를 들어서 로고 > 메뉴 > 소셜 같은 순으로 진행된다면 해당 순서로 진행하면 된다. 이후 순서를 바꿔주는 태그로 지정해주면 된다.)

<main id="container">

            <section class="visual">

                <img src="./images/img1.jpg" alt="image">

            </section>

            <section class="sec special">

                <h2>SPECIAL OFFERS</h2>

                <ul class="special-list">

                    <li class="special-col">

                        <a href="#">

                            <img src="./images/img6.jpg" alt="BBQ Package">

                            <h3>

                                [제주] BBQ Package

                            </h3>

                            <p class="date">

                                기간 : 2018-06-01 ~ 2018-06-30

                            </p>

                            <p class="price">

                                금액 : ￦165,000 ~  

                            </p>

                        </a>

                    </li>

                    <li class="special-col">

                        <a href="#">

                            <img src="./images/img5.jpg" alt="Beer Time Package">

                            <h3>

                                [제주] Beer Time Package

                            </h3>

                            <p class="date">

                            기간 : 2018-06-01 ~ 2018-06-30

                            </p>

                            <p class="price">

                                  금액 : ￦145,000 ~

                            </p>

                        </a>

                    </li>                    

                </ul>

            </section>

            <section class="sec about">

                <div class="thum">

                    <img src="./images/img7.jpg" alt="환상의 섬 제주도">

                </div>

                <div>

                    <h2>

                        ABOUT US

                    </h2>

                    <p class="str"><strong>

                        북태평양의 푸른 바다와 한라산의 우아한 자태를 뽐내는 환상의 섬, 제주도

                        제주의 수려한 자연 경관과 아름다운 사람들이 한데 어울린 제주 중문 단지 내 스위트호텔에서

                        삶의 여유를 즐기며 소중한 시간을 만드십시오.

                    </strong></p>

                    <p>

                        스위트호텔의 포근하고 아늑한 객실은 마치 집에 온 듯, 달콤하고 행복한 꿈을 가져다 주어

                        고객 여러분의 여행을 더욱 가치 있게 만들어 드릴 것입니다.

                        스위트호텔에서 편안한 여행의 즐거움을 만끽하시고 저희 호텔이 격조 높은 휴식처가 될 수 있도록

                        저희 임직원들은 항상 정성이 깃든 최고의 서비스를 제공하겠습니다.  

                    </p>

                    <a href="#">자세히 보기</a>

                </div>

            </section>

        </main>

컨텐츠를 어떻게 배치할 것인가에 따라 사용되는 태그가 다르며 같은 형식의 이미지와 글을 나열하려면 왠만하면 <ul>태그를 사용하는것이 좋다. (div 태그가 많아지게 되면 파일에 과부화가 올 수 있기 때문)

<footer id="footer">

            <div class="footer-menu">

                <ul class="footer-list">

                    <li class="footer-logo">

                        THE SULTES HOTEL

                    </li>

                    <li>

                        <a href="#">

                            스위트 호텔 소개

                        </a>

                        <a href="#">

                            문의하기

                        </a>

                        <a href="#">

                            인재채용

                        </a>

                        <a href="#">

                            찾아오시는 길

                        </a>

                        <a href="#">

                            사이트맵

                        </a>

                    </li>

                </ul>

                <div class="top-area">

                    <a href="#header">

                        <img src="./images/btn_top.png" alt="위로 이동">

                    </a>

                </div>

            </div>

            <div class="footer-info">

                <address>

                    제주도 서귀포시 중문관광단지로 149 TEL:064-738-8080 FAX:064-738-8080 EMAIL:jeju@suites.co.kr

                </address>

                <p class="cpr">

                    Copyright &copy; THE SUITES HOTEL All Rights Reserved

                </p>

            </div>

        </footer>

 

html 작성에 있어서 이미지에서의 순서보단 접근성을 생각해서 작성하는것이 우선이다.

/*웹 폰트 호출*/

@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);

 

/*초기화*/

*{

    margin: 0; padding: 0;

    box-sizing: border-box;

}

a{

    text-decoration: none;

    color: inherit;

}

ul,ol{

    list-style: none;

}

img{

    max-width: 100%

}

 

웹 폰트 호출에 있어서 유효성을 위해서 (구글웹 폰트 호출 > 로컬에 저장된 폰트) 순으로 호출하여야 유효성에 있어서 문제 되지 않는다.

.header_top{

    display: flex;

    height: 65px;

    background-color: #f6f6f6;

    border-bottom: 1px solid #ccc;

    justify-content: space-between;

    align-items: center;

}

.header_top .logo{

    order: 2;

}

.header_top .rever-area{

    order: 3;

}

.header_top .social-area{

    order: 1;

 

컨텐츠를 나열할 때 align-item 은 컨텐츠가 1줄일때 align-contents 는 2줄 이상일때 사용

.header_top .rever-area a{

    width: 90px;

    height: 30px;

    background-color: pink;

    display: inline-block;

    color: #fff;

    text-align: center;

    line-height: 30px;

}

 

블록속성을 가진 태그에서 가로정렬은 text-align이라는 속성을 써서 정렬할 수 있지만 세로 정렬하는 속성은 없다. 그래서 응용으로 css스타일의 행간 적용 범위를 활용하여 line-height 속성 값을 height 속성 값과 똑같이 하여주면 된다. 이때 텍스트는 한줄 이어야 한다.

.header_top .rever-area a{

    width: 90px;

    height: 30px;

    background-color: #878787;

    display: inline-block;

    color: #fff;

    text-align: center;

    line-height: 30px;

}

.rever-area .btn-rever{

    background: #0095c2;

}

 

이럴경우 들어가지 않게되는데 뒤의 스타일이 부모를 설정하지 않아서 우선순위에서 밀리기 때문에 앞의 부모태그를 같이 넣은 부분이 우선적으로 들어가게 되면서 해당 색이 적용되지 않는것이다.

 

.header_nav .gnb{

    display: flex;

    justify-content: space-around;

    /*넓이 값을 자동으로 지정되도록 하는것*/

}

.header_nav .gnb li{

    width: calc(100%/6);

    text-align: center;

    /*높이 값을 자동으로 지정되도록 하는것*/

    /*사용자가 이용하기에 (클릭을 할때) 용이하도록 지정한다고 할 수 있다.*/

}

.header_nav .gnb .btn-link{

    display: block;

    padding: 10px;

}

.header_nav .gnb .btn-link:hover,

.header_nav .gnb .btn-link:active,

.header_nav .gnb .btn-link:focus {

    color: #0095c2;

}

 

사용자가 현재 진행되고 있는 메뉴를 알 수 있도록 기본적으로 설정하는것이 hover, active, focus 이기 때문에 nav 태그에 꼭 적용시켜 주어야 한다.

<main id="container">

            <section class="visual">

                <img src="./images/img1.jpg" alt="image">

            </section>

 

비주얼 이미지는 그냥 넣어주는데 앞서 스타일에 img 자체에 크기를 100%를 넣었기 때문에 자동으로 작업 크기에 맞춰서 적용 된다.

.sec{

    margin-top: 40px;

}

.sec h2{

    font-size: 20px;

    font-weight: 400;

    margin-bottom: 20px;

}

.special h2{

    text-align: center;

}

.special-list{

    display: flex;

    justify-content: center;

}

.special-list li{

    width: 200px;

    margin-left: 6px;

    margin-right: 6px;

}

.special-list li p{

    font-size: 12px;

}

<section class="sec special">

                <h2>SPECIAL OFFERS</h2>

                <ul class="special-list">

                    <li class="special-col">

                        <a href="#">

                            <img src="./images/img6.jpg" alt="BBQ Package">

                            <h3>

                                [제주] BBQ Package

                            </h3>

                            <p class="date">

                                기간 : 2018-06-01 ~ 2018-06-30

                            </p>

                            <p class="price">

                                금액 : ￦165,000 ~  

                            </p>

                        </a>

                    </li>

                    <li class="special-col">

                        <a href="#">

                            <img src="./images/img5.jpg" alt="Beer Time Package">

                            <h3>

                                [제주] Beer Time Package

                            </h3>

                            <p class="date">

                            기간 : 2018-06-01 ~ 2018-06-30

                            </p>

                            <p class="price">

                                  금액 : ￦145,000 ~

                            </p>

                        </a>

                    </li>                 <li class="none">

                        <img src="./images/noImg.png" alt="noimg">

                    </li>  

                </ul>

            </section>

 

h2가 중앙에 위치해 있고 컨텐츠들은 가로로 배치되기 때문에 따로 속성을 기입해준다.

이때 내용을 입력할때 <ul> 태그를 사용해서 작은 컨텐츠끼리 묶어서 사용해주는것이 좋다.

 

 

이미지는 인라인 블럭 태그 이기때문에 마진이 기본적으로 들어가게 된다. 이때 img 태그에 block 속성을 넣어주거나 div 태그에 line-height: 0 적용하면 된다.

 

.about {

    display: flex;

}

.about .about-area{

    width: 530px;

}

.about .about-text{

    padding-left: 20px;

   

}

.about .about-text p{

    padding-bottom: 10px;

}

.about .about-thum img{

    display: block;

}

.about .btn-more{

    width: 77px;

    height: 30px;

    display: block;

    border: 1px solid #878787;

    margin-top: 10px;

    border-radius: 20px;

    text-align: center;

    font-size: 12px;

    line-height: 30px;

}

<section class="sec about">

                <div class="about-thum about-area">

                    <img src="./images/img7.jpg" alt="환상의 섬 제주도">

                </div>

                <div class="about-text about-area">

                    <h2>

                        ABOUT US

                    </h2>

                    <p class="str"><strong>

                        북태평양의 푸른 바다와 한라산의 우아한 자태를 뽐내는 환상의 섬, 제주도

                        제주의 수려한 자연 경관과 아름다운 사람들이 한데 어울린 제주 중문 단지 내 스위트호텔에서

                        삶의 여유를 즐기며 소중한 시간을 만드십시오.

                    </strong></p>

                    <p>

                        스위트호텔의 포근하고 아늑한 객실은 마치 집에 온 듯, 달콤하고 행복한 꿈을 가져다 주어

                        고객 여러분의 여행을 더욱 가치 있게 만들어 드릴 것입니다. 스위트호텔에서 편안한

                        여행의 즐거움을 만끽하시고 저희 호텔이 격조 높은 휴식처가 될 수 있도록 저희 임직원들은

                        항상 정성이 깃든 최고의 서비스를 제공하겠습니다.  

                    </p>

                    <a href="#" class="btn-more">자세히 보기</a>

                </div>

            </section>

 

footer는 해당 태그에 메뉴가 들어가는 경우가 많은데 header와 같이 ul 태그를 사용해 묶어주면 된다. 이때 top 버튼을 이미지로 넣어주게 되면 아까와 같이 하단에 여백이 생기게 되는데 이 또한 display : block 혹은 div 태그에 line-height: 0 적용하면 된다.

.footer-menu{

    display: flex;

    background: #f1f4f6;

    justify-content: space-between;

}

.footer-list{

    display: flex;

    /* background-color: yellow; */

    align-items: center;

    margin-right: 10px;

}

.footer-list li a{

    display: block;

    padding: 15px 10px;

    /* background-color: pink; */

}

.footer-list .footer-logo{

    margin: 0 20px;

}

.footer-info{

    background: #515453;

    padding: 30px 0 95px 0;

}

.footer-info address{

    font-style: normal;

}

.footer-menu .top-area img{

    display: block;

}

<footer id="footer">

            <div class="footer-menu">

                <ul class="footer-list">

                    <li class="footer-logo">

                        <a href="#">

                        THE SULTES HOTEL

                        </a>

                    </li>

                    <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 class="top-area">

                    <a href="#header">

                        <img src="./images/btn_top.png" alt="위로 이동">

                    </a>

                </div>

            </div>

            <div class="footer-info">

                <address>

                    제주도 서귀포시 중문관광단지로 149 TEL:064-738-8080 FAX:064-738-8080 EMAIL:jeju@suites.co.kr

                </address>

                <p class="cpr">

                    Copyright &copy; THE SUITES HOTEL All Rights Reserved

                </p>

            </div>

        </footer>

완성본

style.html

0.01MB

---

- position 속성

<body>

<h1>absolute(절대좌표)</h1>

<h2>컨테이너 박스가 body 엘리먼트인 경우</h2>

<div class="box1">box1입니다.</div>

 

<h2>컨테이너 박스가 position : relative인 경우</h2>

<div id="wrap">

    <div class="box2">box2입니다.</div>

</div>

</body>

 

<style>

    #wrap{

        width: 500px;

        height: 500px;

        background: #eaeaea;

        margin: 30px auto;

        position: relative;

    }

    .box2{

        width: 100px;

        height: 100px;

        background: darkorchid;

        position: absolute;

        left: 100px; top: 100px;

    }

</style>

 

position : absolute 는 부모가 기준이 되는데 이때 부모에게 ,position : relative를 넣어야 적용이 되고 앞서 부모에게 주었던 마진값이 충돌하지 않고 유지 될수 있다. (부모에게 넣지 않는다면 마진값이 사라지게 된다.)

 

.box2{

        width: 100px;

        height: 100px;

        background: darkorchid;

        position: absolute;

        left: 0; top: -120px;

    }

이런 식으로 부모의 크기 기준에 하여서 움직일수 있고 -를 사용해 밖으로 나갈 수도 있다.

 

- position : absolute

position : absolute 는 지정한 좌표값으로 이동하면서 원래 위치를 벗어나게 된다. 그래서 밑에 있던 그림이 본래 빨강이 있던자리로 딸려 올라가게 되면서 해당처럼 부모의 heigth 값이 줄어들면서 아래 이미지들의 위으로 올라가게 된다.

자손에게 높이값을 다 주게 되면 부모의 높이값을 확보할 수 없다는 말이 된다.

 

부모요소의 높이 값을 확보하는 방법

1. 부모요소에 heigth 속성을 준다. (반응형이나 모바일 제작시 문제가 생길 수도 있다.)

2. 자손요소 중 한개라도 부모요소에 남겨둔다. (자손에게 position 값을 주지 않는다.)

---

-fixed 속성

 

브라우저가 기준이 되고 주로 헤더나 TOP버튼, 상단 메뉴 등 다양하게 사이트 제작시 쓰인다.

<style>

    *{

        margin: 0; padding: 0;

    }

    .fix_out{

        background: #111;

        color: #fff;

        height: 70px;

        display: flex;

        justify-content: center;

        align-items: center;

        position: fixed;

        left: 0; top: 0;

    }

    .container{

        margin: 0 auto;

        width: 800px;

        padding: 50px;

        background-color: pink;

    }

</style>

.fix_out{

        background: #111;

        color: #fff;

        height: 70px;

        display: flex;

        justify-content: center;

        align-items: center;

        position: fixed;

        left: 0; top: 0;

        width: 100%;

       

    }

    .container{

        margin: 0 auto;

        width: 800px;

        padding: 100px 50px;

        background-color: pink;

    }

 

위 코딩에서 달라진 점은 헤더의 넓이를 100%로 주어서 해당 브라우저의 넓이 만큼 크기가 되도록 하였고 컨텐츠가 나오는 지점에 padding 값을 100px을 주어서 헤더의 영역을 비워주면서 지정하면 상단에 헤더는 고정되고 컨텐츠도 제대로 보이게 된다.

fixed.html

0.00MB

absolute.html

0.00MB

 

* position : relative : 기준을 지정한 개체를 대상으로 잡히는 속성인데, 이는 주로 부모에게 주는 속성으로 자식에게 기준이 부모가 된다는것을 알려주기 위함이다. 부모에게 다른 position을 주기만 해도 되지만 주로 이 속성을 지정하는 이유는 자식에게 영향을 많이 주지 않기 때문에 position : relative를 지정해주어야 한다.

 

#wrap3{

        width: 500px;

        background: #eaeaea;

        margin: 50px auto;

        position: relative;

        height: 300px;

    }

    #wrap3 .box4{

        width: 100px;

        height: 100px;

        background: darkred;

        position: absolute;

        left: 50%; top: 50%;

    }

기준을 50%를 주었지만 기준이 왼쪽 상단이 기준이기 때문에 꼭지점은 맞지만 기준이 맞지 않게 된다. 그래서 따로 계산하여 진행해 주어야 한다. 이때 마진을 사용해 줄수도 있다.

#wrap3 .box4{

        width: 100px;

        height: 100px;

        background: darkred;

        position: absolute;

        left: 50%; top: 50%;

        margin-left: -50px;

        margin-top: -50px;

    }

-를 사용해서 각 위치의 반대로 이동하도록 해주면서 위치를 맞춰주면 된다. (이때 넣는 마진 값을 자식의 크기에서 2분의 1 크기만큼 넣어주면 된다.)

- z-index : 깊이 변경

하위 코드가 더 위쪽으로 오는 성질 값을 변경하고자 할 때 사용

- 값을 사용할 수는 있지만 이를 설정하게 되면 해당 개체의 기능이나 성질을 잃어버리기 때문에 쓰지 않는것이 좋다.

여기서 주의 할점은 단위를 붙이지 않는것이다. (ex: z-index : 1)