웹을 만들어보자 이제 이블로그를안쓴다는 마음으로!!!6

카테고리 없음 2021. 2. 5. 15:33

아이콘을 넣어주자

 


               ul>li*4>a[href="#"]{아이콘$} <tap>

이걸 이용하여 빠르게 li 를 만들어주자

그럼

               <ul>
                   <li><a href="#">아이콘1</a></li>
                   <li><a href="#">아이콘2</a></li>
                   <li><a href="#">아이콘3</a></li>
                   <li><a href="#">아이콘4</a></li>
               </ul>

만들어지고

fontawesome.com/v4.7.0/get-started/

 

Get Started with Font Awesome

Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them! Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle. Ligatures for easier des

fontawesome.com

폰트를 연동하자

font-awesome-4.7.0.zip
0.64MB

이거 받아도됨

 

    
    <!-- font-awsome -->
    <link rel="stylesheet" href="font/awesome/css/font-awesome.css">

이제 효과넣어보자

    <div class="icon">
               <ul>
                   <li>
                   <a href="#">                   
                   <i class="fa fa-github" aria-hidden="true"></i>
                   <span>Github</span>
                   </a>
                   </li>
                   <li>
                   <a href="#">
                   <i class="fa fa-facebook-square" aria-hidden="true"></i>
                   <span>Facebook</span>
                   </a>
                   </li>
                   <li>
                   <a href="#">
                   <i class="fa fa-flag" aria-hidden="true"></i>
                   <span>Flag</span>
                   </a>
                   </li>
                   <li>
                   <a href="#">
                   <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                   <span>user</span>
                   </a>
                   </li>
               </ul>
