SBDB_뉴유 SBDB_뉴유

CSS Speedrun 클리어

선택자(Selector) CSS에서 선택자는 스타일을 지정할 웹 페이지의 HTML 요소를 대상으로 사용됩니다. 사용 가능한 다양한 CSS 선택자가 있으며 요소를 선택할 때 세밀한 선택이 가능합니다. 다양한 유형을 살펴보고 작동 방식을 살펴보겠습니다. 선택자란 무엇인가? CSS에서 선택자란 HTML에 CSS 속성값을 적용하기 위해 어떤 요소를 선택해야 하는지 브라우저에 알려주는 요소 및 기타 용어의 패턴입니다. 선택자에 의해 선택된 요소들은 선택자의 주제(subject) 로 지칭됩니다. 선택자 목록 CSS를 사용하려는 항목이 두 개 이상인 경우 모든 개별 선택자에 적용되도록 개별 선택자를 선택자 목록으로 결합할 수 있습니다. h1 { color: blue; } .hh { color: blue; } h1, ..

웹 폰트(Web font) 웹 페이지에서 사용자 정의 글꼴을 사용하여 보다 다양하게 스타일을 적용하는 방법을 살펴보겠습니다. font-family 값 목록 HTML에 적용된 글꼴은 font-family속성을 사용하여 제어할 수 있습니다. font-family는 하나 이상의 값을 사용합니다. 웹 페이지를 표시할 때 브라우저는 사용할 수 있는 폰트를 찾을 때까지 폰트 모음 값 목록을 다음으로 이동합니다. 위 방법으로 사용해도 정상적으로 잘 작동하지만 폰트 선택이 제한적 입니다. 모든 환경에서 보장할 수 있는 폰트는 수소에 불가합니다. 그래서 등장한 것이 웹 폰트 입니다. 웹 폰트 CSS를 사용하면 웹사이트에 액세스할 때 웹사이트와 합께 폰트를 다운로드 하여 원하는 폰트를 지정할 수 있습니다. 1. CSS에 ..

웹 사이트에서 이미지를 표현하는 방법 1. HTML 태그를 통해서 HTML의 img 태그를 이용하여 문서에 이미지를 넣을 수 있습니다. 일반적으로 의미가 있는 이미지를 넣을 떄 사용하면 의미가 있는 이미지로는 로고, 메뉴 등이 있습니다. img 태그의 속성으로 src, alt, width, height을 살펴봅시다. src 속성 src 속성은 img 태그의 필수 속성입니다. src를 통하여 페이지에 삽입하고자 하는 이미지의 경로는 표현합니다. 경로는 상대경로, 절대경로 모두 가능합니다. alt 속성 alt 속성은 이미지가 보여지지 않을 경우에 대비하여 적은 문자로 대체 문자라고 합니다. alt 속성을 적어야 하는 이유 사용자가 시각장애인 경우 이미지 대신 대체문자를 읽어주어 도움을 됩니다. 파일명을 잘목..

그리드(Grids) CSS 그리드 레이아웃은 웹용 2차원 레이아웃 시스템으로 행과 열에 콘텐츠를 배치할 수 있습니다. 또한 복잡한 레이아웃을 간단하게 만드는 많은 기능이 있습니다. 그리드 레이아웃이란 무엇입니까? 그리드는 디자인 요소를 정렬할 수 있는 패턴을 생성하는 수평선과 수직선의 모음입니다. 그리드는 페이지를 이동하거나 너비를 변경하지 않는 레이아웃을 만드는 데 도움을 주어 웹사이트에서 더 큰 일관성을 제공합니다. 그리드에는 일반적으로 열 , 행 및 각 행과 열 사이에 간격이 있습니다. 간격은 일반적으로 거터 라고 합니다 . CSS에서 그리드 만들기 디자인에 필요한 그리드를 결정했으면 CSS로 그리드 레이아웃을 사용하여 만들 수 있습니다. 1. 그리드 정의 가장 먼저 그리드를 정의합니다. displ..

NAVER 네이버를 시작페이지로 쥬니어네이버 해피빈 메일 카페 블로그 지식iN 쇼핑 쇼핑LIVE Pay ▷TV 사전 뉴스 증권 부동산 지도 VIBE 책 웹툰 /* 링크 초기화 */ a { color: #222; text-decoration: none; } /* 목록 초기화 */ ol { list-style: none; } /* 스타일 초기화 */ em { font-style: normal; } /* 클리어픽스 */ .clearfix { zoom: 1; } .clearfix::before, .clearfix::after { content: ""; display: block; } .clearfix::after { clear: both; } /* 레이아웃 작성 */ #wrap { width: 1200px; m..

layout 연습01 연습해볼 사이트를 찾는다. 사이트를 분해하여 보자. 레이아웃을 잡아보자 header, nav, main으로 나누어 보자 main을 section, aside으로 나누어 보자 section을 article1, article2, article3으로 나누어 보자 aside을 article4, article5으로 나누어 보자 레이아웃을 표시해 보자 HTML 검색공간 메뉴 광고 뉴스 광고 로그인 광고 CSS * { margin: 0; padding: 0; font-size: 50px; } body { background-color: #F1F8E9; } #all { width: 1190px; height: 1080px; margin: 0 350px 0 380px; } #header { widt..