[CSS] CSS 0918 6일 (filter, transform, border,flex)

filter : filter 속성은 흐림이나 색상 변형 등 그레픽 효과를 적용하기 위해 사용한다.

속성 값은 함수로 이루어져있고 공백으로 구분해 여러가지 사용할 수 있다.
함수
- blur(x) : 크기 값인 x 만큼을 반경으로 하여 요소를 흐린다. (크기가 작을수록 덜흐리고 클수록 안보일만큼 흐림)
- brightness(x) :배율 값은 x 만큼 명도를 지정한다. 100%(1.0)이 본래 명도이고, 0%(혹은 0.0)으로 지정할 경우 완전히 어두워진다. 블러 브라이트니스 같이쓸때는 filter: blur () brightness(25%)
- contrast(x):비율 값인 x 만큼 대비를 지정한다. 100%(혹은 1.0)이 본래 대비이고,0%(0.0)으로 지정할 경우 완전히 회색이 된다.
- grayscale(x) :비율 값인 x 만큼 흑백으로 지정한다. x의 범위는 0%(0.0)부터 100%(1.0)까지이고, 0%가 본래 이미지이며, 100%가 완전한 흑백 이미지이다.
- invert(x) : 비율 값인 x만큼 색상을 반전한다. x의 범위는 0%(0.0)부터 100%(1.0)까지이고 0%가 본래 이미지이며, 100%가 되면 완전히 반전된 이미지가 된다.

transform : transform 속성은 요소에 회전, 크기,위치,기울기 등 모양이나 상태에 변화를 주기위해 사용하는 속성이다.

속성 값은 함수로 이루어져있고 공백으로 구분해 여러개 사용할 수 있다.
함수
- rotatex(d) :각도인 d 값 만큼 x 축을 기준으로 회전한다.
- rotatey(d):각도인 d 값 만큼 y 축을 기준으로 회전한다.
- rotatez(d):각도인 d 값 만큼 z 축을 기준으로 회전한다.
- rotate(d): ratatez와 동일한 함수
- scale(r):비율인 r 만큼 확대/축소한다. 100%(1.0)이 기본 크기이며, 값이 작아질수록 축소되며, 커질수록 확대된다.
- translate(a,b) : 크기 혹은 비율 값인 a 만큼 x 축으로, b만큼 y 축으로 이동한다. 이때, a 값이 비율이라면 해당 요소의 가로 크기에 ,b 값이 비율이라면 해당 요소의 세로 크기에 비례하게 이동한다
- translatez(v):크기 혹은 비율 값인 v 만큼 x 축으로 이동한다. 이때 v 값이 비율이라면 해당 요소의 가로 크기에 비례해서 이동한다.
- translatey(z) : 크기 혹은 비율 값인 v 만큼 y축으로 이동한다. 이때 v 값이 비율이라면 해당 요소의 세로 크기에 비례해서 이동한다.

어떤 요소를 화면 가운데로 옮기고 싶다 ( 하지만 크기는 모른다 할때 많이 쓰는 것)

top:50%

left:50%

positon: 경우에 따라

transform: translate(-50%, - 50%)

어떤 요소를 전체 풀 스크린으로 주고 싶다 할때 꼭 필요한 5가지 속성( 그냥 외워)

top:0

left: 0

width:100

height:100

positon:fixed

border border 속성은 요소의 테두리를 지정하기 위한 속성이다.

값 [형태]

dashed : 일반 점선
dotted : 둥근 점선
double : 이중 실선
grooved : 파인 입체 실선
ridge : 돌출 입체 실선
solid : 실선filter : filter 속성은 흐림이나 색상 변형 등 그레픽 효과를 적용하기 위해 사용한다.

속성 값은 함수로 이루어져있고 공백으로 구분해 여러가지 사용할 수 있다.
함수
blur(x) : 크기 값인 x 만큼을 반경으로 하여 요소를 흐린다. (크기가 작을수록 덜흐리고 클수록 안보일만큼 흐림)
brightness(x) :배율 값은 x 만큼 명도를 지정한다. 100%(1:0)이 본래 명도이고, 0%(혹은 0.0)으로 지정할 경우 완전히 어두워진다. 블러 브라이트니스 같이쓸때는 filter: blur () brightness(25%)
contrast(x):비율 값인 x 만큼 대비를 지정한다. 100%(혹은 1.0)이 본래 대비이고,0%(0.0)으로 지정할 경우 완전히 회색이 된다.
grayscale(x) :비율 값인 x 만큼 흑백으로 지정한다. x의 범위는 0%(0.0)부터 100%(1.0)까지이고, 0%가 본래 이미지이며, 100%가 완전한 흑백 이미지이다.
invert(x) : 비율 값인 x만큼 색상을 반전한다. x의 범위는 0%(0.0)부터 100%(1.0)까지이고 0%가 본래 이미지이며, 100%가 되면 완전히 반전된 이미지가 된다.
transform : transform 속성은 요소에 회전, 크기,위치,기울기 등 모양이나 상태에 변화를 주기위해 사용하는 속성이다.

