본문 바로가기
웹/CSS

[코딩 공부_54] z-index 우선 순위 지정하기

by BEE_0o0 2021. 4. 18.

주말에 열심히 페이지를 만들겠다는 나의 계획은 호로록 사라졌다 ㅎㅎ 😂

자격증 공부하느라 바빠서 자꾸 소홀해지는 듯한 느낌이 든다,,

자격증 공부를 얼른얼른 끝내면 좋겠지만 한번 할때 너무 오래걸려서 페이지 만들기를 못했다 핑계같지만 우울하다,, 😥

이제 다시 본론으로 이야기하겠다!

금요일에 배웠던 z-index에 대해 알아보도록 하자!

1. z-index

- z-index를 이용하면 우선 순위를 정할 수 있다(어떤 콘텐츠를 앞에 두고 뒤에 둘지 선정할 수 있다는 것!)

- 부모가 다른 자식 요소는 순서를 바꿀 수 없다 

* z-index가 설정된 경우, position이 설정되면 부모는 높이값을 잃는다!

 

<실습1>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>z-index</title>
<style>
    /* 
        1. 오른쪽이나 뒤에 써진 ele가 우선순위가 높다!
        2. inline-block이 block보다 우선순위가 높다
     */
    .box1 {
        position: absolute;
        /* re/ab/fix */
        width: 200px;
        height: 200px;
        background: gold;
        position: absolute;
        left: 100px;
        /* 
            z-index는 z값 기준으로 순위를 매길 수 있음(앞에 있고 싶은지 뒤에 있고 싶은지) 
            1. 숫자 큰 녀석이 앞으로 온다
            2. 음수 값이 가능하다
            3. 0이 기본이다(하지만 default: auto)
            4. 범위 -9999 ~ 9999 가능 혹은 더 크게도 됨
        */
        z-index: 1;
            
        }
    .ball1 {
        /* 
            position이 absolute가 꼭 있어야 z-index가 적용된다 
            수정) position : relative;도 포함 
        */
        position: absolute;
        right: 0;
        top: 50px;
        /* left: 250px; */
        z-index: 2;
        width: 100px;
        height: 100px;
        background: skyblue;
        /* border-radius: 50%; */
    }
    .box2 {
        width: 200px;
        height: 200px;
        position: absolute;
        left: 200px;
        top: 100px;
        background: crimson;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="box1">
            <div class="ball1"></div>
        </div>
        <div class="box2">
            <div class="ball2"></div>
        </div>
    </div>
</body>
</html>

- z-index는 0이 기본이지만 auto가 default이며, z-index의 숫자가 높으면 높을수록 위로 덮어진다 

(일반적으로 우선순위라는 이야기를 들으면 1위 2위처럼 1을 가진 친구가 제일 위에 있을 것 같지만 아니다!! 나는 순위라 생각하지않고 무게라고 생각하니까 덜 헷갈리는 거 같다

무게가 더 나가는 애가 앞장 서는 게 z-index라 생각하고 있다 !!) 

- z-index는 position: absolute; or position: relative; 로 지정되어야만 적용이 가능하기 때문에 헷갈리지 않고 사용해야한다! 

 

 

<실습2>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>gradient crad</title>
<style>
    body {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    * {
        box-sizing: border-box;
    }
    /* 영역을 잡고 */
    .card {
        position: relative;
        top: 200px;
        margin: 0 auto;
        width: 400px;
        height: 500px;
        /* border: 1px solid #000; */
        transition: 1s;
    }
    .card:hover {
        transform: translateY(-30px);
    }

    /* blure */
    .card:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, crimson, gold);
        filter: blur(30px);
    }
    /* none blure */
    .card:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, crimson, gold);
    }
    /* gray opacity */
    .card span {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        background: rgba(0,0,0,0.281);
        z-index: 1;
    }

    .card .desc {
        height: 100%;
        color: #fff;
        padding: 2rem 1rem;
    }
    .card .desc p {
        margin-bottom: 20px;
    }
    .card .desc a {
        text-decoration: none;
        font-weight: bold;
        border: 1px solid #000;
        border-radius: 20px;
        padding: 10px;
    }
    /* left gray opacity */
    .card span:before {
        content: '';
        position: absolute;
        width: 50%;
        height: 100%;
        background: rgba(200, 195, 195, 0.589);
    }
</style>
</head>
<body>
    <div class="card">
        <span>
            <div class="desc">
                <h1>tilte</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga tempore dolor vero unde, accusamus alias pariatur, aspernatur minus tempora hic dolores molestiae sequi deserunt quasi totam ut deleniti illo! Delectus.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga tempore dolor vero unde, accusamus alias pariatur, aspernatur minus tempora hic dolores molestiae sequi deserunt quasi totam ut deleniti illo! Delectus.</p>
                <a href="#">button</a>
            </div>
        </span>
    </div>
</body>
</html>

 

<실습3>

 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>full screen-intro page</title>
