1. 반응형 웹 - 다양한 화면 크기의 디바이스(PC, 모바일, 태블릿 등)에서 웹 서비스를 제대로 보여주기 위한 기술 또는 개념 반응형 웹의 일반적인 조건 - 데스크탑, 태블릿, 모바일에 대해 각각의 기기에서 문제없이 동작해야 함 - 사용자가 서로 다른 기기(다양한 크기의 화면)에서 접속시 즉시 반응하여 화면의 내용을 보여주어야 함 2. 뷰포트(viewport) - 일반적으로 모바일 기기에 적용하기 위해 생성된 개념 - 가상의 윈도우(화면)에 웹 페이지를 렌더링하여 확대/축소/스크롤 등을 하기 위한 가상 렌더링 화면 - 기본적으로 데스크탑 브라우저에서는 viewport를 사용하지 않기 때문에 무시됨 데스트탑(viewport) vs 모바일(viewport) - 데스트탑 : 브라우저 창이 곧 viewpor..

1. Flex(Flexible Box)의 개념 - Flex는 요소의 크기가 서로 다르거나 동적인 경우 효율적으로 요소를 정리하기 위해 고안된 레이아웃 방법 중 하나 - Flex는 Container와 Item 두가지 개념이 있다. Container Items를 감싸는 부모 요소 박스를 의미 Items 각 요소를 의미하며, 반드시 Container 자식으로 존재해야 함 2. Flex Items 요소의 속성 order Flex Item의 순서를 설정 flex-grow Flex Item의 증가 너비 비율을 설정 align-self 교차 축(cross-axis)에서 아이템의 정렬 방법을 설정 flex flex-grow, flex-shrink.. 축약형 ..... 3. order(row, column) - Flex..

1. Flex(Flexible Box)의 개념 - Flex는 요소의 크기가 서로 다르거나 동적인 경우 효율적으로 요소를 정리하기 위해 고안된 레이아웃 방법 중 하나 - Flex는 Container와 Item 두가지 개념이 있다. Container Items를 감싸는 부모 요소 박스를 의미 Items 각 요소를 의미하며, 반드시 Container 자식으로 존재해야 함 2. Flex Container 요소의 속성 display 컨테이너를 수직/수평 방향으로 정렬 flex-direction 아이템들의 주축(main-axis) 정렬 방향(수직/수평)을 설정 flex-wrap 아이템들의 줄묶음(줄 바꿈) 설정 justify-content 주축(main-axis)의 정렬 방법을 설정 align-content 교차 ..

1. CSS 애니메이션 - 웹 페이지를 보다 시각적으로 역동적이게 움직이게 하기 위한 스타일 기능 - 이 속성은 블록 요소(Block Element)를 기본으로 하여, 일반적으로 div 블록을 사용 * 애니메이션의 대표적인 속성 transform 트랜스폼은 요소 이동, 크기 변경, 위치, 색상 등 속성 변경 수행 transition 트랜지션은 시간 경과에 따라 하나의 속성 상태가 다른 속성 상태로 변형 transform과 transition이 짝이고, @keyframe와 animation이 짝이다 @keyframe 키프레임 애니메이션을 만들 수 있도록 해주는 블록 키워드 animation 키프레임 애니메이션 실행을 위해 CSS에 설정해주는 속성 2. transform / transition transfo..

1. 가로 가운데 정렬 방법 margin 이용 가로 가운데 정렬 방법 margin-left: auto; margin-right: auto; margin: 0 auto; margin: 0 auto 0 auto; text-align 이용 가로 가운데 정렬 방법 - 부모에 스타일 적용해야 함 text-align: center; // left, right 단, 자식 박스는 반드시 display: inline-block; or inline; 여야 한다. position/transform 이용 가로 가운데 정렬 방법(박스 높이를 모를 경우) - 부모에 스타일 적용해야 함 position: relative; left: 50%; transform: translateX(-50%); display flex 가로 가운데 정..

1. float 속성 - float 사전적 의미는 뜨다, 띄우다, 뜨는 물건, 부유물 이라는 의미이다. - 태그에 플로팅 속성을 준다면, 다른 태그에 영향 없이 왼쪽 또는 오른쪽으로 정렬하여 띄운다는 기본속성을 가짐 - 단, 위 또는 아래에 태그가 있거나 부모 태그가 있다면 예상치 못한 상황이 발생할 수 있는 것에 주목 left 요소를 왼쪽으로 정렬 right 요소를 오른쪽으로 정렬 2. clear 속성 - float 속성을 적용하면 그 이후에 오는 다른 요소들까지 똑같은 속성이 전달되어 둘러싼 형태가 되거나 부유된 영역 아래(under)로 들어가게 된다. - 이러한 문제를 해결하기 위해 그 전의 상태로 돌릴 경우 사용한다. both 오른쪽/왼쪽 취소(가장 많이 사용) left 왼쪽 취소 right 오른..