CSS (5) 썸네일형 리스트형 CSS Responsive Responsive Web Design Responsive Web Design이란 웹페이지가 디스플레이 환경에 따라 웹 페이지가 자동으로 변화하도록 하는 것이다. (반응형 웹페이지) The Viewport view point란 사용자가 볼 수 있는 웹페이지의 영역을 말한다. : 메타 태그로 viewpoint를 조절할 수 있다. 다음과 같은 viewpoint를 웹페이지에 항상 포함시켜야한다. width=device-width : 페이지의 가로길이가 디바이스의 디스플레이 길이를 따르도록 해준다 intial-scale = 1.0 : 페이지 로드시 initial zoom level을 설정한다 반응형 웹페이지를 위해 주의할점 크게 고정된 요소를 사용하지 말 것 특정 viewpoint에 대해 고정된 웹페이지를 만들.. CSS Advanced 2 CSS 2D Transforms transform : 도형의 변형을 설정한다 - translate(x, y) : 현재 위치에서 주어진 위치까지 이동시킨다 (X-axis, Yaxis) - translateX(n) : 현재 위치에서 주어진 X만큼 이동시킨다 - translateY(n) : 현재 위치에서 주어진 Y만큼 이동시킨다 - rotate(angle) : 주어진 각도만큼 요소를 회전시킨다 (degree) - scale(x,y) : 요소의 크기를 키우거나 줄인다 (width, height) - scaleX(n) : 요소의 가로길이를 조절한다 - scaleY(n) : 요소의 세로길이를 조절한다 - skew(x-angle, y-angle) : 요소를 비스듬히 왜곡한다 - skewX(angle) : 요소를 X-.. CSS Advanced CSS Rounded Corners border-radius : 둥근 모서리 효과를 줄 수 있다. 각각의 모서리를 따로 조절할 수도 있다. border-top-left-radius / border-top-right-radius / border-bottom-right-radius / border-bottom-left-radius 의 짧은 버전이라고 할 수 있기 때문에 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서로 한번에 지정할 수 있다. 앞에서부터 순서대로 값의 개수에 맞게 적용되며 값이 한개일때는 모든 모서리에 적용된다 #rcorners3 { border-radius: 15px 50px; background: #73AD21; padding: 20px; width: 200px; height: 15.. CSS Tutorial 2 Text color : 글씨의 색을 정한다 text-align : 텍스트의 가로정렬을 맞춘다 left or right : 왼쪽이나 오른쪽 정렬 center : 가운데 정렬 justify : line이 늘어나 모든 line이 같은 너비를 갖게 된다 direction and unicode-bidi : 텍스트 뱡향을 바꾸기 위해 사용 p { direction: rtl; unicode-bidi: bidi-override; } vertical-align : 텍스트의 수직 정렬을 조절 top / middle / bottom text-decoration : 스타일을 설정하거나 제거 h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 {.. CSS Tutorial 1 CSS는 Cascading Style Sheets 약자이며 HTML 문서의 스타일을 꾸밀 때 사용한다. 뼈대인 HTML문서의 스타일을 정의할 뿐 아니라 다양한 디스플레이 화면들에 맞게 웹페이지의 스타일이 변형되게 할 수도 있다. 동시에 여러 부분에 스타일을 적용할 수 있게 하기에 웹페이지 제작을 쉽고 깔끔하게 할 수 있다. CSS 문법 CSS Selector 종류 Element selector : 안에 들어가는 element들을 위한 선택자이다 - 형식: element { } - ex) h1 { } Id selector : #를 사용해 id를 지정하고 주어진 id값으로 요소를 선택하여 스타일을 적용한다 - 형식: #id name { } - ex) para1 { } class selector : 많은 부분.. 이전 1 다음
