CSS17 [PoiemaWeb] image 요소 아래 패딩된 여분의 공간 제 컨테이너 요소로 img 요소를 래핑하면 img 요소 아래에 의도하지 않은 여분의 공간이 패딩된다. image 요소는 inline 요소이다. 다시 말해 image 요소는 텍스트로 취급된다. 브라우저는 요소 내의 텍스트를 렌더링할 때 나름의 방식이 있는데 이를 이해하려면 티아포그래피(Typography)에 대해 어느 정도 이해해야 한다. image 요소에도 디센터가 적용되어 여분의 공간이 발생한다. 1. image 요소를 블록 요소로 전환하면 더 이상 텍스트로 취급되지 않는다. 하지만 이 방법은 image 요소를 블록 요소로 전환할 수 없는 레이아웃에서는 사용할 수 없다. 2. inline 요소에 사용할 수 있는 vertical-align 프로퍼티를 사용하는 방법이 있다. vertical-align 프로퍼티.. 2023. 3. 6. [PoiemaWeb] 수평/수직 중앙 정렬 1. 수평 정렬(Horizontal Align) 1.1 inline/inline-block 요소 정렬 대상 요소(텍스트 또는 링크 등의 inline 레벨 요소 또는 inline-block 레벨 요소)의 부모 요소에 text-align: center;를 지정한다. 1.2 block 요소 정렬 대상 요소에 너비를 명시적으로 지정하고 margin-right와 margin-left 프로퍼티에 auto를 지정한다. 정렬 대상 요소에 너비를 명시적으로 지정하지 않으면 너비는 full width가 되므로 중앙 정렬이 필요없다. 1.3 복수의 block 요소 복수의 block 요소는 기본적으로 수직 정렬된다. 이것을 수평정렬하기 위해서는 정렬 대상 block 요소를 inlin-block 요소로 변경한 후 부모 요소에 .. 2023. 3. 6. [PoiemaWeb] 플렉스 박스 레이아웃 Flexbox의 장점 1줄의 코드 추가로 수평 정렬이 가능하다. 요소의 상하좌우 정렬, 순서 변경이 간단하다. 요소가 간격 조절이 간단하다. 서로 다른 height를 갖는 요소의 수평정렬 시, 간단히 상하중앙 정렬이 가능하다. 1. Usage Flexbox 레이아웃은 flex item이라 불리는 복수의 자식 요소와 이들을 내포하는 flex-container 부모 요소로 구성된다. flexbox를 사용하기 위해서 HTML부모 요소의 display 속성에 flex를 지정한다. 부모 요소가 inline 요소인 경우 inline-flex을 지정한다. flex 또는 inline-flex 부모 요소에 반드시 지정해야하는 유일한 속성이며 자식 요소는 자동적으로 flex item 이 된다. 2. Flexbox cont.. 2023. 3. 6. [PoiemaWeb] 반응형 레이아웃 1. Responsive Web Design 개요 1.1 viewport meta tag viewport란 웹페이지의 가시영역을 의미한다. 모바일 브라우저는 세로 화면이고 윈도우 resize가 불가하며 화면 터치를 사용하는 등 데스크탑 브라우저와 구성이나 형태가 다르다. 모바일 화면은 데스크탑 화면보다 훨씬 작으므로 데스크탑용 웹페이지를 그대로 모바일에 출력하며 가독성이 현저히 나빠진다. 따라서 viewport를 이용하여 디바이스의 특성과 디바이스의 화면 크기 등을 고려하여 각종 디바이스 사용자에게 최적화된 웹페이지를 제공할 수 있다. mega tag는 브라우저 혹은 검색엔진최적화(SEO)를 위해 검색엔진에게 메타데이터를 전달하기 위해 사용된다. viewport meta tag는 브라우저의 화면 설정과 .. 2023. 3. 5. 이전 1 2 3 4 5 다음
