PSE's blog

[CSS] PRACTICE 15 - 가변 폭 레이아웃을 이용한 연습문제

Chocolate ABOUT SHOP BLOG

[CSS] STUDY 16 - 가변 폭 레이아웃

가변 폭 레이아웃 웹 페이지의 너비가 브라우저 화면의 전체 너비를 차지 본문(Article) 영역이 브라우저 화면 너비에 따라 변화 Gmail, 구글 캘린더, 네이버 메일, W3Schools 등 많은 사이트에서 채용 태블릿 PC에 적합한 레이아웃 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum massa ac scelerisque gravida. Nullam in mi at mi volutpat congue faucibus vel tellus. Duis congue leo sed convallis molestie. Nullam congue consequat ante nec egestas. Donec eget magna ..

[CSS] STUDY 15 - mini project 06 (CSS로 탭 메뉴 만들기)

Mini Project 06 Web Mobile Game Simulation Data Rint Development HTML5 + CSS3 Basic HTML5 CSS3 JavaScript jQuery Node.js Main Article Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, ..

[CSS] STUDY 14 - 애니메이션 속성

animation 속성 1. animation-name - 요소에 적용할 애니메이션이 설정된 @keyframes 추가 규칙의 이름 설정 string : @keyframes 추가 규칙의 이름 설정 2. animation-duration - 애니메이션이 진행되는 데 걸리는 시간을 설정 time (default 0s) : 시간 단위 (s, ms)를 사용해 설정 3. animation-timing-function - 애니메이션을 진행할 때 적용할 시간에 따른 속도의 변화 함수를 설정 ease (default) : ease 함수로 설정 linear : linear 함수로 설정 ease-in : ease-in 함수로 설정 ease-out : ease-out 함수로 설정 ease-in-out : ease-in-out..

[CSS] STUDY 13 - 반응형 웹을 위한 미디어 쿼리

1. CSS 추가 규칙 ● CSS 추가 규칙 - 스타일시트에서 앞에 @를 붙여서 만든 사용자 지정 규칙 1) @import 규칙 - 다른 CSS 파일을 불러오는 규칙 2) font-face 규칙 - 웹 폰트를 설정하는 규칙 3) @media 규칙 - 미디어 쿼리를 통해 지정된 장치나 조건에 맞는 스타일 블록을 적용하도록 지정하는 규칙 1) @import 규칙 - CSS 파일에서 다른 CSS 파일을 불러오는 규칙 ※ 성능이 좋지 않아 link 태그로 대체하는 것이 좋다. common.css : body {...} h1 {...} header {...} #wrap {...} #gnb {...} page.css : @import url('common.css'); #wrap {...} #page {...} #l..

[CSS] PRACTICE 14 - 오버레이 경고창 띄우기

오버레이 경고창 띄우기 Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nibh enim, fringilla sit amet aliquam vel, lacinia quis justo. Etiam imperdiet eros sed laoreet tempus. Quisque venenatis arcu at justo consectetur vestibulum ac eu nunc. Donec luctus varius ipsum, in suscipit risus accumsan non. Pellentesque sagittis quam velit, congue faucibus tellus feugiat quis. Fusce trist..

[CSS] STUDY 12 - transform 속성

transform 속성 1. transform - 요소에 변환 효과를 적용 none (default) : 요소에 변환 효과를 적용하지 않음 rotate() : 지정한 각도만큼 요소를 회전 scale() : 지정한 크기만큼 요소를 확대 또는 축소 translate() : 지정한 크기만큼 요소를 이동 skew() : 지정한 각도만큼 요소를 기울임 matrix() : matrix 함수를 이용해 변환 perspective() : 요소의 원근감을 설정 2. transform-orgin - 변환 중심을 설정 transform-orgin : x-axis y-axis z-axis length : 크기 단위를 사용해 설정 percentage (deault : 50% 50% 0) : 요소 크기의 백분율로 설정 top : ..

[CSS] PRACTICE 13 - 뉴스 헤더라인 레이아웃

뉴스 헤더라인 레이아웃 News International Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu dui et turpis porttitor mollis eu at nisl. Aenean a consequat orci. Integer volutpat imperdiet leo et laoreet. International Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu dui et turpis porttitor mollis eu at nisl. ..

[CSS] STUDY 11 - transition 속성

transition 속성 1. transition property - 어떤 스타일 속성을 변형할지 설정 모든 스타일 속성이 transition 스타일 속성과 animation 스타일 속성에 영향을 받는 (animatable) 것은 아니다. 아래에 나온 스타일 속성들이 transition 스타일 속성과 animaition 스타일 속성에 영향을 받는 대표적인 스타일 속성들이다. ▶ 위치 속성 : top, right, bottom, left ▶ 크기 속성 : width, height ▶ 박스, 테두리 속성 : margin, padding, border-width, border-radius ▶ 색상, 투명도 속성 : color, background-color, opacity ▶ 변환 속성 : transform ..

[CSS] PRACTICE 12 - 썸네일 블록 레이아웃

썸네일 블록 레이아웃 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in ligula a augue commodo molestie. Vivamus in lobortis magna, eget fermentum ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in ligula a augue commodo molestie. Vivamus in lobortis magna, eget fermentum ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in ligula a augue commodo mo..

[CSS] PRACTICE 11 - 모바일 웹 만들기

모바일 웹 만들기 Mobile Web Toggle Menu HTML CSS JavaScript jQuery HTML CSS JavaScript jQuery Section Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu dui id mi auctor iaculis. Nam consequat velit turpis, sed condimentum ipsum egestas sollicitudin. Quisque mi nunc, consequat nec turpis quis, malesuada hendrerit felis. Vivamus semper venenatis risus. Donec eget neque elementum quam co..

[CSS] STUDY 10 - 요소의 높이를 문서 전체로 설정하는 방법

요소의 높이를 문서 전체로 설정하는 방법 ① html, body 요소에 height 속성을 100%로 주는 방법 ② vh 단위(viewport height) 사용하는 방법 Title