어떤 블로그에서 읽었거든요 ... 그것이 미래의 심판을 위해이 카탈로그에 좋은 줄 알았는데 .... 또한 당신이 언젠가 물었 것이 중요한 면접 질문이 될 수도 ....
IE7에서 IE6과 검정색에 녹색, 최신 브라우저에서 빨간색 구형 브라우저에서 파란색으로 단락을 표시합니다 CSS의 미리보기 쓰기
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
자바 스크립트의 조각은 일반 바 IE 등 모든 브라우저 ANS에서 괜찮았는데이 이상한 문제를 가지고있다 
간단한 ... 그것은했지만 스크립트가 나를에 의해 쓰여진 아니었기 때문에, 그것은 오직 IE가 던지는 것을이 "개체가이 속성 또는 메서드를 지원하지 않습니다"오류를 디버깅하는 데 시간이 좀 걸렸어요. 아마! 전 스크립트를 작성했다면 필드 ID를 :)으로 내 변수 이름을 섞어 않는 한, 나는 전혀이 오류를 못했을거야.
문제 : 개체 (라인 3)이 속성 또는 메서드를 지원하지 않습니다
function funzoneSP(){ document.getElementById('video_id').style.visibility="hidden"; shortdesc = document.getElementById('shortdesc').value; .... } 해결 방법 :
오류는 위의 예제 (3 행 ... "shortdesc = document.getE ....")에 thirdrow에서 생성됩니다. 난 여기서 언급의 가치가있다 나는하지 말아 바보 같은 것들의 모든 종류를 시도하고 마침내 맞춰봐! 그냥 다른 뭔가로 shortdesc의 VAR을 변경하면 오류를 지웠어. 기본적으로! 변수 이름은 fieldID과 다를 수 밖에
다시 자전거는 버즈 워드이며, 웹 개발에서는 전혀 다른 의미가 없어. 그것은 노력의 측면에서, 에너지 절약!
CSS를 작성하고 설계에서 HTML을 만드는 몇 년 동안, 나는 '다시 발명 휠 "등 우리가 일반적으로 용어 것에 시간과 에너지 절약을 추구에서, 몇 가지 모범 사례를 따라했습니다. 다시 시간과 시간, 나는 내 장래 일을 끄집어 내보는 사용할 수있는 몇 가지 표준 재사용 가능한 CSS, 나는 몇 가지 템플릿을 작성해야하는 자신의 능력을 말한거에요. 완전히는 아니지만하지만 난 목표들을 달성하기 위해 관리 않았다.
발전에 CSS의 재사용, 나는 내 자신보다도 우리에게 일반적으로 사용할 수 있으며 이들은 시도 및 테스트와 많은 경험을 가진 개발자가 만든대로, 그들이 사용 넣어하기로 결정 몇 CSS 프레임 워크에서 모습을했다. 더 중요한 '다시 발명을 피하십시오. "
참전 용사에 대한 일반적인 지식, 나는 펜을하려했지만 몇 가지 주요 개념 / 모범 사례 / CSS의 RE-사이클링을 가능하게하려면 다음과 프레임 워크를 만드는 들어갔 생각.에게 이것은 막에 있으며, 최근의 CSS 악대차 나면, 몇 가지의 CSS 개발자들이 도움이 될 것입니다 희망!
명명 규약을 사용하여
이것은 CSS / HTML 재사용 가능한 제작에 가장 중요한 요소가되고있다. 페이지 요소에 일관된 이름을주는 것은 거의 수정 페이지의 구성 요소와 자신의 스타일의 재사용을 가능하게합니다. 이 인수가있는 라인에서, 비록 HTML5는 그것의 전임자에 대형 변화 변화에 몇몇 구조적인 태그 즉 소개하는 것입니다. <article>, <section>, <header>, <aside> 및 <nav> [ HTML5가 무엇을 가져올 것인가? ]. 심지어 HTML 4 (또는 낮은)과 함께, 그것은 consistanly 아래의 간단한 예제와 같이 페이지의 표준 섹션 이름을 지정하는 것이 가장 좋습니다 ...
단, 프로젝트의 대부분의 페이지는 같은 코어 구조적인 요소를 가지고 있어야 해요. 이러한 공통 핵심적인 페이지 요소를 식별합니다 ....
<div id="container"> <div id="header"> ... </ 사업부> <div id="nav"> ... </ 사업부> <div id="sidebar"> ... </ 사업부> <div id="footer"> ... </ 사업부> </ 사업부>
기본 스타일 (CSS 재설정)을 재설정 : 당신이 프레임 워크를 사용하거나 직접 작성하든, 당신은 CSS를 재설정을 제공해야합니다 [ CSS를 재설정은 무엇입니까? ], 그들은 감소하거나 때로는 다양한 브라우저 사이에 발생하는 시각적인 불일치를 제거로. 간단하게 말하면 CSS를 재설정 메커니즘 따라서 그들이 포즈 수있는 브라우저 기본값을 무시할 제로 또는 NULL 값으로 HTML 요소의 스타일을 설정합니다. 이것은 모든 사용자 에이전트 기본값 이러한 요소 공극 [의 속성 설정 깨끗한 슬레이트 제공 CSS2.1 사용자 에이전트 스타일 시트 기본값 ]. 모든 CSS는 프레임 워크가 재설정 메커니즘을 가지고 않습니다. 당신이 자신의 CSS를 재설정을 작성하는 경우에는주의의 단어는 키 속성을 다시 설정하는 것을 잊지에있다면, 그것은 디버깅하기가 매우 어렵습니다 교차 브라우저 문제로 이어질 수있다는 것입니다. , 기억 리셋 스타일의 사본을 보관하고 만들고 각각의 새 프로젝트로 그들을 놓습니다.
몸, 사업부, DL, 안녕, DT, DD, UL, 리, H1, H2, H3, H4, H5, h6, 사전, 형태, fieldset, 입력, 선택, textarea, P, 인용구, 테이블, 일, TD { 테두리 : 0px; 여백 : 0; 패딩 : 0; }
설정 기본값 (베이스 라인 스타일) 요소 :
당신이 (제로 또는 null로) 특정 HTML 요소의 특정 속성의 기본값을 설정한 후, 그것은 이러한 요소의 모든 인스턴스에 걸쳐 몇 가지 스타일을 적용할 필요가 있습니다. 이러한 기본 설정은 디자인에 따라 달라질 또는 다음과 모범 사례에 따라 수 있습니다.
대부분의 CSS는 프레임 워크는 항상 기본 브라우저 스타일을 다시 설정 이외에 몇 가지 새로운 기본값을 소개합니다.
이러한 기본값은 사용자 에이전트 기본값 (CSS를 재설정하여 버릴)의 무효되고, 이들은 브라우저에 걸쳐 일관성있게 될 것입니다.
기억하세요,베이스 라인 스타일은가는가 디자인 전체에 사용될 스타일을 설정하는 데 사용됩니다. 예.
HTML {글꼴 크기 : 77 %; 글꼴 모음 :이 Arial, 산세 리프 - 리프;} 강하고, H1, H2, H3, H4, H5, h6 {글꼴 두께 : 굵게;}
일반적인 HTML 요소와 공통 클래스에 대한 추상 스타일 :
이러한 구성 요소가 프로젝트에 걸쳐 다시 사용되므로 여러 페이지로 구성된 대부분의 프로젝트가 만들어지면, 경고 및 오류, 사용자 정의 팝업, LightBoxes 등 예 : 일종의 사이트에서 사용 일반적인 HTML 요소를 가지게 될 것이며, 그것을 제공하기 위해 도움이 될 것입니다 이러한 구성 요소에 대한 사전 정의된 스타일과 관련된 클래스 집합 그리고 당신은 자신에게 많은 시간을 절약할 수 있습니다.
이외에도 일반적인 HTML 요소에 대해 재사용 가능한 스타일 정의를 정의로부터, 우리는 추상적인 스타일 클래스는 활판 인쇄술, 색상, 심지어 레이아웃에 관한 수 있습니다. 나 자신이 사용하는 경향이 ... Clearfix, Font08, FontGrey, AlignL, DisplayB 등 일반적인 수업을
양식 입력 {테두리 : 0px; 배경 : # FFFFFF; 패딩 : 0px 10px; _padding : 0px 0px; 높이 : 26px; 색상 : # 000000; 라인 - 높이 : 30px; 글꼴 크기 : 1.1em;} 양식 textarea {국경 : 0px; 배경 : # FFFFFF; 색상 : # 000000; 글꼴 크기 : 0.9 그들; 라인 - 높이 : 1.5em; 오버플 : 보이는;} . fbold {글꼴 두께 : 굵게; 색상 : # cccccc;} . fgrey {색상 : # 666666;} . flightgrey {색상 : # bbbbbb;} . {맑은 : 모두;} clearfix . 분할기 {국경 - 상단 : 1px 고체 # 647B06, 국경 바닥 : # 9CC00A 1px 고체, 높이 : 0px;} . displayb {디스플레이 : 블록;}. displayn {디스플레이 : 없음;} . alignr {텍스트 정렬 : 오른쪽}. alignc {텍스트 정렬 : 센터} . floatr {플로트 : 오른쪽;}. floatl {플로트 : 왼쪽;}
일반적인 브라우저 만지면에 대한 수정
다양한 브라우저의 CSS 코드를 구현하고 CSS 사양에 대한 지원의 다양한 레벨을 제공합니다. 이것의 결과 .... 우리 개발자들이 달려들어 남아 있는지 "브라우저 만지면". 특히 IE6 지켜야 할 기사 마감 시간과 함께 대부분의 CSS를 탄생 하였다들을 괴롭 힙니다. 좋은 소식은 경험이 이러한 문제를 (종종 되나을 함께 가능한 재사용 가능한 수정을 가져왔다는 CSS를 해킹 ).
, 기억이 해킹 / 수정이 편리한 유지
/ * 다음과 같은 줌 : 1 규칙 IE6 + IE7을 위해 특별히입니다. * / * HTML. clearfix, * :. 첫 아이 + HTML clearfix { 줌 : 1; }
당신의 CSS를 세부 조정 유지
마지막으로. 당신이 영감과 CSS 프레임 워크 중 하나 이상을 사용하려는 경우, Heres 몇 가지 인기있는 것들의 빠른 목록입니다 ....
CSS는 프레임 워크를 사용하면 자신 중 하나를 만들 수 게으른 것을 의미하지는 않습니다 ... 그것은 당신이 다른 사람의 경험과 실수에서 배운다 시간과 생산성을 저장하려면 스마트는 것을 의미, 기억!!
CSS는 올해 10 년 존재를 완성! CSS를 사용하여 빵 (또는 없음) 수입, 잠시 여기 자들, 그러면 우리가 글꼴의 좋은 선택을 위해 굶주리고있다 방법을 알고 수도 있습니다. 심지어 글꼴의 부족과에서 그 같은 디자이너들이 CSS를 선 가든은 자신의 디자인에 몇 가지 정의를하는 추구 글꼴을 대체할의 CSS 배경 이미지의 사용을 만들었습니다. 우리는 또한 플래시 / 자바 스크립트 ® 해킹 우리의 설계 목표를 달성하기 위해 노력했습니다. 의미없이 이것은 우리의 웹 디자인에 원하는 글꼴을 얻을 수있는 길을 잘못이지만, 확실히, 그것은 가장 바람직한 방법은 아닙니다. 그리고 년간 웹 디자이너를 통해, 나처럼 완벽하게 자신의 설계를위한 열 가지 정도 글꼴에 의존했습니다.
웹 표준 및 글꼴 형식의 최근 발전은 똑같은 기본 글꼴 이외 typefaces에 HTML 텍스트를 렌더링하는 것이 가능합니다. "@ fontface"CSS의 decleration된다.
@ fontface는 실제 글꼴 파일에 연결하고 웹을 통해 조회할 수있는 솔루션을 provids. @ fontface를 사용하여 설계자는 배경 이미지와 텍스트를 고정하지 않고 글꼴을 사용할 수 있습니다. 구현은 아주 스트레이트 포워드 아래와 같이하지만 모든 좋은 것들이 그것에 CON 부분을 가지고로서, 모든 브라우저는 하나의 "글꼴 유형"을 지원합니다. 당신은 크로스 브라우저 지원을 필요로 사이트에 @를 fontface을 사용하도록 계획하고 계신다면, 다음 같은 다양한 글꼴 유형으로 소스를 제공해야합니다.
@ fontface 사용
@ 글꼴 얼굴 { 글꼴 - 가족 : "CalligraphyFLFRegular '; SRC : URL ( 'CalligraphyFLF.eot'); SRC : 지역 ( 'CalligraphyFLF'), 지방 ( 'CalligraphyFLF'), URL ( 'CalligraphyFLF.woff'형식 'WOFF'), URL ( 'CalligraphyFLF.ttf'형식 '트루타입'), URL ( 'CalligraphyFLF . SVG # CalligraphyFLF '형식'SVG '); } @ 글꼴 얼굴 { 글꼴 - 가족 : "당신의 글꼴"; SRC : URL ( "글꼴 / font_filename.eot"); SRC : 로컬 ( "대체 이름"), 지방 ( "Alternatename") URL ( "글꼴 / font_filename.woff") 형식 ( "WOFF") URL ( "글꼴 / font_filename.otf") 형식 ( "오픈 타입") URL ( "글꼴 / # font_filename를 font_filename.svg") 형식 ( "SVG"); } H2 {글꼴 가족 : "당신의 글꼴", 조지아, 리프;}
당신이 위의 예제에서 볼 수 선택된 글꼴 글꼴을 포함 마찬가지로, 하나는 같은 글꼴에 대한 fonttypes의 집합에 연결해야한다. 그래서 사람들은 "글꼴 키트"으로 참조하십시오.
명시적으로 최종 사용자 사용권 계약 (EULA)에서 거기에 CSS의 @ 글꼴 얼굴 속성과 연결 허용 가능한 글꼴 키트가 있습니다.
유용한 WebFont 자료 :
포토샵과 일러스트 레이터 같은 도구로 내 제한된 기술 집합으로, 나는 정말로 내가 디자이너 나보다 그 저는 좋은 개발자를 고백하실 수 있습니다. 그러나 코어와 나의 배경 (서버 사이드) 자바 / PHP / 코볼로 개발, 내 UI 개발 기술에 대한 매우 긍정적인 영향되었습니다. 내 디자인을 만드는 동안, 말뜻은, 내가 디자인을 할 예 때마다, 나는 HTML-CSS를하는 동안 디자인 최고의 HTML-CSS로 변환하는 방법을 생각해, 나는 백엔드 기술에 대한 생각을 포기하고 합리적인 확인 HTML은 쉽게 XSL 루프 또는 PHP를 미리보기 등으로 구현할 수있는
년 동안, 나는 아마 donot는 HTML이나 CSS가 무엇인지 단서를 가지고 UI 디자이너에 의해 디자인에 머리를 던져왔다. 요즘 난 그냥 내 목구멍 설계 그의 "코드 불가능"를 shov하려고하는 디자이너가, 그의 디자인 변환될 것인 조금 이해할 거라면, 너무 많이 요구하는 것이라고 생각했습니다 로. 바로 도움이되는 건가?
그럼, 오늘이 게시물을 가로질러 온 ... 웹 디자이너를 누가 코드를 못 ... 감사의 주님! 난 단지 같은 느낌 많은 사람 중 하나입니다 ... 위의 artitle은 약간 긴 숨이 찬입니다 .. 하지만 읽기, 그것의 모든 단어의 가치.
엘리엇 제이 주식 고마워 ... 난 안심 느낌!
여기에서 일부 발췌입니다 Elliots의 기사 .
솔직히, 나는 2010 년 난 아직 자신의 디자인을 코딩 수 없습니다 '웹 디자이너'가로질러 간다 것이 놀랍군요. 변명.
난 내 짹짹에 대해서 좀 더 구체적으로 어야죠. 나는 실제 사이트에 평면 설계를 돌리고 심지어 가장 기본적인 HTML 및 CSS 기술이없는 디자이너에 대해 얘기했다. 아니 의도적으로 코드를 결정할 명, 누가 못해 그. 그리고 또 여기에만 프런트 엔드 코드를 참조하고, 물론 그것 설계자는 또한 놀라운 백엔드 프로그래머가해야한다고 생각하는 웃긴 데요 ...
우리는 코드에 불가능 일러스트 레이터, 300dpi로 보냄 '웹'디자인,, 아니 일관성 / 가용성을 얻을.
~ 에이미 Mahon
왜 이렇게 늦어, 나는 어떻게든 결론을 짓지 야해. 나도 자네 의견은 많은 사람이있을 것이고, 나의 의도는 코드가 없습니다 다른 사람을 불쾌하게하거나 화나게하는 것은 아니지만 내가 말한 것의 일부로 delving 때 항상 나오 포인트 중 일부를 반영되기를 바랍니다 이 토론.
하루의 끝에서, 나는 코드와 사람 수 없어 수있는 동안 잠못하지 않습니다. 난 그냥 순수하게 제가이 과거의 일이라고 생각으로서 프런트 엔드 기술이 부족 많은 디자이너를 찾아 놀랐어요.
내가 쓰기로도 의견을 읽고, 주위 320 코멘트가 있었으며 읽을 가치가 그들입니다.
Elliots 전체 게시물 여기를 읽어 보시기 바랍니다 .. 코딩 수없는 웹 디자이너
라디오 버튼과 텍스트가 인라인 때문에, 그래서 텍스트 라디오 버튼의 하단에 자신을 맞출 것이며, 텍스트는 약간 라디오 버튼 아래로 나타납니다.
당신이 최고가 정렬하고 싶다면, 당신은 divs 또는 지속 기간 (적절)과 같은 별도의 컨테이너로 라디오 및 텍스트를 배치해야 할거야, 그리고 그들이 정렬 돌볼 것입니다. 당신의 디자인 간단한 그것을 허가도 테이블 세포를 사용하기 쉬울 것입니다.
항상 뭘하든 크기의 문제는 없습니다거야 있도록 모든 브라우저가 약간 다르게 라디오를 표시로 이것은 모든 브라우저에서 동일하게 보이는하지 않습니다.
HTML5는 아직 초안입니다. 내가 쓴 바와 같이, 2004 년에 개시 HTML 5에 작업은 여전히 간의 공동 노력에 의해 형상을 부여하고 있습니다 W3C HTML WG 과 WHATWG . 단어는 차세대 HTML을 개선하고 기능을 갖게 될 것이 어느 거예요 새로운 구조와 의미론, 폼 컨트롤, API를, 멀티미디어 태그 등.
간단한 영어로 ... 뭐, 그건 우리 UI 개발자에게 의미하는 건 ...
<BODY> <header> ... </ 헤더> <nav> ... </ 비행> <article> <section> ... </ 섹션> </ 기사> <aside> ... </ 제쳐> <footer> ... </ 바닥글> </ BODY>
대신
<BODY> <div id="header"> ... </ 사업부> <div id="nav"> ... </ 사업부> <div class="article"> <div class="section"> ... </ 사업부> </ 사업부> <div id="aside"> ... </ 사업부> <div id="footer"> ... </ 사업부> </ BODY>
예
<video poster="poster.jpg"> <소스 SRC = "video.3gp"유형 = "video/3gpp" 미디어 = "핸드헬드"> src="video.mp4" type="video/mp4">을 <source </ 비디오> <audio> src="music.oga" type="audio/ogg">을 <source src="music.mp3" type="audio/mpeg">을 <source </ 오디오>
새로운 버전에 더 많은 변화 / 업그레 이드 사항이 있는데 ... 내가 어떤 재미있는 유용한 것들 accross 오는대로이 게시물을 업데이 트하게됩니다 .... 이 공간을보세요
HTML 5 스펙 개발에 적극적으로 여전히로서이 문서는 정확한 정보를 제공하지 않을 수 있습니다. 때 의심은 항상 확인 여기에 HTML 5 규격을 .
시간과 반복을 때 행동 본 모든 다른 브라우저로 W3C 규칙, 울화통를 던지는에 의해 개발 정신의 IE 나선 당신을 만나고에게 말하길, 그 수정을하지 않는 것 같습니다. 단지 그러한 하나가 IE7에서이 문제입니다.
문제 계산서 :
I와 너무 다른 심각한 웹 개발자의 대부분은 몇 가지 링크 (앵커 태그) 위로 마우스를 가져가면에있는 레이아웃에서 수레를, 거기에 중첩 많은 시간, 이상을 발견했을 수도, 포함하는 컨테이너는 오른쪽으로 몇 픽셀을 이동하는 것 . 나는이 문제에 대한 Google 솔루션하려 하겠지만 거의 이유에 대해 어떠한 합리적인 해답을 찾을 수 없었 그것 발생할 때 (상황에서이 문제를 방지하는 데 도움), 따라서 나도 문제에 대한 명확한 해결책을 찾은 적이 없다 ...
가능한 해결 방법 :
경험을 버리고,이 문제는 잘못된 행동 컨테이너의 CSS 정의에 확대 속성을 추가하여 해결되는, 시대 즉, 통지 90 % %가 있는데 ...
# somediv { 줌 : 1; }
또 이유가 모호할 때가 있습니다 ... 이것을 시도 ...
IE의 일부 요소는 기본적으로 '참'이다 "hasLayout"재산을 보유하고 있습니다. 많은 시각적 CSS의 행동, 예를 들어, 알파 필터는 해당 hasLayout 요소에서 작동합니다. 그리고 {줌 : 1} 대상 요소에게 hasLayout 속성을주는 것 같습니다 .... 유용한? 나는 그렇게 생각하지 말아 ...
줌 속성은 또한 크롬에서 지원하는 것 같습니다되어 있지만 사용 힘 내 레이아웃에서 크게 나쁜 영향을 만들 것 ... 그것이 당신을 위해 작동한다면, 그것을 시도 ... 그렇지 않다면, "CSS의 크랩"아래에이 페이지를 즐겨찾기에 추가
어제, 구글 크롬에서 CSS를 재설정과 함께 발생한 문제에 후 ... 난 사용자 에이전트 스타일 시트의 영역으로 깊이 비트를 파고 생각 ...
CSS2.1 사용자 에이전트 스타일 시트 ... (무엇을 "사용자 에이전트 스타일 시트"를 인식하지 못하는 분들은 다음과 곳입니다의 기본값에서이 테이블을 발견 사용자 에이전트 스타일 시트 (사양) 무엇입니까 .
CSS 2.1 사용자 에이전트 스타일 시트 기본값의 전체 목록을 보려면 여기를 클릭하십시오
