'Dev-log/CSS' 카테고리의 글 목록

Dev-log/CSS

CSS 레이아웃2(flex, grid) 2024.04.10
CSS 요소 변화(transform, transition, 애니메이션) 2024.04.10
CSS 레이아웃 2024.04.09
CSS Box Model 2024.04.08
CSS 상속&속성 2024.04.07
CSS 기초 & 선택자 2024.04.07 1

CSS 레이아웃2(flex, grid)

Jerry95 2024. 4. 10. 21:23

2024. 4. 10. 21:23

1. flex

1차원의 개념

1-1) flex가 없을 때 요소를 가로로 배치하는 방법

<style>
    .container{
        border: 5px dashed orange;
    }
    .item{
        width: 50px;
        height: 50px;
        baackground-color: skyblue;
        border: 3px solid blue;

        /* display:inline-block; */
        float: left;
    }
</style>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>

ㄱ) inline-block

item들의 display를 inline-block으로 만들어주기.
- 문제 발생 : margin이 존재하지 않지만 요소와 요소 사이에 여백존재
- 하나의 요소와 다른 요소 사이에 개행이나 spacing이 존재하면, 여백 발생
- div 태그들을 붙여서 작성하면 문제는 해결 → 옳지 않음

ㄴ) float

item들의 float 속성에 left 값 주기
- 문제발생 : float 속성 사용시 요소들이 왼쪽에 부유하게 됨(2층에 존재 → 1층이 비어있음)
- float 속성을 가진 태그들을 감싸고 있던 container가 요소들을 잃으면서 쪼그라들게 처리됨

1-2) flex의 구성

<style>
    .container{
        border: 5px dashed orange;

        display: flex;
    }
    .item{
        width: 50px;
        height: 50px;
        baackground-color: skyblue;
        border: 3px solid blue;


    }
</style>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>

display의 값을 flex로 주면 가로 또는 세로로 요소를 정렬할 수 있음

ㄱ) flex-container

부모 개념

ㄴ) flex-item

자식 개념
flex-container과 flex-item이 사용할 수 있는 속성이 달라짐

ㄷ) main axis

메인 축 : 가로축

ㄹ) cross axis

교차축 (메인 축과 수직을 이루는 축) : 세로축

1-3) flex-container

ㄱ) display

바깥쪽: block, inline
안쪽 : flex, gridㄴ) container에서 사용할 수 있는 속성
ㄴ) flex-direction : 주축과 방향을 결정
- row : 기본값으로 주축은 가로(왼쪽에서 오른쪽)
- row-reverse : 주축은 가로지만 방향이 오른쪽에서 왼쪽
- column : 주축이 세로방향으로 변경됨(위에서 아래)
- column-reverse : 주축은 세로지만 방향이 아래에서 위
  ㄷ) flex-wrap
- 기본값 : 컨테이너의 width, height에 맞춰 강제로 한줄에 배치되는 것
  - container의 width이 맞춰 각 요소들의 width가 줄어들게 됨
- wrap : 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현할 것인지 결정하는 속성

1-4) flex-item

ㄱ) order

현재 요소의 배치 순서를 지정하는 속성

<style>
    .container{
        display: flex;
    }

    ...

    .item.nth-child(3) {
        order: -1
    }
    .item.nth-child(1) {
        order: 1
    }
</style>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
<body>

기본값은 0으로 코드 순서대로 배치됨
가장 작은 값(음수)를 요소의 속성으로 부여하게 되면 순서가 가장 앞으로 배치
기본값이 0이기 때문에 0보다 큰 수를 입력하면 순서가 가장 뒤로 배치됨

ㄴ) flex-grow, flex-shrink, flex-basis

flex-grow
- 기본값은 0(0으로 동일하기 때문에 나누어 가지지 않음)
- flex item들의 요소가 container보다 작을 때 사용
- 할당할 공간이 남아있고 형제 요소(item)들이 동일한 flex-glow값을 갖는다면 남는 부분을 동일하게 나눠가짐
flex-shrink
- 기본값은 1(1로 동일)
- flex-item들의 요소가 container보다 클 때 사용
- container보다 item 요소가 크다면, 자동으로 container에 맞춰서 item들이 줄어들게 됨
flex-basis
- flex-item의 초기 크기를 지정(grow, shrink되지 않았을 때의 기본 영역)
- flex-item의 크기를 width로 지정하지 않으면 차지하고 있는 컨텐츠의 영역만큼의 크기를 가짐
  - flex-item들에게 flex-grow의 값을 1로주면, 늘어나는 크기가 생각과는 다름
  - 요소의 크기만큼 basis를 가짐
  - 각각의 item들이 가진 사이즈만큼 늘어나는것이 아니라, flex-grow의 값을 3등분하여 나눠줌
- flex-basis에 100px의 값을 주면 각각 100px만큼의 basis(너비)를 가짐
  - 이 상태에서 flex-grow의 값을 1로주면, 동일한 basis를 가지고, basis를 제외한 나머지 영역을 1:1:1로 나누어 할당 받음
- flex-basis를 0으로 주기
  - 초기 item 영역이 0인 상태에서 flex-grow 값을 1로주면,basis가 0이기 때문에 item들이 각각 1:1:1의 너비를 가짐
```
<style> 
      .container{ 
      width: 200px; 
      border: 5px solid orange; 
      display: flex; 
      } 

      .item{ 
      heigth: 50px; 
      margin: 5px; 
      background-color: skyblue; 
      border: 3px solid blue; 
      /* flex-grow: 1 */ 
      / *flex-basis: 100px; */ 
      flex-basis: 100px: 0; } 
</style> 
<body> 
    <div class="container"> 
          <div class="item">푸바오</div> 
          <div class="item">!</div> 
          <div class="item">!</div> 
    </div> 
<body>
```

1-5) flex property

ㄱ) justify-content : 메인축

flex-item들을 한줄 안에서어떻게 배치할건지 결정

flex-start : 주축이 시작되는 위치부터 정렬
flex-end : 주축이 끝나는 위치부터 정렬
center: 주축을 기준으로 가운데부터 정렬
space-between : 동일한 간격으로 시작과 끝은 여백 없이 정렬
space-around : 시작과 끝의 여백 포함해 동일한 간격으로 정렬

