IoT에서 센서 그래픽 웹의 모양을 CSS로 정의합니다.

시리즈의 이전 기사에서 사물인터넷 IoT에 연결된 센서의 상태 그래프를 만드는 방법 방법을 설명하다 HTML로 개발된 웹 페이지를 그래픽 구조로 사용. 객체를 사용하여 최소한으로 축소한 웹 페이지 요소 <div>, 외관을 직접적으로 정의하지 않고 대신에 다음을 참조했습니다. 스타일 시트에 대한 모양 정보 CSS, 이것이 시리즈의 이 부분에서 설명될 내용입니다.

IoT에 연결된 센서의 그래프를 만들기 위해 제안하는 솔루션에서는 문서를 사용합니다. CSS 문서에서 로드된 것 HTML. 코드 HTML 예를 들어 서버의 애플리케이션에서 생성됩니다. PHP, 웹 페이지를 로드하는 대신 웹 페이지를 정의하는 코드의 일부로 포함시키는 것이 매우 간단할 것입니다. 이는 호출을 저장하여 약간 최적화할 수 있습니다. 어떤 옵션을 선택하든 가장 편리한 방법은 다음과 같습니다. 코드 편집 CSS 별도의 문서로 작성하여 보다 편리하게 관리하고 재사용할 수 있도록. 이 기사 시리즈의 튜토리얼에서 개발된 예제에서는 이름이 지정되었습니다. estilo.css.

같은 방법으로, 복잡한 프로젝트를 다룰 때는 서로 다른 문서에서 여러 개의 별도 스타일 시트를 사용하는 것이 좋습니다., 매번 로드하지 않고도 특정 기능을 재사용할 수 있고 해당 논리 구조에 따라 다른 문서에 배포하여 코드를 보다 쉽게 ​​편집할 수 있습니다.

스타일 CSS 그들은 이전 버전 사양과의 호환성을 최대한 존중하려고 노력하면서 동시에 유효한 여러 유형의 접근 방식을 통해 웹 페이지의 동작과 모양의 모든 극단을 설명하려고 합니다. 이는 동일한 요구 사항을 해결하는 가능한 솔루션이 많이 있음을 의미합니다. 뿐만 아니라 많은 수의 사용 가능한 리소스(속성) CSS). 기사의 교훈적인 접근 방식으로 인해 새로운 사용자를 혼동하지 않도록 CSS, 속성만 및 최종 목표에 필요한 구조, 사물인터넷에 연결된 센서의 데이터를 그래픽으로 표현하는 것입니다. 동시에, 또한 있습니다 작은 소개 CSS, 계단식 스타일 시트.

CSS 속성 형식 지정

El 기본 형식 속성 이름, 콜론 기호, 속성 값, 세미콜론 기호로 구성됩니다. nombre:valor;

CSS 동일한 문서에서 다양한 측정 단위를 사용할 수 있습니다. 픽셀과 같이 표현되는 장치에 대한 백분율 또는 센티미터와 같은 절대값으로 구조(요소에 포함된 내용의 측정)와 관련된 값을 포함합니다. 단위는 다음 약어 코딩에 따라 값 뒤에 표시됩니다.

우리가 수행할 애플리케이션에서는 최소한 세 가지 스타일 단위를 고려하는 것이 중요합니다. 품목 용기의 크기를 기준으로 측정하는 %, 화면 해상도에 따른 측정을 위한 픽셀, 인쇄된 보고서 작성을 위한 밀리미터(실제로는 절대 측정)입니다.

거기에 몇 가지가 있습니다. 복잡한 속성또는 여러 값(예: 색상, 크기, 스타일...)에 따라 값을 나타내는 합성, CSS에는 두 가지 가능성이 있습니다. 적절한 순서로 모든 값을 작성합니다. 공백으로 구분된 값 또는 복소수에 해당하는 단순 속성의 합을 사용합니다.. 예를 들어 개체의 여백 4개를 모두 단일 속성으로 지정할 수 있습니다. margin 또는 속성으로 설정할 수 있습니다. margin-top, margin-right, margin-bottom y margin-left. 그런데 그 순서(시계방향)는 안쪽(패딩)이나 바깥쪽 여백, 테두리 등 요소를 '둘러싸는' 값에 대한 설명이 이어지는 순서인데...

지금까지 설명한 내용을 통해 이제 속성의 몇 가지 예를 볼 수 있습니다.

위의 예에서 색상은 빨간색, 녹색, 파란색 구성 요소의 값을 쌍으로 나타내는 6개의 XNUMX진수 코드를 사용하여 정의됩니다.. 예에서와 같이 두 자리 숫자가 같을 경우 다음과 같이 축약할 수 있습니다. #F09 (그런데 이는 소위 "웹 안전 색상"에 해당합니다). 최종 제안에서는 기준을 통합하고 더 쉽게 읽을 수 있도록 이러한 약어를 사용하지 않을 것입니다. 다음과 같은 복잡한 속성의 값을 축약할 수도 있습니다. margin 예에서는 모든 값 또는 반대 쌍이 반복되는 경우입니다. 텍스트를 저장할 때와 마찬가지로 속성을 지정할 때 값이 0인 경우 단위를 생략하는 것도 가능합니다. 이 경우에는 단위가 관련이 없기 때문입니다.

