본문 바로가기
반응형

css5

CSS3 미디어 쿼리 (media query) 미디어 쿼리(media query) CSS2에서는 @media 규칙을 통해 서로 다른 매체 유형(media type)을 위한 맞춤식 스타일 시트(style sheet)를 지원합니다. 예를 들면, HTML 문서가 스크린에 표현될 때와 프린트할 때 서로 다른 스타일을 적용할 수 있습니다. CSS3에서는 @media 규칙을 더욱 발전시켜 매체 유형(media type)과 하나 이상의 표현식(expression)으로 구성된 미디어 쿼리(media query)를 사용할 수 있습니다. 미디어 쿼리(media query)는 width, height, color 속성과 같은 미디어 관련 속성을 이용한 표현식을 통해 스타일이 적용되는 범위를 조절할 수 있습니다. 미디어 쿼리를 사용하면 콘텐츠(content)를 별도로 변.. IT/소프트웨어 2020. 4. 27.
CSS 선택자 (1) 선택자(selector) CSS에서는 스타일을 적용할 대상을 선택하기 위해서 선택자(selector)를 사용합니다. 지금까지 살펴본 대표적인 선택자는 다음과 같습니다. 전체 선택자 HTML 요소 선택자 아이디(id) 선택자 클래스(class) 선택자 그룹(group) 선택자 전체 선택자 CSS를 적용할 대상으로 HTML 문서 내부의 모든 요소를 선택합니다. HTML 요소 선택자 CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있습니다. ... 이 부분에 스타일을 적용합니다. 아이디(id) 선택자 - # 아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용합니다. 이 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택해 줍니다. .. IT/소프트웨어 2020. 2. 24.
CSS 박스 모델 - 크기 단위, 크기 크기 단위 크기 단위 CSS에서 사용하는 크기의 단위에는 %, em, px, cm, mm, inch 등이 있습니다. 그 중에서도 가장 많이 쓰이는 크기 단위는 다음과 같습니다. 백분율 단위(%) 배수 단위(em) 픽셀 단위(px) 백분율 단위(%)는 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기를 설정합니다. 배수 단위(em)는 해당 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정합니다. 픽셀 단위(px)는 스크린의 픽셀(pixel)을 기준으로 하는 절대적인 크기를 설정합니다. 크기(Dimension) CSS를 이용하면 HTML 요소의 크기를 마음대로 설정할 수 있습니다. CSS에서 크기 조절을 위해 사용할 수 있는 속성은 다음과 같습니다. height width.. IT/소프트웨어 2020. 2. 13.
CSS 기초 CSS란? CSS는 Cascading Style Sheets의 약자입니다. CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어입니다. HTML4 부터는 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해졌습니다. 오늘날 대부분의 웹 브라우저들은 모두 CSS를 지원하고 있습니다. CSS를 사용하는 이유 HTML만으로 웹 페이지를 제작할 경우 HTML 요소의 세부 스타일을 일일이 따로 지정해 주어야만 합니다. 이 작업은 매우 많은 시간이 걸리며, 완성한 후에도 스타일의 변경 및 유지 보수가 매우 힘들어집니다. 이러한 문제점을 해소하기 위해 W3C(World Wide Web Consortium)에서 만든 스타일 시트 언어가 바로 CSS입니다... IT/소프트웨어 2020. 2. 12.
HTML과 CSS HTML과 CSS CSS란 css란 Cascading Style Sheets의 약자입니다. CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어입니다. HTML4부터는 이러한 모든 서식 결정을 HTML 문서로부터 따로 분리하는 것이 가능해졌습니다. 오늘날 대부분의 웹 브라우저들은 모두 CSS를 지원하고 있습니다. CSS 적용방법 HTML 문서에 CSS 스타일을 적용하는 방법은 다음과 같습니다. 1. 인라인 스타일(Inline style) 2. 내부스타일 시트(Internal style sheet) 3. 외부 스타일 시트(External style Sheet) 인라인 스타일(Inline style) 인라인 스타일이란 HTML 요소 내부에 style 속성을 사용.. IT/소프트웨어 2020. 1. 30.
반응형

티스토리툴바