css4 [HTML&CSS] 반응형 웹 - 미디어쿼리 Media Query 미디어 쿼리란? PC 뿐만 아니라 모바일과 태블릿에도 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문이다. 화면 크기마다 각각 다르게 CSS를 적용한다. 미디어 쿼리 지정 방법 HTML 파일 내 내 태그에 media 속성 지정 css 파일 내 @media 지정 css 파일 내 import 미디어쿼리 작성 1. HTML 파일 내 내 태그에 media 속성 지정 2. css 파일 내 media 작성 방법 @media (조건1) and (조건2) {} - 조건문는 min-,max- 옵션을 줄 수 있음 - 미디어 유형으로는 all (모든 장치), print, screen, speech 등이 있다 뷰포트 viewport : 너비와 배율을 설정할 때 사용하는 메타 태그의 속성 - 브라우저에서 .. 2022. 4. 7. [CSS] CSS3 애니메이션 - Transform, Transition, Animation CSS3 Transform Transition Animation 1. Transform - 요소를 회전, 크기 변경 및 각도와 위치 변경 시 사용 rotate scale skew translate - rotate(angle): 입력한 각도만큼 회전, 음수 입력 가능 - scale(x, y): width를 x배, height를 y배만큼 확대 (축소 시 소수점 값 입력) - skew(x, y): x축, y축을 기준으로 입력한 각도만큼 비틂 - translate(x, y): 선택한 요소의 위치 변경 prefix 접두사 - Transform은 CSS3의 최신 버전에서만 실행 가능하기 때문에 접두사의 사용으로 각 하위 버전 브라우저의 실행 가능 2. Transition - 변화하고자 하는 과정을 보여주고자 할 때.. 2022. 4. 7. [HTML&CSS] 웹사이트 레이아웃 박스 모델 margin과 padding의 차이 - 각 요소 간 border 간격을 margin, border와 요소 간 간격(콘텐츠 안쪽 여백)을 padding 예시) .margin-left: border 바깥쪽에서 왼쪽에 여백을 만듦 .padding-left: border 안쪽에서 왼쪽에 여백을 만듦 top, right, bottom, left 여백을 만들 수 있다 top right bottom left 순서로 한 줄에 작성 가능 (시계 방향) 태그가 대표적 줄 바꿈 현상 공간 만들기 가능 (width, height 값 사용 가능) 상하 배치 작업 가능 (margin, padding 값 사용 가능) Inline 요소의 특징 줄 바꿈 현상 없음 width/height 값 적용 불가 margin /padd.. 2022. 4. 5. [CSS] CSS 개념 및 구성 요소 CSS란? CSS는 Cascading Style Sheet의 약자로, HTML로 작성된 정보를 꾸며주는 언어이다. CSS 구성 요소 선택자 { 속성 : 속성값; } - 선택자: 디자인을 적용할 HTML 영역 - 속성: 어떤 디자인을 적용할지 정의 - 속성 값: 어떤 역할을 수행할지 구체적으로 명령 CSS 속성 (Property) h1 { font-size: 10px; /* 폰트 사이즈 */ font-family: sans-serif; /* 글꼴 */ color: blue; /* 폰트 색깔 */ background-color: pink; /* 배경색 */ text-align: center; /* 텍스트 정렬 */ } CSS 연동 방법 Inline Style Sheet Internal Style Sheet .. 2022. 4. 5. 이전 1 다음