CSS 28

CSS 트랜지션(transition)

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, ..

IT/CSS 2018.08.03

CSS 가시성 제어 - visibility, display, overflow

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 값을 사용- 화면에서 가려지나 자리를 지키고 있음 ■ ..

IT/CSS 2018.08.02

CSS 플로트(float)

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

IT/CSS 2018.08.01

CSS z-index

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

IT/CSS 2018.07.28

CSS 포지션 - absolute, relative, fixed

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

IT/CSS 2018.07.27

CSS 디스플레이 - block, inline, inline-block

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{..

IT/CSS 2018.07.26

CSS 타이포그래피(Typhography)2 - text style

(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 왼쪽 오른쪽 가운데 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌..

IT/CSS 2018.07.25

CSS 타이포그래피(Typhography) - font style

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(줄바꿈처리) (참고)상속이란- 부..

IT/CSS 2018.07.24

CSS 박스모델 - 배경(background)

(7) 배경(background)- 배경속성은 마진영역을 제외한 박스영역에 설정할 수 있고 다음과 같은 속성이 있음 (요약) 배경속성의 종류가. background-color나. background-image다. background-repeat라. background-position마. background-attachment바. background-size ※ 예제를 시작하기 전에 준비물을 알려드리려고 합니다. 저는 설명을 위해 20px*20px의 하트 이미지를 사용했어요. 크기는 상관없고, 실습용 이미지를 준비해주세요^^ 가. background-color- 모든박스의 배경색은 투명이며, 폼요소는 배경색이 미리 지정되어 있음- 요소를 투명하게 만들려면, background-color: transpare..

IT/CSS 2018.07.23

CSS 박스모델 정리

(6) 박스모델 정리 1) width - 입력한 크기만큼만 적용됨- 부모요소의 width값을 그대로 사용2) 배경색 : 콘텐츠 영역(width, height) + padding + 테두리※ margin, padding, border를 각 크기를 주지 않을 경우에는 배경색을 주었을 때, 모두를 포함해서 배경색으로 나타납니다. ■ 예시1 1234567891011121314151617박스모델 정리 *{margin:0; padding:0;} .test1{background-color:#f00;} .test2{background-color:#0f0; width:300px;} width 콘텐츠 width값 입력한 경우 ■ 실행결과1 3) 자식요소는 부모요소의 width값을 사용함. 상속받음. 4) 자식의 넓이가 부..

IT/CSS 2018.07.22