1. CSS실습환경
각각의 브라우저에 따라 서로 다른 스타일의 환경에서 나오기 때문에 다양한 브라우저에서 제공하는 스타일이라는 것이 표준화되는 것이 아니기 때문이다. 기본적으로 제공하는 브라우저의 스타일을 초기화해야 한다.
1. css reset
HTML)
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML content</title>
<link rel="stylesheet" href="./css/main.css"
</head>
<body>
<div class="box"><div>
</body>
</html>CSS)
body{
margin:0;
padding:0;
}
.box{
width:300px;
height:150px;
background:tomato;
}이렇게 하면 브라우저에서 자동으로 가지고 있는 값을 초기화 할 수 있다.
(초기화하기 위해서css에서) body에서 margin과 padding값을 '0'으로 맞춰준것이다.
💡 reset.css cdn으로 검색해서 압축파일을 copy HTML을 가지고 와서 head태그 내에 작성해도 된다.
여기서 주의해야 할 사항은 순서를 고려하여 reset을 먼저 해주고 css를 가지고 와야하기 때문에 link style태그보다 위에 위치해 있어야 한다.
2.codepan
코드펜 사이트를 이용해서 reset.css를 기본적으로 제공하기 때문에 이용하기 수월하다.
3. emmet
emmet사이트에 들어가서 HTML과 CSS를 쉽게 입력할 수 있는 방법을 알 수 있다.
- Emmet문법
vscode에서 태그이름을 입력하고 tab키를 누르면 자동으로 완성된다.
일치선택자에 있는 문법이다.
ex)
1) li(tab)
<li></li>2) .container>ul.list>li.list-item*5>a{list$}
<div class="container">
<ul class="list">
<li class="list-item"><a href="">list1</a></li>
<li class="list-item"><a href="">list2</a></li>
<li class="list-item"><a href="">list3</a></li>
<li class="list-item"><a href="">list4</a></li>
<li class="list-item"><a href="">list5</a></li>
</ul>
</div>3) (CSS)w:100으로 탭키를 누르면 width:100px;
4) (CSS)h:100으로 탭키를 누르면 height:100px;이 된다.
마지막으로
다음에는 CSS단위에 대해서 알아볼게요.
이제 막 개발을 시작한 프로그래밍 입문자