연습장

https://poiemaweb.com/css3-removing-white-space-image-element Typography | PoiemaWeb컨테이너 요소로 img 요소를 래핑하면 img 요소 아래에 의도하지 않은 여분의 공간이 패딩된다.poiemaweb.com   컨테이너 요소로 img 요소를 래핑하면 img 요소 아래에 의도하지 않은 여분의 공간이 패딩된다.  문제 원인 : image 요소는 inline 요소로 텍스트 취급되어서 위와 같은 문제가 발생한다.  해결법 1. 해당 요소를 block 요소로 변환  해결법 2.vertical-align 프로퍼티의 기본값은 baseline인데 이를 변경하여 이미지 표시 위치를 조정하는 것이다. 해결법 3?img 의 상위 요소에 display : flex

https://poiemaweb.com/css3-centering CSS3 Horizontal & Vertical Centering | PoiemaWebCSS를 사용한 HTML 요소의 수평/수직 중앙 정렬 (Horizontal & Vertical Centering)poiemaweb.com   1. 수평 정렬(Horizontal Align)  1.1 inline/inline-block 요소 정렬 대상 요소(텍스트 또는 링크 등의 inline 레벨 요소 또는 inline-block 레벨 요소)의 부모 요소에 text-align: center;를 지정한다. 1.2 block 요소 정렬 대상 요소에 너비를 명시적으로 지정하고 margin-right와 margin-left 프로퍼티에 auto를 지정한다. 정렬 대..

https://poiemaweb.com/css3-flexbox CSS3 Flexbox Layout | PoiemaWeb poiemaweb.com  float 가 말그대로 둥둥 떠다니기 때문에 flex 를 배우고 나서는 거의 쓰지않았던거같다.  1. Introduction CSS3의 새로운 layout 방식이다.요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있다.  Flexbox의 장점1줄의 코드 추가로 수평 정렬이 가능하다.요소의 상하좌우 정렬, 순서 변경이 간단하다.요소가 간격 조절이 간단하다.서로 다른 height를 갖는 요소의 수평정렬 시, 간단히 상하중앙 정렬이 가능하다.비교적 최신 브라우저가 아니..

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..