Home-theater-designers
CSS는 HTML 및 JavaScript와 함께 핵심 웹 기술의 삼중항에 속합니다. 신중한 계획을 통해 CSS는 관심사 분리에 기여합니다. 독립적인 리소스는 콘텐츠의 구조, 프레젠테이션 및 동작을 제어합니다.
스타일 시트는 접근성, 확장성 및 웹 성능에서 중요한 역할을 합니다. 콘텐츠 작성자 또는 웹 디자이너는 장치에서 콘텐츠를 렌더링하는 방법을 제어할 수 있습니다. 레이아웃에서 글꼴 크기 및 색상에 이르기까지 CSS는 콘텐츠를 아름답게 보이는 페이지로 변환합니다.
CSS는 어떻게 생겼습니까?
CSS는 큰 언어입니다. 스타일을 지정할 수 있는 다양한 항목이 있습니다! 그러나 그 구문은 배우기 위한 몇 가지 규칙만 있으면 간단합니다.
HTML 요소에는 CSS가 스타일을 지정할 수 있는 다양한 속성이 있습니다. NS 색상 속성은 전경(예: 텍스트) 색상을 설정합니다. 글꼴 크기는 글꼴 크기 재산.
각 속성은 지원되는 값으로 설정할 수 있습니다. 속성에 값을 할당하는 것은 '선언'입니다. 일반적으로 다음과 같습니다.
property: value예를 들어:
중지 코드 잘못된 시스템 구성 정보
color: red다른 속성에 대한 값은 동일한 속성에 대한 값이라도 매우 다르게 보일 수 있습니다. 예를 들어, 이전 선언을 작성하는 두 가지 방법이 더 있습니다.
color: #ff0000
color: rgb(255, 0, 0)
HTML과 스타일 시트를 함께 사용하는 방법
각각의 장점이 있는 몇 가지 방법으로 HTML과 CSS를 결합할 수 있습니다.
작문 스타일 인라인
가장 간단한 방법은 스타일 선언을 HTML 파일의 요소에 직접 첨부하는 것입니다. 다음을 사용하여 이 작업을 수행할 수 있습니다. 스타일 다음과 같은 속성:
Most of this text is red …
… but this isn’t!
이와 같이 인라인으로 요소를 스타일링하면 편리할 수 있지만 몇 가지 단점이 있습니다. 처음에는 HTML을 복잡하게 만들어서 한 눈에 읽기 어렵게 만듭니다. 유지 관리하는 것도 어색합니다. 모든 단락의 색상을 설정하려는 긴 문서를 상상해 보세요. 이것은 CSS이지만 '스타일 시트'가 아닙니다.
머리에 스타일 포함
두 번째 메커니즘으로 스타일 시트가 어떻게 보이는지 볼 수 있습니다. 임베딩 . 이 접근 방식을 사용하여 모든 스타일 선언을 내부에 함께 수집합니다. 스타일 요소 머리 우리 문서의. 다음과 같이 보일 것입니다.
/* style instructions go here */
...하지만 우리의 스타일 지침은 이전보다 조금 더 세부적인 내용이 필요합니다. 헤드로 이동했기 때문에 각 규칙은 더 이상 요소와 연결되지 않습니다. 우리는 선언했을 수도 있습니다 색상: 레드 , 하지만 그 색을 가져야 하는 것은 무엇입니까?
여기에서 CSS 선택기가 사용됩니다. 다음 구문을 사용하여 페이지의 특정 부분을 대상으로 지정하고 스타일을 한 곳에서 정의할 수 있습니다.
2017년 넷플릭스 프로필 사진 바꾸는 방법
selector {
declaration1;
declaration2;
/* etc. */
}
예를 들어 단락의 텍스트를 파란색으로 지정하려면 다음을 지정할 수 있습니다.
p {
color: blue;
}이 예에서 선택자는 단순히 NS , 문서의 모든 단락 요소와 일치합니다. 모든 텍스트가 파란색으로 표시됩니다. 마지막으로 다룰 방법은 연결입니다. 이것은 지금까지 가장 유용한 접근 방식이며 대부분의 경우 선택해야 하는 방식입니다. CSS 규칙을 포함하는 대신 스타일 요소를 문서에 직접 추가하면 별도의 파일로 이동할 수 있습니다. 이 코드를 내부에 붙여넣습니다. HTML 파일의 태그를 사용하여 외부 스타일 시트를 연결합니다. 연결된 방법을 사용하여 CSS의 핵심 기능인 관심사 분리를 활용하고 있습니다. 내용이 의미하는 모든 의미 정보는 HTML 문서에 포함되어 있습니다. 스타일(모양)은 별도의 파일인 스타일 시트에 있습니다. 이 분리의 몇 가지 이점은 다음과 같습니다. 스타일과 스타일 시트에 대해 많이 배웠지만 CSS의 계단식 부분은 어떻습니까? 캐스케이드는 여러 스타일 시트가 있을 때 사용할 스타일을 결정합니다. 작성자가 콘텐츠의 스타일을 지정하는 방법을 살펴보았습니다. 그러나 CSS의 또 다른 기능은 독자와 브라우저 제조업체에 이 문제에 대한 의견도 제공한다는 것입니다. 기본 스타일에 대해 이미 궁금했을 것입니다. 예를 들어, 어떻게 H1 작성자 스타일 시트가 없어도 요소가 크고 굵게 표시됩니까? 이것은 사용자 에이전트 스타일 시트를 구성하는 일련의 특수 규칙 덕분입니다. 이러한 규칙은 처음에 웹 브라우저에서 방문하는 모든 페이지에 적용됩니다. 캐스케이드는 작성자 스타일 시트가 사용자 에이전트 스타일 다음에 적용되도록 지정합니다. 브라우저에서 제목이 굵게 표시되지만 페이지 작성자가 이 페이지의 제목이 밝다고 선언하면 결국 밝게 표시됩니다. 독자에게 일부 제어 권한을 넘겨주는 또 다른 스타일 시트 소스가 있습니다. 이론적으로 모든 웹 사용자는 사용자 정의 규칙을 사용하여 사용자 스타일 시트를 유지할 수 있습니다. 이들은 중간에 위치합니다. 사용자 규칙은 기본 브라우저 설정을 무시하지만 작성자 스타일에 의해 자체적으로 무시됩니다. 슬프게도 사용자 스타일 시트에 대한 지원은 널리 보급된 적이 없습니다. 화면 이외의 다른 컨텍스트에서 스타일 시트를 사용할 수 있습니다. NS 반 속성 링크 요소는 스타일 시트가 적용되는 미디어 유형을 정의합니다. 예를 들어 다음을 정의할 수 있습니다. 인쇄용 스타일 시트 다음과 같은 마크업을 사용합니다. 하나의 글로벌 스타일 시트에 공통 스타일을 수집하고 별도의 파일에 미디어별 스타일을 수집할 수 있습니다. 콘텐츠의 청각 또는 점자 프레젠테이션을 위한 미디어 유형도 있습니다. CSS는 접근성을 향상시키는 데 중요한 도구입니다. 관련된: 맹인 또는 시각 장애가 있는 경우 웹을 탐색하는 방법 Wikipedia와 같은 사이트는 CSS를 사용하여 인쇄 스타일을 제어하고 원하지 않는 요소를 숨기고 레이아웃을 단순화합니다. 캐스케이딩 스타일 시트는 캐스케이드, 상속, 선택자, 소스, 미디어 등 많은 것을 다루고 있습니다. 그러나 그 힘은 현대 웹을 가능하게 합니다. 재사용성, 유연성, 접근성 기능을 내장한 매체입니다. CSS의 전체 기능과 제공하는 기능을 보려면 모든 필수 CSS3 속성을 다루는 치트 시트를 확인하십시오. CSS3 속성 치트 시트로 필수 CSS 구문을 마스터하세요. Bobby는 거의 20년 동안 소프트웨어 개발자로 일한 기술 애호가입니다. 그는 게임에 열정적이며 Switch Player Magazine에서 리뷰 편집자로 일하고 있으며 온라인 출판 및 웹 개발의 모든 측면에 몰두하고 있습니다. 기술 팁, 리뷰, 무료 전자책 및 독점 거래에 대한 뉴스레터에 가입하십시오!외부 스타일 시트 연결하기
CSS의 힘
캐스케이드 설명
다양한 미디어 타겟팅
Xbox 360 프로필을 삭제하는 방법
CSS는 HTML을 보기 좋게 만듭니다.
저자 소개 바비 잭(게시된 기사 58건) 뉴스레터 구독