Web/HTML&CSS5 [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. [HTML] HTML 기본 구조 및 태그 HTML이란? Hyper Text Markup Language의 약자로, 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어이다. 웹 구성 요소 HTML - 정보 또는 설계도 CSS - 디자인 또는 스타일링 JS - 기능과 효과 (슬라이드 or 팝업 효과 등) 웹사이트 제작 시 고려사항 1. 웹표준 - 웹사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격 2. 웹 접근성 - 장애 여부와 상관없이 모두가 웹사이트를 이용할 수 있게 하는 방식 3. 크로스 브라우징 - 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법 HTML 태그 기본 구조 컨텐츠 태그명 : HTML이 갖고 있는 고유 기능 콘텐츠 : 열린 태그, 닫힌태그 사이 내용물 속성 : HTML 태그가 갖고 있는.. 2022. 4. 5. 이전 1 다음