웹 UI 개발

HTML은 태그들의 집합이며, 태그는 HTML에서 가장 중요하고 기본이 되는 규칙입니다.태그는 '무언가를 표시하기 위한 꼬리표, 이름표'라는 의미가 있으며, HTML에서도 이와 비슷한 의미로 해석됩니다.태그는 <, > 기호로 표현하며 <, > 기호 사이에 태

제목(heading) 태그는 문서 내에 제목을 표현할 때 사용하는 태그입니다. 태그 이름은 heading을 줄여서 h로 쓰며, 제목의 레벨에 따라서 <h1>~<h6>까지 있습니다.보통 <h1>은 해당 페이지를 대표하는 큰 제목으로 주로 사용되며, 숫자가

📍 Content Models 의 7 분류 Metadata Content Flow Content Sectioning Content Heading Content Phrasing Content Embedded Content Interacitve Content 1. M

부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소입니다. 양옆으로 다른 요소가 배치되지 않게 박스를 생성하므로 박스의 위아래로 줄 바꿈이 생기게 됩니다. 블록 레벨 요소는 일반적인 모든 요소(블록, 인라인 레벨 등)를 포함할 수 있습니다. " div, h1~h6,

📍 CSS와 HTML CSS는 간단히 이야기하면 HTML(마크업 언어)을 꾸며주는 표현용 언어입니다. HTML이 문서의 정보, 구조를 설계한다면 CSS는 문서를 보기 좋게 디자인합니다. CSS는 분명히 HTML과는 독립된 다른 언어지만 마크업 문서 자체가 존재하지

선택자 중에 가장 기본이 되는 선택자이며, 태그 선택자라고도 합니다.h1 { color: yellow; }h2 { color: yellow; }h3 { color: yellow; }h4 { color: yellow; }h5 { color: yellow; }h6 { co

가상 클래스는 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스입니다. 우리가 직접 요소에 클래스를 선언하는 것은 아니고, 약속된 상황이 되면 브라우저 스스로 클래스를 적용해줍니다.예를 들어, 가 있다고 가정하겠습니다. 이 에 마우스 커서를 올렸을 때만 특정

단위는 크게 절대 길이 단위와 상대 길이 단위로 구분되어 집니다.절대 길이는 고정된 크기 단위로, 다른 요소의 크기에 의해 영향을 받지 않습니다.px ( 1px = 1/96th of 1 inch ): 절대 길이이므로 다른 요소의 영향을 받지 않아 화면에서 고정된 크기를

폰트를 이해하기 위해서는 타이포그래피의 구조를 먼저 이해해야 합니다. 모든 폰트는 em박스를 가지고 있고 위 그림과 같은 구조로 이루어져 있습니다.•em: 폰트의 전체 높이를 의미합니다.•ex ( = x-height ): 해당 폰트의 영문 소문자 x의 높이를 의미합니

요소의 렌더링 박스 유형을 결정하는 속성입니다. 기본 값 : - (요소마다 다름)< 속성 값 >none: 요소가 렌더링 되지 않음inline: inline level 요소처럼 렌더링block: block level 요소처럼 렌더링inline-block: inli

미디어퀴리(Media Queries)는 각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것입니다. 미디어 매체는 모니터와 같은 스크린 매체, 프린트, 스크린 리더기와 같은 것들을 이야기 합니다. 미디어쿼리는 동일한 웹 페이지를 다양한 환

테이블의 보더 표현 방식은 border-collapse 속성을 사용한다.<caption>을 사용하여 표의 제목을 지정한다.각 셀의 너비는 <colgroup> 요소 사용을 권장한다.<thead>, <tbody>, <tfoot>을 사용하고 &lt

텍스트가 있는 이미지를 이미지 요소로 마크업할 때 대체 텍스트는 이미지 요소의 alternative 속성인 'alt'에 적용해주시면 됩니다.비장애인들은 이미지를 보면 시각적으로 내용 인식이 가능하지만 시각적으로 인식이 불가능한 사용자들은 청각적으로 내용을 인식할 수 있

: 헤딩, 리스트, 폼, 테이블 등 주요 태그: margin, padding, border, font-styleborder-collapse, text-decorationlist-stylemargin 0으로 resetdisplay 속성 값이 list-item 인 요소의

HTML(1) CSS(1) HTML(2) ![](https

📌 Image Replacement: 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것<img> 태그의 alt 속성 값으로 표현하기에 대체 텍스트가 너무 길거나, CSS background 속성을 사용하여 처리한 의미 있는 이미지일 경우, 마크업

HTMLh1, ol, ul, p, strong, a, divCSSposition, width, height, background, margin모든 요소를 감싸고 있는 <DIV class="wrap">을 추가하여 전체 컨텐츠 영역에 이미지를 적용합니다.텍스트를 한꺼

float의 해제를 하기 위해서는 먼저 float의 특성을 알아야 합니다. 우리가 흔히 플롯의 상황에서 해제가 필요하다고 할만한 상황은 아래의 내용과 같은 float의 특성 때문에 발생하게 됩니다.]그림과 같이 좌우로 플로팅 된 요소를 가지고 있는 부모 요소를 파란 점

HTML CSS HTML CSS HTML CSS #store { height: 1084px; margin: 0 auto; background: url(../image/section_store.jpg) #d5e43f no-repeat ce