ㄴ) align-items : 교차축 중 item이 1줄일 때 사용

전체 컨테이너의 입장에서 한줄 자체를 어디에 위치시킬건지 결정

align-items를 사용했는데 flex-wrap으로 2줄 이상으로 배치하는 경우, align-items는 임의로 전체 컨테이너를 한줄 한줄 나눠서 배치 → flex-end 값을 주었을때 이미지 처럼 한줄한줄을 끝에 배치

flex-start : 교차축의 시작에 배치
flex-end : 교차축의 끝에 배치
strech : 전체를 차지하도록 배치
center: 가운데에 배치

ㄷ) align-content : 교차축 중 item이 2줄일 때 사용

flex-start : 교차축의 시작 부분에 배치
flex-end : 교차축의 끝 부분에 배치
center: 교차축의 가운데 부분에 배치
space-between : 가운데에 동일한 간격으로 배치(시작과 끝에는 여백 미포함
space-around : 가운데에 동일한 간격으로 배치(시작과 끝에도 여백 포함)ㄹ) align-self : items을 정렬할 때 사용
하나의 item에 지정할 수 있음

2. grid

2차원의 개념으로 행과 열, gap으로 레이아웃을 구성

2-1) container

<style>
    .container{
        border: 5px solid orange;

        display: grid;
        /* grid-template-columns : 1fr 1fr 1fr; */
        grid-template-columns: repeat(5, 1fr)
        grid-template-rows: repeat(3, 1fr)
        grid-template-areas: 
            "hd hd hd hd"
            "ma ma . sb sb"
            "ft ft ft ft ft";
    }
    .item {
        background-color: skyblue;
        border: 3px solid blue;
        font-size: 30px;
    }
    .header{
        grid-area: hd
    }
    .main{
      grid-area: ma
    }
    .sidebar{
      grid-area: sd
    }
    .footer{
      grid-area: ft
    }
</style>
<body>
    <div class="container">
        <div class="item header">1</div>
        <div class="item main">2</div>
        <div class="item sidebar">3</div>
        <div class="item footer">4</div>
    </div>
<body>

ㄱ) grid-template-rows, grid-template-columns(명시적)

몇개의 행을 가지고, 몇개의 열을 가지는지 정함

fr : 컨테이너의 크기에 맞춰 비율을 주는 것
grid-template-columns / grid-template-rows : px, fr등으로 각각의 열과 행의 너비를 정해줌
ㄴ) grid-template-areas
item들이 차지 하는 영역을 설정하되 반드시 네모 영역으로 설정해줘야 함
ㄷ) row-gap, column-gap
행들간의 간격, 열들간의 가격을 설정
ㄹ) grid-auto-rows, grid-auto-columns(암시적)
template이 넘쳤을때 배정되는 item들에게 지정하고 싶은 row의 행 높이와 column의 열 너비 사이즈를 설정
template 내에서 넘치는 부분이 없다면 화면에서 grid-auto-rows는 확인 불가
ㅁ) grid-auto-flow
item들의 배치를 결정
기본값은 row
값을 column으로 변경하는 경우 위에서 아래로 items가 배치됨
값 dense로 변경하는 경우 빈 영역 없이 items들을 배치

2-2) container 정렬

ㄱ) justify-content

메인축에서 어떻게 배치할지 결정

선행 조건

바깥 컨테이너의 크기가 안쪽 컨테이너의 크기보다 작아 남는 공간이 필요

남는 부분을 어떻게 사용할지 정의

<style>
.container{
  border: 5px solid orange;
  width: 100%;
  height: 500px;

  display: grid;
  grid-template-columns: repeat(3, 100px)
  grid-template-rows: repeat(3, 100px)
}
.item {
  background-color: skyblue;
  border: 3px solid blue;
  font-size: 30px;
}
</style>
<body>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<body>

start, end, center, space-around, space, between의 값을 사용

ㄴ) align-content

교차축의 어느 위치에 배치할 건지 결정

start, end, center, space-around, space-between의 값을 사용

ㄷ) justify-items, align-items

하나의 틀에서 각각의 아이템에 대한 정렬

2-3) item

ㄱ) grid-row, grid-column

행과 열의 개수가 아닌 선의 번호로 구분(개발자도구에서 grid클릭시 숫자 확인 가능)
grid(column)-row : grid-row(column)-start, grid-row(column)-end 속성을 가짐
ㄴ) grid-area
grid-template-areas가 사용하는 area의 이름을 입력시 영역에 grid 이름이 지정됨

'Dev-log > CSS' 카테고리의 다른 글

CSS 요소 변화(transform, transition, 애니메이션) (0)	2024.04.10
CSS 레이아웃 (0)	2024.04.09
CSS Box Model (0)	2024.04.08
CSS 상속&속성 (0)	2024.04.07
CSS 기초 & 선택자 (1)	2024.04.07

CSS 요소 변화(transform, transition, 애니메이션)

Jerry95 2024. 4. 10. 17:56

2024. 4. 10. 17:56

1. transform

transform 하기 전의 원본 상태였던 요소의 자리는 유지한 상태 일어남

기본값은 none
함수를 사용하여 요소를 변형시킴
오른쪽에서 왼쪽으로 적용됨(transform: rotate(45deg) scale(0.5))
- 먼저 scale이 적용되고 rotate가 적용
2d, 3d로 모두 변형 가능(x, y, z축)

1-1) scale : 크기조절

2d로 크기 조절
기본값은 scale(1)
사용방법
- scale(sx) : x축을 입력받을 수 있음
- scale(sx, sy) : x,y축을 동시에 입력받을 수 있음
```
<style>
  #myImg{
    width: 40px;
    transform: scale(0.5)
}
</style>
<body>
  <img id="myImg" src="myImg.jpg">
<div>Lorem Ipsum</div>
</body>
```
- transform의 scale로 크기를 줄였다고 하더라도 img태그의 width는 여전히 40px
- width의 값은 변화 없음

1-2) rotate : 회전

rotate(a) : 값은 1번만 받을 수 있음

1-3) translate : 이동

