웹 디자인을 시작하려면 어떤 CSS 도구 (프레임 워크, 그리드 시스템, IDE, ..)가 필요합니까?

https://stackoverflow.com/questions/1612398

06-07-2019
|

문제

Grails 기술을 기반으로 새로운 웹 사이트를 구축하고 있습니다.

내 웹 사이트의 그래픽 디자인과 관련하여 전문 웹 디자이너의 서비스를 사용할 계획이지만 "사용자 친화적 인"베타 버전을 갖기 위해서는 기본 그래픽 디자인을 직접 수행해야합니다.

나는 stackoverflow.com 사이트를 읽었지만 내 마음을 구성 할 수 없었습니다. 여기에 내가 찾은 내용은 다음과 같습니다.How-you-choose-a-css-framework 가장 좋은 CSS- 그리드 프레임 워크 CAN-SOMEONE RECOMMEND-A-BELLS 및 WHISTLES-CSS-FRAMEWORK 가장 좋은 CSS-FRAMEWORK와 WORTH-WORth-effort

그러나 불행히도 많은 모순적인 답변이 있습니다. 첫째, 일부 사람들은 CSS 프레임 워크를 사용하는 것이 거꾸로 작성되었으며 좋은 것은 아니라고 말합니다. 다른 사람들은 Yui Grids, Blueprint, 960 GS, YAML ... 그리고 많은 사람들이 나침반이 CSS 레이아웃을 쉽고 재사용 할 수 있다고 말합니다.

그래서 그것을 고려 :

나는 CSS 세계를 처음 접했고 웹 디자이너가 되려고하지 않습니다.
내 레이아웃은 사용자 친화적이어야하지만 필요하지는 않지만 굉장한 L & F)
그것은 메인 타이어이고 쉽게 즉흥적이어야합니다 (직업적 웹 디자이너에 의해)
구현하기 쉽습니다 (빨리 무언가를 갖기 위해)

내 사이트의 웹 디자인을 시작하는 것에 대해 무엇을 조언합니까?

귀하의 조언에 감사드립니다.

Fabien

해결책

먼저, 웹 디자이너가되지 않으려면 CSS 아웃소싱을 제안합니다. 할 수있는 몇 가지 웹 사이트가 있습니다 HTML 또는 Photoshop 디자인을 공급하고 코딩했습니다. 그랜드 (1k) 아래에서 잘 어울립니다. 또는 HTML/CSS 디자인을 무료로 받으십시오.

그런 다음 알아야 할 사항이 하나 있고 다른 두 가지는 해결해야합니다.

모든 HTML은 의미 론적이고 유효한 방식으로 작성되어야합니다. Semantic = 적절하게 주문한 제목, 목록, 과도한 div 등; Valid = WC3 유효성 검사 테스트를 통과합니다. 이 중 어느 것도 로켓 과학은 아니지만 여전히 배워야 할 기술입니다. Andy Clarke 's 초과 CS 시맨틱 HTML/CSS에 관한 훌륭한 책입니다. 유지 보수를 용이하게하려면 HTML 및 CSS는 깔끔하고 일관되게 들여 쓰기 등이 있어야합니다.
컨텐츠 관리를 위해 관리자 백엔드 및 데이터베이스가 필요한지 여부 또는 정적 페이지 (예 : HTML 및 CSS 파일, 이미지 및 기타 미디어 등)로 구성된 사이트를 작성하는지 여부를 결정해야합니다. 그것이 전자라면, 그것은 완전히 다른 학습 곡선입니다 :-)
최고의 기술은 무엇입니까? 좋은 디자이너 인 경우 다른 사람들이 HTML/CSS를 작성하거나 기성품 템플릿 (웹에 많은 사람들이 있음)을 사용하여 사용자 정의하도록하십시오. 여기에 있습니다 멀티 컬럼 레이아웃을위한 좋은 시작. 프로그래머라면 장고 (파이썬), 티탄 (perl), 루비에서 더 작은 것 (Ruby on Rails는 시작하기가 약간 큽니다) 또는 좋아하는 언어로 하나가 있기 때문입니다.

좋은 CSS는 공예이며 단순성은 본질이지만 시작하기에 충분히 배우고 싶다면 내 조언은 다음과 같습니다.

