CSS 복습(5일차)

(혼) (공) (web)

CSS 복습(5일차)

만석이 2024. 2. 16. 18:34

<h1>white space</h1>
<p>여백 처리 방법</p>

<style>
  .container{
    border: 1px solid;
    width: 150px;
  }

  .item{
    display: inline-block;
    width: 100px;
    background-color: #ddd;
  }

  .whitespce-normal{
    /*
      컨테이너가 아이템을 감싼다(wrap)

      wrap - 컨테이너의 넓이가 부족할 때
      아이템을 아래로 떨어트린다
    */

    white-space:normal ;
  }

  .whitespce-nowrap{
    /*
      컨테이너가 아이템을 감싸지않는다.
    */
    white-space:nowrap ;
  }
</style>

<h3>white space: normal</h3>

<div class="container whitespce-normal">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

<h3>white space: nowrap</h3>

<div class="container whitespce-nowrap">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

white-space는 여백을 처리하는 방식을 설정하는 속성이다.

옵션의 종류는 총 2가지가 있다.

whitespace-normar 과 whitespace-nowrap

.container 클래스를 만들어서 테두리를 만들어주었다.
테두리의 넓이는 150px

.item의 클래스를 만들어서 엘리먼트설정을 해주었다.
이는 inline요소와 block 요소를 둘다 갖게해준다.

inline 요소는 다른요소와 동일한 줄에 표시되며 컨텐츠의
크기만큼만 차지한다.

block요소는 새로운줄에서 시작하며 가능한 최대 가로 넓이
를 가진다.

여기서 주의해서 볼것이있다.
나는 inline요소를 주었기 때문에 컨텐츠가 다음줄이 아닌
같은줄에 나와야한다.

item item item 이런식으로...

하지만 줄바꿈이 일어난다. 그이유에 대해서 알아보자.

바로 white space: normal 옵션을 사용해서 그렇다.
normar옵션의 특징은 텍스트요소의 내용이 화면의 가로길이
를 넘어가면 자동으로 다음줄로 넘어간다.
그렇기때문에 줄넘김이 싫다면 nowrap를 사용해야한다.

white space: nowrap에 대해서 살펴보자
nowrap 옵션의 경우 무조건 텍스트는 줄바꿈 없이 수평으로
표시되며 border의 가로 길이를 넘어가더라도 쭉 이어서
텍스트가 표시된다.

<h1>position</h1>
<pre>
  아이템을 위치시키는 방법

  1 static
  2 relative
  3 avsolute
  4 fixed
</pre>

<h1>position: static</h1>
<p>
  엘리먼트가 움직이지 않는다(static)
</p>

<style>
  .item{
    display: inline-block;
    background-color: #ddd;
    padding: 0.5rem;
  }

  .static{
    position: static;
  }
</style>

<div class="item static">item</div>
<div class="item static">item</div>
<div class="item static">item</div>

position을 static으로 속성을 주면 자신의 원래 위치에서
고정되며 움직이지 않는다.

위치값으로 right 또는 top 등등의 속성값을 주어도
static으로 설정하면 움직이지 않는다.

<h1>position: relative</h1>
<p>
  엘리먼트가 자신의 원래 위치를 기준으로 위치한다.
</p>

<style>
  .item{
    background-color: #ddd;
    display: inline-block;
    padding: 0.5rem;
  }

  .relative{
    position: relative;
  }

  .top-2{
    /* 아래로 이동 */
    top: 0.5rem
  }

  .left-2{
    left: 0.5rem;
  }
</style>

<div class="item">item</div>
<div class="item relative top-2 left-2">item</div>
<div class="item">item</div> -->

다음으로 볼것은 relative이다.
relative는 자신의

.top-2클래스를 보자

top:0;5rem은 상단에서부터 0.5rem만큼 떨어지게 된다.
즉 옵션뒤에 붙은 숫자가 크면 클수록 멀리 떨어지게 되는것.

옆의 코드는 아래로 0.5rem 오른쪽으로 0.5rem 이동하는것이다.

<!-- <h1>position: absolute</h1>
<p>
  엘리먼트가 relative 부모를 기준으로 위치한다
