HTML, CSS 관련 기본사항 4

*z-index

- position: absolute 시 겹쳐진 대상들 간의 우선순위를 정하는 것.

- z-index 값에 따라 겹쳐진 대상이 맨 위 ~ 맨 아래에 위치하게 된다. (숫자가 클 수록 위에 위치하게 된다.)

// HTML
<section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>


// CSS
section {
    margin-top:500px;
    width:200px;
    height:200px;
    border:10px solid red;
}

section > div {
    width:50%;
    height:25%;
    background-color:blue;
    position:absolute;
    /* 4등 : z-index 도 없고 맨 처음 등장한 유령이다. */
}

section > div:nth-child(1) {
    top:0;
    left:0;
}

section > div:nth-child(2) {
    background-color:gold;
    top:10%;
    left:10%;
    z-index:2; /* 경쟁자 중에서 2가 가장 큰 수 이기 때문에 맨 위(1등)에 위치한다. */
}

section > div:nth-child(3) {
    background-color:pink;    
    top:20%;
    left:20%;
    z-index:1; /* 경쟁자 중에서 2 다음으로 높은 수(1) 이기 때문에 2등이 된다. */
}

section > div:nth-child(4) {
    background-color:green;    
    top:30%;
    left:30%;
    /* z-index가 없으면 기본적으로 경쟁에서 밀린다. 그래서 3등이다. */
}

 

*white-space:nowrap;

- 절대 줄바꿈 금지 

// HTML
<div>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate veniam cum, corrupti praesentium sit, atque ad optio inventore omnis quod nostrum amet eveniet? Assumenda labore accusamus soluta adipisci, aliquam veniam?
</div>


// CSS
div {
    padding:10px;
    font-size:2rem;
    width:1000px;
    margin:0 auto;
    background-color:red;
    /* 절대 줄바꿈 금지 */
    white-space:nowrap;
}

 

*스크롤바

- overflow-x:auto : 스크롤 바 자동 생성

- overflow-x:scroll : 스크롤 바 무조건 생성

 

* 텍스트 관련

- overflow-x:hidden : 넘치는 내용 무조건 숨김

- text-overflow:ellipsis : 넘치는 텍스트 ... 으로 표시

-