![[코딩 자율학습 HTML + CSS + 자바스크립트] 6장 - CSS 필수 속성 다루기 - 9](https://i.ytimg.com/vi/6li1DwgOLLw/hqdefault.jpg)
콘텐츠
이 기사는 웹 디자이너와 개발자를위한 세계에서 가장 많이 팔리는 잡지 인 .net 잡지 234 호에 처음 게재되었습니다.
기술의 핵심은 작업을 수행하는 방법이며 프론트 엔드 개발자 및 디자이너로서 우리에게는 많은 작업이 있습니다. 즉, 우리는이 풍경이 얼마나 많이 변했는지 종종 잊습니다. 2002 년부터 2010 년까지 우리 커뮤니티는 코드와 리소스가 너무 많아서 성능과 유지 관리를 방해했습니다. 이를 극복하기 위해 우리는 '기술'이라고 부르는 수많은 팁, 트릭 및 해킹을 만들었습니다. 우리는 여전히 가장 효율적인 방식이 아닌 작업을 수행하고있었습니다.
360도를 수행하면서 지난 몇 년 동안 더 나은 표준과 표준 구현이 현실화되어 커뮤니티로서 더 새롭고 고급 '기술'을 개발할 수있었습니다. 이 새로운 풍경은 '현대 웹'으로 간주되는 것입니다.
'웹 2.0'이 정체되고 혼란스러워지면서 '현대 웹'도 혼란스러워졌습니다. 시간을주세요. 즉, 현재로서는이 용어가 무엇을 나타내는 지에 대한 공통적 인 이해가있는 한이 용어를 사용하고 남용 할 수 있습니다.
2010 년에 HTML5 사양이 출시되어 완전히 새로운 준 표준화 된 웹 환경을 제공했습니다. Opera, Firefox, Chrome 및 Safari와 같은 브라우저는이 새로운 물결을 수용하고 개발 팀을 표준 구현 및 API 탐색의 새로운 한계로 밀어 붙였습니다. 이러한 브라우저의 '온보드'방식에 대한 아이디어를 얻으려면 www.html5readiness.com의 HTML5 지원 변경 시각화를 확인하십시오.
Internet Explorer의 지원 부족에 대해 걱정하지 마십시오. Chrome 프레임 덕분에이 문제를 해결할 수 있습니다. Google이 2010 년에이 기능을 도입 한 이후로 Internet Explorer의 지원 메커니즘이되었습니다. IE의 모든 버전은 Chrome 프레임으로 타겟팅 할 수 있으며,이 경우 신규 사용자는 IE 내에서 경량 버전의 Chrome으로 선택한 웹 사이트를 렌더링하는 플러그인을 다운로드하라는 메시지가 표시됩니다. Chrome 프레임을 구현하기 위해 사이트의 head> 태그 내에 다음 meta> 태그를 추가합니다.
meta http-equiv = "X-UA-Compatible"content = "chrome = 1"/>
여기에서 IE 사용자가 아직 설치하지 않은 경우 JavaScript를 사용하여 플러그인을 다운로드하도록 요청할 수 있습니다.
스크립트 유형 = "text / javascript"src = "http : // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / script>
스크립트>
window.onload = function () {
CFInstall.check ({
모드 : "오버레이",
목적지 : "http://www.yourdomain.com"
});
};
/ 스크립트>
플러그인을 설치 한 후 특정 링크로 사용자를 보내도록 대상을 설정할 수 있습니다. 주의 할 점 : Chrome 프레임은 진정한 최신 브라우저를 위해 엄격하게 개발할 수있는 방법을 제공하지만 사용자가 원하지 않는 경우 플러그인을 다운로드하지 않을 수있는 옵션이 있다는 것을 잊지 말아야합니다. 그렇지 않은 경우 하나 또는 다른 버전의 IE에 대한 지원을 제공해야하는 경우 브라우저 간 경험과 함께 제공 할 수있는 것과 제공 할 수없는 것을 찾는 데 더 많은 시간을 소비해야합니다..
이 코드는 현대 웹 스택에서 개발할 수있는 훨씬 더 수준 높은 경쟁 영역을 제공하므로 마음을 편안하게 할 수 있습니다. 사이트를 올바른 크로스 브라우저 구조로 구성하기 위해 여러 브라우저 별 해킹을 생성해야하고, 슬라이스 된 이미지에 사용할 수있는 수많은 빈 요소를 생성하거나, 지나치게 장황하거나 중복 된 자바 스크립트 코드를 작성하여 가장 간단한 기능입니다. 이 모든 고통은 어떤 의미에서 오늘날 우리가 걱정하는 것과 동일한 문제입니다. 우리는 레이아웃, 스타일 및 기능에 맞서기 위해 더 많은 제어와 더 나은 도구를 위해 여전히 싸우고 있지만 성숙한 수준입니다.
형세
Clearfix
요소 플로팅은 CSS 2.1에서 다시 도입되었지만 우리가 기대했던 완전한 솔루션으로 밝혀지지는 않았습니다. 가장 큰 문제 중 하나는 자식 요소가 플로팅 될 때 부모 요소의 크기를 유지하는 것이 었습니다. 이를 해결하기 위해 clearfix 기술이 만들어졌습니다.
다음 HTML을 사용하십시오.
div>
div> ... / div>
div> ... / div>
/ div>
이 기술은 Nicolas Gallagher가 작성했습니다.
.clearfix : 이전,
.clearfix : after {
내용 : "";
디스플레이 : 테이블;
}
.clearfix : after {
클리어 : 둘 다;
}
.clearfix {
* 줌 : 1;
}
HTML5Boilerplate를 사용하여 프로젝트를 시작한다면 이미이 버전의 clearfix 기술이 포함되어있을 것입니다.
박스 크기
수년 동안 개발자는 어떤 박스 모델 구현이 더 합리적인지 토론했습니다. Quirks vs Standards 모드는 실제로 '설정 후 테두리와 패딩이 적용될 때 요소의 치수가 변경되어야하는지 여부'를 의미합니다.
이제 테두리와 패딩이 요소 내에서 사용 가능한 공간을 제거하고 요소의 너비 나 높이를 추가하지 않는 것이 더 합리적이라는 데 널리 동의했습니다. 이 논쟁은 박스 크기의 광범위한 구현과 관련이 없습니다. 브라우저는 그 반대의 경우 대신 사용자로부터 신호를받습니다.
Chris Coyier와 Paul Irish가 대중화 한 포괄적 인 기술은 다음과 같이 구현할 수 있습니다.
* {
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
상자 크기 : 테두리 상자;
}
CSS에서 * 선택기를 사용하는 것은 잠재적 인 성능 저하로 인해 논쟁이되었습니다. 이러한 종류의 주장은 웹 사이트 / 앱의 다른 모든 측면을 과도하게 최적화하지 않는 경우 경솔합니다. border-box를 사용하면 브라우저가 사용 가능한 공간 세트 내에 패딩과 테두리를 추가합니다. 'Standards Mode'는 box-sizing을 content-box로 설정하여 사용할 수 있습니다.
다중 열
웹은 서면 형식과 유형에서 크게 영감을 받았습니다. 불행히도 우리는 양피지 단계에 갇혀있었습니다. 이러한 문제 중 일부는 오랫동안 기다려온 페이징 미디어 및 CSS 영역 사양과 함께 문제가되고 있습니다. 즉, 더 많은 잡지와 같은 레이아웃을 향한 첫 번째 단계는 브라우저가 CSS 다중 열을 구현하기 시작했을 때 취해졌습니다. 이 효과를 생성하는 코드는 다소 간단합니다.
p {
-webkit-column-count : 2;
-moz-column-count : 2;
열 수 : 2;
}
A List Apart의 블로그에서 CSS3 다중 열 사양과 지원없이 모든 브라우저에 사용할 수있는 JavaScript 폴백에 대해 자세히 알아볼 수 있습니다.
계산
치수 계산은 어려울 수 있습니다. 예전에는 혼합 단위 계산은 말할 것도없고 어떤 종류의 단위 계산도 할 방법이 없었습니다. 계산 덕분에 모든 것이 변경되었습니다. 초기 요소 너비에 영향을주지 않거나 box-sizing : border-box와 같은 것을 활용하지 않는 패딩 효과를 만듭니다. 최근까지는 포함 요소를 추가해야만 가능했습니다.
.padded {
여백 : 0 자동;
위치 : 상대;
너비 : -webkit-calc (100 %-(20px * 2));
너비 : -moz-calc (100 %-(20px * 2));
너비 : calc (100 %-(20px * 2));
}
calc ()는 .padded의 부모 너비에 따라 정의 된 20px 패딩을 뺀 적절한 너비 계산을 처리합니다. 내 요소의 양쪽에 2를 곱하여 상대 위치와 왼쪽 및 오른쪽 여백을 사용하여 요소를 중앙에 배치했습니다.
스타일
투명도
요소의 올바른 스타일을 얻는 것은 항상 우리가 CSS에서 사용할 수 있었던 도구의 종류에 달려 있습니다. 투명성은 2000 년대 초 ~ 중반에 접하게되는 첫 번째 지원 변형 중 하나입니다.
HTML5의 출현과보다 집중된 표준 노력으로 브라우저는 불투명도 속성의 표준 구현을 가지며 새로운 색상 모듈 사양에 따라 알파 채널 지원을 노출했습니다. 여기에는 RGBA 및 HSLA 지침이 포함됩니다.
ㅏ {
색상 : rgba (0,255,0,0.5);
배경 : rgba (0,0,255,0.05);
테두리 : rgba (255,0,0,0.5);
}
HEX 값을 찾을 때마다 RGBA 또는 HSLA 색상을 사용할 수 있습니다. 또한 사양에서 바로 확인할 수있는 정의 된 이름이있는 재미있는 색상의 확장 된 목록도 있습니다. 이러한 기능은 요소간에 동적 혼합을 만들 때 유용합니다.
필터
CSS 필터는 매우 흥미 롭습니다. 타사 플러그인없이 페이지에서 요소의 모양과 느낌을 동적으로 변경할 수있는 기능은 놀랍고 Photoshop에서 보내는 시간을 크게 줄이는 데 도움이됩니다.
img src = "market.webp">
img {
-webkit-filter : 회색조 (100 %);
}
CSS 필터는 현재 WebKit 브라우저에서만 지원되므로 사용은 종속적이지 않고 추가적 특성이어야합니다. 여기에서 자세히 알아보세요.
이미지 교체
텍스트를 이미지로 대체하는 것은 오랫동안 존재 해 왔습니다. 불행히도 최신의 가장 정교한 이미지 대체 기술에는 접근성 측면에서 여전히 단점이 있습니다. 그러나 최근에 매우 영리하고 자신의 권리가 독특한 두 가지가 밝혀졌습니다. 첫 번째는 Scott Kellman이 썼습니다.
h1 class =’hide-text’> 내 웹 사이트 로고 / h1>
.hide-text {
텍스트 들여 쓰기 : 100 %;
공백 : nowrap;
오버플로 : 숨김;
}
두 번째는 Nicolas Gallagher가 작성했습니다.
.hide-text {
글꼴 : 0/0 a;
텍스트 그림자 : 없음;
색상 : 투명;
}
반응 형 비디오
반응 형 환경에서 미디어를 올바르게 확장하는 것은 어려울 수 있습니다. 적응 형 디자인을 존중하는 웹 사이트가 점점 더 많아지면서 요소의 크기와 가로 세로 비율을 적절하게 처리하는 것이 필수적입니다.
임베디드 비디오는 타사 서비스가 콘텐츠를 제공하는 방식으로 인해 얽 히기 어려운 미디어 유형 중 하나였습니다. 일반적인 YouTube 삽입은 다음과 같습니다.
iframe width = "640"height = "390"src = "http : // www.youtube.com/embed/oHg5SJYRHA0"frameborder = "0"allowfullscreen = ""> / iframe>
그러면 iframe 요소에 Flash 개체 또는 삽입 요소가 포함됩니다. iframe {maxwidth : 100 %; }은 너비가 변경 될 때 중첩 된 요소의 크기가 제대로 조정되지 않기 때문에 작동하지 않습니다. 그래서 우리는 약간의 속임수를 써야합니다.
div>
iframe width = "640"height = "390"src = "http://www.youtube.com/embed/oHg5SJYRHA0"frameborder = "0"allowfullscreen = ""> / iframe>
/ div>
iframe을 다른 요소로 래핑하면 적절한 반응 형 기능을 비디오에 추가하는 데 필요한 컨트롤을 얻을 수 있습니다.
.video {
위치 : 상대;
padding-bottom : 56.25 %;
높이 : 0;
오버플로 : 숨김;
}
.video iframe,
.video 객체,
.video embed {
위치 : 절대;
상단 : 0;
왼쪽 : 0;
너비 : 100 %;
높이 : 100 %;
}
.video 래퍼의 패딩 하단 설정 : 56.25 %; 이 방법의 마술입니다. 패딩을 사용한다는 것은 사용 된 백분율이 부모의 너비를 기반으로한다는 것을 의미합니다. '56 .25 % '는 16 : 9 화면 비율을 생성합니다. 원하는 경우 직접 수학하십시오. 9/16 = 0.5625입니다. 0.5625 * 100 = 56.25 (이것은 우리의 퍼센트입니다).
기능성
쉽게 요소 선택
많은 JavaScript 라이브러리 (예 : jQuery)의 인기로 인해 ECMAScript위원회와 W3C 표준은 개발자가 기본적으로 부족한 핵심 기능 중 하나 인 좋은 요소 선택에 주목했습니다. getElementByID () 및 getElementByClassName ()과 같은 메소드는 빠르지 만 개발자 커뮤니티에서 제공하는 선택기 엔진만큼 유연하고 강력하지는 않았습니다. querySelectorAll ()은 기본 선택기 메서드에서 이러한 유연성 중 일부를 모방하는 표준 기관의 방법이었습니다.
var items = document.querySelectorAll ( '# header .item');
querySelectorAll ()은 여러 선택자를 혼합하여 전달할 수 있습니다. 이것에 대해 더 읽어보십시오.
새 어레이 생성
배열을 반복하는 것은 작성하기가 귀찮은 일입니다. for () 루프를 작성하고 다시 작성하는 것은 재미 있지 않습니다. JS 버전 1.6에서 map () 메서드는 다른 배열에서 반복하고 새 배열을 만드는 쉬운 방법을 지원합니다.
var people = [’헤더’,’제임스’,’카리’,’케빈’];
var welcomes = people.map (function (name) {
return’Hi’+ name +’!’;
});
이 코드를 실행하면 console.log (welcomes)에서 welcomes라는 새로운 배열이 표시됩니다. [ 'Hi Heather!', 'Hi James!', 'Hi Kari!', 'Hi Kevin!' ].
문서 및 창 개체 정리
타사 JavaScript 라이브러리는 기본 문서 및 창 개체를 엉망으로 만드는 경향이 있습니다. 이는 다른 타사 라이브러리 및이를 포함하는 개발자에게 문제가 될 수 있습니다. 어느 쪽이든 새 인스턴스를 만들어 두 개체의 깨끗한 버전으로 작업하고 있는지 확인합니다. 이를 수행하는 가장 좋은 방법은 iframe 요소를 만들고이를 DOM에 삽입 한 다음 해당 개체의 새 인스턴스를 저장하는 것입니다.
var iframe = document.createElement ( 'iframe');
iframe.style.display = "없음";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);
웹 스택에 큰 개선이 있었지만 프로젝트 레이아웃, 스타일 및 기능 내에서 직면 한 과제를 해결하기 위해 기술 제품군을 지속적으로 완성하고 정교하게 만드는 것은 여전히 매우 중요합니다. 좋은 성장 에코 시스템을 유지하려면 표준 기관 및 브라우저 공급 업체가 새로운 사양과 혁신적인 기능 구현으로 계속 진행하도록 장려하고 동료 개발자 및 디자이너와 자체 지식을 공유해야합니다. 더 많은 통찰력, 적은 해킹.
Darcy Clarke는 수상 경력에 빛나는 개발자이자 WordPress 테마 회사 Themify의 공동 창립자이자 일일 거래 애그리 게이터 DealPage이며 jQuery 팀의 일원입니다. 그는 Polar Mobile에서 선임 UX 개발자로 일하고 있습니다.
마음에 드 셨나요? 읽어보세요!
- 앱 구축 방법
- 최고의 무료 글꼴 다운로드
- 모든 크리에이티브에 필요한 무료 Photoshop 브러시
- 일러스트 레이터 튜토리얼 : 오늘 시도해 볼 수있는 놀라운 아이디어!
- 낙서 예술의 훌륭한 예
- 화려한 Wordpress 튜토리얼 선택
- 디자이너를위한 최고의 무료 웹 글꼴
- 무료 텍스처 다운로드 : 고해상도 및 지금 바로 사용 가능
