2021. 3. 28. 00:47ㆍDev/프론트엔드
codepen.io
강의에서 소개해준 사이트이다. 간단한 html, css, javascript 코드들을 테스트해보고 싶을 때 좋은 사이트이다.
프론트엔드 개발자들에게는 엄청 유용한 사이트이다. 현재 개인적으로 사이드 프론트엔드 프로젝트를 진행해보려고 하는데, 이 사이트가 엄청 유용하게 쓰일 것 같다.
브라우저 스타일 초기화
이번 패캠 강의에서는 브라우저 스타일 초기화에 대해 배웠다.
각 웹브라우저마다 html을 해석하는 스타일이 다르다.
아래 캡처를 보면 body 태그 안에 단순히 div태그를 생성하고, width/height 속성을 부여해서 네모 박스를 생성한 html 파일을 크롬 브라우저로 열어서 개발자 도구로 확인해보면 body 태그에 내가 설정하지 않은 margin 속성이 8px로 적용돼 있는 것이 보인다.
내가 설정하지 않은 스타일이 자동으로 적용돼버리게 되면, 다양한 웹브라우저에서 동일한 스타일과 디자인으로 서비스를 제공하는 크로스브라우징에 영향을 미칠 수 있다. 따라서 이런 것을 방지하기 위해 브라우저의 기본적인 스타일을 초기화하고 시작해야 한다. 패캠 강의에서는 이 방법에 대해 안내하고 있다.
난 브라우저 스타일 초기화라는 개념을 이번에 처음 알았다.ㅎㅎㅎ
방법1. reset.css
기본적인 스타일들을 모두 초기화한다. normalize.css 보다는 용량이 적다.
방법2. normalize.css
어느 정도의 기본적인 스타일들은 유지한다. reset.css 대비 용량은 크지만 비교적 좀 더 많이 사용되고 있다.
둘 다 기본적인 스타일을 정의한 css 파일을 로드하여 사용하는 개념은 동일하다.
패캠 강의에서는 reset.css를 이용한 브라우저 스타일 초기화에 대해 설명한다. 방법은 아래와 같다.
reset.css cdn 으로 구글링한다.
jsdelivr.com 사이트로 접속하여, reset.min.css 파일에서 'copy html' 기능을 이용하여 주소를 복사해온다.
reset.css 파일 대신 reset.min.css 파일을 사용하는 이유는 위 강의에서 설명해주는 바와 같이, 우리가 외부 라이브러리를 직접 수정하여 사용할 일은 거의 없기 때문에 경량화된 파일을 사용하면 된다. 평소에 .min 파일을 열어보면 자바스크립트 코드가 1줄로 보여서 난독화된 건 알고 있었는데 Minify 단어의 약어인 것은 오늘 처음 알았다.
아마 프론트엔드 개발자들은 저런 CSS 파일 외에도 비슷한 형태의 자바스크립트 라이브러리 파일을 많이 봤을 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 복사해온 주소를 아래와 같이 붙여넣는다 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="stylesheet" href="./main.css">
<title>Document</title>
</head>
<body>
<div></div>
</body>
</html>복사한 코드를 위와 같이 붙여넣기 한다. 반드시 자신이 만든 css 파일보다 위에 선언하여 초기화가 먼저 이루어지도록 해야 한다. 파일을 저장하고 다시 브라우저에서 열어보면 body 태그의 margin 속성이 없어져서 네모박스 외부의 여백이 사라진 것을 확인할 수 있다.
codePen 에서는 CSS 설정화면에서 CSS Base 항목을 Reset으로 선택하면 된다.
웹브라우저마다 서로 기본 스타일이 다른 것도 있지만, 컴퓨터 OS에 따라서도 좀 다르게 보이는 것 같다.
예를 들어 윈도우 크롬 VS 맥 크롬에서 라디오버튼이나 셀렉트박스의 스타일이 다르게 보이는 현상이 있었다.
한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online. | 패스트캠퍼스
시간당 1천원 대 수강료 한 번 결제로 평생소장 | 프론트엔드 공부, 뭐부터 시작해야 하지? 더 이상 고민하지 마세요! 프론트엔드 개발자가 꼭 다뤄야 할 스택 20가지 이상을 100시간 분량의 온라
www.fastcampus.co.kr
※ 추천 한마디
패스트캠퍼스 프론트엔드 개발자 초격차 패키지는 완전 기초가 되는 HTML, CSS 부터 각종 프론트엔드에서 사용되는 언어 등을 이용하여 실제로 웹사이트를 만드는 프로젝트까지 포함돼 있어 강의 구성이 정말 알찬 것 같다. 따라서 프론트엔드 프로젝트에 투입되었거나 스터디를 통해 프론트엔드 프로젝트를 진행 중인 분들 중에서 기초부터 실전 프로젝트까지 해보고 싶은 분들이 들으면 좋을 것 같다.
'Dev > 프론트엔드' 카테고리의 다른 글
| 프론트엔드 개발자 패캠 수강 후기 - 빈태그, 글자와 상자 (2) | 2021.03.28 |
|---|---|
| 프론트엔드 개발자 프로젝트 패캠 수강 후기 - 정보를 의미하는 태그 (0) | 2021.03.20 |
| 프론트엔드 개발자 패캠 수강 후기 - HTML? (0) | 2021.03.13 |
| 프론트엔드 개발자 패캠 수강 후기 - 프론트엔트 개발자? (0) | 2021.03.06 |