HTML&CSS4 [CSS]미디어쿼리 미디어쿼리란? - 화면 크기가 다른 모바일이나 태블릿에도 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 css 구문 미디어쿼리 사용법 - @media - 가로폭이 최소 mid-width, 최대 max-width일 때 @media 내부에 입력된 css 속성으로 대체하겠다는 의미 미디어쿼리 주의사항 - viewport 미디어쿼리가 제대로 작동하지 않을 때 viewport로 너비와 배율을 설정해야 모바일에서 의도한 화면을 볼 수 있다. • width=device-width : 가로폭을 기기의 width로 설정 • initial-scale=1.0 : 초기 비율을 1.0으로 설정 css속성 상속 미디어쿼리는 외부 영역의 css속성을 상속받는다. 만약 상속받지 않고자 하면 none을 입력한다. 2023. 5. 24. [CSS]Transform, Transition, Animation Transform - 요소의 회전, 크기 조절, 기울이기, 위치 변경 등의 효과를 넣을 수 있다. • rotate(a deg): 입력한 각도만큼 회전. 음수 입력 가능 • scale(a,b): width를 a배, height를 b배 확대 • skew(a deg,b deg): x축 y축을 입력한 각도 만큼 비틂. • translate(a px, b px): 입력한 값 만큼 요소의 좌표 변경 Prefix 접두사 - transform은 css의 최신 기능이기 때문에 낮은 버젼의 브라우저에서의 실행을 원할 경우 prefix 접두사를 써준다. Transition - 요소의 변환 과정이 일정 시간에 걸쳐 서서히 나타나도록 하는 속성 • transition-property: 효과를 적용하고자하는 css 속성 • .. 2023. 5. 24. [HTML] Emmet 에밋 • 태그 자동완성 : Tab • 텍스트: {} hello • 자식 요소: > • 형제 요소: + • 반복: * • 그룹화: () • 클래스: . • 아이디: # • 속성: [attr] • 넘버링: $ 2023. 5. 18. [CSS]position과 display 속성 Position 속성 : 문서 상 요소를 배치하는 방법을 지정하는 속성 - static: 기본값, 왼쪽 상단부터 일반적인 흐름에 따라 배치 - relative: 원래 위치를 기준으로 상대적 배치 - absolute: 부모 요소를 기준으로 배치, 다른 요소에 영향을 미치지 않음 - fixed: 지정된 위치에 고정 - sticky: 특정 위치에 있다가 일정 스크롤 위치를 지나면 fixed와 같이 동작 Display 속성 - block: 전체 너비를 차지 - inline: 요소들을 한 줄에 표시 - none: 요소를 보이지 않도록 함 - flex: flexbox 모델을 위한 속성 값 2023. 5. 18. 이전 1 다음