레이아웃

display inline, block, inline-block

display라는 속성을 통해서 처음부터 정해진 태그의 요소 속성을 변경할 수 있음
inline 요소의 대표적인 예는 span 태그, 영역의 크기는 내부 콘텐츠 값에 따라서 정해짐, width, height로 크기를 지정 및 처리할 수 없음
그리고 margin, padding의 top & bottom을 정할 수 없음(좌우 여백만 가능), 마지막으론 여러 요소가 가로 배치가 되는 특징이 있음
block 요소의 대표적인 예는 div 태그, 영역의 크기를 width & height로 지정할 수 있고, 지정할 수 없다면 가로 길이는 해당 태그가 가질 수 있는 가로 전체를 차지함
padding & margin을 다 지정할 수 있고, 여러 요소가 세로 배치가 됨
inline-block의 경우, 대표적으로 input 태그임, inline-block은 가로 세로, margin & padding 지정이 가능함
그 대신 흐름대로 여러 요소가 가로 배치가 됨(이 말은, 웹 페이지의 크기에 따라서 가로 배치가 된다는 의미임)
그리고 이러한 요소를 display 속성을 통해서 요소의 속성을 변경할 수 있음(span이어도 block 요소가 될 수도 inline-block이 될 수도 있음)
그렇게 하면 바뀐 요소의 특징대로 값을 지정하고 처리할 수 있음

요소를 없애는 방법 display none, visibility hidden

display는 앞서 말한 요소 말고 none을 쓰면 요소를 없앨 수 있음, 그리고 visibility를 통해서도 가능함
display none의 경우 코드 상에서는 존재하지만 우리 눈에는 보이지 않게 처리함, 아예 요소를 레이아웃 자체에서 사라져버리게 만듬, 마치 존재하지 않은 것처럼 됨
여기서 visibility의 경우, 동일하게 눈에서 사라지는 안보이게 되지만, display none과 다르게 사라진 요소만큼의 크기를 여전히 차지함
즉, 자리를 차지하지만 눈에만 보이지 않는 형태로 쓰임(레이아웃에서 완전히 배제하느냐, 안하느냐의 차이가 있음)
대부분 클릭 시 보이거나 안 보이게 하는 경우 visibilty를 쓸 지, display를 쓸 지 잘 따져봐야함

float

float은 표현처럼 마치 요소를 둥둥 뜨게 만들 수 있음
요소가 있을 때 그게 아무리 block 요소더라도 왼쪽이든, 오른쪽이든 다른 요소들이 그 차지하는 가로를 비집고 들어와서 공간을 차지할 수 있음
현재는 flexbox가 등장하고 많이 사용하진 않지만, 확실한 목적이 있을 때 사용하기 용이함
float은 한 요소가 normal flow로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정함
normal flow로부터 빠져 즉, block 요소, Inline 요소의 특징 및 계산 방법을 무시하고 별도의 배치 효과를 준다는 의미임
아래 예시처럼 div 태그가 블럭 요소이므로 전체 가로를 차지하지만 float의 값대로 그 배치가 재조정 됨(영역 외의 공간을 float에서 지정한 방향으로 처리됨)
이때 아래의 p태그를 보면 박스모델로 되어 있기 때문에 아래 예시로는 꺾여서 보이지만 실제로 옆으로 보는 느낌으로 처리하면 p 태그라는 공간의 div 태그가 위에 떠 있는 느낌임.
말 그대로 float의 의미로
위치에 따라 갈 수 있는 최대치까지 나아가는 것
예시

    <div class="image"></div>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus hic
      cupiditate cum laudantium fuga provident eaque aspernatur obcaecati quae
      iure magnam inventore, eos distinctio, ex exercitationem, repudiandae sint
      consequatur ipsum!
    </p>

.image {
    width: 100px;
    height: 100px;

    background-color: hotpink;
    border: 5px solid blue;

    float: left;
}

아래와 같이 container가 감싸져 있다면 딱 container로 감싼 영역 내에서의 float이 적용됨
예시

    <div class="container">
      <div class="image"></div>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus hic
        cupiditate cum laudantium fuga provident eaque aspernatur obcaecati quae
        iure magnam inventore, eos distinctio, ex exercitationem, repudiandae sint
        consequatur ipsum!
      </p>
    </div>

.container {
    border: solid;
    width: 300px;
}
.image {
    width: 100px;
    height: 100px;

    background-color: hotpink;
    border: 5px solid blue;

    float: left;
}

참고자료

position과 Normal Flow

display와 float으로 원하는 배치 환경을 자유롭게 바꾸는걸 배웠는데, position을 변경해서 요소가 내가 원하는 위치에 가게끔 변경할 수 있음
우선 position을 이야기 하기 앞서 normal flow라는 개념을 확실히 짚고 넘어가야함
요소의 레이아웃 position, float으로 변경하지 않는다면 normal flow로 즉, block은 block대로 세로 배치가 되고 inline은 inline대로 가로 배치가 쭉 되는 개념
그 상태를 기본으로 position을 변경해야함, 기본값은 static임, 기본적인 자리 배치를 하는 것임(요소의 특징에 맞게)
참고자료