양수, 음수 모두 입력 가능
translate(tx) : 하나의 값만 입력하면 x축으로 이동
- translate(200px)은 translate(200px, 0)을 입력한 것과 동일
translate(tx, ty) : x,y축을 동시에 입력받을 수 있음
값이 양수일 때 x축은 오른쪽으로 이동, y축은 아래로 이동

1-4) skew : 기울이기

skew(ax) : x축으로만 입력
skew(ax, ay) : x,y축을 동시에 입력받을 수 있음

2. transform-origin

기준점을 변경할때 사용

기본값 : transform-origin : 50% 50%(center)

기본값 상태에서 transform scale을 1.5로 주면, 상하좌우가 동일하게 확대됨

<style>
    #myImg{
      width: 40px;
      transform: scale(0.5)
      transform-origin: top left;
  }
</style>
<body>
    <img id="myImg" src="myImg.jpg">
  <div>Lorem Ipsum</div>
</body>

3. transition

전환되는 상태를 눈에 보여주는 것

3-1) transition-property, transition-duration

1) transition-property : 바꿀 요소의 속성을 결정

all 사용시 전체 속성을 transition 항목으로 선택

2) transition-duration

바뀔 요소가 얼마간의 시간을 두고 바꿀것인지 결정

<style>
   .box{
      width: 300px;
      height: 90px;
      border: 2px dashed teal;
      font-size: 50px;
      color: white;

      transition-property: all;
      // transition-property: background-color;
      transition-duration: 1s;
  }
  .box:hover{
      background-color; indianred;
      color: black;
      font-size: 60ox;
      width: 350px;
  }
</style>
<body>
   <div class="box">Hover me!</div>
</body>

3-2) transition-delay, transition-timing-function

1) transition-delay : 요소가 여러개 일때 도미노처럼 차례대로 변할 수 있도록 처리할때 주로 사용
2) transition-timing-function

transition이 될때 중간 과정이 존재(배경색을 빨강에서 파랑으로 변화시킬때 duration에 따라 중간에 보라새으로 보이기도 함)

중간과정의 시간을 순차적으로 보여줄지, 앞부분을 빠르게 뒷부분을 천천히 보여줄지 등을 결정

<style>
.box{
    width: 300px;
    height; 40px;
    border: 2px solid black;
    background-color: skyblue;
    color: white;
    font-size: 50px;

    transition-porperty: all;
    transition-duration: 3s;
    transition-delay: 1s;
    transition-timing-function: ease-in;
}
.box:hover{
    background-color: red;
    height; 400px;
}
</style>
<body>
<div class="box">HI THERE</div>
</body>

4. transfrom + transition

<style>
    .box{
        width: 100px;
        height; 100px;
        border: 10px solid seagreen;
        border-radius: 30px;
        background-color: skyblue;

        font-size: 50px;

        transition: all 1s ease-in-out;
    }
    .box:hover{
        transform: rotate(360deg);
        transform-origin: bottom right;
        height; 400px;
    }
</style>
<body>
    <div class="box">HI THERE</div>
</body>

5. 애니메이션

유저의 액션이 없이도 요소가 변화, 다수의 애니메이션 세트를 만들어 사용할 수 있음

5-1) @keyframes

transition(기본상태 A에서 새로운 스타일 B로의 변화만 다룸)과 다르게 여러개의 스타일 세트((A-B-C-D))를 keyframes라는 개념으로 분리하여 작성 가능

중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정

<style>
  .box{
      width: 100px;
      height; 100px;
      border: 10px solid seagreen;
      border-radius: 30px;
      background-color: skyblue;

      animation: my-first-animation 5s infinite;
  }
  @keyframes my-first-animation{
      0% { 
          font-size: 20px; 
      }
      50% { 
          width: 200px;
          font-size: 70px; 
      }
      100% {
          font-size: 20px; 
      }

  }
</style>
<body>
  <div class="box">😅</div>
</body>

5-2) animation-name, animation-duration

animation-name : keyframes의 이름
- 기본값은 none
animation-duration : animation의 한 cycle을 완료하는데 걸리는 시간
- 음수값은 불가

5-3) animation-delay, animation-timing-function

animation-delay : 지연시간으로 음수 가능
- 음수 사용시 즉시 시작되지만, 애니메이션 주기의 도중에 시작

animation-timing-function : linear, ease-in, ease-out 등

<style>
  div{
      width: 100px;
      height; 100px;
      border: 10px solid grey;
      border-radius: 30px;

      animation; my-first-animation 1s infinite;
  }
  .box1{
      background-color: orange;
      animation-delay: -0.3s;
  }
  .box2{
      background-color: skyblue;
      animation-delay: 0.3s
  }
  .box3{
      background-color: seagreen;
      animation-delay: 0.6s
  }

  @keyframes my-first-animation{
      0% { 
          font-size: 20px; 
      }
      50% { 
          width: 300px;
          font-size: 40px; 
      }
      100% {
          font-size: 20px; 
      }

  }
</style>
<body>
  <div class="box1">😅</div>
  <div class="box2">😅</div>
  <div class="box3">😅</div>
</body>

5-4) animation-iteration-count, animation-direction, animation-play-state

animation-iteration-count : 반복횟수를 설정(기본값은 1)
animation-direction : transition은 A에서 B상태로 변화하기 때문에 단방향이었고 방향이 존재하지 않음
- reverse: 거꾸로 진행
- alternate : 시계방향으로 진행후, 반시계방향으로 진행

animation-play-state : 기본값은 running, 다른 값은 paused

<style>
  div{
      width: 100px;
      height; 100px;
      border: 10px solid grey;
      border-radius: 30px;
      background-color: orange;
  }
  .box1{
      animation-name: rotate;
      animation-duration: 3s;
      animation-timing-function; linear;
      animation-iteration-count: infinite;
      animation-direction: alternate
      animation-play-state: paused;
  }
  .box1:hover{
      animation-play-state: running;
  }
  @keyframes rotate{
      from {
          transform: rotate(0)
      }
      to {
          transform: rotate(360deg)
      }
  }
</style>
<body>
  <div class="box1">😅</div>
</body>

5-5) animation-fill-mode : 애니메이션의 실행 전과 후의 대상에 스타일을 적용하는 방법 설정

