화면구현/HTML

Position2

psys 2020. 6. 23. 11:24
728x90

** relative는 static기준으로 움직이기 **

1) 

<body>
    <div id="id_parent">
        <div id="id_child1"></div>
        <div id="id_child2"></div>
    </div>
</body>

2) 내부스타일

>> 전체 div값

    <style>
        #id_parent {
            position: relative;
            left: 30px;
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
    </style>

 

>> 전체 안에 있는 첫번째 div값

부모가 relative이면

자식 absolute는 부모 기준으로 움직인다.

    <style>
        #id_parent {
            position: relative;
            left: 30px;
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }

        #id_child1 {
            position: absolute;
            width: 150px;
            height: 150px;
            left: 0px;
            top: 0px;
            border: 1px dashed royalblue;
        }
    </style>
더보기

부모가 static이면 브라우저 왼쪽 모서리 기준으로 움직인다.

    <style>
        #id_parent {
            position: static;
            left: 30px;
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }

        #id_child1 {
            position: absolute;
            width: 150px;
            height: 150px;
            left: 0px;
            top: 0px;
            border: 1px dashed royalblue;
        }
    </style>

>> 두 번재 상자를 첫 번재 상자 옆에

    <style>
        #id_child2 {
            position: absolute;
            width: 150px;
            height: 150px;
            left: 150px;
            border: 2px dashed pink;
        }
    </style>

 

더보기

>> 대각선 밑에

    <style>
        #id_child2 {
            position: absolute;
            width: 150px;
            height: 150px;
            left: 150px;
            top: 150px;
            border: 2px dashed pink;
        }
    </style>

 

fixed

<head>
    <style>
        #id_menu{
            width: 100%;
            border: 2px solid red;
            color: yellow;
            background-color: black;
            font-size: 2em; /* 기본 사이즈의 2배 */
        }
    </style>
</head>
<body>
    <div id="id_menu">
        짜장면 짬뽕 우동 잡채밥 야끼짬뽕 쟁반짜장 간짜장
    </div>
</body>

1) 스크롤 바가 생길 정도로 글자 넣기

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #id_menu{
            width: 100%;
            border: 2px solid red;
            color: yellow;
            background-color: black;
            font-size: 2em; /* 기본 사이즈의 2배 */
        }
    </style>
</head>
<body>
    <div id="id_menu">
        짜장면 짬뽕 우동 잡채밥 야끼짬뽕 쟁반짜장 간짜장
    </div>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
    <p>야끼짬뽕 먹고싶다</p>
</body>
</html>

 

position fixed부여

스크롤을 내려도 fixed된 것은 고정

(글자 무시)

    <style>
        #id_menu{
            position: fixed;
            width: 100%;
            border: 2px solid red;
            color: yellow;
            background-color: black;
            font-size: 2em; /* 기본 사이즈의 2배 */
        }
    </style>

 

sticky

얘도 스크롤 내려도 그 자리에 있음

(글자 반영)

left와 top값이 반드시 있어야 움직이지 않음!!!!
left: 0px;
top: 0px;

    <style>
        #id_menu{
            position: sticky;
            width: 100%;
            left: 5px;
            top: 50px;
            border: 2px solid red;
            color: yellow;
            background-color: black;
            font-size: 2em; /* 기본 사이즈의 2배 */
        }
    </style>

 

하트 만들기

1) 틀 만들기

<body>
    <div class="heart">
        <div class="nemo"></div>
        <div class="nleft"></div>
        <div class="ntop"></div>
    </div>
</body>

 

2) 접근하기

    <style>
        .heart{
            position: relative;
            width: 150px;
            height: 150px;
            border: 1px solid black;
        }
    </style>

 

3) 꼬다리 만들기

    <style>
        .heart{
            position: relative;
            width: 150px;
            height: 150px;
            border: 1px solid black;
        }
        .nemo{
            position: absolute;
            width: 100px;
            height: 100px;
            top: 50px;
            left: 50px;
            background-color: salmon;
        }
    </style>

 

4) 윗 반쪽 하트 만들기

        .nleft {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: salmon;
            border-radius: 50px 50px;  /* 동그라미 */
        }

 

5) 윗 반쪽 하트 만들기2

        .nleft {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: salmon;
            border-radius: 50px 50px;  /* 동그라미 */
            top: 50px;
        }

 

6) 윗 나머지 하트 만들기

        .ntop {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: salmon;
            border-radius: 50px 50px;  /* 동그라미 */
        }

 

7) 윗 나머지 하트 만들기2

        .ntop {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: salmon;
            border-radius: 50px 50px;  /* 동그라미 */
            left: 50px;
        }

 

8) 돌리기

        .heart {
            position: relative;
            width: 150px;
            height: 150px;
            border: 1px solid black;
            transform: rotate(45deg);
        }

 

