HTML / CSS - 10 (2021.03.16)

0316.css

0.01MB

0316.html

0.01MB

 

주석으로 html/css 영역 구분 잘 하기 

 

div남발 하지 말 것. div로만 계속 하면 가독성이 떨어짐. 

---

[테이블] 

<div id="main_top_header">
                <table id="top_table">
                    <tr>
                        <td id="td1">‘게임 콘텐츠 제작’ 취업률 1위!</td>
                        <td id="td2">취업현황- <img src="./image/new_gif.gif"> [어디] [누구] 합격을 축하합니다.</td>
                        <td id="td3">정규 개강일 - 4월 5일 월요일</td>
                    </tr>
                </table>
            </div>

<table> 테이블을 만드는 태그 

<tr> 행을 만드는 태그 

<td> 열을 만드는 태그 

---

[z-index:숫자] : layer 설정

 

예)

visualBar(50px짜리 검은색 가로선)가 [오시는 길] 위를 덮어서 거슬렸다.  

나는 오시는길이 포함되어 있는 퀵메뉴를 검은선 위에 올리고 싶었다. 

이럴 때 z-index:숫자를 써주면 되는데,  더 위쪽에 나타내고 싶은 객체에 더 높은 수를 주면 된다. 

position속성도 할당해야한다.  퀵메뉴는 위치에 고정시키려고 position:fixed를 줬고  비주얼바는 position:relative를 줬다. 

 

퀵메뉴는 z-index:5    //비주얼바는  z-index:2를 줬다. 

#quick_menu{ 
    position:fixed;
    z-index: 5; 
    top:0; 
    right: 0; 
    width: 85px;
    height: 100%;
    border-left: 1px solid #d9d9d9;
    background: white;
}

/* 비주얼 바  */

#visualBar_section{
    width: 100%;
    background-color: rgba(0, 1, 1, 0.5);
    height: 50px;
    z-index: 2; 
    position:relative;
    bottom: 50px;
    margin-bottom: -50px;  

    /* position: absolute;
    top:600px; */
} 

 

이렇게 z-index 속성을 주면 비주얼바가 퀵메뉴 아래로 내려간다.