none : keyframes에 정의된 style을 애니메이션 시작 전, 후에적용하지 않음(본인이 가진 style만 적용하고 animation이 실행될때만 keyframes의 값을 사용)
forwards : 실행된 에니메이션의 마지막 keyframes를 유지(기존스타일로 돌아가지 않음)
backwords : 애니메이션이 시작할때, keyframes로 시작(기존스타일을 사용하지 않음)
both : 애니메이션이 적용된 요소를 keyframes의 1단계로 시작, 끝날때는 3단계로 종료
```
<style>
  div{
      width: 100px;
      height; 100px;
      border: 10px solid grey;
  }
  .box1{
      background-color: yellowgreen;
      animation: fill-mode 3s linear 1s;
      animation-fill-mode: forwads;

  }
  .box1:hover{
      animation-play-state: running;
  }
  @keyframes fill-mode{
      0{
          background-color: red
      }
      50% {
          width: 200px;
      }
      100% {
          background-color: black

      }
  }
</style>
<body>
  <div class="box1">안녕하세요😅</div>
</body>
```
- 만약 animation-fill-mode를 설정하지 않는다면, 애니메이션의 단계는 3단계로 나뉨
  1) 기존에 정해진 스타일: 배경색이 yellowgreen
  2) 애니메이션 진행단계
  - keyframes 첫번째
  - keyframes 진행중
  - keyframes 마지막
  3) 기존 스타일로 돌아옴
- forwords 사용시 기존스타일로 돌아가지 않고 keyframse의 마지막에서 멈춤
- backwords 사용시 keyframes 첫단계부터 시작(기존스타일에서 시작하지 않음)

'Dev-log > CSS' 카테고리의 다른 글

CSS 레이아웃2(flex, grid) (0)	2024.04.10
CSS 레이아웃 (0)	2024.04.09
CSS Box Model (0)	2024.04.08
CSS 상속&속성 (0)	2024.04.07
CSS 기초 & 선택자 (1)	2024.04.07

CSS 레이아웃

Jerry95 2024. 4. 9. 22:21

2024. 4. 9. 22:21

1. normal-flow

요소의 레이아웃을 변경하지 않을때 배치하는 방법

position, float으로 레이아웃을 변경하지 않으면 요소는 자연스러운 흐름으로 배치됨
- inline은 가로로 배치되고 block(부모 너비의 100%차지)은 세로로 배치됨

2. display

2-1) inline 요소

span 태그가 해당
영역의 크기가 내부 콘텐츠 크기로 정해짐
width와 hegith를 가지지 못함
margin, padding의 top/bottom을 지정하지 못함
여러 요소가 가로로 배치됨

2-2) block 요소

영역의 크기를 widthd와 height로 지정 가능
width를 지정하지 않으면 가로 전체를 차지
여러 요소가 세로로 배치됨

2-3) inline-block 요소

inline과 block 요소의 특징을 모두 가짐
width, height 지정 가능
margin, padding의 top/bottom 지정 가능
여러 요소가 가로 배치

3. 요소를 없애기

3-1) display: none

<style>
    div{
        height: 200px;
        border: solid;
    }
    .box1{
        background-color: darkorange;
    }
    .box2{
        background-color: greenyellow;
        display:none;
    }
    .box3{
        background-color: skyblue;
    }

</style>
<body>
    <div class="box1">Lorem ipsum</div>
    <div class="box2">Lorem ipsum</div>
    <div class="box3">Lorem ipsum</div>
</body>

코드 상에는 보이지만, 화면에서는 확인 할 수 없음
레이아웃 상에서 아예 사라짐(그리지 않음)

3-2) visibility

<style>
    div{
        height: 200px;
        border: solid;
    }
    .box1{
        background-color: darkorange;
    }
    .box2{
        background-color: greenyellow;
        visibility: hidden;
    }
    .box3{
        background-color: skyblue;
    }

</style>
<body>
    <div class="box1">Lorem ipsum</div>
    <div class="box2">Lorem ipsum</div>
    <div class="box3">Lorem ipsum</div>
</body>

기본값은 visible로 화면에 나타냄
hidden으로 처리하면 레이아웃 상에 존재(화면에 존재한다는 의미) : 자리는 차지하지만 요소가 눈에 보이지 않음

4. float

요소를 화면에 띄우는 역할

기본값은 none, none인 경우 블록 요소의 우측에 다른 요소가 배치될 수 없음
left, right를 값으로 사용할 수 있고, 요소가 왼쪽에 있는 경우 다른 내용을 그 옆으로 배치할 수 있음
- image 클래스를 가지는 div 태그는 블록 요소이기 때문에 width가 화면 전체를 차지
- image 클래스에 float을 주면 p 태그가 image 클래스 우측에 배치됨
- float 속성을 주면 2층이된다고 생각하면 이해하기 쉬움
  - float 속성으로 왼쪽 2층에 이미지가 배치되었기 때문에 여전히 1층은 비어있는 상태
  - 이때 p태그를 작성하면, 비어있는 1층으로 p태그가 배치됨
```
<style> 
  .image{
      width: 100px; 
      height: 100px; 
      border: 2px solid pink; 
      float: left; 
      margin: 10px; 
  } 
  .box1{ 
      background-color: darkorange; 
  } 
</style> 
<body> 
  <div class="image"></div> 
  <p>Lorem ipsum dolor sit, ament</p> 
</body>
```

5. position

static : 기본값으로 normal-flow에 따라 배치(top, right, left, bottom 사용 불가)
relative
- 요소를 normal-flow로 배치하고, 자기자신을 기준으로 top, right, left, bottom을 사용해서 배치
- top, right, left, bottom을 사용하지 않으면 원래자리에 배치됨(static일 때의 위치)
- 자기 자신은 position이 static일때가 기준점
```
<style>
 div{
     width: 100px;
     height: 100px;
     border: 4px solid red;
 }
 .box2{
     position: relative;
     top: 50px;
     left: 80px;
 }
</style>
<body>
 <div class="box1"></div>
 <div class="box2"></div>
 <div class="box3"></div>
</body>
```
absolute
- abosolute 사용시 float처럼 요소가 붕 뜨게 되고, 2층을 차지해 1층이 비어있어 다른 요소가 채워짐
  - absolute속성 아래의 요소들에 대한 normal flow를 형성
