[CODECADEMY] 코드카데미 6일차 : CSS 기본 정리

 

CSS란, 홈페이지를 꾸밀 수 있도록 도와준다. 

 

---

CSS 효과를 지정 할 수 있는 방법 =

1.tag (예 : h1~h6, header 등 모든 기본 tag) 

CSS에서 해당 tag 불러올 시, tag이름 {css 효과}

h1 {
  color: maroon;
}

 

2. Class name (예 : <p class="title"></p>

CSS에서 해당 tag 불러올 시, .class name { css 효과 }

.title {
  color: teal;
}

 

2-1. Class 가 여러개 일 경우 / HTML에 적용하고자 하는 CSS 속성 효과가 여러개일경우

예 : 아래의 두개 CSS 속성을 동시에 h1태그에 적용시키고 싶다

.green {
  color: green;
}

.bold {
  font-weight: bold;
}

스페이스로 구분해서 작성 =  .class name1 class name2 { css 효과 } 

<h1 class="green bold"> ... </h1>

 

 

3. id name (예 : <h1 id="large-title"> ... </h1>)

CSS에서 해당 tag 불러올 시, #id name { css 효과 }

#large-title {

}

 

 

구체화 정도 : id > class > tag 이기 때문에 id가 가진 속성을 제일 우선적으로 사용한다. 

예 ) 아래와 같이 h1의 tag에 2개의 중복되는 color 속성이 작성되었을 경우, 조금 더 구체화 된 class의 firebrick 색상이 추출된다. 

HTML 

<h1 class="headline">Breaking News</h1>

CSS

h1 {
  color: red;
}

.headline {
  color: firebrick;
}

 

 

 

---

 

1. HTML과 CSS 연결하기

사용법 : <link> (closing tag 없음)

 

1. href — anchor 요소와 마찬가지로이 속성의 값은 CSS 파일의 주소 또는 경로 
2. type—이 속성은 연결하려는 문서 유형 (이 경우 CSS 파일). 이 속성의 값은으로 설정 (text/css)
3. rel—이 속성은 HTML 파일과 CSS 파일 간의 관계를 설명. 스타일 시트에 링크하고 있으므로 값을로 설정(stylesheet)

<link 
href="style.css" 
type="text/css" 
rel="stylesheet">

 

 

2. HTML 안에서 CSS 효과 사용하기 

사용법 : <tag style="원하는효과;"></tag>

<p style="color: red;">I'm learning to code!</p>

 

3. style.css 안에서 효과 사용하기

 

사용법 : 

1. style.css 파일을 만든다.

2. tag{} 를 지정하여 효과 설정한다. 

 

 

---

(심화)

 

1. Chaining Selectors - 같은 class name을 가진 것들 중 하나의 특정한 tag에만 css효과를 주고 싶은 경우

tag.class name { css 효과 }

예 : 

HTML 


  <h2 class="destination">...</h2>
  ...
  <h4 class="destination">...</h4>

CSS

h2.destination {
  font-family: cursive;
}

 

2. Nested Elements - 하나의 큰 묶음 tag 안에서 지정된 또다른 tag에만 효과를 주고 싶을 경우

.class name tag { css 효과 }

예 : 

HTML 

 <div class="description">1.CANADA...
    <a href="http://..." target="_blank">Learn More</a>.
    <h5>Top Attractions</h5>
    <ul>
      <li>Biking</li>
      <li>Historical Sites</li>
      <li>Restaurants and Dining</li>
    </ul>
    
 <h2 class="destination">2. Beijing, China</h2>
  <div class="description">A 
  </div>

CSS

.description h5 {
  color: teal;
}

 

3. !important - 특정 스타일에 관계없이 모든 스타일 을 재정의함 (비추천)

 

4. 여러개의 selectors에 같은 효과를 지정할 경우 - 콤마를 사용해 준다.

p, h5 {
font-family: Georgia;
}