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

shopping-mall 1 공지사항 2021년 2월 무이자 할부 카드 안내 2021년 2월 무이자 할부 카드 안내 쿠폰 사용안내 2021년 2월 무이자 할부 카드 안내 갤러리 2021년 2월 무이자 할부 카드 안내 2021년 2월 무이자 할부 카드 안내 쿠폰 사용안내 2021년 2월 무이자 할부 카드 안내 나의 계정 헤이 음악 계정 추가 클라우드 shopping-mall 2 공지사항 2021년 2월 무이자 할부 카드 안내 2021년 2월 무이자 할부 카드 안내 쿠폰 사용안내 2021년 2월 무이자 할부 카드 안내 갤러리 2021년 2월 무이자 할부 카드 안내 2021년 2월 무이자 할부 카드 안내 쿠폰 사용안내 2021년 2월 무이자 할부 카드 안내 나의 계정 헤이 음악 계정 추가 클라우드 shoppi..

플렉스 박스 레이아웃과 기본 속성들 플렉스 박스 레이아웃 그리드 레이아웃을 기본으로, 플렉스 박스를 원하는 위치에 배치하는 것 여유 공간에 따라 너비나 높이, 위치를 자유롭게 변형할 수 있음 display 속성 -배치 요소들을 감싸는 부모 요소를 플렉스 컨테이너로 지정 예제) 플렉스 display ( 주축 방향으로 옆으로 붙는다) 1 2 3 flex-direction 속성 플렉스 항목 배치 방향 지정 예제) flex-direction (주축방향으로 배치 방향 지정) 1 2 3 flex-wrap 속성 플렉스 항목을 한 줄 또는 여러 줄로 배치 예제) flex-wrap (주축방향으로 양쪽에 배치) 1 2 3 flex-flow 속성 플렉스 배치 방향과 여러 줄 배치를 한꺼번에 지정 order 속성 플렉스 항목..

미디어 쿼리 이해하기 접속하는 장치에 따라 특정한 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 자막 파일 자막이 나오게 해준다