float의 해제를 하기 위해서는 먼저 float의 특성을 알아야 합니다. 우리가 흔히 플롯의 상황에서 해제가 필요하다고 할만한 상황은 아래의 내용과 같은 float의 특성 때문에 발생하게 됩니다.]그림과 같이 좌우로 플로팅 된 요소를 가지고 있는 부모 요소를 파란 점
HTMLh1, ol, ul, p, strong, a, divCSSposition, width, height, background, margin모든 요소를 감싸고 있는 <DIV class="wrap">을 추가하여 전체 컨텐츠 영역에 이미지를 적용합니다.텍스트를 한꺼
📌 Image Replacement: 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것<img> 태그의 alt 속성 값으로 표현하기에 대체 텍스트가 너무 길거나, CSS background 속성을 사용하여 처리한 의미 있는 이미지일 경우, 마크업
: 헤딩, 리스트, 폼, 테이블 등 주요 태그: margin, padding, border, font-styleborder-collapse, text-decorationlist-stylemargin 0으로 resetdisplay 속성 값이 list-item 인 요소의
테이블의 보더 표현 방식은 border-collapse 속성을 사용한다.<caption>을 사용하여 표의 제목을 지정한다.각 셀의 너비는 <colgroup> 요소 사용을 권장한다.<thead>, <tbody>, <tfoot>을 사용하고 <
미디어퀴리(Media Queries)는 각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것입니다. 미디어 매체는 모니터와 같은 스크린 매체, 프린트, 스크린 리더기와 같은 것들을 이야기 합니다. 미디어쿼리는 동일한 웹 페이지를 다양한 환
요소의 렌더링 박스 유형을 결정하는 속성입니다. 기본 값 : - (요소마다 다름)< 속성 값 >none: 요소가 렌더링 되지 않음inline: inline level 요소처럼 렌더링block: block level 요소처럼 렌더링inline-block: inli
폰트를 이해하기 위해서는 타이포그래피의 구조를 먼저 이해해야 합니다. 모든 폰트는 em박스를 가지고 있고 위 그림과 같은 구조로 이루어져 있습니다.•em: 폰트의 전체 높이를 의미합니다.•ex ( = x-height ): 해당 폰트의 영문 소문자 x의 높이를 의미합니
단위는 크게 절대 길이 단위와 상대 길이 단위로 구분되어 집니다.절대 길이는 고정된 크기 단위로, 다른 요소의 크기에 의해 영향을 받지 않습니다.px ( 1px = 1/96th of 1 inch ): 절대 길이이므로 다른 요소의 영향을 받지 않아 화면에서 고정된 크기를
선택자 중에 가장 기본이 되는 선택자이며, 태그 선택자라고도 합니다.h1 { color: yellow; }h2 { color: yellow; }h3 { color: yellow; }h4 { color: yellow; }h5 { color: yellow; }h6 { co
📍 CSS와 HTML CSS는 간단히 이야기하면 HTML(마크업 언어)을 꾸며주는 표현용 언어입니다. HTML이 문서의 정보, 구조를 설계한다면 CSS는 문서를 보기 좋게 디자인합니다. CSS는 분명히 HTML과는 독립된 다른 언어지만 마크업 문서 자체가 존재하지