속성 값은 함수로 이루어져있고 공백으로 구분해 여러개 사용할 수 있다.

함수

rotatex(d) :각도인 d 값 만큼 x 축을 기준으로 회전한다.

rotatey(d):각도인 d 값 만큼 y 축을 기준으로 회전한다.

rotatez(d):각도인 d 값 만큼 z 축을 기준으로 회전한다.

rotate(d): ratatez와 동일한 함수

scale(r):비율인 r 만큼 확대/축소한다. 100%(1.0)이 기본 크기이며, 값이 작아질수록 축소되며, 커질수록 확대된다.

translate(a,b) : 크기 혹은 비율 값인 a 만큼 x 축으로, b만큼 y 축으로 이동한다. 이때, a 값이 비율이라면 해당 요소의 가로 크기에 ,b 값이 비율이라면 해당 요소의 세로 크기에 비례하게 이동한다

translatez(v):크기 혹은 비율 값인 v 만큼 x 축으로 이동한다. 이때 v 값이 비율이라면 해당 요소의 가로 크기에 비례해서 이동한다.

translatey(z) : 크기 혹은 비율 값인 v 만큼 y축으로 이동한다. 이때 v 값이 비율이라면 해당 요소의 세로 크기에 비례해서 이동한다.

어떤 요소를 화면 가운데로 옮기고 싶다 ( 하지만 크기는 모른다 할때 많이 쓰는 것)

top:50%

left:50%

positon: 경우에 따라

transform: translate(-50%, - 50%)

border

border 속성은 요소의 테두리를 지정하기 위한 속성이다.
값 [형태]
- dashed : 일반 점선
- dotted : 둥근 점선
- double : 이중 실선
- grooved : 파인 입체 실선
- ridge : 돌출 입체 실선
- solid : 실선

형태
- none :기본 값으로, 테두리가 없는 상태
- [크기] [형태] [색상]

border-top

border-top속성은 요소의 위쪽 테두리를 지정하기 위한 속성이다.

border-right

border-right속성은 요소의 오른쪽 테두리를 지정하기 위한 속성이다.

border-bottom

border-bottom 속성은 요소의 아래쪽 테두리를 지정하기 위한 속성이다.
기본 값 및 값의 형태는 border와 같다.

border-left

border-left속성은 요소의 모서리를 둥글게 만들기 위한 속성이다.
기본 값 및 값의 형태는 border와 같다.
형태
- [크기]

cursor

cursor 속성은 마우스 포인터 모양을 지정하기 위한 속성이다.
형태
- auto:기본 값으로 브라우저가 상황에 맞게 알아서 판단한다.
- none:마우스 포인터 없음
- default:\지정하면 흔히쓰는 마우스 그거
- pointer : 손가락모양
- wail: 모래시계모양
- text:텍스트를 입력하라는 커서 모양이 나옴
- move:십가자 모양같은
- not-allowed:허용금지모양
- zoom-in:돋보기+모양
- zoom-out:돋보기 -모양

pointer-events

pointer-events 속성은 마우스 포인터와 요소간의 상호 작용에 관한 설정을 위한 속성이다
형태
- auto:기본 값으로, 상호작용 가능.
- none;상호작용 불가능.

user-select

user-select속성은 사용자의 텍스트 선택에 대한 설정을 위한 속성이다.
형태
- auto: 기본값으로 브라우저가 상황에 따라 알아서 판단한다.
- all: 요소의 내용이 한번에 선택된다.
- none: 요소의 내용을 선택할 수 없음
- text: 요소의 내용을 일반적으로 선택할 수 있음

transiton-duration ( 만약 hover로 색상변화를 지정할때 그 변화에 걸리는 시간을 지정가능)

transiton-duration속성은 해당 요소에 특정 상황에 따라 변화하는 속성에 대해 해당 속성이 변화하는데 걸리는 시간을 지정하기 위한 속성이다
중간 값이 없는 속성은 트랜지션 효과의 적용을 받지 않음에 유의한다.
형태
- [시간]

transitoion-delay

