네카라쿠배 프론트엔드 취업완성 스쿨 2기 [Chapter.10](CSS 실습환경)
2023. 8. 11. 20:44ㆍHTML,CSS
01.CSS Reset
index.htm;코드:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<!-- reset.css 의 역할: 기존에가지고있던 스타일을 없애고 내가만드는 스타일들로 새롭게 채워넣는것 -->
<!-- 초기화(reset.css)는 main.css 보다 먼저 이뤄져야함 -->
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="box"></div>
<h1>Header1</h1>
<h1>Header2</h1>
<h1>Header3</h1>
<h1>Header4</h1>
<p>Paragraph</p>
<div>Division</div>
</body>
</html>
main.css 코드:
/* body{
margin:0; margin과 padding 을 0으로 만듦으로써 여백을 초기화
padding:0;
} */
.box{
width: 300px;
height:150px;
background:tomato;
}
결과:
여백이 없어진다.
03.Emmet
코드:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class= "box"></div>
<div class="box"></div> <!-- .box를 쓰고 엔터를 누르면 div 태그 클래스를 만들어낼 수있다. -->
<div class= "box"></div>
<ul class="list"></ul>
<ul class="list"></ul>
<!-- Emmet 문법 -->
<!-- emmet 문법은 별도의 설치가 필요없다. -->
<!-- .container>ul.list>li.list-item*10>a{list$} -->
<!-- .container : container 라는 클래스를 가지고 있는 div를 생성
ul.list: list 클래스를 가지고 있는 ul 태그
>: 자식 요소를 의미
li.list-item*10 : list-item 이라는 이름의 클래스를 가지는 li 태그 10개생성
a{list$} : list바로옆에 인덱스가 자동으로 붙게끔하는 a태그를 생성
-->
<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>
<li class="list-item"><a href="">list6</a></li>
<li class="list-item"><a href="">list7</a></li>
<li class="list-item"><a href="">list8</a></li>
<li class="list-item"><a href="">list9</a></li>
<li class="list-item"><a href="">list10</a></li>
</ul>
</div>
<!-- ul.list 를 하면 (일치선택자) ul태그이면서 list 라는 클래스를 가지고 있는 요소로서 emmet 문법을 작성할 수 있다. -->
</body>
</html>
<!-- emmet 문법을 사용하면 조금 더 빠르게 css 문법을 사용 할 수 있다. -->
main.css코드 :
.box{ /* box 라는 클래스 요소를 가지고 있는 클래스를 검색하겠다는 의미 .box :css 의 선택자 */
width: 100px; /* w:100에서 tab을 누르면 자동으로 작성됨 */
height: 100px; /* h:100에서 tab을 누르면 자동으로 작성됨 */
}
'HTML,CSS' 카테고리의 다른 글
| 네카라쿠배 프론트엔드 취업완성 스쿨 2기 [Chapter.12](CSS 단위) (0) | 2023.08.15 |
|---|---|
| 네카라쿠배 프론트엔드 취업완성 스쿨 2기 [Chapter.11] (선택자,상속) (0) | 2023.08.15 |
| 네카라쿠배 프론트엔드 취업완성 스쿨 2기 [Chapter.09](HTML 전역속성, 기타) (0) | 2023.08.07 |
| 네카라쿠배 프론트엔드 취업완성 스쿨 2기 [Chapter 08](HTML 요소- 표 컨텐츠 &양식) (0) | 2023.08.04 |
| 네카라쿠배 프론트엔드 취업완성 스쿨 2기[Chapter07](HTML 요소- 멀티미디어&내장콘텐츠& 스크립트) (0) | 2023.07.27 |