본문 바로가기
자바 풀스택 공부

Day 26.

by seung_nari 2022. 2. 8.

https://cdnjs.com/libraries/font-awesome/5.8.0

 

font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

The iconic SVG, font, and CSS toolkit - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make

cdnjs.com

들어가서 버전 맞춰준 후

오른쪽 아이콘 중 가운데 있는 link 커피해서 

 

head 태그에 넣어주면!!

 

https://fontawesome.com/v5.15/icons/apple?style=brands 

 

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

여기에 있는 아이콘들 사용 가능!!


http://csszengarden.com/219/

 

CSS Zen Garden: The Beauty of CSS Design

So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into thi

csszengarden.com

http://csszengarden.com/

 

CSS Zen Garden: The Beauty of CSS Design

So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into thi

csszengarden.com

위는 무채색 !!


내부 스타일 시트, 외부 스타일 시트

내부 스타일 시트는 head 태그 안에!

외부 스타일 시트는 __.css 로 파일 만들어서

<link href="__.css" rel="stylesheet"> 를 head 태그 안에 넣어줘야 사용가능!

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section{
            width: 500px;
            padding: 15px;
            border: 5px solid gray;
        }
    </style>
    <link href="css/style.css" rel="stylesheet">
</head>
<body>
    <div id="container">
        <section>
            <h2>Who am I?</h2>
            <p>Front-end Web Tech에 관심이 많습니다.<br>
                현재 <span style="color: red;">제주</span>의 한 시골 마을에서 코딩중입니다.</p>
        </section>
    </div>
</body>
</html>
h2 {color: blue;}
p {font-size: .9em; line-height: 2;}

주요 선택자

전체 선택자 ( * {} ) : 모든 요소에 적용

 

클래스 선택자( .__ {} ) : 특정 부분에 스타일 적용

 

id 선택자

'자바 풀스택 공부' 카테고리의 다른 글

Day 28. Css 그라데이션  (0) 2022.02.12
Day 27.  (0) 2022.02.09
Day 25.  (0) 2022.02.07
Day 24.  (0) 2022.02.04
Day23.  (0) 2022.02.03

댓글