Hiio.com

안녕하세요.

이번 포스팅에서는 저번 시간에 만들었던 Text와 안내 지시선을 브라우저 크기 변화에 반응하여 원하는 위치에 계속 적으로 고정 시켜 보겠습니다.

제가 사용하고 있는 웹 브라우저의 가로와 세로 크기는 각각 1920*850입니다.

창을 최대화하여 위치를 잡아주었을 경우네는 창이 줄어 들면 처음 잡아 놨던 위치가 변하게 되어 지시선의 끝 부분이 제가 원하는 위치에 있지 않게 됩니다.

그래서 Jquery를 통해서 각 지시선이 반응하도록 만들어 줍니다.

function spanimgPose(selector, x, y) {

        var iwidth = $(window).width();
        var mainimg = $('.mainimg[data="' + selector + '"]');


        var leftT = (1920 - iwidth);
        var leftLength = x - leftT / 2;
        mainimg.offset({
            left: leftLength
        });

        var mainimgleft = mainimg.offset().left;

        // img left

        var iheight = $(window).height();

        var TopT = (850 - iheight);
        var TopLength = y - TopT / 2;
        mainimg.offset({
            top: TopLength
        });

        var mainimgTop = mainimg.offset().top; // img top

    };

먼저 함수를 만들어서 각 parameter를 정해줍니다.

저는 안내 Text의 selector와 초기 위치 x,y좌표값을 param로 하였습니다.

창의 가로와 세로 크기 값을 변수에 담아 줍니다. 그리고 창의 변화 값은 제 브라우저의 최대 크기에서 변화 후 창크기 값의 창이 를 변수에 담아 줍니다. 

브라우저가 작아 지거나 커질떄는 왼쪽과 오른쪽이 동시에 변화 하므로 2로 나누어 주면 한쪽의 변화 값을 알 수 있습니다.

이 변화값만큼 안내text가 이동하면 창크기가 변화 하더라도 제가 원하는 위치에 계속적으로 고정시킬수 있습니다. 

하지만, 창 크기를 실시간으로 변화 시킬때에는 대응을 하지 않게 됩니다.

그래서 이때는

window.resize()명령어를 사용하여 이 안에 제가 만들어 놓은 함수를 넣어 줍니다.

  spanimgPose("children", 540, 430);
    spanimgPose("acha", 1080, 200);

    function spanimgPose(selector, x, y) {

        var iwidth = $(window).width();
        var mainimg = $('.mainimg[data="' + selector + '"]');


        var leftT = (1920 - iwidth);
        var leftLength = x - leftT / 2;
        mainimg.offset({
            left: leftLength
        });

        var mainimgleft = mainimg.offset().left;

        // img left

        var iheight = $(window).height();

        var TopT = (850 - iheight);
        var TopLength = y - TopT / 2;
        mainimg.offset({
            top: TopLength
        });

        var mainimgTop = mainimg.offset().top; // img top

    };








    $(window).resize(function () {

        spanimgPose("children", 540, 430);
        spanimgPose("acha", 1080, 200);



    });

이렇게 되면 창크기가 변화 하더라도 안내 Text와 지시선은 제가 원하는 위치에 고정되어서 원하는 곳을 가르키게 됩니다.

다음 포스팅에서는 메인 이미지를 슬라이드 이미지 갤러리로 만들어 보겠습니다.

안녕하세요. 

이번 포스팅에서는 메인이미지 부분에 그림이나 사진을 넣어 보겠습니다.

보통 그림이나 사진을 넣기 위해서는 HTML 에서 img 태그를 사용하거나, CSS background 또는 background-image를 사용합니다.

1.img tag

우선 먼저 img 태그를 사용하여 이미지를 삽입해 보겠습니다.

1 2 3 4

<div id="main-image">mainimage     <img src="" alt=""> </div>

cs

기존에 div 태그안에 img 태그를 넣은 모습입니다. 

img 태그에는 여러가지 속성이 있습니다.

위에서는 src와 alt속성이 있는데요.

 

각 속성은

 

src : 이미지경로

alt : 이미지묘사 내용

 

입니다.

 

여기서 위에서 보이는 이미지를 한번 넣어 보겠습니다.

 

 

1

<img src="/img/%EB%85%B9%EC%A7%80%EC%A7%80%EC%97%AD.jpg" alt="메인이미지">

cs

 

src에 이미지 경로를 설정해 주었습니다.

 

 

위와같이 이미지가 들어갑니다.

하지만 width값과 height값이 없기 때문에 이미지 파일의 원래 크기대로 들어간 모습입니다.

width와 height값은 img태그 내에서도 지정해 줄수 있지만, 저는 css를 통해서 해봤습니다.

1 2 3

#main-image img {     width: 100%; }

cs

width값만 100%로 설정했을때 이미자가 가로에 꽉차게 들어가게 되었습니다. 이떄 height는 비율에 맞춰 자동으로 값이 설정 되었기때문에 main-image부분을 빠져나와 footer부분을 가리게 됩니다.

 

height 값을 같이 주게 되면, main-image크기에 맞게 비율이 조정 되어 더이상 footer를 가리지 않게 되지만, 이미지의 크기가 달라져 원래의 비율에 맞지 않게 됩니다. 

2. CSS / background

이번에는 CSS / background를 통해서 이미지를 삽입해 보겠습니다.

background에 이미지를 넣을 때는 2가지를 사용할 수 있습니다. 

background 코드에 url 속성을 주거나 

따로

background-img에 url을 이용하여 이미지를 넣을 수 있습니다.

이미지를 넣고 나서는 background-repeat / background-size / background-position...를

통해서 이미지의 반복이나 크기,위치등을 조절 할수 있습니다.

