목록2024/06 (49)
연습장
https://poiemaweb.com/css3-responsive-web-design CSS3 Responsive Web Design | PoiemaWebCSS3 'Responsive Web Design' '반응형 웹디자인' viewport @mediapoiemaweb.com 모바일과 같이 작은 해상도의 디바이스에서 접근했을 때 화면이 너무 작아져 가시성에 문제가 발생한다. 1. Responsive Web Design 개요 layout은 방문자의 화면 해상도를 고려하여야 한다.또한 스마트폰이나 태블릿 등 모바일 기기는 화면이 작기 때문에 가독성에 더욱 신경써야 한다. 이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인(Responsive Web Design)이다. 화면 해상도에 따라 가로폭이..
https://poiemaweb.com/css3-layout CSS3 Layout | PoiemaWeb poiemaweb.com layout : 블록 레벨 요소들을 원하는 위치에 배열하는 것이다.반응형 웹 디자인(Responsive Web Design) : 화면의 크기에 따라 적절히 화면 구성을 변화 CSS를 사용하여 layout을 구성할 때에 자주 사용되는 핵심 기술은 float이다.공간을 분할할 때는 먼저 행을 구분한 후, 행 내부 요소를 분리하는 것이 일반적이다. 개인적으론 flex 가 편하지만 모든 브라우저에서 통용될 수 있도록 웹 페이지를 제작하는 크로스 브라우징 측면에서 float 가 더 유리하다고 한다. 아래서는 float 를 주로 다룰 예정 1. Header & Navigation B..
https://poiemaweb.com/css3-webfont CSS3 Web Font | PoiemaWeb웹디자인 관점에서 폰트의 선택은 중요한 의미를 갖는다. 대부분의 정보는 텍스트와 이미지로 전달되고 아직은 텍스트가 주를 이루기 때문에 더욱 그러하다. 이전에는 웹에서 사용할 수 있는poiemaweb.com 많은 정보가 텍스트와 이미지로 전달되고 있으며 웹 디자인 관점에서 폰트의 선택은 중요하다.웹페이지는 불특정 사용자를 위해 제작되기 때문에 어떤 사용자가 웹페이지에 접근할 지 알 수 없으며웹 브라우저는 로컬 소프트웨어이므로 로컬 환경에 있지 않은 폰트는 사용할 수 없다. 이러한 문제를 HTML, CSS , JS 처럼 폰트 또한 서버에서 클라이언트로 다운로드하여 해결할 수 있다. 1. CDN(Con..
https://poiemaweb.com/css3-transform CSS3 Transform | PoiemaWeb트랜스폼(Transform)은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다. 단 애니메이션 효과를 제공하지는 않기 때문에 정의된 프로퍼티가 바poiemaweb.com 트랜지션은 CSS 스타일 변경을 부드럽게 표현하기 위해 duration(지속시간)을 부여하여 속도를 조절한다. 애니메이션은 하나의 줄거리(@keyframes)를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어하여 요소의 움직임을 표현한다. 트랜스폼(Transform)은 요소에 이동(translate), 회전(rotate), 확..
https://poiemaweb.com/css3-animation CSS3 Animation | PoiemaWeb애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수poiemaweb.com 애니메이션은 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes) 들로 이루어진다. transition으로도 어느 정도의 애니메이션 효과를 표현할 수 있으나 animation보다는 제한적이다. Q. 어떤효과를 사용할 것인지? transition : 단순히 요소의 프로퍼티 변화animation : 하나의 줄거리를 구..
https://poiemaweb.com/css3-transition CSS3 Transition | PoiemaWeb트랜지션(transition)은 CSS 프로퍼티 변경에 따른 표시의 변화를 부드럽게 하기 위해 애니메이션 속도를 조절한다. 즉, 프로퍼티 변경이 표시의 변화에 즉시 영향을 미치게 하는 대신 그 프로퍼티poiemaweb.com 트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다. ex)div 요소는 기본 상태에서 hover 상태로 변화할 때, CSS 프로퍼티 border-radius와 background 프로퍼티의 값이 변화한다. DOCTYPE html>html>head> style> ..
https://poiemaweb.com/css3-gradient CSS3 Gradient | PoiemaWeb그레이디언트(Gradient)는 2가지 이상의 색상을 혼합하여 부드러운 색감의 배경 등을 생성하는 것이다. CSS3가 이 기능을 제공하기 이전에는 포토샵 등의 소프트웨어를 사용하여 그레이디언트 효과poiemaweb.com 그레이디언트(Gradient)는 2가지 이상의 색상을 혼합하여 부드러운 색감의 배경 등을 생성하는 것이다. 포토샵 등의 소프트웨어를 사용하여 그레이디언트 효과의 이미지를 제작 시 단점이미지 다운로드에 시간이 소요되는 문제이미지를 확대하였을 때 해상도가 나빠지는 문제 등 선형 그레이디언트 (Linear Gradient: goes down/up/left/right/diagonal..
https://poiemaweb.com/css3-shadow CSS3 Shadow | PoiemaWeb텍스트나 요소에 그림자(Shadow) 효과를 부여하기 위한 프로퍼티를 선언한다.poiemaweb.com 텍스트나 요소에 그림자(Shadow) 효과를 부여하기 위한 프로퍼티를 선언한다. 1. text-shadow 텍스트에 그림자 효과를 부여하는 프로퍼티이다. 3종류의 그림자를 한번에 넣는 코드 선택자 { text-shadow: Horizontal-offset Vertical-offset Blur-Radius Shadow-Color; } h1:nth-child(7) { color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px dar..
https://poiemaweb.com/css3-vendor-prefix CSS3 Vendor Prefix | PoiemaWebCSS3 표준으로 확정되기 이전 또는 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스를 사용하여야 한다.poiemaweb.com 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때이전 버전의 웹 브라우저에 알려주기 위해 사용하는 접두사(prefix) * { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select..
https://poiemaweb.com/css3-inheritance-cascading CSS3 Inheritance & Cascading | PoiemaWeb상속이란 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려 받는 것을 의미한다. 상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 각각 지정해야 한다. 하지만poiemaweb.com 1. 상속(Inheritance) 상속이란 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려 받는 것을 의미한다. 상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 각각 지정해야 한다. 하지만 모든 프로퍼티가 상속되는 것은 아니다. 프로퍼티 중에는 상속이 되는 것과 되지 않는 것이 있..