미디어쿼리란? PC, 모바일, 태블릿 등 다양한 사이즈의 기기에 대응되는 반응형/적응형 웹사이트를 제작하기 위해 사용되는 CSS 구문 주의사항 미디어쿼리가 제대로 작동하지 않는 문제에 대비하여 메타 태그를 작성한다. * 메타 태그: 해당 문서에 대한 정보를 정의 (head 내부에 작성) // viewport: 기기의 화면을 의미 // width를 기기 화면 width로 치환 // 비율: 1.0 형식 min-width, max-width로 브라우저의 가로폭을 설정한다. 설정한 가로폭이 되었을 경우 {} 내부 css 속성으로 대체한다는 의미. /* 원본 속성 */ .medianame { width: 800px; height: 800px; background-color: green; } /* 반응형 */ @m..
Frontend
#1 Type 기존에 존재하는 특정 태그에 스타일을 적용 #2 Class 클래스 이름을 이용하여 스타일을 적용 (별명 개념으로 미리 지정한다.) // class hello world #3 ID ID를 이용하여 스타일을 적용 (태그 이름 개념) // id hello world
#1 Inline Style Sheet 태그 안에 직접 스타일을 적용 h1 #2 Internal Style Sheet #3 External Style Sheet 태그를 이용해 불러오기 > html, css 파일을 따로 관리하여 가독성이 높고 유지보수가 쉽다.
#1 transform rotate(deg); 입력한 각도만큼 회전 scale(width, height); 확대(비율) skew(x-deg, y-deg); 비틀기 translate(x, y); 좌표 변경 prefix 접두사 다른 버전의 브라우저에서의 실행을 원할 경우 transform의 앞에 prefix 접두사를 붙인다. #2 transition transition-property: ; 적용하고자 하는 css 속성 transition-duration: ; 효과가 나타나는 데 걸리는 시간 transition-timing-function: ; 효과의 속도 (linear: 일정하게) transition-delay: ; 딜레이 /* 위 두 가지 종합 */ #3 animation transition과 유사함 an..