- top, right, left, bottom 속성 사용 가능
- 가장 가까운 위치의 조상 요소를 기준으로 배치
- 조상은 Position이 static이 아닌 요소를 기준점으로 찾기
- 조상의 속성 중 position이 없는 경우 body를 기준으로 배치)
```
<style>
 div{
     width: 100px;
     height: 100px;
     border: 4px solid red;
 }
 .box2{
     position: absolute;
     top: 50px;
     left: 80px;
 }
</style>
<body>
 <div class="box1"></div>
 <div class="box2"></div>
 <div class="box3"></div>
</body>
```
fixed
- 뷰포트를 기준으로 top, left, right, bottom을 설정
- fixed를 하면 스크롤을 내려도 이동하지 않음(고정됨)
sticky
- normal-flow 흐름으로 배치
- 스크롤이 되는 조상이 기준점
  - 바로 하위의 자식에게 sticky 설정
  - 자식의 자식에게 sticky를 주면 동작하지 않음
- 특정 위치의 스크롤을 지나갔을 때 고정됨

6. overflow

요소의 콘텐츠가 너무 커서 요소의 블록 서식에 맞출수 없을 때의 처리방법

2가지 속성 : overflow-x, overflow-y -> 한줄로 쓰는 것도 가능
visible(기본값), hidden, scroll, auto

overflow를 사용하는 이유

그림 처럼, width와 height로 div를 설정해 준 경우, 콘텐츠가 영역을 넘치면, 다른 요소와 겹치는 상황이 발생할 수 있음

<style> 
div{ 
width: 200px; 
height: 225px; 
background-color: pink; 
} 
</style> 
<body> 
<div> 
Lorem ipsum dolor sit amet consect 
<br> 
Lorem ipsum dolor sit amet consect 
</div> 
<h1>안녕하세요</h1> 
<h1>안녕하세요</h1> 
<h1>안녕하세요</h1> 
</body>

'Dev-log > CSS' 카테고리의 다른 글

CSS 레이아웃2(flex, grid) (0)	2024.04.10
CSS 요소 변화(transform, transition, 애니메이션) (0)	2024.04.10
CSS Box Model (0)	2024.04.08
CSS 상속&속성 (0)	2024.04.07
CSS 기초 & 선택자 (1)	2024.04.07

CSS Box Model

Jerry95 2024. 4. 8. 22:23

2024. 4. 8. 22:23

1. Box Model

1-1) 정의

css를 구성하는 개념
HTML의 문서는 모두 박스 형태로 계산되어 있음

1-2) 구성

content: html 요소의 내용이 담겨짐
- width, height로 구성됨
padding: 콘텐츠의 테두리(border) 사이의 여백(내부영역)
margin: 가장 바깥 쪽 여백, 다른 요소 사이의 공백 역할

2. 크기

2-1) width, height

상속이 불가한 값으로 초기값은 auto

block 요소 : width, height 지정 가능
inline 요소 : width, height 지정 불가능
- 가지고 있는 콘텐츠에 의해 자동으로 설정되기 때문에 설정이 불가

2-2) max-width, min-width

상속이 불가한 값으로 초기값은 auto

min-width : 특정 값 이하로 줄어들지 않도록 구성
- 자식의 width를 퍼센트로 주고, 부모의 width가 줄어들어 자식의 min-width보다 작아지면, 자식은 min-width 값을 유지
<style> .parent{ width: 300px; height: 300px; } .child{ width: 50%; min-width: 100px; height: 100px; } </style>

3. 여백

3-1) margin

컨텐츠의 가장 바깥 테두리(여부)로 상속되지 않음(border 기준 바깥 여백)

입력값으로 퍼센트 사용 가능
- 부모의 width의 %가 값으로 사용됨

3-2) margin collapsing

여러 블록요소들의 위/아래 margin이 경우에 따라 가장 큰 크기를 가진 margin으로 결합되는 현상
인라인 요소에는 발생하지 않고, 좌우에도 발생하지 않음

인접형제

<style> 
  .box{ 
      width: 50px; 
      height: 50px; 
      background-color: tomato; 
      margin-top: 10px; 
      margin-bottom: 20px;
  } 
</style>
<body>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</body>

부모-자식 요소간
- 부모 블록에 border, padding, inline content가 없어서 부모와 자식의 margin-top이 만나는 경우
- 부모 블록에 border, padding, inline content가 없고, 부모-자식을 분리할 height가 지정되지 않아 부모와 자식의 margin-bottom이 만나는 경우
```
<style> 
#parent{ 
  width: 100px; 
  height: 100px; 
  background-color: tomato; 

  margin-top: 30px; 
} 
#child{
  width: 30px;
  height: 30px;
  background-color: skyblue;

  margin-top: 40px;
}
</style>
<body>
<div id="parent">
  <div id="child"></div>
</div>
</body>
```
- 실제로는 부모, 자식 모두 margin-top이 40px
- 만약에 부모-자식 요소를 끊어줄 수 있는 요소가 단 1px만 있어도 margin collapsing은 일어나지 않음(padding, border)
빈블록
- border, padding, content가 없고, height가 존재하지 않으며, 해당 블록의 margin-top과 margin-bottom이 상쇄

3-3) padding

border를 기준으로 안쪽 여백

음수값 사용 불가
퍼센트 사용시, 부모 요소의 width를 기준으로 계산
maring과 사용법이 거의 동일

4. box-sizing

요소의 너비와 높이를 계산하는 방법을 지정

대부분은 wild card(*)로 box-sizing을 border-box로 선언함

<style>
  .box{
      width: 300px;
      height: 200px;

      border: 30px solid blue;
      padding: 20px;

      box-sizing: border-box;

      background-color: skyblue;
  }
</style>
<body>
  <div class="box">
      <span>Lorem</span>
      <h3>안녕하세요</h3>
  </div>
</body>

