[CSS] css reset, 선택자, 속성, 폰트

* 강의

(신) 올 뉴 30분 요약강좌(CSS) - 2022년까지 업데이트 - YouTube

 

* 자료

007 기본 CSS

007 기본 CSS | Notion

 

 

 

* 초기에 css를 리셋하고 작업해야 원하는 결과물로 화면 출력 가능.

CSS Tools: Reset CSS

CSS Tools: Reset CSS

 

Can I use... Support tables for HTML5, CSS3, etc

Can I use... Support tables for HTML5, CSS3, etc

 

HTML Color Codes

HTML Color Codes

 

HTML Color Names

W3Schools.com

 

 

<link> 태그: 외부 스타일 가져올 수 있음.

<style>태그: 내부 스타일 지정. 

* 우선순위는 내부가 더 높다.

 ex) 외부에서 h1태그를 빨강으로 설정했어도 내부에서 그린으로 설정하면 웹 화면에서는 그린으로 표시됨.

 

<style>
    h1 {
        color: blue;
    }
</style>

h1 : 선택자(셀렉트) 
color : 속성(프로퍼티)  
blue : 값(벨류) 

 

<style>
    h1 {
        color: blue;
    }
    
    #onlyone { 
        color : green; 
    }
 
    .one { color : red; }  
    .two { font-size: 20px; }
 
</style>
 
<h1 id="onlyone"> hello world </h1>     
 
id는 유일하게  
<h2 id="onlyone"> hello world </h2>     
 
class 여러개   
<h3 class="one two"> hello world </h3>  

 

CSS 선택자 - CSS: Cascading Style Sheets | MDN

CSS 선택자 - CSS: Cascading Style Sheets | MDN

CSS 참고서 - CSS: Cascading Style Sheets | MDN

CSS 참고서 - CSS: Cascading Style Sheets | MDN

놀라운 무료 이미지 - Pixabay

 

Browse Fonts - Google Fonts

Browse Fonts - Google Fonts

 

Font Awesome

Font Awesome