/* icon */
.icon {text-align: center; margin-top: 40px}
.icon ul { }
.icon li {display: inline;}
.icon li a {display: inline-block; width: 50px; height: 50px; background-color: #fff; color: #000; font-size: 26px; border-radius: 50%; position: relative; }
.icon li a i {line-height: 50px}
.icon li a span {opacity: 0; position: absolute; font-size: 12px; left:50%;transform: translate(-50%); top:-20px; background: #000; color: #fff; padding: 1px 7px; border-radius: 10%; transition: all 0.5s ease-in-out;}
.icon li a span:before {content: ''; position: absolute; left: 50%; bottom: -5px; 
    margin-left: -5px;
    border-top : 5px solid black;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    
}
.icon li a:hover span {opacity: 1; top: -25px;}

 

 

 

이제 이쁘게 아이콘이 클릭된다

블로그 이미지

Or71nH

,

웹을 만들어보자 이제 이블로그를안쓴다는 마음으로!!!5

카테고리 없음 2021. 2. 5. 12:39

폰트를 불러오자

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="반응형 웹 페이지 제작 샘플입니다.">
    <meta name="keyword" content="반응형 사이트, 교육사이트">
    <meta name="robots" content="all">
    
    <title>Document</title>
    
    <!-- favicon & icon -->
    <link rel="shortcut icon" href="img/icon/044-buffer.ico">  
    <link rel="buffer-icon" href="img/icon/044-buffer.ico">
    
    <!-- style css -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    
    
    
    <!-- webfont -->
    <link href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css" rel="stylesheet" type="text/css">
    
    <!-- html5 Support & ie Version Checker -->
    <script src="setting/html5shiv.js"></script>
    <script src="setting/ie-checker.js"></script>
    
    <!-- jQuery -->
    <script src="setting/jquery-1.9.1.js"></script>
</head>
<body>
   <header id="header">
       <div class="container">
           <div class="quick">
               <a href="#">메인</a>
               <a href="#">로그인</a>
           </div>
           <div class="title">
               <p>Professional Web Publihser</p>
               <h1><a href="#">TopKnell.co.kr</a></h1>
           </div>
       </div>
   </header>
    
    
</body>
</html>
@charset "UTF-8";

/* font */

@font-face {
    font-family: 'MY';
    src: url(../font/NanumBrushScript-Regular.ttf)
}
/* font-family: 'My',cursive */
@font-face {
    font-family: 'Gothic';
    src: url(../font/NanumGothicCoding-Regular.ttf)
}
/* font-family: 'Gothic',cursive */

/* layout */
#header {height: 400px; background: url(../img/header/title_html1.png) no-repeat center top /contain;}

/* container */
.container {width: 1280px; margin: 0 auto; background: rgba(0,0,0,0.2);font-size: 1%}

/* quick */
.quick {text-align: right;}
.quick a {color: #fff; padding: 4px 0 4px 10px; display: inline-block; transition: color 0.3s ease;}
.quick a:hover {color: #ccc;}

/* title */
.title {text-align: center; text-transform: uppercase;  font-family: 'My',cursive}
.title p {font-size: 24px; color: #fff; background-color: #202; display: inline; padding: 10px 20px; font-weight: 600}
.title h1 a {color: #202; background-color: #fff; display: inline-block; font-size: 12px; padding: 5px 20px}



/* mediaquery 320 / 480 / 600 / 768 / 960 / 1024 / 1280 */
@media (max-width: 1280px){
    
    .container {width: 100%;}
    
}
@media (max-width: 1024px){
    .container {width: 100%;}
    
}
@media (max-width: 960px){
    .container {width: 100%;}
    
}
@media (max-width: 968px){
    .container {width: 100%;}
    
}
@media (max-width: 600px){
    .container {width: 100%;}
    
}
@media (max-width: 480px){
    
}
@media (max-width: 320px){
    
}

폰트를 다운받아 경로에 만들자!

fonts.google.com/?preview.text_type=custom&sidebar.open=true&selection.family=Nanum+Brush+Script

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

집접 구글에서 불러와 사용하여도 되지만 난 파일을 그냥 넣어서 오프라인에 사용하려 한다!

 

 

 

마우스를 올리면 변화하는 코드를 만들자

 

.title h1 a {color: #202; background-color: #fff; display: inline-block; font-size: 12px; padding: 5px 20px; transition: color 0.3s ease, box-shadow 1.3s ease; text-decoration: none;}
.title h1 a:hover { 
    color: #fff;
    box-shadow: 
        0 0 0 100px rgba(0,0,0,0.8) inset;
}

 

 

 

블로그 이미지

Or71nH

,

웹을 만들어보자 이제 이블로그를안쓴다는 마음으로!!!4

카테고리 없음 2021. 2. 5. 11:25

반응형을 만들어 보았다 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="반응형 웹 페이지 제작 샘플입니다.">
    <meta name="keyword" content="반응형 사이트, 교육사이트">
    <meta name="robots" content="all">
    
    <title>Document</title>
    
    <!-- favicon & icon -->
    <link rel="shortcut icon" href="img/icon/044-buffer.ico">  
    <link rel="buffer-icon" href="img/icon/044-buffer.ico">
    
    <!-- style css -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    
    
    
    <!-- webfont -->
    <link href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css" rel="stylesheet" type="text/css">
    
    <!-- html5 Support & ie Version Checker -->
    <script src="setting/html5shiv.js"></script>
    <script src="setting/ie-checker.js"></script>
    
    <!-- jQuery -->
    <script src="setting/jquery-1.9.1.js"></script>
</head>
<body>
   <header id="header">
       <div class="container">
           <div class="quick">
               <a href="#">메인</a>
               <a href="#">로그인</a>
           </div>
       </div>
   </header>
    
    
</body>
</html>
@charset "UTF-8";

/* layout */
#header {height: 400px; background: url(../img/header/title_html1.png) no-repeat center top /contain;}

/* container */
.container {width: 1280px; margin: 0 auto; background: rgba(0,0,0,0.2);font-size: 1%}

/* quick */
.quick {text-align: right;}
.quick a {color: #fff; padding: 4px 0 4px 10px; display: inline-block; transition: color 0.3s ease;}
.quick a:hover {color: #ccc;}

/* mediaquery 320 / 480 / 600 / 768 / 960 / 1024 / 1280 */
@media (max-width: 1280px){
    
    .container {width: 100%;}
    
}
@media (max-width: 1024px){
    .container {width: 100%;}
    
}
@media (max-width: 960px){
    .container {width: 100%;}
    
}
@media (max-width: 968px){
    .container {width: 100%;}
    
}
@media (max-width: 600px){
    .container {width: 100%;}
    
}
@media (max-width: 480px){
    
}
@media (max-width: 320px){
    
}

여기 미디어 가 창 싸이즈를 말하고 있다 그럼으로 사이즈를 설정 변경할 수 있다

 

블로그 이미지

Or71nH

,

공지사항

카테고리

글 보관함

달력

«   2021/02   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28

티스토리툴바