content-box : 초기값으로 width와 height가 content 영역만 포함, 안팎 여백과 테두리 미포함
- width를 300px로 설정했지만, border가 좌우 30px 추가 + padding 좌우 20px = 총 400px
- height를 200px로 설정했지만, border가 좌우 30px 추가 + padding 좌우 20px = 총 300px
border-box : width와 height가 안쪽 여백과 테두리 포함, 바깥여백은 포함하지 않음
- 실제로는 width가 400px, height가 200px이 되었지만, 사람은 컨텐츠가 width를 300px, height를 200px로 인지
- box-sizing을 border-box로 주면 width,height 계산시 컨텐츠가 차지하는 영역만 계산
  - 결과적으로, 실제 width가 차지하는 값은 200px, height가 차지하는 값이 100px이 됨
  - border포함한 값이 width, height

'Dev-log > CSS' 카테고리의 다른 글

CSS 레이아웃2(flex, grid) (0)	2024.04.10
CSS 요소 변화(transform, transition, 애니메이션) (0)	2024.04.10
CSS 레이아웃 (0)	2024.04.09
CSS 상속&속성 (0)	2024.04.07
CSS 기초 & 선택자 (1)	2024.04.07

CSS 상속&속성

Jerry95 2024. 4. 7. 23:05

2024. 4. 7. 23:05

1. 상속

기본적으로 font-size나 color는 부모의 속성을 자식이 상속 받음

1-1) initial

<style>
    div{
        border: 1px solid silver;
        margin: 2px;
    }
    .parent{
        color: red;
        font-size: 20px;
    }
    .child2{

    }
</style>
<body>
    <div class="parent1">
        parent
        <div class="child1">child1</child>
        <div class="child2">child2</child>
    </div>
</body>

child2의 style을 따로 지정하지 않은 경우
child2의 style 중 color를 blue로 지정한 경우
child2의 style을 initial로 처리한 경우 : initial은 상속받지 않겠다는 의미

1-2) inherit

상속을 받겠다는 처리

1-3) unset

- 부모로부터 상속받을 값이 있을 때 : inherit

- 부모로부터 상속받을 값이 없을 때 : initial

2. text 속성

2-1) text-align

텍스트의 위치를 결정해주는 속성

text-align은 block 요소에서만 적용이 가능
- inline요소는 컨텐츠의 길이만큼만 너비를 가지기 때문에 왼쪽, 가운데, 오른쪽 정렬이 불가
- block요소는 부모를 기준으로 너비가 최대한 늘어나기 때문에 왼쪽, 가운데, 오른쪽 정렬 가능!
text-align이 적용되지 않는 경우 요소가 inline인지 확인 필요
적용되지 않을때
- 부모가 block 속성을 가진 element에서 text-algin 속성을 적용시키기2-2) text-indent들여쓰기 해주는 속성
상속 가능
block 요소에서만 적용 가능

3. 단위

3-1) 상대길이

<style>
    .parent{
        color: blue;
        font-size: 24px;
    }
    .child{
        color: red;
        font-size: 0.5em;
    }
</style>
<body>
	<div class="parent">
        Hi
        <div class="child">
            Hi
        <div>
    </div>
</body>

1) em, rem

em : 부모의 font-size
- 별도의 설정을 하지 않은 경우 font-size는 16px
rem : root의 font-size가 기준(=body태그)

2) vw, vh

뷰표트 백분율 길이
- vw : 뷰포트의 초기 컨테이닝 블록 너비 1%와 같음
- vh : 뷰포트의 초기 컨테이닝 블록 높이 1%와 같음

3) vmin, vmax

가로모드, 세로모드일때에 따라 vmin, vmax가 달라짐
더 긴 쪽이 vmax, 더작은 쪽이 vmax
- 가로모드, 세로모드일때 vmax, vmin 모두 동일한 값을 유지함

3-2) 함수표기법

1) calc()

width: calc(100% - 80px);

덧셈, 뺄셈, 곱셈, 나눗셈 모두 사용 가능
- 연산자 좌우에 공백 필수
여러 개의 단위를 섞어서 사용
- 상대길이 중에서 절대길이 만큼만 빼고 싶을때 사용

2) min(), max()

.container{
	width: min(100%, 200px);
    height: 200px;
}

min : 2개의 값 중 작은 값을 width로 선택
max : 2개의 값 중 큰 값을 width로 선택

'Dev-log > CSS' 카테고리의 다른 글

CSS 레이아웃2(flex, grid) (0)	2024.04.10
CSS 요소 변화(transform, transition, 애니메이션) (0)	2024.04.10
CSS 레이아웃 (0)	2024.04.09
CSS Box Model (0)	2024.04.08
CSS 기초 & 선택자 (1)	2024.04.07

CSS 기초 & 선택자

Jerry95 2024. 4. 7. 18:23

2024. 4. 7. 18:23

1. CSS(Cascading Style Sheets)

룰 기반의 언어
여러가지 규칙을 나열하는 방식으로 작성
특정 요소, 특정 요소들의 집합의 스타일 규칙을 정의
h1{ color:red; font-size: 12px; }
사용방법
- 선택자(Selector) : 스타일을 지정할 HTML 요소를 선택
- 선언블록: 중괄호 내부에 여러 선언들을 작성
- 선언 : 프로퍼티와 값으로 이루어진 쌍
- 선택자의 형태로 이루어진 하나의 rule

2. Cascading 원칙

계단식으로 구성되어 위에서부터 아래로 떨어지는 것을 의미

스타일 우선순위

동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해짐
- 브라우저에 의해 정의된 스타일 < 개발자가 선언한 스타일(inline, embeded, external) < 사용자가 구성한 스타일
```
<html>
<head>
    <style>
        #box{
            color:red;
        }
    </style>
    <link href="style.css" ref="stylesheet"> // #box{color: blue;}
</head>
<body>
    <div id="box">Box</div>
</body>
</html>
```
  - style 태그가 link태그보다 먼저 선언되었기 때문에 style 태그가 우선 : 글자색은 red
```
<html>
<head>
      <style>
          #box{
              color:red;
          }
      </style>
      <link href="style.css" ref="stylesheet">
</head>
<body>
      <div id="box">Box</div>
</body>
</html>
```
  - link태그가 style 태그보다 먼저 선언되었기 때문에 외부 stylesheet가 우선 : 글자색 blue