position relative

normal flow에 따라서 배치하되, 자기 자신을 기준으로 top, bottom, left, right로 이동함
이 떄 top, bottom, left, right의 속성은 static일 떄 쓸 수 없음
relative일 때 이 속성을 쓸 수 있음. 여기서 자기 자신은 static일 떄의 위치를 기준으로 top, bottom, left, right 등 준 값을 토대로 position이 움직이는 것임
이 때 position은 음수값으로도 줄 수 있음
여기서 주의사항은 top, bottom의 값을 동시에 줄 때 bottom 값은 무시가 됨, left, right도 마찬가지로 left 값이 생김
즉, 반대가 되는 값을 쓰게 되면 top, left가 우선시 되는 것임
예시

    <div></div>
    <div id="box"></div>
    <div></div>

div {
    width: 200px;
    height: 200px;
    border: 5px solid orangered;
    margin-left: 150px;
}

#box {
    background-color: peachpuff;

    position: relative;
    top: 50px;
    left: -80px;
}

position absolute

absolute의 경우 normal flow를 제거함, 이는 relative와는 다른데, relative의 경우, 이에 대해서 static을 기준으로 배치하는데 absolute는 아님
normal flow에 해당하지 않고 본인만의 위치로 배치함 이는 해당 요소의 고유한 flow를 무시하는 의미로 마치 float처럼 붕 뜬 느낌으로 해당 요소만 뜨게됨
top, bottom, left, right도 적용이 가능함, 하지만 여기서 이동하는 기준은 가장 가까운 조상 요소를 기준으로 하는데, 만약 그러한 기준이 없다면 body 기준으로 함(아래 예시처럼)
예시

  <body>
    <div></div>
    <div id="box"></div>
    <div></div>
  </body>

div {
    width: 200px;
    height: 200px;
    border: 5px solid orangered;
}

#box {
    width: 150px;
    height: 100px;
    border-color: darkblue;
    background-color: cornflowerblue;
    border-radius: 30px;

    position: absolute;

    top: 100px;
}

즉, position이 absolute인 요소는 조상 중에서 position이 static이 아닌 요소를 찾아 기준점을 삼음(부모 요소를 타고 올라가면서, position:static이 아닌 요소를 기준점으로)
그래서 아래 예시를 보면 parent의 position이 static이 아니므로 그 parent를 기준으로 위치를 조정함
예시

    <div></div>
    <div id="parent">
      <div id="box"></div>
    </div>
    <div></div>

div {
    width: 200px;
    height: 200px;
    border: 5px solid orangered;
}

#parent {
    position: relative;
}

#box {
    width: 150px;
    height: 100px;
    border-color: darkblue;
    background-color: cornflowerblue;
    border-radius: 30px;

    position: absolute;

    top: 100px;
}

position이 absolute인 경우 기준점을 삼고 싶은 부모의 relative를 줘서 위치를 조정해서 쓰는 경우가 많음(그런게 없다면 결국 body까지 감)
이 때 relative가 아니고 absolute여도 상관없음, static만 아니면 됨

position fixed

absolute랑 동작하는 바가 비슷함, normal flow가 제거되어 붕 뜨는 느낌으로 처리됨
하지만 기준점이 정해져 있음, 화면에 보여지는 뷰포트를 기준으로 삼아서 배치함
그리고 absolute의 경우 부모가 움직이면 스크롤을 해도 absolute의 설정된 요소가 같이 움직임
하지만 fixed의 경우 아무리 부모 요소가 있어도 뷰포트 기준으로 위치를 고정하기 때문에 부모 요소가 static이어도 아무리 많아도 스크롤해도 위치가 변하지 않음(브라우저의 사이즈를 변경하지 않는 이상)
주로 아래 예시처럼 floating button의 경우 많이 씀(혹은 항상 보이는 네비게이션 바 등)
예시

  <body>
    <div></div>
    <div id="parent">
      <div id="box"></div>
    </div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </body>

div {
    width: 200px;
    height: 200px;
    border: 5px solid orangered;
}

#parent {
    position: relative;
}

#box {
    width: 150px;
    height: 100px;
    border-color: darkblue;
    background-color: cornflowerblue;
    border-radius: 30px;

    position: fixed;
    bottom: 40px;
    right: 40px;
}

position sticky

normal flow로 배치하되, 스크롤을 하게 된다면 가장 가까운 스크롤이 되는 조상을 기준 삼아서 처리함
어느 시점에 스티커처럼 top, left 등 주어진 값을 기준으로 위치가 고정되는 것
아래 예시를 기준으로 본다면, parent가 있기 전까진 가만히 있다가 내리는 순간 top & left 기준으로 100px이 고정되어서 쭉 따라감
이는 마치 블로그에서 어느 소제목을 봤다가 딱 걸려서 쌓여서 쭉 내려가는 동작임
예시

    <div></div>
    <div id="parent">
      <div id="box"></div>
    </div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

