변형 관련 스타일

   - 웹 요소의 위치를 옮기거나 크기를 조절하고 

         회전, 왜곡시키는 것

   

     ----------------------------   X축                         Z축

     |                                                        \

     |                                                         \

     |                                                          \ 

     |                                                           \

     |                                                             ---------  X축

     |                                                             |

     |                                                             |

     |         2차원 좌표                                                |     3차원 좌표

     |                                                             |

     |                                                             |

                                                                 

     Y축                                                                  Y축

   

   - X, Y 축 값이 커질수록 오른쪽, 아래쪽으로 내려감  

   - Z 축은 값이 커질수록 앞으로 작을 수록 뒤로

   

1. transform: 변형함수 값

   - 변형함수 

     1. translate(이동)

         1. translate(tx, ty)

         2. translateX(tx)

         3. translateY(ty)

         4. translateZ(tz)

     

     2. scale(확대 / 축소)

         1. scale(tx, ty)

         2. scaleX(tx)

         3. scaleY(ty)

         4. scaleZ(tz)

     

     3. rotate(회전)

         1. rotate(각도)

         2. rotateX(각도)

         3. rotateY(각도)

         4. rotateZ(각도) 

            : 각도가 양수일 경우 시계방향 회전, 음수는 반시계 방향

     

     4. skew(비틀기)

         1. skew(x각도, y각도) : y각도를 주지 않으면 0으로 설정됨

         2. skewX(x각도)

         3. skewY(y각도)

 

     5. translate(위치이동)

         1. 위치를 이동시킬 수 있으며, 좌/우/상/하로 위치 조정

         2. scale과 마찬가지로 x축, y축으로 저장가능함

   

2. transform-origin: x축, y축 값;        

     - x축 : 원점에서의 좌표나 길이 값이나 백분율, left, center, right

     - y축 : 원점에서의 좌표나 길이 값이나 백분율, top, center, bottom

 

https://developer.mozilla.org/ko/docs/Web/CSS/transform

 

transform

CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다.

developer.mozilla.org

 

저작자표시 (새창열림)

'HTML & CSS' 카테고리의 다른 글

CSS-Transition  (0) 2020.07.09
CSS - 가상선택자  (0) 2020.07.08
CSS - Flex  (0) 2020.07.05
CSS(Position)  (0) 2020.07.02
CSS (inline-block and block)  (0) 2020.07.01

- 시간이 흐르면서 설정된 스타일을 변경하는것

   - 자바스크립트를 이용하지 않고도 애니메이션 효과를 낼 수 있음

   

   - transition-property : 속성 값

     1. none : 아무 속성도 바뀌지 않음

     2. all  : 요소의 모든 속성이 트랜지션 대상이 됨

     3. 특정 속성명 : 트랜지션을 적용할 속성을 지정, 여러개일 경우 쉼표 구분

     

 

적용속성

     > 위치속성    : top, left, bottom, right

     > 크기속성    : width, height

     > 박스속성    : margin, padding

     > 테두리 속성 : border-width, border-radius, border-color

     > 색상 속성   : color, background-color

     > 투명도 속성 : opacity

     > 변환속성    : transform

 

 

   - transition-duration : 시간 지정(초단위)

     : 트랜지션이 적용될 시간을 설정   

       

   - transition-delay: 시간

     : 트랜지션 시작 시간의 지연시간을 설정

     : 사용할 수 있는 지연시간은 초나 밀리초

     : 기본값은 0s 임

     

   - transition-timing-function

     : 트랜지션 효과의 속도를 지정할 수 있음

     : 설정 함수명

       1. linear : 시작에서 끝까지 똑같은 속도로 진행

       2. ease : 처음에는 천천히 시작하고 점점 빨라지다가 마지막엔 천천히

       3. ease-in : 트랜지션 시작을 느리게

       4. ease-out 트랜션을 느리게 끝냄

       5. ease-in-out : 느리게 시작하고 느리게 끝냄

     

   - transition : 위의 4가지를 동시사용, 필수(duration)

       : transition: all 2s linear 1s

 