적용 범위가 적을수록 우선시 된다
- tag 스타일 < class 스타일 < id 스타일 < 인라인 스타일
- 인라인 스타일로 작성하면 css파일로 style을 구성해도 인라인 스타일이 적용됨
소스코드의 순서가 뒤에 있으면 덮어쓴다 : 동일한 스타일을 준 경우에 해당됨

스타일 상속

부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다.
- 자식 요소에서 재 정의할 경우, 부모의 스타일을 덮어씀
상속이 되지 않는 속성도 존재(배경이미지, 배경 색 등)

3. CSS 적용 방법

내부스타일(embeded)
- HTML 내부의 head태그에 style태그를 선언하여 작성
인라인스타일(inline)
- 하나의 요소에만 스타일을 적용하고 싶을 때 사용
외부스타일(external)
- link태그로 연결

4. 선택자

4-1) 요소 선택자(type selector, tag selector)

태그 이름으로 요소를 선택
하나의 HTML에 있는 특정 태그를 모두 선택(모든 h2를 선택)
```
h2{
color:red;
}
```

4-2) id 선택자

HTML 태그의 전역 속성 중 id 속성으로 선택
이름표를 달아준다고 생각하면 됨(HTML 전체 요소중 하나의 요소에만 지정해야함)
#welcome{ color: red; }

4-3) class 선택자

HTML 태그의 전역 속성 중 class 속성으로 선택
이름표를 달아주지만, 중복이 가능
해당 class를 가진 모든 요소를 선택
요소가 2개의 class를 가지는 경우 마지막에 작성된 스타일이 적용됨
```
.title{ color:red; }    
.title{ color: blue; }
```
class가 title인 요소는 색상이 blue로 적용

4-4) 속성 선택자(Attribute selector)

<style>
    a[target] {
        color:hotpink;
    }    
    a[href="http://example.com"]{
        color:skyblue;
    }
    a[href^="http://"]{
        color:purple;
    }
    a[href$=".com"]{
        color:silver
    }
    a[href*="example"]{
        color:red
    }
</style>
<body>
    <a href="http://example.com" target="_blank">Example Link(com/http)</a>
    <a href="http://example.org" target="_blank">Example Link(org/http)</a>
    <a href="https://exa-mple.com">Example Link(com/https)</a>
    <a href="https://example.org">Example Link(org/https)</a>
</body>

태그[속성]
태그[속성="값"] : 값이 정확해야만 선택
태그[속성^="값"] : 시작하는 요소를 선택
태그[속성$="값"] : 끝나는 요소를 선택
태그[속성*="값"] : 중간이라도 상관없이 값을 가지는 요소를 선택

5. 가상클래스 선택자 (selector:___)

실제로 존재하지 않는 상태에 이름을 붙여준 것(클래스가 없지만 마치 있는 것 처럼 이름을 붙여줌)

<body>
    <h2>Movie List</h2>
    <ul>
        <li class="movie">Toy Story</li>
        <li class="movie">Zootopia</li>
        <li class="movie">Inside Out</li>
        <li class="movie">Finding Nemo</li>
    </ul>
    <ol>
        <li>Americano</li>
        <li>Latte</li>
        <li>Hot Choco</li>
    </ol>
    <p>Lorem ipsum dolor sit amet</p>
    <p>consectetur adipiscing elit</p>
    <p>Commodi voluptates sint iure quas quasi.</p>
</body>

5-1) :first-child(:last-child)

선택된 요소의 부모 기준으로 첫번째 형제가 선택됨
class 선택자로 first-child를 선택하게 될 경우 style이 적용되지 않을 수 있음
- selector 중 첫번째 자식을 의미하지 않음 → selector에 의해 선택된 부모 태그 기준 첫번째 형제
- class가 movie인 요소들의 부모는 ul태그(ul을 부모로 두는 요소들의 형제 태그 중 첫번째 태그는 Toy Story)
- 첫번째 형제는 class 속성을 가지지 않기 때문에 HTML문서에서 32px의 글자크기를 가지는 요소는 없음
```
<style> 
    li:last-child { 
        color: green 
    }     
    .movie:first-child { 
        font-size: 32px; 
    }     
</style> 
<body> 
   <ul> 
     <li class=>Toy Story</li> 
     <li class="movie">Zootopia</li> 
     <li class="movie">Inside Out</li> 
     <li class="movie">Finding Nemo</li> 
 </ul> 
</body>
```

5-2) :nth-child(num)

숫자외에도, 2n, 2n-1, even, odd 등으로 요소를 선택할 수 있음
```
li:nth-child(3){ 
  color: orange; 
}
```

5-3) :first-of-type(:last-of-type)

type(태그)들 중에 첫번째
```
<body>
  <section> 
    <div>Toy Story</div> 
    <p>Zootopoa</p> 
    <p>Inside Out</p> 
    <p>Finding Nemo</p> 
    <div>Coco</div> 
  </section>
</body>
```
:first-child를 이용하면 style 적용이 불가
- p 태그의 형제 태그 중 첫번째를 선택
- 첫번째 형제가 div 태그(p 태그가 아님)

5-4) :nth-of-type()

숫자외에, 2n등과 같이 함수형으로 사용 가능
p:nth-of-type(odd){ color:blue; }

5-5) not

selector:not(selector){} : 콜론 앞의 selecotr를 선택하고, 괄호안의 selector를 제외한 나머지를 선택

5-6) hover, active, focus

hover : 마우스를 올려놓고 있을때
active: 마우스를 클릭하고 있을때부터 떼는 시점
focus : 키보드로 tap키를 눌러 요소를 선택한 경우 or input 태그를 입력을 위해 클릭한 경우

<style>
    input[type=button]{
        background-color: skyblue;
        border: none;
    }
    input[type=button]:hover{
        background-color: teal;
        color: white;
    }
    input[type=button]:active{
        background-color:red;
    }
    input[type=button]:focus{
        background-color: blue;
    }
    input[type=text]:focus{
        background-color: blue
    }
</style>
<body>
    <input type="button" value="클릭">
    <input type="button" value="클릭">
    <input type="button" value="클릭">
    <input type="button" value="클릭">
    <input type="text">