<style>
    * {
        margin: 0;
    }
    html, body {
        height: 100%;
    }
    body {
        background: url(./image/dog-5987025_1920.jpg) no-repeat center/cover;
    }
    body::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        color: #fff;
        background: rgba(0, 0, 0, 0.431);
        width: 100%;
        height: 100%;
    }
    .search {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%, -50%);
        color: #fff;
    }
    .search h1 {
        margin-bottom: 20px;
    }
    .search input[type="text"] {
        width: 250px;
        height: 50px;
        /* background: blue; */
        outline: none;
        border: none;
        border-radius: 30px 0 0 30px;
        margin-right: -6px;
        padding-left: 1.5rem;
    }
    /* 
    placeholder에 padding-left를 주는 것도 좋지만
    input="text"에 padding을 주면 입력값을 넣었을 때도 
    똑같이 padding 값이 들어가진다
     */
    .search input[type="button"] {
        background: rgba(255, 217, 0, 0.612);
        color: #fff;
        width: 90px;
        height: 52px;
        outline: none;
        border: none;
        border-radius: 0 30px 30px 0;

    }
</style>
</head>
<body>
    <form action="post" class="search">
        <h1>where you wnat to go?</h1>
        <input type="text" name="" id="" placeholder="search k.eyword here...">
        <input type="button" value="search">
    </form>
</body>
</html>

 

z-index와는 관계 없는 내용))

- html, body에 height 100%를 주지 않으면 이미지가 꽉차지 않는다

(h값을 잡아주지 않으면 content까지만 영역이 잡혀서 이미지가 적용되기 때문)

- placeholder에 padding-left를 주면 placeholder에만 padding-left가 먹어서 나중에 입력값을 넣었을때는 padding-left가 0이기 때문에 입력된 상태에선 왼쪽에 딱 붙는다! 그렇기 때문에 input="text", 즉 한꺼번에 padding 값을 주면 그런 현상이 없다는 것!!

(palceholder부분에만 설정하고 싶다면 input[type="text"]:placeholder {}를 주면 된다!!)

 

<실습4>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<title>fixed header</title>
<style>
    html {
        scroll-behavior: smooth;
    }
    * {
        margin: 0;
        box-sizing: border-box;
    }
    a {
        color: inherit;
        display: inline-block;
        text-decoration: none;
    }
    .wrap {
        /* width: 1100px; */
        /* border: 1px solid #000; */
        margin: 0 auto;
    }
    header {
        top: 0;
        left: 0;
        background: #222;
        width: 100%;
        height: 100px;
        color: #999;
        text-align: center;
        /* ib, b, inl */
        position: fixed;
    }
    header h1 {
        line-height: 100px;
        /* line-height: 100px; */
    }
    section {
        height: 50vh;
        background: royalblue;
        color: #fff;
    }
    section:nth-child(2) {
        margin-top: 100px;
    }
    .btn-top {
        position: fixed;
        right: 20px;
        bottom: 20px;
        border: 1px solid #fff;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        line-height: 50px;
        font-weight: bold;
        color: #333;
        text-align: center;
    }
    .btn-top a {
        color: #fff;
    }
</style>
</head>
<body>
    <div class="wrap">
        <header>
            <h1>title</h1>
        </header>
        <section>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis molestiae cumque provident ab impedit ullam corrupti neque quod sit? Veniam dolore sequi nesciunt numquam rerum unde ut ipsa eum omnis?
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis molestiae cumque provident ab impedit ullam corrupti neque quod sit? Veniam dolore sequi nesciunt numquam rerum unde ut ipsa eum omnis?
        
        </section>
        <section>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis molestiae cumque provident ab impedit ullam corrupti neque quod sit? Veniam dolore sequi nesciunt numquam rerum unde ut ipsa eum omnis?
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis molestiae cumque provident ab impedit ullam corrupti neque quod sit? Veniam dolore sequi nesciunt numquam rerum unde ut ipsa eum omnis?

        </section>
        <section>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis molestiae cumque provident ab impedit ullam corrupti neque quod sit? Veniam dolore sequi nesciunt numquam rerum unde ut ipsa eum omnis?
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis molestiae cumque provident ab impedit ullam corrupti neque quod sit? Veniam dolore sequi nesciunt numquam rerum unde ut ipsa eum omnis?

        </section>
        <div class="btn-top">
            <a href="#">
                top
            </a>
        </div>
        <footer></footer>
    </div>
</body>
</html>

fixed를 이용하여 화면 상단으로 올려주는 버튼을 만들었다 정말 많이 사용하는 부분으로 중요하다고 생각한다!! 

scroll을 smooth로 해주면 좀더 부드러운 페이지가 될 수 있다!! 누르면 부드럽게 넘어가는 걸 느낄 수 있다

 

개념은 어느정도 잡혔지만 정확히 어떨때 이걸 쓰고 이렇게 하면 위로 올라가고 뒤로 가고 하는 부분이 머릿속에 딱 잡히진 않았다 😥 실습을 좀더 해보면 내 머리에 딱 잡히겠지만 그럴려면 좀더 많이 해봐야할 거 같다 !! 

html할 땐 html이 세상 어렵게 느껴졌는데 지금은 css가 참 복잡스럽다 헤헤 

근데 복잡스러운만큼 결과물이 완성됬을때 뿌듯하고 계속 하고 싶은마음이 드는 거같다

저작자표시 비영리 변경금지

'웹 > CSS' 카테고리의 다른 글

[코딩 공부_56] position 실습하기 2  (0) 2021.04.20
[코딩 공부_55] position 실습하기  (0) 2021.04.20
[코딩 공부_53] (**중요) position 속성에 대하여  (0) 2021.04.15
[코딩 공부_52] animation-project 실습-2  (0) 2021.04.14
[코딩 공부_51] animation-project 실습-1  (0) 2021.04.14

관련글

댓글

티스토리툴바