Amazing Story

13. 애니메이션- 요소에 적용되는 CSS 스타일을 다른 스타일로 부드럽게 전환할 수 있다.- 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키 프레임들로 이루어짐. ■ 속성- animation-name: 호출할 애니메이션 이름작성- animation-duration: 애니메이션시간- animation-delay: 딜레이시간- animation-direction: 애니메이션 진행방향(alternate, normal)- animation-iteration-count:반복횟수(숫자 또는 infinite(무한반복)) ■ keyframe 사용한 애니메이션 룰 작성법- keyframe 룰을 이용하여 애니메이션 패턴을 지정하고 요소에서 애니메이션 패턴을 호출 @keyframes..

12. 트랜지션(transition) - 요소가 이벤트에 의해 값이 바뀔 때 애니메이션을 생성 ■ 속성 - trnasition-delay : 이벤트 발생 후 딜레이 시간 - transition-duration: 트랜지션 지속시간 - transition-property : 트랜지션 할 속성 - transition-timing-function : 속도변형 함수 (참고) http://cubic-bezier.com/ 사이트에서 transition 속성값을 생성할 수 있음) ■ 적용할 수 있는 커브 라이브러리의 종류 (위 사이트 참조) - linear(기본값 = 등속) - ease - ease-in - ease-out - ease-in-out ■ 효과를 줄 수 있는 속성들의 예 1) 위치 : top, left, ..

11. 가시성- 요소를 화면에서 보이거나 감출 수 있음 ※ 아래와 같은 예제로 visibility 속성과 display를 적용해 보겠습니다. 가시성 속성을 적용하기 전에는 빨간색과 초록색의 상자가 위아래로 나란히 있는 상태입니다. 123456789101112131415161718가시성 *{margin:0; padding:0;} .box1{width: 300px; height: 100px; background-color: #f00;} .box2{width: 300px; height: 100px; background-color: #0f0;} 적용 전 (1) visibility- 요소를 화면에서 show/hide 시킬 수 있으며 hidden visible 값을 사용- 화면에서 가려지나 자리를 지키고 있음 ■ ..

9. 플로트(Float)(1) 플로트의 개념- 플로트는 블록, 인라인 요소를 좌우 정렬한다.(기준은 부모요소를 기준으로)- 플로트가 적용되면 자신의 자리를 다음에 오는 블록요소에게 내어준다.- 플로트요소는 플로트요소끼리만 정렬하며 일반요소와는 정렬하지 않음- 예시) float: left; (2) 플로트와 일반요소가 함께 있는 경우■ 작성법- float에 적용하는 값은 left, right- 플로트 적용시 자신이 있는 위치에서 부모요소를 기준으로 왼쪽 또는 오른쪽 정렬을 한다.- 자신의 자리를 다음 요소에게 내어줌. 다음에 오는 요소는 플로트 요소 아래에 배치됨 ■ 예시1 123456789101112131415161718192021222324252627282930313233343536Float *{marg..

오늘은 코딩 기초를 공부하기에 좋은 사이트를 추천해드리려고 합니다.이고잉님의 강의도 들을 수 있고,웹의 개념에 대해서도 잘 정리 할 수 있는 완전 강추바로생활코딩 입니다. 메인 페이지는 다음과 같습니다.생활코딩에서 볼 수 있는 강의목록은 다음과 같습니다. 한눈에 봐도 언어별로, 서버-클라이언트 별로, 개발도구 및 프로젝트 관리까지!!정말 다양하게 준비가 되어 있는데요. 저도 웹 프로그래밍에 처음 입문할 때 한 차례씩 보기 시작했던 HTML 코스!새록새록하네요물론 완전 졸업은 아니에요~ 모르는 거 있을 때마다 잠깐잠깐 찾아보거나, 강의 듣기가 좋답니다.영상도 너무 길지도 짧지도 않게 10분이라~짬짬히 공부하기가 참 좋습니다. 특히, 먼저 공부하셔야 할 것들입니다없습니다. 여기서 시작하시면 됩니다! 아무 준..

8. z-index- 포지션을 적용한 요소는 z-index(레이어개념)를 사용할 수 있음- z-index 미적용시 가장 마지막에 작성한 요소가 가장 상위에 배치됨- z-index는 0을 기준으로 음수 양수 입력이 가능하며 수치값이 높을 수록 상위에 배치- 일반적인 z-index입력수치는 양수값을 기준으로 작성- 계층구조에서 z-index는 상위요소의 z-index에 종속됨. 즉 상위요소의 z-index보다 수치가 높더라도 상위요소의 z-index보다 우선하지 않음 ■ 예시 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162z-index *{margin..

7. 포지션이란- 요소를 화면에 배치하기 위한 기법으로 기준점을 이용하여 요소를 특정 위치에 배치하는 방법- 기준점 및 배치방법에 따라 절대포지션, 상대포지션, 고정포지션 세가지 방법을 사용(1) Position 종류- Absolute Position(브라우저 또는 상위요소를 기준으로 배치하는 방법)- Relative Position(자기자신을 기준으로 배치하는 방법)- Fixed Position(스크린을 기준으로 배치하는 방법) (2) Position사용시 기준좌표 입력방법- 포지션 적용시 기준이 되는 요소의 Edge중(이때 Edge는 top, right, bottom, left)로부터 자기자신의 Edge까지의 거리값을 입력(3) Position 요소 z-index- 포지션을 적용한 요소는 포토샵의 레..

6. 디스플레이- 브라우저가 요소를 화면에 나타내는 방법을 제어하는 속성으로 block, inline, inline-block 등이 있다. (1) Block 요소- 블록요소는 줄바꿈이 되어 표현됨- 블록요소의 가로크기는 부모요소만큼 적용- 블록요소의 높이는 콘텐츠 크기만큼 적용- 블록요소에 width값을 적용하여 부모요소의 가로 크기보다 작더라도 가로전체는 해당요소의 영역으로 유지- 블록요소는 마진과 패딩을 적용할 수 있고 다른 블록요소에 영향을 줌 ■ 예시1 123456789101112131415161718192021디스플레이 속성 .box{border: 10px solid #000;} .box p{border: 3px solid #f00;} .box .b1{width: 500px;} .box .b2{..

(8) text-align- 인라인 요소의 가로정렬을 표시- 인라인 요소는 텍스트, 이미지, 폼요소- 스타일은 인라인 요소를 감싸는 "블록" 요소에 작성- 사용하는 값은 left, center, right, justify를 사용한다. ■ 예시1 12345678910111213141516171819202122232425262728text 스타일 *{margin:0; padding: 0;} .align{border:2px solid #333;} .right{text-align: right;} .center{text-align: center;} .justify{text-align: justify;} text-align 왼쪽 오른쪽 가운데 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌..

5. 타이포그래피(Typhography)- 글자와 문단의 속성을 제어하며 다음과 같은 스타일을 사용한다(1) 스타일 종류 1) 글자가. font-family나. font-size다. line-height라. font-weight마. font-style바. font-variant 2) 문단가. text-align(인라인 요소의 가로정렬 셋팅)나. text-indent(들여쓰기)다. text-decoration(글자장식 밑줄)라. text-transform(대문자 소문자)마. vertical-align(인라인 요소의 수직위치 정렬)바. letter-spacing(자간)사. word-spacing(단어와 단어사이)아. white-space(공백문자처리)자. word-break(줄바꿈처리) (참고)상속이란- 부..