</body>

6. 가상 요소 선택자 (selector::__)

실제로 존재하지 않는 요소, 범위를 만들어 스타일을 부여함

반드시 content 프로퍼티를 추가해주어야 함

6-1) before(after)

<style>
    .movie::before{
        content: 'Movie';
        color: indianred;
    }
</style>
<body>
    <div class="movie">ToyStory</div>
    <div class="movie">Zootopia</div>
    <div class="movie">InsideOut</div>
    <div class="movie">Coco</div>
    <div class="movie">Finding Nemo</div>
</body>

가상의 요소에 style이 적용됨
class가 movie인 요소들에는 적용되지 않음

존재하지 않는 요소인 ::before가 생성됨
content를 가지고 있지만 내용이 의미가 있지 않음 : 꾸밈을 위한 요소라고 여겨짐
메뉴 사이에 구분 bar를 추가할 때 사용

6-2) first-letter

  <style>
    .lorem::first-letter {
      color: red;
    }
    .lorem::before{
        content: 'BEFORE';
    }
  </style>
  <body>
    <p class="lorem">Lorem ipsum dolor sit amet consectetur, sequi.</p>
    <p class="lorem">Lorem ipsum dolor sit amet consectetur, sequi.</p>
    <p class="lorem">Lorem ipsum dolor sit amet consectetur, sequi.</p>
  </body>

first-letter를 before 가상요소 선택자와 함께 사용하면, before의 content에 style이 적용됨

7. 선택자 결합

7-1) 하위선택자 : spacing

<body>
    <ul>
        <li>리스트1</li>
        <li>리스트2</li>
        <li>리스트3</li>
        <li>리스트4</li>
    </ul>
</body>

ul태그의 li태그를 선택하고 싶을때는 spacing
ul li {style 속성}

7-2) 자식선택자 : >

<body>
    <ul>
        <li>리스트1</li>
            <ol>
                <li>리스트1</li>
                <li>리스트2</li>
            </ol>
        <li>리스트2</li>
        <li>리스트3</li>
        <li>리스트4</li>
    </ul>
</body>

바로 밑의 하위 자식만 선택하고 싶은 경우에 사용
ul > li

7-3) 일반 형제 선택자 : ~

형제 요소가 특정 요소 뒤에 있을때 선택가능

<body>
    <div>
        <p>P</p>
        <span>Span</span>
        <code>Code</code>
        <p>P2</p>
        <div>Div</div>
    </div>
</body>

code의 형제는 총 5개 : p, span, code, p, div
형제는 코드 앞뒤로 2개씩 있음 : 선택된 형제를 기준으로 뒤에 있는 형제만 선택 가능(p, div)
- 앞에 있는 p나 span태그는 선택 불가!
```
<style>
code ~ p{
    color:red;
}
</style>
```

7-4) 인접 형제 선택자 : +

<body>
    <div>
        <p>P</p>
        <span>Span</span>
        <code>Code</code>
        <p>P2</p>
        <div>Div</div>
    </div>
</body>

선택된 요소의 바로 뒤에 인접한 요소만 선택이 가능

code + div를 하게 되면 style 속성 부여 불가

<style>
    code + p{
        background-color: blue;
    }
</style>

'Dev-log > CSS' 카테고리의 다른 글

CSS 레이아웃2(flex, grid) (0)	2024.04.10
CSS 요소 변화(transform, transition, 애니메이션) (0)	2024.04.10
CSS 레이아웃 (0)	2024.04.09
CSS Box Model (0)	2024.04.08
CSS 상속&속성 (0)	2024.04.07

PREV 이전 1 NEXT 다음

Dev-log/CSS

1. flex

1-1) flex가 없을 때 요소를 가로로 배치하는 방법

ㄱ) inline-block

ㄴ) float

1-2) flex의 구성

ㄱ) flex-container

ㄴ) flex-item

ㄷ) main axis

ㄹ) cross axis

1-3) flex-container

ㄱ) display

ㄴ) flex-direction : 주축과 방향을 결정

ㄷ) flex-wrap

1-4) flex-item

ㄱ) order

ㄴ) flex-grow, flex-shrink, flex-basis

1-5) flex property

ㄱ) justify-content : 메인축

ㄴ) align-items : 교차축 중 item이 1줄일 때 사용

ㄷ) align-content : 교차축 중 item이 2줄일 때 사용

2. grid

2-1) container

ㄱ) grid-template-rows, grid-template-columns(명시적)

ㄴ) grid-template-areas

ㄷ) row-gap, column-gap

ㄹ) grid-auto-rows, grid-auto-columns(암시적)

ㅁ) grid-auto-flow

2-2) container 정렬

ㄱ) justify-content

ㄴ) align-content

ㄷ) justify-items, align-items

2-3) item

ㄱ) grid-row, grid-column

ㄴ) grid-area

'Dev-log > CSS' 카테고리의 다른 글

1. transform

1-1) scale : 크기조절

1-2) rotate : 회전

1-3) translate : 이동

1-4) skew : 기울이기

2. transform-origin

3. transition

3-1) transition-property, transition-duration

3-2) transition-delay, transition-timing-function

4. transfrom + transition

5. 애니메이션

5-1) @keyframes

5-2) animation-name, animation-duration

5-3) animation-delay, animation-timing-function

5-4) animation-iteration-count, animation-direction, animation-play-state

5-5) animation-fill-mode : 애니메이션의 실행 전과 후의 대상에 스타일을 적용하는 방법 설정

'Dev-log > CSS' 카테고리의 다른 글

1. normal-flow

2. display

2-1) inline 요소

2-2) block 요소

2-3) inline-block 요소

3. 요소를 없애기

3-1) display: none

3-2) visibility

4. float

5. position

6. overflow

'Dev-log > CSS' 카테고리의 다른 글

1. Box Model

1-1) 정의

1-2) 구성

2. 크기

2-1) width, height

2-2) max-width, min-width

3. 여백

3-1) margin

3-2) margin collapsing

3-3) padding

4. box-sizing

'Dev-log > CSS' 카테고리의 다른 글

1. 상속

1-1) initial

1-2) inherit