</p>

<style>
  .container{
    border: 1px solid;
    width: 200px;
    height: 200px;
  }

  .item{
    background-color: #ddd;
    padding: 0.5rem;
  }

  .relative{
    position: relative;
  }

  .absolute{
    position: absolute;
  }

  .top-0{
    top: 0;
  }

  .left-0{
    left: 0;
  }

  .right-0{
    right: 0;
  }

  .bottom-0{
    bottom: 0;
  }
</style>

<div class="container relative">

  <div class="item absolute top-0 left-0">item1</div>

  <div class="item absolute top-0 right-0">item2</div>

  <div class="item absolute bottom-0 left-0">item3</div>

  <div class="item absolute bottom-0 right-0">item4</div>

</div>

relative와 absolute에 대해서 조금더 자세히 알아보자

relative는 상대적인 위치를 지정한다.
즉 relative를 container클래스에 적용시키고 그안에 넣을
item의 위치를 설정하려고 하면 item의 위치기준은 container가 되는것이다.

div에서 보면 item의 부모는 container이다. 그리고 container은
relative이다. 즉 item이 맨위쪽으로 갈거다 오른쪽으로 갈것이다. 해도 결국은 위치의 기준은 부모인 container이기 때문에
맨 오른쪽으로 이동한다고 해도 container의 맨오른쪽인것이다.

반면 absolute는 body를 기준으로 위치한다.
즉 부모클래스의 틀에 갇혀서 위치하는것이 아니라 어디로든
위치할수있는 속성이라는것이다.

즉 정리하자면 부모의 상대적인 위치로 위치조정하고싶다하면
부모클래스에 reative 써주고 그 자식클래스에게도 reative사용하면되고 반대로 나는 부모클래스 틀이 아닌 body 즉 어디서든
위치하고싶다 그러면 absolute를 자식클래스에 붙여주면된다.

즉 부모클래스에 reative를 달아주었다고 자식클래스도 무조건
reative가 적용되는것이 아니라는것이다.

아무것도 안써주면 자식은 static으로 적용되는것이다.

<h1>Q. Position</h1>

<style>

