우선, 나는 디자인의 그리드에 반대하는 것이 아니라 재구성의 그리드에 반대한다는 점을 말하고 싶습니다. 이는 특히 클래스 이름 바인딩 그리드 지정의 YUI 방법을 참조해야 합니다. 다음 코드를 살펴볼 수 있습니다.
예제 소스 코드
[www.downcodes.com] <div id="yui-main">
<div 클래스="yui-b">
<div 클래스="yui-g">
<div class="yui-u 먼저"></div>
<div class="yui-u"></div>
</div>
</div>
</div>
여기서 yui-u나 yui-g라는 이름이 의미가 없다는 것을 분명히 알 수 있습니다. 성과와 관련된 최초도 있다. 모두가 읽었을 '웹사이트 재구성' 책에 첨부된 PPT에 '페이지에서 모양 태그를 제거한 후 기존 사이트와 콘텐츠를 다시 디자인하면 매우 노동력이 절약될 것입니다'라는 문장이 있는지 모르겠습니다. 동시에 사이트의 출력을 변경하려면 페이지 자체를 변경하지 않고 스타일 시트만 변경하면 됩니다. "위와 같은 코드는 구조, 성능, 변경하면 다음과 같은 문제가 발생합니다.
성능을 변경할 때 HTML을 이동해야 합니다. 아름다운 수정을 위해서는 세 개의 작업 라인을 이동해야 하며 이는 많은 인적 자원을 소비합니다.
"first"라는 다섯 번째 상자가 나타납니다.
실제 너비는 240인 "180 너비"라는 상자가 나타납니다.
실제로는 3개의 열로 구성된 "4열"이라는 레이아웃이 있습니다.
실제로는 빨간색인 "파란색"이라는 단어가 있을 것입니다.
이는 현재 많은 사람들에게 인기가 있는 "left_box" 및 "right_box"와 동일합니다. 빠른 수정을 거쳐 왼쪽의 "right_box"가 되었습니다. 이는 진실을 왜곡하는 것과 다름없지 않습니까? 하지만 실제로 가장 중요한 것은 첫 번째 요점입니다. 이 작업 방식이 이전의 테이블 레이아웃 작업 방식과 다른가요? 스타일 변경을 요청하면 회사 전체(디자인, 페이지, 개발, 기능 테스트, CE 데이터 모니터링)가 따라오게 됩니다. 이는 매우 현명하지 못한 일입니다.
이 글을 쓰고 뒤를 돌아보며 제목을 "This Will Be a Revolution" 시리즈의 CSS에 관한 두 번째 글로 바꾸었습니다. 위의 내용이 잘못된 경우 최근에 제가 인수한 프로젝트의 새 버전에서 가져온 코드 조각을 보여 드리겠습니다.
예제 소스 코드
[www.downcodes.com] <div id="index_news" 클래스="모드">
<h3 class="title">공공복지 뉴스</h3>
<div 클래스="콘텐츠">
<ul>
<li><a href="#">뉴스 제목, 뉴스 제목, 뉴스 제목, 뉴스 제목</a></li>
<li><a href="#">뉴스 제목, 뉴스 제목, 뉴스 제목, 뉴스 제목</a></li>
<li><a href="#">뉴스 제목, 뉴스 제목, 뉴스 제목, 뉴스 제목</a></li>
<li><a href="#">뉴스 제목, 뉴스 제목, 뉴스 제목, 뉴스 제목</a></li>
<li><a href="#">뉴스 제목, 뉴스 제목, 뉴스 제목, 뉴스 제목</a></li>
<li><a href="#">뉴스 제목, 뉴스 제목, 뉴스 제목, 뉴스 제목</a></li>
<li><a href="#">뉴스 제목, 뉴스 제목, 뉴스 제목, 뉴스 제목</a></li>
<li><a href="#">뉴스 제목, 뉴스 제목, 뉴스 제목, 뉴스 제목</a></li>
</ul>
</div>
<a class="more" href="#">자세히</a> </div>
예제 소스 코드
[www.downcodes.com] .방법{
위치:상대적;
부동:왼쪽;
글꼴 크기:12px;
}
.모드 h3.제목,
.모드 h4.제목{
색상:#234C00;
패딩:5px 10px;
글꼴 크기:14px;
}
.모드 .more{
상단:5px;
오른쪽:10px;
글꼴 크기:12px;
색상:#4282ab;
위치:절대;
}
.모드 .컨텐츠{
지우기:둘 다;
}
.mode .content:이후 {
콘텐츠:"";
표시:블록;
높이:0;
줄 높이:0;
지우기:둘 다;
가시성:숨김;
}
#index_news.모드,
#index_bbs.모드,
#index_area.mode{
배경:url(small_gray_grid.png) 반복-y -400px 하단;
너비:200px;
여백:5px 0 5px 5px;
}
#index_news.mode h3.제목,
#index_bbs.mode h3.title{
배경:url(small_gray_grid.png) 반복 없음 -200px 상단;
}
#index_news.mode .content,
#index_bbs.mode .content,
#index_area.mode .content{
배경:url(small_gray_grid.png) 반복 없음 -600px 하단;
표시:테이블;
}
모듈식 사고의 장점을 확인할 수 있습니다.
기존 모듈을 반자동으로 사용하여 코드 개발 시간과 노력을 절약할 수 있습니다.
제품 관리자와 상사의 다양한 비정상적인 요구 사항에 맞게 자유롭게 조정할 수 있습니다.
위 성능에 대한 변경에는 개발자의 개입이 필요하지 않으며 기능 테스트도 필요하지 않습니다.
CE 데이터 모니터링은 ID에 바인딩되므로 인터페이스를 다시 조정할 필요가 없습니다.
각 사람은 단일 모듈의 신속한 반복 개발을 담당합니다.
또한 코드에 관한 한. 제목은 제목이고, 내용은 내용입니다. 사실을 왜곡하거나 뺨을 때리는 일이 절대 없습니다.
나에겐 특이한 점이 있다. 저는 인터뷰 중에 항상 면접관의 XHTML을 먼저 테스트한다는 점을 좋아합니다. 과거에 명인이 견습생을 모집할 때와 마찬가지로 능력과 지능은 그 다음이고 인품이 최우선이었다.
XHTML은 사람의 본질과 같고, CSS는 사람의 일을 하는 방식과 태도, JS는 사람의 행동과 스타일과 같다고 생각합니다. 세 가지를 분리하고 일부 주변 SEO 및 인간-컴퓨터 상호 작용을 분리하는 것을 우리는 웹 사이트 재구성이라고 부르는데, 이는 매우 좋은 사람입니다. 과거에는 CSS가 웹사이트의 가장 중요한 요소라고 생각하는 사람들이 있었습니다. 사실 CSS는 자연스럽게 인생관을 나타냅니다. 사실 사람이 일을 하는 좋은 방법과 태도가 없으면 살아남기 힘든데, 일을 하는 방법과 태도가 너무 집중되면 사기를 잘하고 일을 악랄하게 하는 사람이 될 것입니다. .
이것이 제가 항상 말하고 싶었던 것입니다. CSS를 사용하면 왼쪽-오른쪽 순서를 오른쪽-왼쪽 순서로 변경할 수 있습니다. 웹페이지의 마술사입니다. 그를 속이는 데 능숙하고 악랄한 일을 하는 사람이 되도록 악용할 수는 없습니다.