ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko nb ko ko ko en en ko ko ko ko ko ko ko ko ko ko ko tr ko ko ko ko ko en en ko ko ko ko ko ko ko ko ko ko ko ko ko ko en en en ko fr ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko en ko ko ko en ko ko ko ko en es ko ko ko ko ko ko en
#10 스타일 초기화를 위한 Reset.css & Normalize.css - 웹 코딩 강좌 | 디자인베이스
웹 디자이너를 위한 웹 코딩 강좌 열 번째 시간입니다.
오늘은 브라우저에서 제공하는 기본 스타일을 초기화하는 방법을 알아볼게요. 내가 코드로 넣지도 않은 스타일이 있다면 답답하죠? 그러기 위해서는 스타일을 초기화하는 코드를 넣어야 합니다. 매번 작업할 때마다 직접 코드로 짜기 귀찮겠죠.
그래서 누군가 작업해둔 오픈소스를 활용할 거예요.
Reset.css 와 Normalize.css 두 가지를 알아볼 거예요.
사용법은 아주 간단합니다. 아래 링크에서 다운로드한 후에 css 폴더에 넣어 외부 스타일 시트 연결한 방법으로 해당 경로를 연결해 주면 됩니다!
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.
브라우저마다 기본적으로 제공하는 요소에 따른 스타일의 기본값(default 값)이 있는데, 약간씩 다릅니다.
Reset CSS란 설명하자면 브라우저 간의 차이를 최대한 없애는 코드를 넣어서, 브라우저 요소들의 스타일이 0인 상태에서 디자인을 만들어 나가기 위해 생겨난 것입니다.
초기화 혹은 일반적으로 바꿔주도록 누군가 만들어 놓은 좋은 소스 중에 하나입니다.
이것과 비슷한 게 하나 더 있습니다. 바로 Normalize.css입니다.
Normalize.css는 reset.css와 조금 다른데, 약간의 디자인적인 요소가 가미되어 있습니다. 요새 reset보다 normalize를 더 사용하는 것으로 알고 있습니다.
우선 파일을 다운로드해서 css 경로에 넣습니다.
외부 스타일 시트 사용하는 방법 기억하시죠?!
head 영역에 link로 불러오면 끝~ 간단하죠?!
Reset.css & Normalize.css                          웹디자인 입문   #1 지금 웹 디자인을 배우는 건 너무 늦었나?
CDN으로 불러올 수도 있습니다.
CDN 이란 Contents Delivary Network의 약자로 필요한 정보를 실시간으로 다운로드해 사용하는 방법입니다. 장단점이 있지만, 쉽게 적용해볼게요.
앞으로 업로드될 모든 강좌에 Reset.css를 적용시킵니다 : )
#5 마우스 오버를?! 컴포넌트 상태 – 어도비 XD 강좌
15. 99%가 모르는 Auto layout 좋은 기능(Advanced layout) – 피그마 강좌(멤버십 전용)
05. X 배너 디자인하는 방법 – 일러스트레이터 강좌
그라데이션 컬러 추천해주는 사이트
디자이너가 무조건 피해야 할 회사 유형
디자인 입문자가 꼭 참고해야 할 사이트
맥북 뒷면 스티커 목업
투명 비닐 포장 목업
10. 자유롭게 화면 조절하는 방법 OrbitControls – Three.js 강좌
27. 귀여운 꿀벌 일러스트 쉽게 만드는 방법 – 일러스트레이터 기초 강좌
09. 3d 물체에 그림자 적용하는 방법 – Three.js 강좌
26. 프리폼 그라디언트로 5초 만에 부드러운 그라데이션 배경 만드는 방법 – 일러스트레이터 기초 강좌
Youtube Instagram Pinterest Naver Blog
포토샵 일러스트레이터 피그마 스케치 XD 프로토파이
웹디자인 웹코딩 인비전 프린서플 Lottie Three.js
소개 매거진 디자인 사전 북마크 무료 소스 문의하기 멤버십
© 2022 Designbase. All rights reserved.