FrontEnd/css

1.수평정렬 1 2 3 inline요소 1 2 3 블록요소 1 2 3 flex 1 2 3   1 2 3 inline요소 1 2 3 블록요소 1 2 3 flex 1 2 3 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스     2.수직정렬 ..

1.flexdisplay: flex; justify-content: space-around;로 요소를 동적으로 변화할때 유연한 레이아웃을 구현할수있다. 1 2 3 4 1 2 3 4 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스      2.Flexbox  속성2-1.flex-direction row(기본값) 1 2 3 4 row-reverse 1 2 3 4 column 1 2..

1.반응형 레이아웃layout을 방문자의 화면 해상도를 고려해서 만드는것    2.viewport웹페이지의 가시영역을 의미 디바이스의 특성과 디바이스의 화면 크기 등을 고려하게한다.       3.@media서로 다른 미디어 타입에 style을 지정할수있게한다.@media 미디어_타입 and (조건) { /* 조건이 만족될 때 적용될 CSS 스타일 */} 3-1.미디어 타입all : 모든것print :인쇄secreen : 화면기반장치(컴퓨터,태블릿,스마트폰) 3-2.조건width / height: viewport의 너비와 높이min-width / max-width: 최소/최대 너비min-height / max-height: 최소/최대 높이orientation: 화면의 방향 (portrait 또는 l..

1.Header, Navigation Bar 메뉴1 메뉴2 메뉴3 메뉴4 Aside 부가정보1 부가정보2 부가정보3 부가정보4 ..

1.웹폰트 사용1-1.CDNCDN 링크를 사용하여 웹폰트를 사용hello worldhello world" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스   1-2.서버 폰트로딩폰트 파일을 직접 서버에 업로드후 사용하는 방식

트랜스폼트랜지션, 애니메이션하고 함께사용요소의 움직임을 표현" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스             🎈참고자료https://www.w3schools.com/css/css3_2dtransforms.asp

1.@keyframesfrom{}에 애니메이션 시작시점to{}에 에니메이션 종료시점@keyframs rule을 정한다. " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스      %를 통해 %단위로 키프레임을 삽입할수있다." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스     2.animation-name@keyframes 뒤에 애니메이션 이름을 프로퍼티값으로 사용한다. 1개 이상의 값을 가질수있다." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스     3.animation-duration한 싸이클의 애니메이션시간을 지정  4. animation-timing-function애니메이션 효과 수치함수 지정   5.animat..

트랜지션CSS 프로퍼티의 값이 변화할 때 일정시간에 걸쳐 일어나게 하는것 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스    1.transition-property트랜지션의 대상 CSS 프로퍼티명 지정 (기본값 all) " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스    2.transition-duration트랜지션이 일어나는 지속시간각각 프로퍼티에 따라 1대1로 대응된다." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스   3.transition-timing-function기본값 ease로 트랜지션의 효과리듬을 정한다. " data-ke-type="html">H..