div {
    width: 200px;
    height: 200px;
    border: 5px solid orangered;
}

#parent {
    position: sticky;
    top: 100px;
    left: 100px;
}

#box {
    width: 150px;
    height: 100px;
    border-color: darkblue;
    background-color: cornflowerblue;
    border-radius: 30px;
}

이 특징은 body가 스크롤이 되고 있는 대상인데, 아래와 같이 되면 box는 스크롤 되는 조상은 parent가 아니라 body기 때문에 sticky가 정상적으로 작용하지 않음
그래서 sticky 스크롤 되는 조상의 하위에다가 넣어야 동작을 함
예시

div {
    width: 200px;
    height: 200px;
    border: 5px solid orangered;
}

#parent {
}

#box {
    width: 150px;
    height: 100px;
    border-color: darkblue;
    background-color: cornflowerblue;
    border-radius: 30px;

    position: sticky;
    top: 100px;
    left: 100px;
}

참고자료

overflow

overflow 속성은 container의 width, height가 지정되어 있을 떄 그 넘쳐흐른 내용을 어떻게 처리할 지 지정하는 속성임
그리고 단축 속성이므로 2가지 속성을 한 줄로 쓸 수 있는 속성임
한 가지만 작성하면, x-y가 동시에 적용됨
visible로 하면 넘쳐 흐르는게 보이고 hidden은 안 보이고 scroll을 하면 넘치는 내용이 스크롤 하면서 볼 수 있게 바뀜(드래그 포함)
auto의 경우, 브라우저가 자동으로 값을 선택해줌
이 넘치는 영역을 처리하는게 중요한 게 만약 다른 태그들을 쓸 경우, 이 넘치는 영역과 겹쳐서 보이기 때문에 이상하게 보여짐(블록요소의 width, height를 지정했기 떄문에)
예시

    <div>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores, magni! Voluptatum possimus vero non a debitis voluptatibus esse, dolorem eveniet dolores dicta est labore officia nulla eaque fugiat voluptas ad.
      <br>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum dolorem, corporis nam doloremque natus fugiat rerum nulla, ut sunt libero quae, reiciendis porro explicabo vel ratione laboriosam tempora qui sit.
    </div>

    <h1>안녕하세요!</h1>
    <h1>안녕하세요!</h1>
    <h1>안녕하세요!</h1>

div {
    background-color: bisque;

    width: 200px;
    height: 225px;

    overflow: scroll;
}

UI를 해치는 요소를 일부 막을 수 있음
참고자료

z-index

우리가 눈에 보이는 것은 x,y 축이지만 여기서 z축을 하나 더 추가해서 보는 것임
이 z축은 여러가지 요소가 있는데, 앞 쪽에 있는 요소가 뒤 쪽에 있는 요소를 가리는 형태로 보여지게 적용되는 축임
즉 요소들끼리의 쌓임 순서가 정해져 있다는 것을 의미함
기본값이 auto이고 아니면 양의 정수, 음의 정수, 0 3개 다 사용할 수 있음
별도로 지정하지 않으면 기본적인 쌓임 순서로 적용됨, 기본은 코드 순서대로 쌓이지만 만약 position static이 아닌 경우 앞에 있게 됨
z-index로 제어하지 않아도 position을 통해서 그 쌓임 순서를 조정할 수도 있음
만약 그런데 둘 다 static이 아닌 경우, 코드 순서가 뒤에 있는 것이 위로 뜨게됨
그럴 때 z-index로 조정할 수 있음, z-index를 큰 값으로 가지고 있으면 위로 뜸(기본 auto일 떄는 0으로 보면 됨, 1만 줘도 위로 올라감)
아니면 뒤로 보낼 요소를 마이너스 값을 줘도 됨
여러개에 대해서 z-index 값을 서로 조정하면 됨
그리고 무조건 최상위로 올라와야 하는 요소를 z-index를 가장 큰 값을 줘서 가장 위에 뜨게 할 수 있음
예시

    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>

div {
    width: 150px;
    height: 150px;
    background-color: blanchedalmond;
    border: 3px solid orangered;
}

#box2, #box3 {
    margin-top: -30px;
}

#box2 {
    margin-left: 40px;

    position: relative;
    z-index: 1;
}

#box3 {
    position: relative;
    z-index: 0;
}

gang_shik

측정할 수 없으면 관리할 수 없고, 관리할 수 없으면 개선시킬 수도 없다

레이아웃

display inline, block, inline-block

요소를 없애는 방법 display none, visibility hidden

float

position과 Normal Flow

position relative

position absolute

position fixed

position sticky

overflow

z-index

박스 모델

색상과 배경

0개의 댓글

관련 채용 정보