<!DOCTYPE html>
<html>
<head>
<title> transition  </title>
<meta charset="utf-8" />
<style>
	#outer > div {
		width: 100px;  height: 100px;
		text-align: center;
		padding: 5px;
		margin: 5px 10px;
		color: white;
		background: black;
		font-size: 30px;
		font-weight: bold;
	}
	#outer:hover > div {
		width: 500px;		
	}
	#outer:hover > .ease { transition: 5s ease; }
	#outer:hover > .linear { transition: 5s linear; }
	#outer:hover > .ease-in { transition: 5s ease-in; }
	#outer:hover > .ease-out { transition: 5s ease-out; }
	#outer:hover > .ease-in-out { transition: 5s ease-in-out; }

</style>
</head>

<body>
<div id="outer">
    <div class="ease"> ease </div>
    <div class="linear"> linear </div>
    <div class="ease-in"> ease-in </div>
    <div class="ease-out"> ease-out </div>
    <div class="ease-in-out"> ease-in-out </div>
</div>
</body>
</html>

 

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

 

transition

The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.

developer.mozilla.org

 

저작자표시 (새창열림)

'HTML & CSS' 카테고리의 다른 글

CSS-Transformations  (0) 2020.07.09
CSS - 가상선택자  (0) 2020.07.08
CSS - Flex  (0) 2020.07.05
CSS(Position)  (0) 2020.07.02
CSS (inline-block and block)  (0) 2020.07.01

가상 선택자

CSS에는 가상 요소(:pseudo-element)와 가상 클래스(:pseudo-class)가 있다. 이것들을 사용해서 html 문서의 수정 없이 CSS만으로 디자인적 요소를 추가할 수 있어 html 문서에 쓸데없는 태그를 사용하여 화면 리더기 등에 쓸데없는 정보가 읽히거나 불필요한 클래스를 남발해 코드 가독성을 낮추지 않게 한다.

 

 

선택자:가상클래스 { property: value; }

 

 

앵커 가상 클래스

앵커 가상 클래스는 화면의 특정 요소에 커서가 향했을 때 특정 디자인을 입혀주는 등 어떤 요소에 동적인 스타일을 입혀준다.

앵커 가상 클래스에서 가장 자주 쓰이는 패턴이다. :link는 아직 방문하지 않은 링크를 나타낸다. 다음을 사용해서 아직 방문하지 않은 링크를 파란색으로, 방문한 링크는 밑줄 없이 보라색으로 표현할 수 있다.

 

 

a:link { color: blue; }

a:visited { color:purple; text-decoration: none; }

몇가지 앵커 가상 클래스는 사용자의 행동에 영향을 받는다.

a:hover { color: red; }

a:active { color: gray; }

a:focus { color: yellow; }

 

 

  • :hover : 사용자가 해당 요소에 커서를 가져다 댔을 때
  • :active : 요소가 활성화 되었거나 클릭 되었을 때
  • :focus : 해당 요소에 키보드 포커스가 맞춰졌을 때

 

순서에 따른 가상 클래스

가상 클래스의 장점 중 하나는 오직 CSS를 주기 위해 클래스를 추가할 필요가 없다는 것이다.

 

 

  • :first-child : li 중 첫번쩨 요소에 해당 CSS를 적용한다.
  • :last-child : li 중 마지막에 해당 CSS를 적용한다.
  • :nth-child(n) : li 중 n번쩨 요소에 해당 CSS를 적용한다.

ol li:first-child { border-top: none; }

ol li:last-child { border-top: none; }

ol li:nth-child(2) { border-top: none; }

가상 요소

 

가상 클래스가 실제로 존재하는 요소에 클래스 추가 없이 디자인을 입히기 위한 것이라면, 가상 요소는 아예 실제로 존재하지 않는 요소를 만들게 해준다.

선택자::가상요소 { property: value; }

  • ::first-line : 해당 가상 요소는 텍스트의 첫번째 줄에만 특정 스타일을 입혀준다. 문장의 첫 줄은 상위 요소의 크기나 브라우저의 크기에 따라 달라질 수 있으니 주의하자.