일부 값은 숫자로 표현될 수 있을 뿐만 아니라 이름도 갖습니다. 그러면 코드를 더 읽기 쉽게 만들고 더 잘 기억할 수 있습니다. 예를 들어 대상의 16진수 숫자 코드 대신 #FFFFFF (o #FFF), 쓸 수 있다 white 같은 결과로. 이렇게 검은색 색상이 나오네요 #000000 (o #000)는 다음과 같이 대체될 수 있습니다. black.

또한 값은 특수 코드, 이름으로 표현됩니다.. 예를 들어, 측면 여백이 브라우저에 의해 자동으로 설정되었음을 나타내기 위해(일반적으로 중앙 기능에 해당함) 특수 값이 사용됩니다. auto, 이는 어떤 값과도 수치적으로 일치하지 않습니다.

에 속성의 일련의 복합(복잡한) 값을 사용하는 특별한 방법을 표현합니다. CSS 함수의 구문과 유사한 구문을 사용하여 형식을 선택할 수 있습니다. 예를 들어, 색상을 빨간색, 녹색, 파란색 구성 요소의 세 가지 값으로 표현하려면( RGB 모델)가 쓰여질 것이다 color: rgb(128, 255, 64);. 이러한 표현 스타일 내에서 단위를 사용하는 것도 가능합니다. 위의 예에서 색상 구성요소는 0에서 255까지의 십진수 값이지만 이를 각 색상 구성요소 전체에 대한 백분율로 표현하는 것이 더 쉬울 수 있습니다. 이 경우 다음과 같이 쓸 수도 있습니다. color: rgb(50%, 100%, 25%);.

CSS에서 값 계산

최신 버전의 CSS 할 수있다 값을 계산하는 간단한 수학 연산. 이렇게 하려면 다음을 사용하십시오. calc 수행할 작업은 괄호 안에 표시됩니다. 단위, 괄호 및 합계(+), 빼기(-), 곱셈 (*) 및 나눗셈 (/). 표현식은 다음과 같은 유형입니다. width:calc((90%-20px)/2));.

변수는 수학 연산에 사용될 수 있습니다. CSS 한 재산의 계산에서 다른 재산의 가치를 참조하는 것 var. 스타일의 실제 속성을 참조하지 않고도 변수를 사용할 수 있도록 하기 위해 존재하지 않는 속성을 인용하는 것도 허용됩니다. CSS 형식을 권장합니다 --nombre-variable (발명된 속성 이름 앞에 하이픈 2개) 이러한 방식으로 요소의 높이를 너비의 절반으로 정의하려면 CSS 으로 height:calc(var(width)/2); 새 변수 "두께"(다른 속성에서 사용할 수 있음)를 정의하려면 다음과 같이 작성합니다. --grosor:4px; 나중에 참조할 수 있도록 margin-top:calc(var(--grosor)*4);

브라우저 종속 CSS 속성

CSS 컨소시엄에서 표준화한 규격입니다. W3C (월드 와이드 웹 컨소시엄) 그러나 많은 속성이나 동작 스타일은 사양에 포함되기 전에 브라우저에 도달합니다. 버전의.

그래서 코드는 CSS 브라우저의 현재 기능과 함께 작동하지만 새로운 기능과의 호환성을 잃지 말고 접두사가 사용됩니다.. 이 접두사는 다음에 따라 다릅니다. 렌더링 엔진 참조하려는 웹 브라우저를 사용합니다(스타일이 정의되어 있음).

접두사 -webkit 다음을 기반으로 하는 브라우저에서 작동합니다. 웹킷 으로 Safari o 크롬. 접두사 -moz 기반 브라우저에 사용됩니다. 렌더링 엔진 de 모질라현재 도마뱀 붙이으로 파이어 폭스 그리고 그 파생상품. 참고로 EdgeHTML, 렌더링 엔진 브라우저 Edge Microsoft(이전에는 삼지창), 접두사가 사용됩니다 -ms. 브라우저의 경우 Opera 그가 자신의 것을 사용하기 시작했기 때문에 조금 특별합니다 렌더링 엔진, 다음과 같이 언급됨 -o이지만 현재는 다음과 함께 작동합니다. 웹킷, 이는 다음과 같이 표현됩니다. -webkit.

브라우저를 참조하는 속성을 사용하려면 이름을 쓰고 접두사를 붙이고 다음과 같이 하이픈으로 구분합니다. -o-border-radius:10px;, 이전 버전의 브라우저에서 둥근 테두리(둥근 모서리)를 설정하는 데 사용됩니다. Opera.

댓글

코드를 명확히 하기 위해 CSS 주석을 사용하면 크기가 커지는 단점이 있지만 더 쉽게 읽을 수 있습니다. 주석의 구문 CSS 여러 줄로 된 주석과 같습니다. C + + 나는 당신이 이미 알고 있다고 확신합니다: 시작하는 것 /* 그리고 끝 */,에서와 같이 C + +, 여러 줄을 차지할 수 있습니다.

선택기

의 정의 속성은 문서의 개체에 할당됩니다. HTML 선택기로 그룹화 그리고 이를 중괄호로 묶습니다. 선택기는 언어 요소를 참조할 수 있습니다. HTML (라벨), 예를 들어 div, 클래스(다음으로 할당됨) class en HTML) 식별자(다음으로 할당됨) id en HTML) 또는 별표로 표시되는 전체("범용 선택기")(*). 다음 예에서는 각 유형의 선택기를 보여줍니다.

