림이의 개발일지 림이의 개발일지

미디어 쿼리 이해하기 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 함 예제) 미디어쿼리 (브라우저 크기에 따라 사진 배치가 달라짐) 일 분 전만큼 먼 시간은 없다. - Jim Bishop 웃음은 마음의 조깅이다. - Norman Cousins 낡은 옷은 그냥 입고 새 책을 사라. - Austin Phelps 미디어 쿼리 조건 브라우저 크기에 따라 스타일이 적용됨 예제) 미디어쿼리 (픽셀 크기에 따라 이미지 변환) 화면 회전 브라우저 크기에 따라 화면 방향이 달라지게 스타일이 적용됨 예제) 미디어 쿼리 (화면 가로,세로 크기에 따라 색깔이 변함) Media Query 미디어 쿼리 중단점 만들기 중단점(breakpoint) : 서로 다른 css를 적용할 화면 크기 미디어 쿼리 적용하기 외부 css..

모바일 기기와 웹 디자인 반응형 웹 디자인 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹 사이트를 표시하는 방법 반응형 웹 디자인의 장단점 장점 모든 스마트 기기에 접속 가능 단점 반응형 웹 기술이 최신 웹 표준인 CSS3의 일부 뷰포트(viewport) : 실제 내용이 표시되는 영역 가변 그리드 레이아웃 그리드 시스템 화면을 여러 개의 칼럼으로 나누어, 필요할 때마다 칼럼들을 묶어 배치하는 방법 고정 그리드 레이아웃일 경우 -레이아웃 고정 (화면 너비가 좁아질 경우 내용의 일부가 가려질 수 있음) 예제) 고정 그리드 레이아웃 가변 비디오 -CSS를 사용해 max-width 속성을 100%로 지정 예제) 가변 비디오 (동영상이 부모 요소만큼 커지거나 작아짐)

트랜지션이란 웹 요소의 스타일 속성이 조금씩 자연스럽게 바뀌는 것 transition-property 속성 트랜지션을 적용할 속성 선택 (이 속성을 지정하지 않으면 모든 속성이 트랜지션 대상이 됨) ransition-duration 속성 트랜지션 진행 시간 지정 예제) transition-duration (상자가 2초동안 너비,높이 커짐) transition-timing-function 속성 트랜지션의 시작과 중간, 끝에서의 속도 지정 transition-delay 속성 트랜지션이 언제부터 시작될지 지연 시간 지정 예제) transition-delay (상자가 순차적으로 굴러감) no-delay delay 예제) transition (상자가 돌아가면서 크기, 색깔이 바뀜) 예제) transition (상..

변형 translate 함수 지정한 방향으로 이동할 거리를 지정하면 해당 요소를 이동시킴 예제) translate (지정된 위치 이동) scale 함수 지정한 크기만큼 요소를 확대/축소 예제) scale ( 확대or축소) rotate 함수 각도만큼 웹 요소를 시계 방향이나 시계 반대 방향으로 회전 예제) roatate (각도만큼 회전) skew 함수 요소를 지정한 각도만큼 비틀어 왜곡 예제) skew (지정된 방향으로 각도만큼 비틀기) transform-origin 속성 특정 지점을 변형의 기준으로 설정 예제) origin (특정지점을 기준으로 변형) perspective 속성 원근감을 갖게 함. 속성 값은 0보다 커야 하며 값이 클수록 사용자로부터 멀어짐. 예제) perspextive (원근감을 주면서..

연결 선택자 하위 선택자 부모 요소에 포함된 모든 하위 요소에 스타일이 적용된다. 자식 선택자 자식 요소에 스타일을 적용하는 선택자 두 요소 사이에 ‘>(부등호)’를 표시해 부모 요소와 자식 요소를 구분 예제) 자식 요소만 적용 예약 방법 및 요금 직접 통화 문자 남기기 1인 : 40,000원 2인 : 60,000원 3인 : 80,000원 4인 : 100,000원 속성 선택자 [속성] - 지정한 속성을 가진 요소를 찾아 스타일 적용 예제) 속성 선택자 메인 메뉴 : 메뉴 1 메뉴 2 메뉴 3 메뉴 4 [속성 = 값 ] - 주어진 속성과 속성 값이 일치하는 요소를 찾아 스타일 적용 예제) 속성=값 선택자 HTML5 표준한 사이트 HTML CSS Selector Level 3 미디어쿼리 [속성~=값 ] - ..

웹과 멀티미디어 웹 브라우저에서 직접 재생할 수 없는 자바 애플릿이나 PDF, 플래시 무비 등 삽입 (object 태그를 지원하지 않는 브라우저에는 태그 사용) 오디오 & 비디오 재생하기 배경 음악이나 효과음 등 오디오 재생 웹 문서에 비디오 파일 삽입 여러 코덱의 파일을 지정해서 파일 열기에 도와줌 비디오에 외부 자막 파일을 연결하는 태그 WebVTT 자막 파일 자막이 나오게 해준다

HTML5 문서 대부분의 웹 사이트는 디자인은 다르지만 구조는 크게 다르지않다. → 그러므로 표준화 된 시멘틱 태그를 이용해 웹 문서를 작성하면 문조 구조를 보다 쉽고 정확하게 이해 할 수 있다. 문서 구조를 위한 HTML5 시맨틱 태그 Joandora 가장 제주다운 수산리집 이용 안내 객실 소개 예약 방법 예약 하기 요안드라 소개 요안드라는 게스트 하우스 (guest house) Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis impedit, illo similique voluptas culpa dolor consectetur corrupti voluptates dolore odio explicabo consequatur quis..

CSS 포지셔닝과 주요 속성들 CSS 포지셔닝이란 CSS를 웹 문서 요소를 적절히 배치하는 것 box-sizing 속성 박스 모델 너비 값의 기준을 지정함 float 속성 요소를 왼쪽이나 오른쪽에 떠 있게 만듦 예제) float (이미지와 글자 배치) 바쁜 3,4학년을 위한 빠른 분수 3,4학년이 꼭 알아야 할 분수를 한권에 모았어요! 한국 교육과정펵가원이 최근 발표한 보고서에 따르면'수포자'는 초등 3학년때 분수를 배우면서 시작된다고 합니다. 한국 교육과정펵가원이 최근 발표한 보고서에 따르면'수포자'는 초등 3학년때 분수를 배우면서 시작된다고 합니다. 예제) float (박스 한줄에 배치) 박스1 박스2 박스3 박스4 예제) float-left (헤드라인 목록 정리 할때 많이 쓰임) 애완견 종류 입양하..