New 병아리 개발자

*HTML, CSS 내용이 크기를 벗어났을 때(넘쳤을 때) 방법

- overflow : auto / scroll / hidden / visible / initial / inherit 등을 이용하여 처리 가능하다.

1. auto

- 박스를 넘어가지 않으면 스크롤 바가 생성되지 않고, 박스를 넘어가면 스크롤 바가 생성된다.

2. scroll

- 박스를 넘어가는 것과 관계없이 스크롤 바가 나온다.

3. hidden

- 박스를 넘어간 부분은 보이지 않는다.

4. visible

- 박스를 넘어가도 보여준다.

5. initial

- 기본값으로 설정한다.

6. inherit

- 부모 요소의 속성값을 상속받는다.

*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 : 넘치는 텍스트 ... 으로 표시

-