transition-delay속성은 트랜지션 발생 시작까지 지연시킬 시간을 지정한다
형태
- [시간]

opacity

opacity속성은 투명도를 정할 수 있다 0은 투명 100은 일반 상태 . 중간 값도 지정 가능하다
형태
[값]

transition-property

transition-property 속성은 트랜지션의 적용을 받을 CSS 속성을 지정하기 위한 속성이다.
해당 속성에 명시되지 않은 CSS속성은 트랜지션의 효과를 적용받지 않는다.
형태
- all : 기본값으로, 모든 적용 가능한 속성에 트랜지션을 적용한다.
- none : 트랜지션을 적용하지 않는다.
- [속성 이름,...] 여러개 적용도 가능 transition-property: background-color,color;

transition-timing-function ( 애니메이션이 시작되고 끝날 때의 속도 변화를 지정 )

transition-timing-function속성은 트랜지션이 적용되는데 있어, 시간의 흐름에 따른 변화 완료율을 계산하는 함수를 지정하기 위한 속성이다.
형태
- ease ( 기본값 )
- ease-in
- ease-in-out
- ease-out
- linear선형
- [cubic-bezier 함수]

[flex]

플렉스 컨테이너는 이가 가지는 자식요소들에 대한 배치를 보다 유연하고 쉽게하기위해 사용된다.
플렉스 컨테이너가 될 요소의 display속성 값을 flex 혹은 inline-flex 로 설정한다. (블록을 싹다 무시해서 만약 div 1,2,3 하면 플렉스 사용하면 한줄로 다 나옴.

플렉스 컨테이너(부모에게 쓰이는)

flex-direction

flex-dirction 속성은 플렉스 컨테이너에 부여하는 속성으로, 이가 가지고 있는 플렉스 아이템들의 흐름 방향을 지정하기 위해 사용한다.
형태
- column : 세로 방향 배치.
- column-reverse : 세로 역방향 배치. 요소의 순서도 반전 됨
- row: 가로 방향 배치.
- row-reverse : 가로 역방향 배치. 요소의 순서도 반전 됨.

  <style>
        .container{
            display: flex;
            background-color: #47B51F;
            width: 20rem;
            height: 20rem;
            flex-direction: column;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
</div>
</body>
컬럼방향
 <style>
        .container{
            display: flex;
            background-color: #47B51F;
            width: 20rem;
            height: 20rem;
            flex-direction: column
        }
       .container>.child{
           font-size: 1.5rem;

       }
        .container>.child.a{
            background-color: #47B51F;

        }
        .container>.child.b{
            background-color: #91A11B;

        }
        .container>.child.c{
            background-color: #154BB0;

        }
    </style>
</head>
<body>

<div class="container">
    <div class="child a">1</div>
    <div class="child b">2</div>
    <div class="child c">3</div>
</div>
</body>
</html>

<style>
        .container{
            display: flex;
            background-color: #47B51F;
            width: 20rem;
            height: 20rem;
            flex-direction: column-reverse;

        }
       .container>.child{
           font-size: 1.5rem;
       }
        .container>.child.a{
            background-color: #47B51F;
        }
        .container>.child.b{
            background-color: #91A11B;
        }
        .container>.child.c{
            background-color: #154BB0;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="child a">1</div>
    <div class="child b">2</div>
    <div class="child c">3</div>
</div>
</body>
</html>

gap

gap속성은 플렉스 컨테이너가 포함하는 아이템간의 거리를 지정하기 위해 사용한다.
형태
- [크기] :행간, 열간 거리를 모두 지정한다.
- [크기: v][크기: b] : 행간 거리를 v로, 열간 거리를 h로 지정한다.

justify-content

justify-content 속성은 플렉스 컨테이너의 flex-direction에서 설정한 방향에 대해 수형한 방향으로의 정렬을 위한 속성이다
형태
- flex-start : 흐름의 시작 방향에 맞추어 정렬
- flex-end: 흐름의 끝 방향에 맞추어 정렬
- center: 가운데 정렬
- space-between: 각 플렉스 아이템 사이에 균등한 공간을 배분하도록 정렬
- space-around: 각 플렉스 아이템 사이에 균등한 공간을 배분하고, 각 끝외부에 각 플렉스 아이템 사이의 공간의 절반에 해당하는 공간을 배분하도록 정렬
- space-evenly:각 플렉스 아이템 사이 및 각 끝 외부에 균등한 공간을 배분하도록 정렬.

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            display: flex;
            background-color: #47B51F;
            width: 20rem;
            height: 20rem;
            flex-direction: row;
            justify-content: flex-end;

        }
       .container>.child{
           font-size: 1.5rem;

       }
        .container>.child.a{
            background-color: #47B51F;

        }
        .container>.child.b{
            background-color: #91A11B;

        }
        .container>.child.c{
            background-color: #154BB0;

        }
    </style>
</head>
<body>
<div class="container">
    <div class="child a">1</div>
    <div class="child b">2</div>
    <div class="child c">3</div>
</div>
</body>
</html>


플렉스 디렉션 로우(가로 방향에 대해 수평한 방향으로 정렬)

align-items

align-items속성은 플렉스 컨테이너의 flex-directions에서 설정한 방향에 대해 수직한 방향으로의 정렬을 위한 속성이다
형태
- - flex-start : 흐름의 시작 방향에 맞추어 정렬
  - flex-end: 흐름의 끝 방향에 맞추어 정렬
  - center: 가운데 정렬
  - stretch:flex-direction에 수직한 방향으로의 플렉스 컨테이너의 크기에 맞게 늘이거나 줄이도록 정렬.
  - space-between: 각 플렉스 아이템 사이에 균등한 공간을 배분하도록 정렬
  - space-around: 각 플렉스 아이템 사이에 균등한 공간을 배분하고, 각 끝외부에 각 플렉스 아이템 사이의 공간의 절반에 해당하는 공간을 배분하도록 정렬
  - space-evenly:각 플렉스 아이템 사이 및 각 끝 외부에 균등한 공간을 배분하도록 정렬.

플렉스 아이템 (자식에게 쓰이는)

align-self

align-self 속성은 부모인 플렉스 컨테이너의 flex-direction 속성에 대해 스스로의 수직한 방향으로의 정렬을 설정하기 위한 속성이다.
그 형태는 align items와 같다

flex-basis

flex-basis 속성은 플렉스 아이템의(기본)크기를 설정하기 위해 사용하는 속성이다. 부모인 플렉스 컨테이너의 flex-direction 속성 값이 row나 row-reverse일 경우 이는 width와 같고 column이나 column-reverse일 경우 이는 height 와 같다
형태
- auto
- [크기 값 ]

flex-grow ( 구글 웹페이지 보면 head 부분에 스토어와 Gmail 사이에 공간을 grow로 지정해준거임)

flex-grow속성은 플렉스 아이템이 플렉스 컨터이너 안에서 flex-direction방향에 따라 남는 여유 공간을 차지하기 위해 늘어날 비율을 지정한다. 단 값이 0이면 늘어나지 않는다.
형태
- [0|자연수] : 기본 값 0

flex-shrink

flex-shrink속성은 플렉스 아이템의 크기가 플렉스 컨테이너보다 클때 플렉스 아이템의 크기를 줄이는 비율을 지정하기 위해 사용한다
형태
- [0|자연수] : 기본 값 0

** 오늘은 html과 css 를 분리해서 코드를 작성해서 연결하는 걸 해봄

hrml head부분에

'FRONT-END > CSS' 카테고리의 다른 글

깨알 : box-sizing에 대해서 (0)	2025.09.17
[CSS] 0916 4일차(의사요소 ::,background,font,width,height,position,padding,margin) (2)	2025.09.16
[CSS] input 박스 클릭-> 연결되어있는 글자색 변경 // 체크박스 체크-> 글씨보이게 하기 (0)	2025.09.15
[CSS] 0915 3일차 (선택자, hover 등등) (0)	2025.09.15

개발자 코드츄

[CSS] CSS 0918 6일 (filter, transform, border,flex)

[flex]

플렉스 컨테이너(부모에게 쓰이는)

flex-direction

gap

justify-content

align-items

플렉스 아이템 (자식에게 쓰이는)

align-self

flex-basis

flex-grow ( 구글 웹페이지 보면 head 부분에 스토어와 Gmail 사이에 공간을 grow로 지정해준거임)

flex-shrink

'FRONT-END > CSS' 카테고리의 다른 글

티스토리툴바

[CSS] CSS 0918 6일 (filter, transform, border,flex)

[flex]

플렉스 컨테이너(부모에게 쓰이는)

flex-direction

gap

justify-content

align-items

플렉스 아이템 (자식에게 쓰이는)

align-self

flex-basis

flex-grow ( 구글 웹페이지 보면 head 부분에 스토어와 Gmail 사이에 공간을 grow로 지정해준거임)

flex-shrink

'FRONT-END > CSS' 카테고리의 다른 글

관련글

티스토리툴바