p::first-line { color: #ff0000; font-variant: small-caps; }

 

  • ::first-letter : 이 요소는 텍스트의 첫 문자에 특정 스타일을 입혀준다. 미디엄 글 맨 상단에 있는 이런 스타일을 입힐 때 좋다.

 

p::first-letter { color: #ff0000; font-size: xx-large; }

 

::before 과 ::after 요소

이 요소들은 생성된 콘텐츠의 내부에 삽입된다. 이 요소는 특정 요소를 풍부하게 하는데 좋다. 보통 이미지나 글, 그라데이션 등을 삽입하는 경우가 많다.

 

h1::before { content: 'hello'; }

h1::after { content: url("images/marker-right.gif"); }

 

이전에 구현했던 박스 모델도 이 요소를 이용해 만들었다.

 

 

 

위 선택자들을 직접 체험해 보고 싶다면 다음 사이트에 들어가 try it yourself를 통해 체험해보자.

  • 가상 클래스

https://www.w3schools.com/css/css_pseudo_classes.asp

 

CSS Pseudo-classes

CSS Pseudo-classes What are Pseudo-classes? A pseudo-class is used to define a special state of an element. For example, it can be used to: Style an element when a user mouses over it Style visited and unvisited links differently Style an element when it g

www.w3schools.com

https://www.w3schools.com/css/css_pseudo_elements.asp

 

CSS Pseudo-elements

CSS Pseudo-elements What are Pseudo-Elements? A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to: Style the first letter, or line, of an element Insert content before, or after, the content of an element Syn

www.w3schools.com

 

저작자표시 (새창열림)

'HTML & CSS' 카테고리의 다른 글

CSS-Transformations  (0) 2020.07.09
CSS-Transition  (0) 2020.07.09
CSS - Flex  (0) 2020.07.05
CSS(Position)  (0) 2020.07.02
CSS (inline-block and block)  (0) 2020.07.01

justify-content 수평으로 적용

align-item 수직으로 적용

flex-direction  : row 면 justify-content 수평으로 적용, align-item 수직으로 적용

flex-direction  : column 이면 justify-content 수직으로 적용, align-item 수평으로 적용

 

justify-content 속성

  • flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
  • flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
  • center: 요소들을 컨테이너의 가운데로 정렬합니다.
  • space-between: 요소들 사이에 동일한 간격을 둡니다.
  • space-around: 요소들 주위에 동일한 간격을 둡니다.

align-item 속성

  • flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
  • flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
  • center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
  • baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
  • stretch: 요소들을 컨테이너에 맞도록 늘립니다.

 

flex-direction 속성

  • row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
  • row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
  • column: 요소들을 위에서 아래로 정렬합니다.
  • column-reverse: 요소들을 아래에서 위로 정렬합니다.

order 속성

    order: 순서;  

    HTML 구조와 상관없이 순서를 변결할 수 있기 때문에 유용하다.

 

 

align-self 속성

  • flex-start: Item을 각 줄의 시작점(flex-start)으로 정렬
  • flex-end: Item을 각 줄의 끝점(flex-end)으로 정렬
  • center: Item을 가운데 정렬
  • baseline: Item을 문자 기준선에 정렬
  • stretch: Container의 교차 축을 채우기 위해 Item을 늘림

 

flex-wrap 속성

  • nowrap: 모든 요소들을 한 줄에 정렬합니다.
  • wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
  • wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

flex-flow 속성

  • flex-direction : Items의 주 축(main-axis)을 설정  row
  • flex-wrap: Items의 여러 줄 묶음(줄 바꿈) 설정   nowrap

 

align-content 속성

  • lex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
  • flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
  • center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
  • space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
  • space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
  • stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.

 

 

플렉스 연습 사이트입니다.

https://flexboxfroggy.com/#ko

 

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

 

 

그리드 연습 사이트입니다.

https://cssgridgarden.com/#ko

 

Grid Garden

A game for learning CSS grid layout

cssgridgarden.com

그리드 배우기

https://gridbyexample.com/

 

Grid by Example

CSS Grid Layout This site is a collection of examples, video and other information to help you learn CSS Grid Layout. Developed and maintained by Rachel Andrew.

gridbyexample.com

 

저작자표시 (새창열림)

'HTML & CSS' 카테고리의 다른 글

CSS-Transition  (0) 2020.07.09
CSS - 가상선택자  (0) 2020.07.08
CSS(Position)  (0) 2020.07.02
CSS (inline-block and block)  (0) 2020.07.01
CSS  (0) 2020.06.30

+ Recent posts

티스토리툴바