.container{
    border: 1px solid;
    width: 200px;
    height: 200px;
    position: relative;
  }

  .item{
    background-color: black;
    width: 100px;
    height: 100px;
  }

  .top-0{
    top: 0;
  }
  .bottom-0{
    bottom: 0;
  }

  .left-0{

    left: 0;
  }

  .right-0{
    position: absolute;
    right: 0;
  }

  .center {
    position:relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

</style>

<p>check</p>

<div class="container" >
  <div class="item top-0 left-0"> item</div>
  <div class="item bottom-0 right-0"> item</div>

</div>

<p>center</p>

<div class="container">
  <div class="item center">item</div>
</div>


</div>

1번

2번

앞서 배운것들을 활용해서 1번과 2번 박스를 만들어볼것이다.

먼저 container 클래스를 만들어서 큰 박스를 만들어주었다.

그리고 item 클래스를 만들어주었다. 이것은 안에 들어가는
검정색 박스를 만들어준것이다.

다음은 이 검정박스들의 위치를 지정해줄수있는 클래스를
만들어주었다.

top-0클래스는 top:0을 주었다. 이것은 위쪽에 위치하라는
속성이다. 다른것들도 마찬가지이다.

그리고 center클래스는 검정박스가 가운데로 위치시켜주기
위해서 만든것이다. 그리고 position 으로 reative속성을 주었다. 즉 container클래스를 상대위치로 지정하며 이동하겠다는것이다.

그리고 top과 left를 50%로 맞춰주고 나서
transform:translate를 사용해주었다 transorm과 top left을
같이 사용하는것이 일반적이며 정가운데를 위치시켜주기위해
사전작업이라고 생각하면된다.

<h1>Q. Position</h1>

<style>
  .item{
    background-color: black;
    width: 100px;
    height: 100px;
  }

  .container{
    border: 1px solid;
    width: 200px;
    height: 200px;
  }

  .relative{
    position: relative;
  }

  .absolute{
    position: absolute;
  }

  .top-0{
    top: 0;
  }
  .bottom-0{
    bottom: 0;
  }

  .left-0{

    left: 0;
  }

  .right-0{
    position: absolute;
    right: 0;
  }

  .left-100{
    left: 100px;
  }

  .top-100{
    top: 100px;
  }

  .left-60{
    left: 60px;
  }

  .top-430{
    top: 430px;
  }

</style>

<h3>check</h3>

<div class="container relative" >
  <div class="item relative top-0 left-0"> </div>
  <div class="item absolute top-100 left-100"> </div>
</div>

  <h3>center</h3>

<div class="container">
  <div class="item absolute top-430 left-60"></div>
</div>

결과는 같게 나오지만 과정을 달르게 해보았다.
reative와 absolute의 차이점을 명확하게 보기위해 만들었다.

4개의 클래스를 추가로 만들어주었다.
그리고 div를 보면 reative는 top-0 과 left-0을 주었더니
맨 위 맨 왼쪽으로 배치되었다.

다음은 absolute를 보면 무려 top을 430이나 주었다.
그리고 left도 60이나 주었는데 그 이유는

앞에서도 말했다시피 reative는 부모인 container이 시작위치인 반면 absolute는 body가 부모이기 때문에 웹페이지 맨위
에서 시작하게 된다.

<h1>transform</h1>
<p>엘리먼트를 변형시킨다.</p>

<style>
  .item{
    background-color: #ddd;
    width: 100px;
    height: 100px;
  }

  .transform-none{
    /* 기본값. 변형 없음 */
    transform: none;
  }

  .translate-4{
    /* translate(left,top)
       엘리먼트가 자신의 원래 위치를 기준으로 움직인다.
    */
    transform: translate(10px,10px);
  }

  .scale-110{
    /* scale(조정값)
      엘리먼트의 크기를 조정한다.
    */
    transform: scale(1,1);
  }

  .rotate-12{
    /*
      rotate(각도)
      엘리먼트를 회전시킨다.
      양수는 시계방향 음수는 반시계방향
    */
    transform: rotate(12deg);
  }
</style>

<h3>transform: none</h3>
<div class="item transform-none"></div>

<h3>transform: translate</h3>
<div class="item translate-4"></div>

<h3>transform: scale</h3>
<div class="item scale-110"></div>

<h3>transform: rotate</h3>
<div class="item rotate-12"></div>

transform속성은 엘리먼트를 변형시키는 역할을한다.

transform:none은 기본값으로 변형을 적용하지않고
엘리먼트의 원래 위치와 크기를 그대로 표시한다.

transform:translate는 x축과 u축으로 이동을 시켜준다.
옆의 코드에서는 10px 와 10px 를 적용해주었으니
x축으로 10px y축으로 10px 이동한것을 알수있다.

transform:scale은 엘리먼드의 크기를 조정하는것으로
옆의 코드는 1,1로 적용시켜주었는데 저러면 변함없는것이다.
만약 scal(1.5,1)을 적용해주면 x축은 1,5배 확대 y축은 그대로
인것이다.

다음은 transform:rorate 는 엘리먼트를 회전시켜주는 역할을한다. 양수와 음수에 따라 방향이다르며
양수는 시계방향 음수는 반시계 방향이다.

또한 숫자가 커질수록 방향도도 커진다.

Img 속성을 사용하면 이미지를 불러올수있다.

속성의 종류로는 3가지가 있다.

object-fit:fill

object-fit:cover

object-fit:contain

fill은 비율에 맞게 조정된다.

cover은 원본의 비율을 유지한다 때문에 이미지가 잘릴수있다.

contain은 원본 그대로 비율을 유지한다.

background-image:url(" ")
옵션을 사용해서 배경사진을 넣을수도있다.

옵션으로는

background-size:cover

background-position:center

등등 이있다.

cover을 옵션으로 주면 이미지가 컨테이너 공간을 채운다.
원본 비율을 유지하기 때문에 이미지가 잘릴수있다.

center을 옵션으로 주게 되면 이미지의 중심이 컨테이너에서
보이게된다.