라벨 HTML 클래스는 이름과 함께 스타일 정의에 표현되며, 클래스는 이름 앞에 마침표를 넣어 표시됩니다(.) 및 파운드 기호(#) 식별자용입니다.

위대한 힘의 일부 CSS 에 거주 속성을 정의할 때 선택자를 그룹화할 수 있는 가능성. 선택자를 그룹화하는 방법에는 여러 가지가 있습니다. 그들을 그룹화함으로써, 쉼표로 구분하면 인용된 각 선택자가 다음 속성을 가지고 있음을 나타냅니다..

이전 예에서는 소비량, 습도 및 온도 등급이 색상, 너비 및 높이를 공유함을 나타냅니다. 이 코드에는 새로운 개념도 도입되었습니다. 속성은 재정의될 수 있으며, 이 경우 가장 최근에 설명된 속성이 우선합니다.. 이러한 방식으로 온도 클래스의 요소는 최종적으로 해당 요소를 포함하는 개체의 50% 높이를 갖게 됩니다.

그룹화된 선택자가 쉼표로 구분되지 않으면 속성에 적용되는 조건은 누적됩니다.즉, 요소가 정의한 모양이나 동작을 얻으려면 요소가 모든 선택자를 충족해야 합니다. 선택자가 태그를 참조하는 경우 HTML 표시되는 순서는 포함 수준에서 내림차순이어야 합니다. 먼저 가장 높은 계층 수준이고 마지막에 가장 낮은 수준입니다.

이전 예에서는 요소가 정의되었습니다. div 또한 온도 등급에 속하는 요소와 온도 등급과 소비 등급(동시에 둘 다)을 모두 갖는 요소입니다. class="temperatura consumo". 요소 <div> 코드의 HTML 와 class="temperatura" 그들은 100%의 높은 수치를 가질 것입니다

텍스트를 정의하는 CSS 속성

텍스트의 모양에 영향을 미치는 세 가지 유형의 속성을 구별할 수 있습니다. (1) 텍스트가 표시되는 글꼴을 설정하는 속성, (2) 리터럴(텍스트의 내용)의 모양을 결정하는 속성 (3) 일반적인 것, 즉 텍스트의 모양과 다른 구성 요소의 모양에 모두 영향을 미치는 것. 일반적으로 마지막 그룹의 설명에서 설명한 내용은 다른 요소에 적용되는 속성과 동일하게 적용됩니다.

타이포그래피(글꼴)

• font-family 요소에 사용되는 글꼴의 이름을 나타냅니다. 원하는 글꼴이 없는 경우 대신 사용할 글꼴의 단일 이름이나 목록을 선호도 순서에 따라 쉼표로 구분하여 작성할 수 있습니다. 같은 맥락에서 이름과 함께 일반 글꼴을 사용할 수 있습니다. monospace, serif, sans-serif, cursive, fantasy. 이러한 일반 글꼴 중에서 가장 중요한 것은(데이터 표시를 위해) 이름에서 알 수 있듯이 시스템에서 사용할 수 있고 브라우저에서 미리 설정한 고정 간격 글꼴을 사용하는 첫 번째 글꼴입니다. 두번째, serif, 사용 가능한 기본 항목을 사용합니다. 세리프(마무리 또는 우아함). 세 번째가 표시된 경우 경매 없이, sans-serif. 손으로 그린 ​​글씨 흉내내기 cursive (분명히 개선될 수 있는 호출 방법) 및 시스템의 장식적인 타이포그래피 fantasy, 5개 중 마지막.

  코드에 관해서는 CSS 공백은 구분자로서 특별한 의미를 가지며, 글꼴군 이름이 공백으로 구분된 여러 단어로 구성될 경우 혼동을 피하기 위해 따옴표 사이에 쓴다.

  CSS font-tamily ejemplo de uso

  CSS

  <br /> font-family: DejaVu, Helvetica, Arial, “a palo seco”, sans-serif;

  1	font-family: DejaVu, Helvetica, Arial, “a palo seco”, sans-serif;

  웹 브라우저는 로컬 글꼴(작동하는 시스템에 설치된 글꼴)은 물론 특별히 로드된 다른 글꼴도 사용할 수 있으며, 심지어 로컬에 설치된 글꼴과도 겹칩니다. 글꼴을 로드하려면 다음을 사용하세요. @font-face 해당 이름, 해당 정의의 다운로드 위치 및 해당되는 경우 해당 형식에 대한 설명을 나타냅니다.

  CSS Ejemplo de descarga de la definición de una tipografía con @font-face

  CSS

  <br /> @font-face<br /> {<br /> font-family:”SircuitoExpandedLight”;<br /> src: url(‘/EOT/Sircuito-Expanded-Light.eot’);<br /> }</p> <p>@font-face<br /> {<br /> font-family:”SircuitoRegularMedium”;<br /> src: url(‘tipos/Sircuito-Regular-Medium.eot’);<br /> src: url(‘tipos/Sircuito-Regular-Medium.eot?iefix’) format(‘eot’),<br /> url(‘tipografia/Sircuito-Regular-Medium.woff’) format(‘woff’),<br /> url(‘tipografia/Sircuito-Regular-Medium.ttf’) format(‘truetype’),<br /> url(‘tipografia/Sircuito-Regular-Medium.svg#webfont’) format(‘svg’);<br /> -webkit-font-smoothing:antialiased;<br /> }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  @font-face { font-family:“SircuitoExpandedLight”; src: url(‘/EOT/Sircuito-Expanded-Light.eot’); }   @font-face { font-family:“SircuitoRegularMedium”; src: url(‘tipos/Sircuito-Regular-Medium.eot’); src: url(‘tipos/Sircuito-Regular-Medium.eot?iefix’) format(‘eot’), url(‘tipografia/Sircuito-Regular-Medium.woff’) format(‘woff’), url(‘tipografia/Sircuito-Regular-Medium.ttf’) format(‘truetype’), url(‘tipografia/Sircuito-Regular-Medium.svg#webfont’) format(‘svg’); -webkit-font-smoothing:antialiased; }

  이전 예의 두 정의 중 첫 번째에서는 문서의 문자가 로드됩니다. Sircuito-Expanded-Light.eot 메인(루트) 폴더 안의 EOT 폴더에 위치하며 Family Name으로 지정됩니다. 회로확장된빛. 그런데 이 글꼴이 마음에 드시나요? 무료입니다. 할 수 있어요 GranaBot 이미지용으로 디자인한 Sircuito 글꼴을 무료로 다운로드하세요..

  예제에서 볼 수 있듯이 url 속성은 유니폼 리소스 로케이터를 사용하면 다운로드된 글꼴로 문서의 위치를 ​​지정할 수 있습니다. 슬래시는 다른 폴더의 이름을 글꼴 경로(호출이 이루어진 문서가 포함된 폴더부터 시작하거나 루트인 경우 루트부터)와 구분하는 데 사용됩니다. URL 바부터 시작하세요.

  두 번째 예에서는 여러 대체 문서를 사용하여 동일한 정의가 여러 브라우저에서 작동하도록 합니다(각 브라우저는 해석할 수 있는 유형을 로드합니다).

  정의의 마지막 줄에는 속성이 포함됩니다. font-smoothing 편지를 부드럽게 하려면 ( 앤티 앨리어싱). 표준 속성이 아니기 때문에 접두어를 사용합니다. -webkit.

• font-size 문자의 크기를 나타내는 역할을 합니다. font-size:12px;

• font-weight 글꼴 두께를 설정합니다. 일반적인 인쇄체 두께에 따라 숫자 값(일반적으로 100에서 100 사이의 900의 배수)으로 표현되거나 더 자주 이름으로 표현될 수 있습니다. normal 기본 두께의 경우, bold 대담한 사람들을 위해, bolder 일반적으로 블랙이라고 불리는 버전의 경우, light 벌금(일반적으로 빛이라고 함) 및 lighter 가장 얇은 것(때때로 얇은 것이라고도 함).

  글꼴의 일반 버전의 숫자 값은 400(단위 없음)이고 굵은 버전의 경우 700입니다.

  기본적으로 다른 값을 지정하지 않으면 글꼴의 모양은 다음에 해당하는 것입니다. normal 또는 400이므로 상속되는 일반 요소나 컨테이너에서 변경되지 않은 경우 표시할 필요가 없습니다. font-weight 용기를 가지고 normal.

• font-stretch 해당 제품군에서 사용할 수 있는 한 문자의 너비를 나타내는 데 사용됩니다. 가장 좁은 것부터 가장 넓은 것 순으로 속성이 취할 수 있는 가능한 값은 다음과 같습니다. ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded y ultra-expanded. 이전 속성에서 사용된 것과 동일한 기준을 사용하면 기본 너비는 다음과 같습니다. normal 정의된 것보다 상위 계층 순서로 변경되지 않는 한 이를 명시적으로 표시할 필요는 없습니다.

• 와 font-style 텍스트가 모양에 영향을 미치는 비스듬한 문자 또는 비스듬한 문자로 그려졌는지, 특별한 의미(예: 외국어)를 표현하는 필기체 문자로 그려졌는지 또는 이전 문자가 아닌 둥근 문자로 그려졌는지 나타낼 수 있습니다. 또는 정상. 가치 oblique 첫 번째 기능, 즉 외관과 가치의 기능을 수행합니다. italic 두번째. 둘의 생김새가 비슷하거나 심지어 같은 경우가 많다는 것은 용법(의미)이 헷갈릴 때도 있다는 뜻이므로 주의할 필요가 있다. 다른 속성과 마찬가지로, normal 이전 값을 비활성화하는 역할을 합니다.

• text-decoration 밑줄을 긋는 역할을 합니다(값 underline), 윗줄(값 포함 overline), 지우기(값 포함) line-through) 또는 플래시(값 포함) blink) 이 속성이 영향을 미치는 텍스트입니다.

• 일련의 타이포그래피 측면을 완성하려면, 우리 애플리케이션에는 별로 관련이 없지만, font-variant, 신청할 수 있습니다 작은 모자들 (소문자 대문자)를 텍스트에 추가합니다.

본문

• text-align 텍스트 블록을 정렬하는 방법을 브라우저에 알려줍니다. 가능한 정렬은 코드의 왼쪽(기본적으로 고려됨)입니다. left, 값을 중심으로 center, 바로 사용 right 양쪽 끝에서 정당화되었습니다. justify.

• line-height 텍스트 줄 사이의 구분을 설정합니다. 이 경우 백분율을 사용하면 100% 값은 컨테이너의 치수가 아닌 텍스트의 높이에 해당합니다. 텍스트와 관련하여 가장 많이 사용되는 측정값은 120%에 해당합니다. 100% 선은 한 선의 아래쪽이 다음 선의 위쪽에 닿는 것을 의미합니다. 타이포그래피 디자인은 일반적으로 어느 정도의 여백을 포함하지만, 줄 사이에 약간의 여백을 두는 것이 일반적입니다.

  줄 사이의 간격을 표현하기 위해 텍스트 상자의 높이를 기준으로 줄의 높이를 계산하는 계수(단위 없는 값)를 지정할 수도 있습니다.

• letter-spacing 타이포그래피에서는 다음과 같이 알려진 단어 글자 사이의 공간 값입니다. 커닝 o 추적.

• word-spacing 단어 사이의 간격을 나타냅니다.

• white-space 텍스트에서 공백의 동작을 설정합니다. 값이 사용되는 경우 normal기본적으로 사용되는 는 코드의 여러 공백을 결합합니다. HTML 웹 페이지의 프리젠테이션 중 하나(브라우저에 표시됨)에서 공백을 참조로 사용하여 블록에 공백이 없는 경우 줄을 바꿉니다.

  가치 nowrap 또한 반복되는 공백을 하나로 합치지만, 줄이 컨테이너에 맞지 않더라도 공백의 텍스트 줄을 분할하지 않고 필요한 경우 공간을 넘치고 필요한 경우 외부에 씁니다. 선을 명시적으로 나누려면 레이블을 사용할 수 있습니다. <br> de HTML.

  사용 pre 여백은 하나로 합쳐져 통일되지 않으며, 그 여백을 기준으로 선이 분할되지도 않는다.

  pre-line 반복되는 공백을 결합하고 필요한 경우 공백을 참조로 사용하여 줄을 끊습니다.

  pre-wrap 반복되는 공백을 유지하고 필요한 경우 공백을 참조로 사용하여 줄을 바꿉니다.

색상

En CSS 색상에 따라 표현할 수 있습니다. RGB 색상 모델 또는 에 따라 HSL 색상 모델 두 경우 모두 투명성 정보가 포함될 수 있으며 일반적으로 알파 채널 o 알파 구성, 이는 RGBA 및 HSLA 모델을 생성합니다.

색상을 형식으로 표현하려면 RGB 16진수 표기법을 사용하면 구문이 사용됩니다. #RRGGBB, RR은 빨간색 구성 요소의 값(원칙적으로 두 개의 16진수 사용)이고, GG는 녹색 구성 요소의 값이고 BB는 파란색 구성 요소의 값입니다. 이미 말했듯이 각 구성 요소의 두 자리 숫자가 동일한 값을 가지면 다음과 같이 표현할 수 있습니다. #RGB 소위 웹 안전 색상에 사용할 수 있는 색상 수를 제한합니다.

컬러를 표현하는 방식 중 가장 클래식하고 많이 사용되는 이런 방식 외에도 다음과 같이 표현할 수 있습니다. rgb(R,G,B), hsl(HSL), rgba(R,G,B,A) y hsla(HSLA) 형식으로 나타내기 위해 RGB, Hsl 투명성이 표시된 해당 형식(알파 채널)

단위 접미사를 추가하여 달리 요청하지 않는 한, RGB 모델 세 가지 구성 요소에 대해 0에서 255까지의 십진수 값을 사용합니다. 알파 구성 요소 는 계수(0에서 1까지의 십진수)이고 HSL 색상 모델색상(Hue)은 각도를 나타내는 0~360(단위 없음) 범위의 십진수 값입니다. 채도와 광도 값 HSL 모델 일반적으로 백분율로 표시됩니다.

이미 말했듯이, 사용빈도는 높지 않지만, 색상은 이름으로 표시될 수 있습니다. color:black; 대신 color:#000000;. 첫 번째 형식은 더 읽기 쉽지만 다음으로 작성된 응용 프로그램에서 숫자로 수정하기가 더 어려운 간단한 값 테이블로 제한됩니다. 자바 스크립트.

IoT에 연결된 센서의 데이터를 그래픽으로 표현하기 위한 제안에는 색상과 관련된 세 가지 속성만 필요합니다. 지금 설명하는 텍스트의 이름과 이를 지원하는 구성 요소의 이름을 나타내는 데 모두 사용됩니다.

• color 요소의 색상을 나타냅니다. HTML 다른 색상을 개별적으로 할당하여 명시적으로 변경하지 않는 한 포함된 내용(상속)의 색상입니다.

• background-color 요소의 배경색을 정의하는 데 사용됩니다. HTML. 색상을 값으로 나타내는 것 외에도 RGB o Hsl 특별한 값을 사용할 수 있습니다 transparent 개체에 배경색이 없고 그 뒤에 있는 내용을 볼 수 있도록 하려면, 즉 개체가 그려진 요소를 가리지 않도록 해야 합니다.

• opacity 요소와 모든 콘텐츠의 불투명도(간접적, 투명도)를 설정할 수 있습니다(배경의 투명도와 혼동하지 마세요). 그 자체가 투명한 다른 요소에 포함된 요소에 투명도를 할당하면 투명도가 높아지며 별도로 작동하지 않습니다. 투명한 개체에 포함된 개체를 더 불투명하게 만들 수는 없습니다. 의 가치 opacity 와 같은 계수로 표현된다. opacity:0.5; 불투명도 50%를 나타냅니다.

  이전 버전의 Microsoft 브라우저에서는 이 속성을 사용하지 않았지만 다음 속성이 있었습니다. filter (필터)는 다른 값 중에서 알파를 지원할 수 있습니다( 알파 채널) 불투명도 백분율을 할당할 수 있습니다. opacity 형식에 따라:

  CSS para dar opacidad en los antiguos navegadores web de Microsoft

  CSS

  <br /> filter:alpha(opacity=50); /* Opacidad del 50% en una versión 8.0 o anterior de Microsoft Internet Explorer */

  1	filter:alpha(opacity=50); /* Opacidad del 50% en una versión 8.0 o anterior de Microsoft Internet Explorer */

조치

En CSS, 요소의 측정 <div>그래픽 컨테이너를 구성하기 위해 선택한 는 다음과 같이 설정됩니다. width (너비) 및 height (알토).

내용 사이에 <div> 그 둘레에는 다음 값으로 결정되는 채우기 영역이 있습니다. padding. 객체의 둘레를 둘러싸는 것은 속성으로 측정이 지정된 가장자리입니다. border. 물체의 외관을 분리하기 <div> 주변의 다른 물체 중에서 측정값이 다음과 같이 결정되는 공간이 있습니다. margin.

정상적인 조건에서 물체가 사용하는 공간의 측정 <div> 너비 또는 높이에 패딩을 더한 값(padding) 더하기 테두리(border) 더하기 여백(margin). 설정된 관련 측정이 물체의 유용한 내부 공간인 경우 <div>, 이 구성은 매우 실용적이지만 알려진 것이 전체 측정값인 경우 이 행동을 바꿀 수 있나요, 기본적으로 설정되어 전체 너비와 높이 측정값이 다음과 같이 표시됩니다. width (너비) 및 height (높이) 패딩, 테두리 및 여백을 추가하는 대신 빼는 방식입니다. 이 모드를 사용하려면 propiedad box-sizing 값 border-box (기본값은 content-box)

다음 다이어그램은 결과 값을 그래픽으로 보여줍니다. width (너비) 및 height (높음) 사용하는 경우 box-sizing:border-box; (전체) 또는box-sizing:content-box; (내부에)

측정값은 이미 설명한 단위로 표현됩니다. 여러 값으로 정의된 속성의 경우, 서로 다른 유형의 평균으로 표현된 수치가 혼합될 수 있습니다. 또한 IoT에서 센서 그래프를 구현하는 데 사용할 용도와 관련된 몇 가지 특별한 값이 있습니다. 구체적으로 다음 값을 사용할 수 있습니다. auto 재산에 margin 어떤 상황에서는 개체를 중앙에 배치하는 리소스로 사용됩니다.

위의 예에서 "small_box" 클래스에 대해 2픽셀 두께의 테두리가 정의되고 검은색 획(#000000) 연속 (solid). "big_box" 클래스에서 테두리에 사용되는 선은 점선(dashed) 및 색상 빨간색(#FF0000). 이러한 값을 별도로 표현하기 위해 다음을 사용할 수 있습니다. border-width 두께의 경우, border-style 뇌졸중과 border-color 색상을 위해. 이러한 가장자리 속성은 차례로 복합적이며 위에서 설명한 대로 시계 방향을 따라 위쪽, 오른쪽, 아래쪽 및 왼쪽 피처로 구성됩니다.

정의된 두 클래스는 동일한 측정값을 가지지만 값을 사용할 때 첫 번째 클래스는 더 작습니다. border-box 재산을 위해 box-sizing, 패딩, 테두리 및 여백은 기본값과 같이 콘텐츠 주변이 아닌 객체 내부에 그려집니다. "big_box" 클래스에는 표시되지 않으므로 기본적으로 값을 취함 content-box 패딩, 테두리 및 여백이 표시된 크기로 증가합니다. width y height.

위 예시의 클래스 마진 값은 상, 우, 하, 좌 10픽셀이므로 하나의 값으로 표현할 수 있습니다. margin:10px;. 제3자가 개발한 코드를 이해하기 위해 이 대안을 아는 것은 매우 흥미롭습니다. 하지만 이 구현 제안에서는 더 읽기 쉽게 만들기 위해 값을 표시하고 반복하는 것이 제안됩니다.

이전 예의 세 클래스는 동일한 결과를 생성합니다. 소위 "간결한"의 정의는 더 간결하고 읽기의 명확성을 추가하는 것보다 일반적으로 형식인 소위 "loquacious"의 정의보다 적습니다. 상속을 통해 다른 값을 재사용하여 속성의 일부 부분적이고 구체적인 측면을 수정하는 데 사용됩니다(컨테이너에 의해 제공되거나 요소에 할당된 클래스 중 하나에 의해 제공됨). 주석과 같이 코드를 더 읽기 쉽게 만들기 위해 속성 및 기타 상황을 정의하는 이러한 방식의 추가 텍스트로 인해 서버에 부과되는 부하가 크기 및 이에 따른 트래픽 증가와 관련된 경우 다음을 수행할 수 있습니다. 예를 들어 다음에서 처리합니다. PHP 이 언어의 코드 생성 전략의 일부로.

상자 모델의 치수는 주로 요소에 영향을 미칩니다. <div> 하지만 속성을 사용하여 다른 요소에 이 동작을 강제로 적용하는 것이 가능합니다. display 그리고 가치 block. 요소가 한 줄의 텍스트처럼 흐르도록 하려면 다음을 사용하세요. display:inline; 동작, 측정 및 흐름 모두를 다음과 결합할 수 있습니다. display:inline-block;

가치 none 재산에 display, 다음과 같이 사용됨 display:none;을 사용하면 개체를 숨길 수 있으며, 이를 통해 개체를 "켜고" "끄는" 역할을 합니다. 자바 스크립트.

요소의 크기가 지정되지 않은 경우 콘텐츠를 맞추는 데 필요한 모든 크기가 필요합니다(실제로는 크기를 설정할 필요 없이 콘텐츠를 맞춥니다). 그러나 치수가 표시된 경우 포함된 개체가 맞지 않을 수 있습니다. 이러한 경우 크기는 존중되지 않으며 모든 콘텐츠가 표시될 수 있도록 크기가 늘어납니다.

다른 고정 측정값에 포함된 요소가 크기를 초과하면 잘리도록 속성이 사용됩니다. overflow 용기를 가지고 hidden. 가치와 함께 scroll, 컨테이너를 초과하는 객체도 잘립니다. hidden 하지만 이동하면 볼 수 있는 스크롤바가 표시됩니다. 가치 auto 콘텐츠의 크기에 따라 필요한 경우에만 스크롤 막대가 나타나도록 합니다.

또한 콘텐츠에 필요하지 않은 경우에도 컨테이너가 해당 공간을 차지하도록, 콘텐츠에 필요할 때 크기를 제한하지 않고 컨테이너가 해당 공간을 차지하도록 최소 크기를 설정할 수도 있습니다. 이 작업을 담당하는 속성은 다음과 같습니다. min-width 아초와 min-height 키가 큰 사람을 위해. 반대의 의미로, max-width 최대 너비를 설정하고 max-height 상쇄되는 최대 높이 width 이미 height.

웹페이지 요소의 흐름

요소로 정의한 직사각형(블록) <div>, 기본적으로 서로 아래에 배치됩니다. 이 동작을 변경하려면 속성을 사용할 수 있습니다. float, 나타내는 left o right 값으로 각각 왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽으로 흐르도록 합니다. 반대로, 한 객체가 다른 객체의 오른쪽이나 왼쪽으로 "떠다니는" 것을 방지하려면 다음 속성을 사용할 수 있습니다. clear 가치와 함께 left, right o both, 왼쪽에서 오른쪽으로, 오른쪽에서 왼쪽으로 또는 둘 다에서 흐름을 재정의합니다.

다른 상황에서 발생하는 것과는 반대로, 흐름이 생성되었습니다. float 컨테이너의 크기를 자동으로 수정하지 않으므로 해당 속성에 포함하는 것이 유용합니다. overflow:auto; 위치로 인해 객체가 넘칠 때 컨테이너의 크기(높이)를 강제로 변경합니다. float.

요소 콘텐츠의 흐름을 구성하는 또 다른 방법은 속성을 사용하여 요소를 열로 나누는 것입니다. column-count (현재로서는 다음과 함께 제공되어야 합니다. -webkit-column-count 과 -moz-column-count) 열의 크기는 다음과 같이 표시(실제로 제안)될 수 있습니다. column-width (-webkit-column-width -moz-column-width) 및 열 사이의 분리 column-gap (-webkit-column-gap -moz-column-gap)

블록이 나누어지지 않고 그 내용이 여러 열에 분산되도록 다음을 사용할 수 있습니다. display:inline-block; 비록 그것은 확실히 암시하지만. 열의 일부를 사용하지 않은 채로 두십시오.

위치

웹 페이지에서 요소의 위치를 ​​설정하기 위해 CSS는 각 요소마다 다를 수 있는 여러 위치 지정 모드를 사용합니다. 즉, 동일한 웹 사이트에서 서로 다른 위치 지정 기준을 혼합할 수 있습니다.

• position:static; 이는 기본 위치입니다.(이전에 수정되지 않은 경우 표시할 필요가 없습니다.) 이러한 유형의 위치 지정은 페이지의 "자연스러운" 흐름을 따릅니다. 오른쪽과 위에서 아래로 공간이 있습니다. 위치를 설정하기 위해 수평 또는 수직 좌표를 사용하지 않으며, 객체의 순서에 해당하는 위치를 따릅니다.

• position:fixed; 브라우저 창의 고정된 위치(예: 메뉴 등)에 개체를 배치하는 데 사용됩니다. 요소의 위치는 다음과 같이 수평으로 지정됩니다. left o right 왼쪽이나 오른쪽의 분리를 각각 결정하고 top o bottom 브라우저 창(뷰포트) 가장자리 위 또는 아래로 분리합니다.

  이 유형과 다른 유형의 위치 지정을 사용하면 객체가 겹칠 수 있습니다. 먼저 그려진 객체(코드 앞부분에서 정의됨) HTML)는 나중에 그려진 것(나중에 코드에 포함된 것)에 의해 다루어질 수 있습니다. HTML). 일반적인 순서를 변경하려면 속성을 사용할 수 있습니다. z-index,에서 가장 높은 값을 갖는 객체 z-index 그들은 가치가 낮은 사람들을 보장합니다.