상속 (CSS의 '캐스케이드')을 이해하고 아무것 '블록'이 될 수 있으므로 스타일을 적용하기 위해 중첩 된 div를 많이 사용하지 마십시오. 대신, 스타일을 HTML 요소 자체에 적용하거나 상위 블록에 나타날 때만 요소에 적용하십시오 (사이드 바 디에 포함 된 메뉴 비정규 목록).
에 대한 학습 차단 및 인라인 요소 (처음부터 웹 디자인 훌륭한 학습 자원이며 추천합니다.) CSS는이 행동을 바꿀 수 있습니다.
Firefox에서 테스트 한 다음 Internet Explorer에서 테스트하십시오. > = ie7은 그렇게 나쁘지 않지만 Haslayout). IE에서 바로 얻기 위해 조정할 수없는 것, 사용 조건부 의견 IE 만 볼 수있는 CSS를 추가하려면 - 절대 CSS 해킹 사용 - .htc 파일 누락 된 IE 기능 (예 : 모든 요소의 롤오버 스타일)을 추가 할 수 있습니다.
에 대한 학습 CSS 포지셔닝, 그리고 '고정'을 드물게 사용하십시오.
모든 CSS를 하나의 파일 (우선)에 넣고 HTML에서 인라인 CSS를 사용하지 마십시오.
스타일링 형태 그리고 형태의 필드는 거의 별도의 기술입니다 :-)

배경 이미지를 사용하여 스타일을 추가하지만 포지셔닝을 사용하여 이미지를 상쇄하고 겹칠 수 있음을 이해하십시오. 그러나 멋진 투명성을 위해 PNG를 사용해야합니다. 오 예, 그리고 불투명 멋져 보이지만 비표준 CS가 필요합니다 지금은. 더 유연하지만 RGBA (a = alpha) 메소드는 널리 지원됩니다. 마찬가지로 둥근 모서리, 그러나 모두 사용할 가치가 있습니다.

나는 CSS 프레임 워크를 피하고 지금은 재설정을 피할 것입니다. 그들은 또 다른 DSL을 추가 하여이 단계에서 복잡하게 할 것입니다 (그러나 인수를 읽으십시오 그리고 장점과 단점). 성가신 기본 마진과 패딩을 피하기 위해 항상 모든 것을 재설정합니다. html *, body * {margin: 0; padding 0;} 그런 다음 필요한 곳에 패딩과 여백을 다시 구축하십시오 - 지금까지는 결코 문제가되지 않았습니다 :-)

다른 팁

내 사이트의 웹 디자인을 시작하는 것에 대해 무엇을 조언합니까?

얻다 개똥 벌레 지금 Firefox 용 플러그인!

기본 CSS 사용 :

어떤 CSS 규칙이 적용되는지 확인하십시오
CSS를 실시간으로 변경하고 영향을 확인하십시오
다른 웹 사이트를 검사하여 작업을 수행하는 방법을 확인하십시오

이 도구 없이는 CSS (및 기타 웹 관련 기술)를 개발할 수 없습니다.

Yui CSS Reset/Base/Font/Grid를 살펴보십시오.

http://developer.yahoo.com/yui/3/cssreset/

그리고 그리드 960에는 멋진 레이아웃도 있습니다 (Google에서 사이트 검색)

나는 당신이 어떤 OS를 실행하고 있는지 모르겠지만, 당신이 Mac 사용자라면 CSS를위한 훌륭한 무료 도구를 제안합니다. Xyle 범위. 편집자는 아니지만 CSS 뷰어/스캐너는 모든 웹 페이지의 CSS 코드를 쉽게 찾아 볼 수 있도록 CSS의 작동 방식을 더 잘 배울 수 있으며 웹에서 잘 수행 된 레이아웃을 분석 할 수 있습니다.

CSSEDIT (MAC 만 해당)는 캐스케이드 시트를 작성하고 사용하기 쉽고 비용이 많이 들지 않으며 기능에 도달하기위한 좋은 솔루션입니다.

불꽃 놀이 : 레이아웃을 작성하고 좋은 그래픽 작업을하는 훌륭한 소프트웨어라고 생각합니다!

Dreamweaver : 웹 개발을위한 하나의 솔루션으로 모든 것이 모두 있습니다 ... 웹 사이트의 원격 버전을 현지 웹 사이트와 쉽게 동기화 할 수있는 훌륭한 도구입니다.

코다 (Mac Only)는 .htaccess 파일을 관리하고 편집 할 수 없더라도 DreamWeaver에 대한 아주 좋은 대안입니다!

웹 사이트를 코딩하기 위해 DreamWeaver 또는 Coda를 제안하지만 다른 좋은 대안은 bbedit (Mac 만 해당).

Bootstrap, 내가 제안 할 수있는 최고의 CSS 프레임 워크, Foundation이라는 또 다른 CSS 프레임 워크도 있지만 개발자들 사이에서 인기가 있고 확장 가능한 부트 스트랩을 선호합니다. 다른 프레임 워크가 거의 없습니다. 나는 그것에 대한 블로그를 썼습니다. http://www.andwecode.com/freebies/5-responsive-css-frameworks :)

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow