CSS로 돌아 가기 기본 용어 설명
CSS 또는 계단식 스타일 시트는 웹용 디자인 규칙의 정의 언어를 완성합니다. 아티스트들은 매일 CSS를 사용하여 기본 웹 사이트 레이아웃을위한 일련의 규칙을 만들고, 구성하고 인코딩합니다. 이것은 프론트 엔드 디자인을위한 가장 대중적인 언어가되었고 CSS3의 최근 버전으로 놀라운 능력을 제공합니다. 그러나이 코드는 모두 실제로 무엇을 의미합니까??
언어 자체는 이제 몇 년 동안 완전히 개발되었습니다. 혼동은 주로 잘못된 의사 소통과 유사한 용어의 오용으로 인해 발생할 수 있습니다. CSS는 테이블에 많은 새로운 개념을 제공합니다. 우리는 CSS 전문가로서의 가장 유명한 용어 중 일부를 다룰 것입니다..
CSS를 왜 전문화해야 하는가??
이 질문은 이전에 제기되었으며 2011 년에도 우리는 동일한 결과가 나타날 수 있습니다. CSS는 스크립팅이나 프로그래밍을 좋아하지 않는 강력한 언어입니다. 웹 페이지가 어떻게 동작해야 하는지를 기술하는 데 사용되는 스타일 언어입니다..
CSS를 사용하여 개별 HTML 요소의 속성을 직접 조작 할 수 있습니다. 모든 블록, 단락, 링크 및 이미지는 CSS 규칙을 통해 영향을받을 수 있습니다. 웹을위한 프리젠 테이션 의미를 정제하는 것은 항상 큰 진보였습니다. 이것이 CSS가 여전히 디자이너를 앞서가는 주된 이유입니다. 아무도 더 나은 것을 만들지 않았습니다.!
속성 및 값
이것이 CSS에 침입하는 가장 간단한 방법입니다. 모든 코드는 디자인을 적용 할 요소를 선택하고 적용 할 항목을 두 가지 작업으로 나눕니다. 후자는 속성 / 값 쌍을 통해 생성됩니다..
예로서 색깔 : 빨강; 매우 간단한 속성 / 값 쌍입니다. 우리가 사용한 속성은 색깔 우리가 받아 들일 수있는 값 텍스트 색상을 변경합니다. 또한 16 진 코드 또는 RGB (빨강 - 녹색 - 파랑) 색상 데이터 일 수 있습니다. 오해의 소지가 있기 때문에 디자이너들은 가치에 대한 아이디어를 언급하지 않을 것입니다.
속성과 값은 실제로 하나의 아이디어입니다. 모든 속성 선언에는 값이 필요하며 값 자체는 의미가 없습니다. 많은 다양한 속성과 HTML 요소에 미치는 영향에 대한 많은 문서가 온라인에 있습니다. 근처의 서점에서 CSS 참조 서를 구입하는 것이 좋습니다. 그들은 상당히 싸고 당신이 필요로하는 모든 정보를 가지고 있습니다..
선택기 값
셀렉터는 CSS 코드의 전체 라인을 완성하는 데 필요합니다. 이것들은 우리가 목표로하는 요소의 유형을 설정하도록 선언 한 것입니다. 많은 셀렉터가 있으며 많은 사람들이 너무 복잡하기 때문에 일반 디자이너는 기술이 필요하지 않습니다. 더 많은 정보를 얻고 싶다면 W3의 선택기 문서를 확인하십시오..
스타일 정의를 시작하는 가장 간단한 방법은 노출 된 요소를 속성 선택자로 사용하는 것입니다. 이것은 다음과 같은 루트 코드를 조작하는 것을 의미합니다. 피 단락의 경우, div 부서 및 심지어는 신체 과 HTML 전체 웹 페이지 문서를 조작하는 데 사용할 수 있습니다. 다음은 모든 단락 요소의 스타일을 지정하는 간단한 예입니다..
p font-family : Arial, sans-serif; 색상 : # 222; font-weight : bold;
CSS의 진정한 중요성은 정확한 셀렉터 스니핑이 얼마나 중요한지를 보여줍니다. 타겟 스타일을 달성하는 가장 좋은 방법은 수업 과 신분증. 이것들은 HTML을 통해 HTML을 구성하는 일반적인 아이디어로, 속성을 통해 ID와 클래스 값을 갖도록 요소를 설정할 수 있습니다. 그런 다음 CSS를 사용하여 해당 특정 블록에 스타일을 적용하는 것이 간단합니다..
p # firstpar 글꼴 크기 : 14px; / * ID가 "firstpar"인 단락 단락 * / p.comment font-size : 1.0em; 라인 높이 : 1.3em; / * "comment"클래스의 단락 스타일 * /
길이 단위 및 값
종종 이러한 용어는 혼란스러워지고 큰 놀라움이 아닙니다. 값은 앞서 속성을 설명하는 데 사용하는 배치로 설명했습니다. 길이 단위는 속성을 설명하는 데 사용되는 값이기도합니다.
차이점은 이러한 값은 숫자 데이터를 요구하므로 단위 형식을 반환해야한다는 것입니다. 픽셀 (px)은 가장 널리 사용되며 폭 / 높이, 글꼴 크기, 패딩 / 여백 등 거의 모든 용도에 사용할 수 있습니다..
이 외에도 유체 레이아웃을 통해 자주 사용되는 백분율 (%)을 볼 수 있습니다. 너비 값을 백분율로 설정하면 컴파일러는 웹 브라우저의 전체 너비를 100 %로 가정합니다. 레이아웃 구조에 스타일을 적용하거나 심지어 페이지 인쇄술을 적용 할 때 디자이너에게 많은 정밀도를줍니다..
선언 블록
이제이 모든 용어를 모아서 스타일 시트 뒤에있는 핵심 아이디어에 대해 토론 할 수있게되었습니다. 코드 블록은 주제 영역을 지정하고 요소 세부 사항을 지정하는 데 사용됩니다. 예를 들어, 다음은 간단한 탐색 컨테이너의 코드 행입니다.
div # nav display : block; 너비 : 100 %; 패딩 : 3px 6px; margin-bottom : 20px;
이 코드를 표시하는 가장 쉬운 방법은 하나씩 차례로 속성을 추가하는 것입니다. CSS 개발자는 코드 블록을 사용하여 각 속성을 자체 줄로 나눕니다. 이 아젠다는 훨씬 더 많은 공간을 차지할뿐만 아니라 “웃더껑이” 필요한 것을 정확히 찾을 수있는 시트.
코드 블록을 분할하는 더 좋은 방법은 복잡한 요소가 임계 값에 도달 한 후에 자체 요소로 분리하는 것입니다. 이 숫자는 개인적인 것이며 개발자마다 다를 것입니다. 이것은 논리가 하나의 라인에 모든 것을 유지하기 위해 어리석게 지시하는 전환점입니다. 대부분 가독성 때문입니다..
아래에서는 모든 탐색 속성 블록의 예를 작성했습니다. 이 방법은 동일한 위치에 더 깊은 요소를 유지하므로 모든 탐색 요소에 대한 편집이 훨씬 간단합니다..
div # nav display : block; 너비 : 100 %; 패딩 : 3px 6px; margin-bottom : 20px; div # nav ul list-style : none; 디스플레이 : 블록; div # nav ul li float : 왼쪽; margin-right : 10px; 글꼴 크기 : 12px; div # nav ul li a color : # 0f0f0f; 텍스트 장식 : 없음; 디스플레이 : 인라인 블록; 패딩 : 2px 5px;
CSS2 / CSS3의 가능한 발전
최근 헤드 라인에서 CSS3의 놀라운 이점에 대해 논스톱으로 이야기했습니다. 그러나 실제로 무엇이 변경된 언어로? 분명히 오래된 코드는 여전히 잘 실행됩니다. 이것은 최소한 컴파일러 간의 완전한 하위 호환성을 보여줍니다 (항상 좋은 점).
주요 차이점은 주로 새 속성과 관련이 있습니다. 이를 통해 둥근 모서리와 드롭 섀도우 효과를 브라우저에서 렌더링 할 수 있습니다. CSS3는 또한 문서의 색상을 설명하는 새로운 도구를 제공합니다. HSL (Hue-Saturation-Lightness)은 불투명도를 줄이기위한 알파 채널을 포함하는 HSLA 외에도 최신 버전입니다..
속성 선택자는 스트레이트 마크 업 스타일링과 관련하여 큰 발전을 가져 왔습니다. 이 코드 스타일을 사용하면 특정 값을 갖는 속성을 포함하는 특정 요소 이름을 대상으로 지정할 수 있습니다. 노드를 조작하기위한 표준 설계 원칙이없는 XML과 같은 마크 업을 사용할 때 주로 유용합니다. 아래 예제는 비교적 간단한 개념입니다.
div [attrib ^ = "1"] / * 여기 스타일 * /
위의 코드는 CSS 선택기 라이브러리의 일부입니다. 이것은 속성을 가진 모든 div 엘리먼트에 영향을 미친다. “attrib” 또한 가치를 지니고있다. “1”. 이것이 여전히 혼란 스럽다면 아래의 예를 참조하십시오. 이론적으로이 두 선택기는 동일한 동작을 수행해야합니다..
p [id ^ = "primary"] / * 스타일 * / p # 기본 / * 스타일 * /
결론
지나치게 혼란스러운 용어 몇 개를 분해 한 후 CSS는 공원에서 산책하는 것처럼 보입니다. 언어는 매우 직관적이며 초보자는 처음 몇 시간 만에 설계를 시작할 수 있습니다. 이것이 웹 개발자들 사이에서 CSS가 인기있는 이유입니다..
CSS3의 이점은 이제 막 시작되었습니다. 새로운 몇 년 동안 진화하는 웹 트렌드는 우리가 웹 페이지 디자인에 대해 얼마나 많은 통제력을 갖고 있는지 보여줍니다. 현재 CSS는 프론트 엔드 웹 사이트 스타일링에있어 지배적 인 언어로 자부하고 있습니다. 초보 수준의 중급 수준의 기술로도 연습하면 풍부한 디자인 경험과 지식을 얻을 수 있습니다..
