연습장

https://poiemaweb.com/bootstrap-basics Bootstrap Basics | PoiemaWebBootstrap은 빠르고 간편한 반응형 웹 디자인(responsive web design)을 위한 open-source front-end framework이다. HTML, CSS, JavaScript로 만들어진 typography, 입력 양식(forms), 버튼, 테이블, 탭, 내비게이션, 모달, 이미poiemaweb.com   Bootstrap은 빠르고 간편한 반응형 웹 디자인을 위한 open-source front-end framework이다. HTML, CSS, JavaScript로 만들어진 typography, 입력 양식(forms), 버튼, 테이블, 탭, 내비게이션, 모달, ..

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를 갖는 요소의 수평정렬 시, 간단히 상하중앙 정렬이 가능하다.비교적 최신 브라우저가 아니..