9) 테두리 없애기

        .heart {
            position: relative;
            width: 150px;
            height: 150px;
            transform: rotate(45deg);
        }

 

10) 버튼 만들기

<body>
    <input type="button" value="하트추가" onclick="f_add()">
    <div>
        <div class="heart">
            <div class="nemo"></div>
            <div class="nleft"></div>
            <div class="ntop"></div>
        </div>
    </div>
</body>

 

11) div에 아이디 주기

<body>
    <input type="button" value="하트추가" onclick="f_add()">
    <div id="container">
        <div class="heart">
            <div class="nemo"></div>
            <div class="nleft"></div>
            <div class="ntop"></div>
        </div>
    </div>
</body>

 

12) 변수

    <script>
        var v_container = document.getElementById("container");
        var v_heartStr = v_container.innerHTML;//하트 만든것 그대로 문자열
    </script>

 

13) 함수 구현

    <script>
        var v_container = document.getElementById("container");
        var v_heartStr = v_container.innerHTML;//하트 만든것 그대로 문자열
        function f_add(){
            v_container.innerHTML+=v_heartStr;
        }
    </script>

 

14) 버튼 클릭 해보기

15) 하트를 옆으로 생기게끔

div속성은 내 옆자리 못오게끔 block속성이야

따라서 block속성을 변경해줘

    <style>
        .heart {
            position: relative;
            display: inline-block;
            width: 150px;
            height: 150px;
            transform: rotate(45deg);
        }
    </style>

 

16) 하트 띄우기

마진주기!

margin: 상하마진px 좌우마진px;

    <style>
        .heart {
            position: relative;
            display: inline-block;
            width: 150px;
            height: 150px;
            margin: 15px 15px;
            transform: rotate(45deg);
        }
    </style>

17) 자동으로 하트 생성

setTimeout을 통해

    <script>
        var v_container = document.getElementById("container");
        var v_heartStr = v_container.innerHTML;//하트 만든것 그대로 문자열
        function f_add(){
            v_container.innerHTML+=v_heartStr;
            setTimeout(f_add,1000);
        }
    </script>

>> 자동으로 함수 불러주기

    <script>
        var v_container = document.getElementById("container");
        var v_heartStr = v_container.innerHTML;//하트 만든것 그대로 문자열
        function f_add(){
            v_container.innerHTML+=v_heartStr;
            setTimeout(f_add,1000);
        }
        f_add();
    </script>

18) 10개 만들어지면 지워지고 다시 생성

    <script>
        var v_container = document.getElementById("container");
        var v_heartStr = v_container.innerHTML;//하트 만든것 그대로 문자열
        var cnt=1; //현재 1개 있다는 것을 알려줌
        function f_add(){
            if(cnt==10){
                v_container.innerHTML=""; // 사라짐
                cnt=0;
            }
            v_container.innerHTML+=v_heartStr;
            setTimeout(f_add,1000);
            cnt++;
        }
        f_add();
    </script>

 

완성~

더보기 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .heart {
            position: relative;
            display: inline-block;
            width: 150px;
            height: 150px;
            margin: 15px 15px;
            /* border: 1px solid black; */
            transform: rotate(45deg);
        }

        .nemo {
            position: absolute;
            width: 100px;
            height: 100px;
            top: 50px;
            left: 50px;
            background-color: salmon;
        }

        .nleft {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: salmon;
            border-radius: 50px 50px;
            /* 동그라미 */
            top: 50px;
        }

        .ntop {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: salmon;
            border-radius: 50px 50px;
            /* 동그라미 */
            left: 50px;
        }
    </style>
</head>

<body>
    <input type="button" value="하트추가" onclick="f_add()">
    <div id="container">
        <div class="heart">
            <div class="nemo"></div>
            <div class="nleft"></div>
            <div class="ntop"></div>
        </div>
    </div>
    <script>
        var v_container = document.getElementById("container");
        var v_heartStr = v_container.innerHTML;//하트 만든것 그대로 문자열
        var cnt=1; //현재 1개 있다는 것을 알려줌
        function f_add(){
            if(cnt==10){
                v_container.innerHTML=""; // 사라짐
                cnt=0;
            }
            v_container.innerHTML+=v_heartStr;
            setTimeout(f_add,1000);
            cnt++;
        }
        f_add();
    </script>
</body>

</html>

'화면구현 > HTML' 카테고리의 다른 글

[JavaScript] Random  (0) 2020.06.24
오버플로우  (0) 2020.06.24
스타일 사용법(내부와 인라인과 배열)  (0) 2020.06.23
Position  (2) 2020.06.22
타이머  (0) 2020.06.22

'화면구현/HTML'의 다른글

  • 현재글Position2

관련글

댓글

티스토리툴바