CSS Tutorials For Beginners #6-10

· 2019-02-10 (일) 14:50:39 · 1020

External style sheets

인라인과 임베디는 시간 소비

빠르고 쉽게  External style로

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CSS For Beginners</title>
  <link rel="stylesheet" href="styles/syntax.css">
</head>
  
<body>
  <p class="welcome">Welcome!</p>
  
  <div id="header">
    <h1>Selectors</h1>
    <h2>In CSS</h2>
    <p>Welcome to the website!</p>
  </div>
  
  <p>Hello there ninjas!</p>
  <p>Hello there ninjas!</p>
  <p>Hello there ninjas!</p>
  <p>Hello there ninjas!</p>
  <p>Hello there ninjas!</p>
  <p>Hello there ninjas!</p>
  <p>Hello there ninjas!</p>
  <p>Hello there ninjas!</p>

  <!-- Scripts -->
  <script src="scripts/index.js"></script>
</body>
</html>

contact.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CSS For Beginners</title>
  <link rel="stylesheet" href="styles/syntax.css">
</head>
  
<body>
 <div id="header">
    <h1>Contact Us</h1>
  </div>
  
  <p>Hello there ninjas! contact us below.</p>
  <p>Hello there ninjas! contact us below.</p>
  <p>Hello there ninjas! contact us below.</p>
  <p>Hello there ninjas! contact us below.</p>
  <p>Hello there ninjas! contact us below.</p>
  <p>Hello there ninjas! contact us below.</p>


  <!-- Scripts -->
  <script src="scripts/index.js"></script>
</body>
</html>

 

syntax.css에

p{
  font-size: 12px;
  color: blue;
}

blue를 red로 12px를 20px로 바꾸면 한번에 바뀌는 것을 알수가 있습니다.

 

CSS Comments and Where to Use Them

 

/* */ 를 사용함

 

Targeting Elements with CSS

 

각각의 tag에  적용시킬수 있음

p, a, span, h1, div 태그에 적용

 

Targeting Classes and ID's

 

Class는 한페이지에서 여러번 사용이 가능하지만

id는 한페이지에서 한번만,  유일하게 사용되어야 함.

 

id를 선택하기 위해서는 # 을 class를 선택하기 위해서는 . 으로..

 

CSS Conflicts & the Cascade

 

위에서 아래로 적용됨.

뒤에 있는 규칙이 적용됨 (인라인 스타일이 마지막..)

 

|
댓글을 작성하시려면 로그인이 필요합니다.

CSS

89건

CSS 관련 공부 및 자료 공유 소모임 게시판 입니다.

+
제목 글쓴이 날짜 조회
19-02-19 조회 1,325
19-02-19 조회 1,212
19-02-18 조회 1,252
19-02-18 조회 1,284
19-02-17 조회 1,155
19-02-17 조회 1,384
19-02-17 조회 1,252
19-02-16 조회 937
19-02-16 조회 1,232
19-02-16 조회 1,248
19-02-15 조회 1,143
19-02-14 조회 993
19-02-13 조회 975
19-02-12 조회 1,254
19-02-12 조회 1,198
19-02-11 조회 1,311
19-02-11 조회 1,028
19-02-11 조회 984
19-02-10 조회 1,021
19-02-10 조회 1,230
19-02-10 조회 1,247
19-02-09 조회 1,019
19-02-09 조회 1,140
19-02-08 조회 4,069
19-02-08 조회 1,347
19-02-08 조회 1,071
19-02-08 조회 1,286
19-02-08 조회 1,442
19-02-08 조회 1,294