전체 글 130

레이아웃

구조 logo menu1 menu2 menu3 menu4 login join sitemap slide title 모든 국민은 언론·출판의 자유와 집회·결사의 자유를 가진다. 군사법원의 조직·권한 및 재판관의 자격은 법률로 정한다. 자세히보기 아티클의 타이틀 국회는 헌법 또는 법률에 특별한 규정이 없는 한 재적의원 과반수의 출석과 출석의원 과반수의 찬성으로 의결한다. 아티클의 타이틀 국회는 헌법 또는 법률에 특별한 규정이 없는 한 재적의원 과반수의 출석과 출석의원 과반수의 찬성으로 의결한다. 아티클의 타이틀 국회는 헌법 또는 법률에 특별한 규정이 없는 한 재적의원 과반수의 출석과 출석의원 과반수의 찬성으로 의결한... aside menu1 aside menu2 logo 저작권, 주소 SNS 버튼 CSS @..

CSS 2022.11.18

미디어쿼리

※ 미디어쿼리의 개요 반응형 웹을 구현할 때 여러가지 해상도를 가지고 있는 디바이스에 맞춰서 스타일 시트를 적용할 수 있도록 한다.(디바이스의 해상도에 맞게 스타일시트를 적용) ※ 디바이스의 웹 브라우저 해상도 1. 데스크탑: 모니터 해상도와 웹 브라우저 해상도가 같다. 4k: 3840px FHD: 1920px Notebook: 1920px Laptop: 1440px 19인치 LCD: 1280px 17인치 LCD: 1024px 2. 모바일: 디스플레이 해상도와 웹 브라우저 해상도가 다르다. 태블릿: 768px, 820px 스마트폰: 360px, 420px ※ 미디어쿼리 중단점 지정 첫번째 영역: 1600px 이상 두번째 영역: 1000px 이상 1599px 이하 세번째 영역: 760px 이상 999px ..

CSS 2022.11.16

애니메이션(2)

※트랜지션+트랜스폼과 애니메이션의 다른점 트랜지션+트랜스폼은 시작점과 끝점만 존재한다. 하지만 애니메이션은 시작점과 중간점, 끝점이 존재한다. ※애니메이션 구현 방법 1. 애니메이션 등록: @keyframes를 사용해서 등록한다. @keyframes 애니메이션이름 { 0% { 스타일속성:스타일값; } 50% { 스타일속성:스타일값; } 100% { 스타일속성:스타일값; } } 2. 애니메이션 적용: animation 스타일 속성을 사용해서 적용한다. 선택자 { animation:애니메이션이름 진행시간 가속도 대기시간 반복횟수 방향지정; } 결과

CSS 2022.11.16

애니메이션(1)

애니메이션: 박스의 진행정도(0~100%)에 따라 스타일 시트를 적용할 수 있다. animation-name: 애니메이션 이름으로 지정한 애니메이션 효과를 사용한다. animation-duration: 애니메이션 진행 시간을 지정(0.8s, 2s 등) animation-timing-fucntion: 애니메이션 속도 변화 유형 지정 linear: 일정한 속도 ease: 빠르게 시작한 후 부드럽게 끝남 ease-in: 부드럽게 시작한 후 빠르게 끝남 ease-out: 부드럽게 시작한 후 빨라진 뒤 부드럽게 끝남 ease-in-out: 부드럽게 시작한 후 부드럽게 끝남 animation-delay: 애니메이션의 대기 시간을 지정(0.4s, 0.8s 등) animation-iteration-count: 애니메이..

CSS 2022.11.16