어떻게 쓰기 능력의 CSS를 개선하기 위해? 어떻게 웹 프런트 엔드 개발을 배울 수? 학습 웹 프런트 엔드에서 많은 사람들이 처음이 두 부분의 지식을 마스터, 스타일 디자인을위한 HTML과 CSS, 텍스트 내용에 대한 HTML, CSS를 배울 간단한 페이지를 만들 수 있습니다. 일반적으로 오랜 시간의 노력이 필요하지만 좋은보다 약간 더 해입니다, 그래서 당신은 쓰기 CSS의 효율성을 개선하기 위해, 몇 가지 기술을 마스터해야합니다.
1, 플렉스 레이아웃의 사용
그것은 이유 플렉스 탄성 레이아웃을 나타납니다. 플로팅 인라인 블록 오히려 전체 페이지보다 많은 효과 배치되지만, 그러나 실질적으로 공구 요소 레이아웃 텍스트 블록이며, 달성 될 수있다. 우리가 예상 한대로 플렉스 쉽게 레이아웃을 만들 수 있습니다.
플렉스는 속성 세트와 속성의 "flexible 프로젝트"에 대한 그룹 중심의 "유연한 용기"가, 당신이 그들을 배우면 어떤 반응 레이아웃은 케이크 한 조각입니다 않습니다. 당신은 플렉스 레이아웃을 많이 사용해야하므로 플렉스의 다양한 유형에 대한 브라우저 지원의 최신 버전은 또한 아무런 문제가 없습니다.
2주의 절첩 마진 그
접힌 마진이 발생하면 대부분의 다른 특성과는 달리 상하 수직 외연으로부터 존재한다. 이것은 요소가 다른 요소의 상부 에지, 하부 에지와 접촉 할 때, 단 하나의 큰 두 한계 값을 유지한다는 것을 의미한다.
여백을 해결하는 방법은 여러 배는 우선, 가장 단순한는 우리 모두 사용 마진 - 하단 위아래로 외부로, 한 방향으로 만 모든 요소 마진을 사용하는 것입니다,이되어 있습니다.
3, 모든 요소는 국경 박스 세트
대부분의 초보자는이 상자 크기 조정 속성을 잘 모르겠지만, 사실은 매우 중요합니다. 박스 크기 속성은 두 개의 값이있다 :
1) 내용 상자 (기본값). 우리는 요소의 폭 또는 높이를 설정하면, 그 콘텐츠의 크기를 설정하는 것이다. 모든 패딩과 경계 값은 포함되지 않습니다. 소자 (120)의 화소 (2 + 10 * 100)을 점유 할 수 있도록 예를 들어, 100에 DIV 폭은 10 패딩.
2) 경계 박스. 100 픽셀과 상자 크기 : 설정된 폭 요소의 패딩 및 경계 폭 또는 높이에 포함 :. 경계 박스 div 요소, 그 전체 폭은 얼마나 패딩과 테두리 여부, 100 픽셀이다.
모든 요소는 경계 상자로 설정되어,보다 쉽게 패딩 값의 공포 또는 변형 될 것이다 경계 요소 나 뻗어 랩 표시하지 않고 요소의 크기를 변경할 수 있습니다.
4, 리셋 요소 CSS 스타일
다양한 요소에 대한 기본 스타일 사이에 큰 차이가 다른 브라우저는이 문제를 해결하는 가장 좋은 방법은, 리셋 코드를 재설정한다 CSS의 CSS의 시작 부분에 설정된 모든 요소에 일반적입니다. 이 밖에 기본 내부 여백에 대한 어떤 기준의 부재에 배치되어 그 효과가 어느 단결이다.
우리는 normalize.css, minireset 및 RESS 같은 문제 브라우저 불일치, 프로젝트에서이를 참조 할 수 있습니다 해결하기 위해 네트워크는 CSS 코드베이스를 성숙.
5, 더 친절한 설명
아마도 CSS는 프로그래밍 언어가 아니라 코드는 여전히 문서화 할 필요가있다. 댓글은 포스트 유지 보수를 용이하게하기 위해 자신과 동료를 구별하는 몇 가지 간단한 코드 분류를 추가 할 수 있습니다. 그것은 CSS // 노 코멘트 만 / ** / 주석, 주목해야한다.
도 6을 참조하면, 배경 화면
페이지가 사진에 추가 될 때, 특히, 오히려 라벨보다, 그림의 도입 배경 속성을 사용하는 것이 가장 좋습니다, 사진 응답해야합니다. 이 그림이 더 복잡 사용 보이지만, 사실은 사진 스타일 설정을 쉽게 할 것이다. 배경 사이즈, 배경 위치, 및 기타 속성을 유지하거나 더 편리 할 것이다 원래의 이미지 크기 및 종횡비를 변경.
한 가지 단점 배경 사진은 화면 판독기와 검색 엔진이 제대로 이미지를 얻을 수 없기 때문에 웹 페이지 접근성의 도입이 약간 영향을받을 것입니다. 이 문제는 지금까지 다른 브라우저 객체에 맞게 사용할 수 있습니다 IE 브라우저뿐만 아니라, CSS 오브젝트 맞는 속성에 의해 해결 될 수 있습니다.
이 기술을 엔드 웹 프런트에 관심이 작은 파트너는주의가 필요한 실제적인 세부 사항을 개발하기 위해 당신과 함께 몇 가지를 공유하는 학습, 연구 원, 직장의 여섯 번째 년에 추가 할 수 있습니다. 767-273-102 가을 드레스. 제로 기반 프론트 엔드에서 시작하는 방법을 배울 수 있습니다. 사람들의 그룹은 꿈으로, 우리는 다른 도시에있을 수 있습니다,하지만 우리는 함께 걸어 나갈 것이다 끝의 앞쪽 끝
7, DIY, 다중 이용 코드 라이브러리를 할
CSS 커뮤니티는 항상 새로운 코드베이스가 표시가 매우 크다. 이들은 화학식 1의인가에 응답하여 전체 프레임을 구성하는 작은 단편의 다양한 용도를 가지고있다. 대부분의 오픈 소스. 다음에 당신은 당신이 그것을 해결하기 위해 노력을 기울이고 시도하기 전에, 해결책은 Github에서 또는 Codepen 볼 수 있었는지 확인하는 CSS 문제에 직면하고 있습니다.
8, AutoPrefixer 더 나은 호환성을 달성하여
CSS 브라우저 접두사, 그것은 의심 할 여지없이 당신이 정말로 수동으로 스타일 시트에 추가 하나 하나를 가지고가는 경우에 당신은 어느 쪽의 요구를 모를 결국, 각 속성에 일관성이 접두사해야 할 가장 짜증나는 것들 중 하나입니다 바보 같은 악몽.
다행히도, 자동으로 우리도 지원해야하는 브라우저를 결정할 수 있습니다 브라우저 접두사에 추가 기능을 제공하는 도구가 있습니다 :
온라인 도구 : Autoprefixer
텍스트 편집기 플러그인 : 숭고한 텍스트, 아톰
코드 라이브러리 : Autoprefixer (PostCSS)
9, 압축 CSS 파일
사이트 및 페이지 로딩 속도 및 부하 응용 프로그램을 개선하기 위해, 자원을 압축 한 후 사용해야합니다. 파일의 압축 버전함으로써 전체 파일의 볼륨을 줄이고, 모든 격차와 중복을 제거합니다. 물론,이 과정은 또한 이렇게 생산 환경에서 버전을 30 ℃와 pH 5.5 또는 다른 pH 사용뿐만 아니라, 기존의 버전을 보유 개발, 스타일 시트가 완전히 읽을 수 있습니다. CSS 코드를 압축하는 방법에는 여러 가지가 시장에가 있습니다 있습니다 :
온라인 도구 : CSS Minifier, CSS 압축기
텍스트 편집기 플러그인 : 숭고한 텍스트, 아톰
코드 라이브러리 : Minfiy (PHP), CSSO, CSSNano (PostCSS, 그런트, 꿀꺽)
10, 검증
HTML이나 자바 스크립트 코드를 검증 할 수 없습니다 CSS를 확인 중요하지만, 여전히 코드에 매우 유용한 도구를 실행하여. 그것은 당신이 어떤 오류, 경고, 잘못된 사용을 만든 여부를 알려, 당신을 위해 코드를 개선하기위한 팁을 제공합니다.
압축 및 Autoprefixer처럼 사용할 수있는 무료 도구가 있기 때문에 :
온라인 도구 : W3 검사기, CSS의 린트
텍스트 편집기 플러그인 : 숭고한 텍스트, 아톰
코드베이스 : stylelint (Node.js를, PostCSS), CSS-검사기 (Node.js를)
업계의 웹 프런트 엔드에 참여하고자하는 사람들을 위해, 고용은 큰 문제뿐만 아니라 모든 결정에 직접적인 영향이다. 따라서, 전문 학습의 선택은 더 나은뿐만 아니라 견고한 이론적 기초, 프로젝트 개발, 명확한 경력 계획 및 인터뷰 기술의 기술에 풍부한 경험이있는, 그들의 자신의 빠른 취업의 가능성을 제공합니다.