• position:relative; 속성에 표시된 대로 요소를 "정상" 위치에서 이동합니다. left o right 수평으로 그리고 top o bottom 수직으로.

• position:absolute; 해당 요소를 포함하는 개체를 기준으로 고정된 위치에 요소를 배치합니다. 그 위치는 이전 사례와 마찬가지로 다음과 같이 표현됩니다. left,right, top y bottom

  이러한 위치 지정 유형의 이름은 처음에는 혼란스럽습니다. 위치는 해당 속성을 사용하는 개체보다 계층적으로 상위 개체에 대해 설정되므로 절대적인지 논쟁의 여지가 있습니다.

  객체를 포함하는 요소가 <div> 첫 번째 계층 수준에서 사용하는 것은 <body>따라서, 만약 <div> 당신은 무엇을 사용합니까 position:absolute; 다른 항목에 포함되어 있지 않으면 해당 위치는 웹 페이지와 관련하여 "절대적"입니다.

특정 미디어 및 특성에 대한 속성(미디어 쿼리)

CSS 동일한 스타일 시트에서 사용되는 장치 유형(예: 화면 또는 프린터), 크기, 방향(세로 또는 가로) 또는 해상도에 따라 다양한 미디어 또는 지원에 대해 서로 다른 모양을 정의할 수 있습니다. 이는 동일한 웹 페이지를 상황에 가장 적합한 방식으로 표시할 수 있도록 하는 역할을 합니다.

미디어를 참조하려면 다음을 사용하세요. @media 글꼴에 대해 이미 설명한 것과 비슷한 방식으로 @font-face, 중괄호로 묶음({ y }) 다양한 요소의 정의: 라벨 HTML, 클래스, 식별자...

사용 가능한 미디어 유형 CSS3 위치 : all, 모든 미디어를 지칭하려면 (모두), screen 모든 유형의 화면에 대해(이전 버전의 CSS 그들은 TV와 컴퓨터 모니터를 구별했습니다) print 프린터 출력용 및 speech 음성 합성기로 정보를 해석하는 오디오 웹 리더용입니다.

위의 예에서 텍스트 클래스의 요소는 화면에 검정색 배경과 흰색 텍스트가 있지만 흰색 배경과 검정색 텍스트로 인쇄됩니다.

예를 들어 사용 가능한 해상도나 뷰포트 비율 등을 기반으로 다양한 속성 집합을 정의하기 위해 미디어에 조건을 적용할 수 있습니다. 이러한 조건과 수단 자체는 논리적인 연산으로 구성될 수 있습니다. and, not y only 여러 가지를 준수하도록 요구하거나, 준수하지 않거나, 준수할 때만 요구하는 것입니다.

사용 가능한 조건 중에서 특히 흥미로운 조건이 있습니다. max-width (최대 창 너비), max-height (최대 창 높이), min-width (최소 창 너비), min-height (최소 창 높이), orientation (방향은 landscape, 풍경 또는 portrait, 수직의), max-resolution (최대 해상도는 dpi, 인치당 도트 수 또는 단위 dpcm, 센티미터당 포인트) 및 min-resolution (최소 해상도, dpi o dpcm).

