JongDDA의 한걸음 한걸음씩

1. 미디어 쿼리 (media query) - 미디어쿼리는 CSS 모듈이다. (@media) - 사이트에 접속하는 기기 또는 크기와 같은 조건에 따라 특정 스타일 시트를 선택적으로 적용할 수 있도록 돕는다! - 미디어쿼리 사용의 기본형 @media 미디어유형 and 조건1 and 조건2 ... and 조거누{ } 2. 미디어 쿼리에 사용되는 값들 - 미디어유형 : 장치의 일반적인 범주(카테고리) => all(모든 유형), screen(컴퓨터 화면 대상), print(인쇄 결과물), speech(음성 낭독기 대상) - 조건 : 기기의 크기, 상태(기울기나 해상도)에 따라서 스타일을 특정지을 때 제시하는 조건

1. 반응형(responsive) 웹의 개념과 관련 기술 반응형 웹 또는 반응형 디자인 - 정의 : 사용자의 접속 환경에 맞추어 사이트 레이아웃이 변하는 웹 문서를 만들기 위한 디자인 - 반응형 웹은기기의 유형이나 크기에 따라 웹문서가 반응한다! 반응형 웹의 방식 1) 크기의 변화에 즉각 대응한다! (미디어쿼리) 2) 최초 렌더링 시 기기를 디텍팅하여 페이지 표시 방식 결정! 2. 반응형 웹을 위한 필수 개념, viewport - 개념 : 실제 화면의 크기 - 뷰포트가 다르면 웹문서 렌더링 시 사용하는 px 단위의 크기가 조금씩 다르다! => PC 모니터에서의 1px과 모바일에서의 1px은 똑같지 않다. - 웹문서 설정 시 뷰포트 관련 설정을 추가해주면, 기기별로 다른 px 단위 때문에 생기는 간극을 조..

1. CSS를 사용해 구현할 수 있는 동적인 변형(종류) - transform : 좌표 공간의 값을 변형하여 요소 형태를 바꾼다! - transition : 특정 속성에 대하여 값의 변경 시마다 애니메이션 효과를 적용한다! - animation : 프레임별 동작을 지정하여 애니메이션 동작을 적용한다! 2. transform : 대표적으로 네 가지 유형의 변형이 존재한다. - translate : x, y 축 값을 변경하여 축 이동 시킨다! - scale : x, y, 축 값을 확대 또는 축소한다! - rotate : 요소를 지정한 각도만큼 회전시킨다! - skew : 요소를 지정한 각도만큼 비튼다! 3. transition : 특정 속성에 대한 애니메이션 효과 - 속성 지정 후, 속성에 어떤 식으로 효과..

1. 의사 클래스 (pseudo class) 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태일 때만 만족한다는 의미이다! 가령 마우스 커서가 얹어져 있다거나, 마우스로 누르고 있는 상태라거나... 2. 의사 요소 (pseudo element) 선택자에 추가하는 키워드로, 선택한 요소의 일부분에 대해서만 스타일을 지정할 수 있다. 가령 요소의 앞부분이나 뒷부분에만 스타일 지정하는 식으로...