제가 원하는대로 main-image안에 이미지가 비율에 맞게 들어간 모습입니다.

하지만 원래 이미지크기와 main-image의 크기가 다르다면 이미지가 잘릴수도 있습니다.

다음에는 메인이미지에 animate효과를 적용해 보도록 하겠습니다.

안녕하세요. 

이번 포스팅에서는 저번에 만들었던 사이드바 메뉴를 css와 checkbox를 이용해서 slide시켜 나타났다 사라지게 하는 것을 만들어 보겠습니다.

1. input & label

먼저 html에 input과 label 태그를 작성해 줍니다.

<input type="checkbox" id="sidebtn">

        <label for="sidebtn" class="sidebtn"> button

        </label>

input에서 type은 checkbox로 설정해 주시고, label 태그 안에 for에는 input의 id속성값을 넣어서 연결 시켜 줍니다.

그러면 아래와 같이 만들어 집니다.

여기서 input과 label을 연결시켜주면 checkbox를 클릭하지 않아도, label을 클릭하면 똑같은 효과가 나타납니다.

그래서 저에게 필요한 것은 label 만 있으면 되므로 input태그는 css에서 display:none;으로 없애줍니다.

#sidebtn{
	display:none;
}

이제 label에 width값과 height값을 주고 그안에 span을 넣어서 Burger button을 만들어 줍니다.

-HTML

<label for="sidebtn" class="sidebtn"> button
            <span></span>
            <span></span>
            <span></span>
        </label>

-CSS

.sidebtn {
    width: 50px;
    height: 50px;
}



.sidebtn span {
    display: block;
    width: 100%;
    height: 5px;
    background-color: black;
    border-radius: 10px;
    position: absolute;
    transition: all 0.25s;
}

.sidebtn span:nth-child(1) {
    top: 10%;
}

.sidebtn span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.sidebtn span:nth-child(3) {
    bottom: 10%;
}

label 안에 span 태그를 이용합니다. 3개 정도 만들어줍니다.

css에서는 nth-child를 통해서 각 span의 위치를 잡아줍니다.

이제 checkbox가 checked됐을때 효과를 이용하여 sidebar가 슬라이드 되어 나올수 있도록 해줍니다.

css에서 checkbox가 checked됐다는 코드는

input뒤에 :checked를 써서 알려줍니다.

이제 이 코드를 이용하여 체크시 사이드바가 출현하게끔 하기위해서 css선택자들 중 +를 통해서 각 태그들을 선택하여 

left값을 조절하여 나타나고 사라지게 한다음,

transition을 통해서 시간차를 주어 천천히 사라지고 나타나게끔합니다.

See the Pen pooBRZY by hongsam (@hongsamhc) on CodePen.

완성된 코드 입니다.

이것을 저번에 만들었던 페이지에 적용 시켜 줍니다.

기본적으로 저는 사이드바가 왼쪽에서 슬라이드 되어 나오는 것으로 했습니다.

기본 페이지에서는 사라져있다가 버튼을 클릭하면 아래 그림처럼 나오게 됩니다.

완성된 화면입니다.

transition 값을 조절하여 버튼와 사이드바 이동시간을 조절하여 마은에 드는 슬라이드형 사이드바를 만들면 좋을것 같습니다.

다음에는 메인이미지를 적용 시켜 보겠습니다.

안녕하세요. 

저번시간에 이어서 제가 구상한 Layout을 HTML과 CSS를 가지고 만들어 보겠습니다.

그리 어렵지 않고, 복잡한 구조가 아니기 때문에 간단한 코딩만으로도 Layout을 구성할수 있었습니다. 

1. HTML - index.

<body>
    <div id="container">
        <div id="sidebar">sidebar</div>
        <div id="main-image">mainimage
            </div>

    </div>
    <div id="footer">footer</div>

</body>

먼저 HTML 코드 입니다. 

크게 구성은 main-image와 sidebar를 감싸고 있는 container와 footer로 나뉘어 있습니다. 

각 div는 id속성을 사용하였습니다. 

2.CSS - style.css

#container {
    position: relative;
    height: 100%;
    width: 100%;
    text-align: center;
    font-size: 50px;
}

#sidebar {
    position: absolute;
    background-color: #44d1da;
    height: 100%;
    width: 15%;
    opacity: 0.5;
    z-index: 2;
}



#main-image {
    height: 100%;
    width: 100%;
    background-color: #78bcc1;
}


#footer {
    text-align: center;
    width: 100%;
    background-color: #0a696f;
    font-size: 50px;

}

css 부분입니다.

HTML의 id 속성은 css에서 #을 사용하여 선택합니다. 

width값과 height값을 %로 주면서 브라우서 비율변화과 다양한 기기들의 뷰어들에 맞게 대응 할수 있겠끔 하고 싶었습니다. 

처음 시작할때 부터 %를 사용함으로서 나중에 있을 media부분에서의 복잡한 과정을 쉽게 하고 싶었습니다.

창 전체 부분을 꽉 채우기 위해서 main image의 width를 100%

sidebar같은 경우 오른쪽에서 15%정도의 크기를 차지 합니다. 

나중에는 오른쪽으로 밀려 나있다가 버튼 클릭시 나타나게끔 할 생각입니다. 

이때 전체 이미지의 비율에 영향을 주지 않기 위해서 

#container 에 position:relative 를 #sidebar에는 position:absolute를 이용하여서 각 div가 겹치게끔 하였습니다. 

이때 sidebar뒤로 main-image부분이 흐릿하게 보이도로 opacity값을 주었습니다. 

다음 포스팅에서는 sidebar에 들어갈 menu 부분을 만들어 보겠습니다.