이전 예에서는 모든 미디어에서 main_block 클래스의 요소가 배경색 #CCCCCC를 갖도록 배경색을 정의하는 것부터 시작했습니다. 화면에 표시되고 창 너비가 최소 320픽셀인 경우 왼쪽 및 오른쪽 여백은 자동으로(블록 중앙) 지정되고 요소 너비는 300픽셀이 됩니다. 화면 해상도가 640픽셀이면 블록 너비는 620픽셀이 됩니다. 두 번째 미디어 정의에는 여백 정보가 포함되지 않으며 두 번째 조건을 충족하는 장치도 첫 번째 조건을 충족하므로 수평 여백은 여전히 ​​자동입니다.

마지막으로 예제에서는 배경색이 변경되어 인쇄물에서 흰색이 됩니다.

다양한 미디어에 대한 스타일을 정의하는 일반적인 방법은 일반적으로 일반적인 색상 및 글꼴부터 시작하고 일반적으로 스마트폰 및 태블릿에 대해 가장 제한적인 기하학적 구조(픽셀 수가 가장 적은 장치의 측정)로 시작하는 것입니다. 세로로 사용하는지, 가로로 사용하는지 아는 것이 중요합니다. orientation 그리고 확실히 그것의 해상도도 min-resolution. 그런 다음 더 큰 화면에 대한 다양한 크기가 표시되고 일반적으로 IoT 그래픽의 예에서는 생략된 인쇄 및 음성 미디어로 끝납니다.

사용 @media 크기, 해상도, 방향과 같은 조건을 적용하면 디자이너는 다양한 스타일을 사용하여 각 장치에 가장 적합해 보이는 단일 웹 페이지를 만들 수 있습니다. 이러한 동작을 일반적으로 반응형 디자인이라고 합니다. 매우 자유로운 번역으로 적응 가능한 디자인.

SVG 그래픽 컨테이너용 CSS

지금까지 설명한 내용을 바탕으로 이제 다음과 같은 스타일을 정의할 수 있습니다. SVG 그래픽 HTML 컨테이너 IoT에 연결된 센서의 상태를 표현하는 것입니다. 다음 코드에는 일련의 기사 제안에서 사용하는 것보다 더 많은 수의 그래프에 해당하는 열의 분포를 주석으로 포함하여 다른 경우에 재사용할 수 있도록 하는 제안이 있습니다.

아래에서 이러한 스타일이 어떤 모습인지 확인할 수 있습니다. SVG 그래픽용으로 제안된 컨테이너의 HTML 코드 이전 기사에서.

이 시리즈의 다음 기사에서는 설명합니다. SVG로 그리는 방법 사물인터넷(IoT)에 연결된 센서의 상태를 보여주는 데이터 그래프.