답변:
먼저 집을 짓고 페인트 칠해야합니다.
HTML 문서는 어둡게 보일지라도 독자적으로 설 수 있습니다. CSS 스타일 시트는 불가능합니다. 표시 할 수있는 것은 아니며 (코드 제외) 표시 명령입니다.
그림을 그리는 동안 집을 바꾸고 싶을 수도있는 다른 문제입니다. 일반적으로 실현 가능하지 않지만 HTML + CSS 개발에서 실제 주택을 사용하면 스타일링을 쉽게하기 위해 HTML 문서에 추가 마크 업이 필요하다는 것이 일반적입니다. 강력한 CSS3 셀렉터 덕분에 예전보다 덜 일반적입니다.
나는 항상 펜과 종이를 먼저 사용합니다.
디자인을 다림질하지 않은 경우입니다. 당신이 당신의 디자인에 확신이 있다면, 나는 균형 잡힌 접근법을 가지고 있습니다. html은 구조이며 CSS는 접착제입니다. (HTML, CSS) 개념 '튜플'을 계속 구축하십시오.
(HTML,CSS) + (HTML,CSS) -> (bigHTML,bigCSS)
(bigHTML,bigHTML) + (bigHTML,bigCSS) -> (biggerHTML, biggerCSS)
등등.
어쨌든 내가 그렇게하는 방법입니다.
웹 사이트 / 웹 응용 프로그램의 유형과 사용되는 컨텍스트의 종류에 따라 다릅니다.
대부분의 경우 가장 좋은 방법은 의미 적으로 건전한 HTML을 구축 한 다음 표준 호환 브라우저에 CSS를 추가하고 비침 입적 핵 및 규칙 (예 : IE의 조건부 주석, -vendor-somethingCSS 규칙, 자바 스크립트 준수 레이어 등)을 적용하는 것입니다. )를 사용하여 비표준 브라우저를 지원하고 공급 업체별 기능을 사용할 수 있습니다.
그러나 스타일 시트를 공유하는 (예 : 하우스 스타일의 일부) 독립 웹 애플리케이션이 여러 개 있으며 각 스타일의 HTML 출력을 제어 할 수있는 고급 위치에있을 수도 있습니다. 이 경우 CSS를 먼저 작성한 다음 HTML을 조정하여 작업하는 것이 더 좋은 방법 일 수 있습니다. 이 작업을 수행하려면 먼저 어떤 종류의 페이지 요소가 필요한지 분석하고 클래스를 정의한 다음이를 사용하는 정적 테스트 문서를 작성하고 스타일 시트를 작성한 다음 작성 을 시작하십시오. 그것들을 사용하는 응용 프로그램.
모든 솔직히 말해서, 나는 그런 사치스러운 위치가 극히 드물다고 생각하며 실제로 CSS 수준에서 통일 된 집 스타일의 가치를 인식하는 회사는 거의 없습니다. 더 자주, 실용성은 디자이너가 하우스 스타일을 만들고,이를 따르는 각 애플리케이션에 대해 독립적 인 스타일 시트 세트가 작성되도록 지시합니다. 그 이유는 주로 대부분의 회사가 적어도 일부 스택에 대해 수정 가능성이 제한된 상용 소프트웨어를 사용하고 종종 주어진 스타일 시트에 맞게 HTML 출력을 변경하는 것이 훨씬 어렵거나 심지어 불가능하기 때문입니다. CSS를 다시 작성하는 것보다 독점 패키지). 또한, 12 가지 스타일 시트 세트를 유지하려는 노력이 종종 과소 평가되며, 약간의 차이점과 단점이 허용되는 것으로 간주됩니다.
이것이 매우 오래된 Q & A이지만 의견을 말해야 할 필요성과 책임이 있다고 생각합니다.
예, HTML은 CSS보다 먼저 작성되어야합니다 .
당신은 페이지의 모든 HTML을 작성하지 않는 한 다음 CSS를 작성 돌아갑니다. 따라서 적절한 간격과 주석이 있어도 섹션을 작성할 때 섹션을 명확하게 기억하기가 매우 어려워집니다.
마치 다층 케이크를 만드는 것처럼 웹 사이트를 레이어로 구축합니다.
첫 번째 레이어-먼저 최소 높이와 너비 CSS로 기본 컨테이너 div를 만듭니다.
두 번째 레이어-그런 다음 행이나 열처럼 보이는 섹션과 같이 페이지의 큰 섹션 (구조의 div 및 스타일) 인 다음 레이어를 만듭니다.
세 번째 레이어 이상-섹션의 두 번째 레이어 내에 계속 추가합니다.
이런 식으로 HTML을 작성하고 CSS에 추가하여 구조를 지정하고 헹구고 반복합니다. 내 경험상 이것은 웹 페이지를 작성하는 훨씬 효과적인 방법이며, 모든 HTML의 대안보다 훨씬 빠릅니다.
마지막으로, " * {outline : 1px dot red} "를 사용하여 모든 요소의 개요를 얻으십시오. 스타일을 사용하여 페이지에 요소를 추가하면 개요를 볼 수 있으며 그 때까지의 모양을 추측 할 필요가 없습니다. 배경색을 추가합니다. 테두리가 요소에 픽셀을 추가하고 윤곽선이 오버레이이기 때문에이 특정 사용 사례의 테두리를 피합니다.
한번 해봐, 고마워!
웹 사이트 구조 (HTML)로 작업하면 먼저 요소에 대한 아이디어를 얻고 웹 사이트의 스타일 및 서식 지정에 대한 이름을 알면 더 의미가 있다고 생각합니다.
당신은 학습과 구축을 위해 정말 가난한 프레임을 골랐습니다.
여기에는 두 가지 직교 문제가 있습니다.
그것들은 서로 상충되는 다른 접근법을 요구할 수있는 (그리고 종종하는) 매우 다른 두 가지 작업입니다.
프로젝트의 기술, 기술 및 요구 사항에 익숙한 경우 사이트 요구에 대한 토론으로 시작하고 구현해야 할 사항을 결정하기 위해 디자인 연습을 진행합니다. 이는 종종 마크 업과 디자인 요소를 의미하며, HTML이나 CSS와는 아무런 관련이없는 경우도 있습니다 (일부 사람들은 HTML과 CSS로 모형을 작성하지만).
사이트를 구축하는 방법과 사이트를 구축하는 방법을 배우려는 경우 구축 가능한 것이 무엇인지 알기 전에 참여해야하는 탐색 및 학습 프로세스가 있습니다.
모듈 식 및 반복 설계 및 빌드 전략이 널리 보급 된 곳입니다. 최종 제품으로 어디로 가는지 반드시 알 수없는 경우 (가능한 것이 무엇인지 모르기 때문에) 작은 기능 덩어리를 구축하고 요구 사항을 충족하는지 여부를 실험 한 다음 작은 실험을 더 큰 전체.
그렇다면 구체적으로 무엇을 의미합니까? 부지를 짓는 것은 건축 계획 (디자인 모형)을 작성한 다음 집을 세우고 미학적 요구를 충족 시킬지 계산하기 위해 엔지니어링을 시작하는 집을 짓는 것과 같습니다. 그러나 사이트를 구축하는 것은 일련의 작은 실험을 구축하고 원래의 개념을 충족하는 제품에 도달하기위한 단계별 접근 방식을 취하는 것처럼 보입니다.
매우 실용적인 문제로, 거의 모든 사람이 동시에 HTML과 CSS를 모두 사용합니다.
이는 모든 소프트웨어 개발 프로젝트에서 흔히 발생하는 문제이므로 Rapid Prototyping, DSDM과 같은 개념을 사용하면 이점을 얻을 수 있습니다. 애자일 (익스트림 프로그래밍 또는 Feature Driven Design (즐겨 찾기))과 같은 모든 스타일과 결합 가능 처음에 직면 할 때 결정하는 일반적인 원칙을 고수하고 그에 매달린다 (KISS, YAGNI).
그래서 그것은 :-기본 기능적 '시제품'을 먼저 구축하고, 요구의 하나의 기능적 블록을 포함한다. '이것이 좋을 수도있다'/ 자신에게 말하면 필요하지 않을 것입니다! (YAGNI). -당신이 '코딩 컨벤션'으로 내린 결정을 적고 php 태그를 고수하십시오 : 나는 나의 시나리오 논쟁을 위해 짧은 것을 사용합니다 ... 적용하고 ...하지 않습니다. -기본 스타일을 추가하지만 다시 제한하십시오.
그런 다음 더 많은 기능 블록을 다루는 상위 레벨 프로토 타입에 도달 할 때까지 코드를 확장하십시오. 이에 따라 CSS 모델을 확장하십시오. 당신이 이미 행한 모든 것에 영향을 미치는 결정에 직면하자마자, 그 결정을 읽고, 결정을 내리고 왜 당신이 왼쪽이나 오른쪽으로 갔는지 코딩 규칙에 기록하십시오.
보다 성숙하고 최종적인 제품을 향해 '서클'하십시오.
직면 한 큰 결정에 대해 걱정하지 마십시오. 결정에 대해 걱정하면 길을 고치는 것보다 시간이 더 걸릴 수 있습니다. 또한 인터넷 커뮤니티가 눈살을 찌푸 리면서 어깨 너머로 보이는 것에 대해 걱정하지 마십시오. 결국 제품이 작동하고 많은 것을 배웠으며 나쁜 소스 코드의 상상력있는 판사가 더 기뻐할 것입니다. 다음에 빌드하는 것 (여기에서 반복에 주목하십시오).
내 50ct 만
웹 페이지를 집과 비교할 때 :
HTML = 기초 / 집 CSS = 벽 / 청사진 / 벽지
벽이 앉은 기초를 만들 때까지 공중에서 벽을 어떻게 떠 다니겠습니까? 스타일을 적용 할 HTML 태그를 작성할 때까지 CSS를 작성하여 페이지의 스타일을 지정하는 방법
CSS의 각 부분은 스타일 지정 HTML 태그입니다. 스타일을 지정하려면 해당 태그가 있어야합니다. 스타일을 지정할 HTML이없는 경우 CSS 스타일은 실제로 스타일을 지정하지 않으므로 중복되는 스타일이므로 비어 있어야합니다.