본문 바로가기
728x90
반응형

교육/CSS7

CSS 개발자 수업 59일차 - animation, flex 1. animation 2. flex 1. animation [ 정의 ] - 애니메이션은 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환 시켜준다. - 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임(@keyframe)들로 구성되어있다. - 트랜지션(transition)과 유사하지만, 훨씬 더 규모가 크고 복잡하며 다양한 기능을 가지고 있기 때문에 좀 더 정밀한 효과를 구현할 수 있다. [ 속성 ] 속성명 설명 animation-name 애니메이션의 중간상태를 지정하기 위한 이름을 정의한다. animation-duration 애니메이션의 적용 시간을 지정한다. animation-direction 애니메이션이 종료되고 진행 방향을 지정한다. animati.. 2021. 6. 21.
CSS 개발자 수업 58일차 - transform, transition 1. transform 2. transition 1. transform [ 정의 ] - 요소의 위치, 크기, 회전, 비틀기(왜곡) 변형을 지정할 수 있다. - transform: 값; [ 값(함수) 종류 ] 이름 설명 translate() 위치 변형 (position: relative와 유사하다.) scale() 배율(크기) 변형 rotate() 회전 변형 skew() 왜곡 변형 [ 예제 1 ] 이동하는 상자(translate) 확대하는 상자(scale) 각도기 상자(rotate) 왜곡된 상자(skew) [ 예제 2 ] 2. transition [ 정의 ] - 수치형 속성값에 한해서 객체의 속성(상태값)이 변화되는 과정을 시간 순으로 보여주는 기술 - 정해진 시간 동안 요소의 속성값을 부드럽게 변화시킬 .. 2021. 6. 20.
CSS 개발자 수업 57일차 - 가상 클래스 선택자, 속성 선택자, 전후 선택자, shadow 1. 가상 클래스 선택자 2. 속성 선택자 3. 전후 선택자 4. shadow 1. 가상 클래스 선택자 [ 정의 ] - 태그에 실제 클래스가 존재하지 않는다. - 태그에 불필요한 클래스를 추가할 필요가 없다. ( 언제든지 사용이 용이하다. ) [ 속성 ] 1) first-child : 자신이 첫째인 요소 2) last-child : 자신이 막내인 요소 3) nth-child(n) : 자신이 n번째인 요소(one-based index) 4) nth-last-child(n) : 자신이 거꾸로 n번째인 요소 - n: index + 수열 역할 - 2n: 0, 2, 4 ... - 2n+1: 1, 3, 5 ... - 키워드: even(짝수), odd(홀수) HTML CSS JavaScript Java Oralce .. 2021. 6. 20.
CSS 개발자 수업 56일차 오늘은 배운 내용은 없고, naver에서 컨텐츠 하나씩 선택 후 만들었습니다. 2021. 6. 17.
CSS 개발자 수업 55일차 - float, position, z-index 1. float 2. position, z-index 1. float [ 정의 ] - 해당 태그의 출력 방식을 따르지 않고, 원래 위치에서 벗어나 라인의 왼쪽/오른쪽 끝으로 이동한다. - left, right, none(default) - float이 적용되면 block 성질이 된다. (최상단 배치) [ 예제 1 ] 테스트입니다.(div) 테스트입니다.(span) [ 예제 2 ] 블럭 태그 상자1 상자2 상자3 인라인 태그 링크1 링크2 링크3 2. position, z-index [ 정의 ] - 태그의 출력되는 위치를 지정하는 속성 - 좌표값을 사용해서 요소의 위치를 지정한다. (x좌표, y좌표) - 좌표를 지정하는 방식이 여러개 존재한다.( 속성에 따라 원점(0,0)이 다르고, 요소 배치 방식도 다르.. 2021. 6. 17.
CSS 개발자 수업 54일차 - text, box, align, overflow, visibility, display, opacity 1. text, font 2. box 3. align 4. overflow 5. visibility, display, opacity 1. text, font [ 속성 ] 1) color - 텍스트 색상, 전경색(Fore Color) - 보통 웹 페이지에서는 #333333 ~ #666666을 많이 쓴다. (기본값인 Black은 잘 안쓴다.) 2) text-align - 텍스트 정렬 - 수평 정렬( left, center, right, justify ) - 내용물 수평 정렬( * 여기서 내용물은 모든 인라인 태그(문자열)을 뜻한다. ) 3) font-size - 텍스트 크기 4) line-height, word-spacing, letter-spacing - line-height : 줄과 줄 사이의 간격 - .. 2021. 6. 15.
728x90
반응형