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

카테고리 없음 2021. 2. 6. 16:14

자이번엔 탭메뉴

 

 

nav#nav>h2{Responsive Site} <tap>    ul>li*30>a[href="#"]{HTML REference $}div.div>h2         <tap>눌러 빠르게 만들기!!(플러그인 있어야함 1참고)

ㄱ

몇개로 나오게 할지 설정!

 

 

/* nav */
.nav {padding: 30px 0}
.nav h2 {font-size: 20px; color: black; padding-bottom: 5px; font-family: "MY",cursive;}
.nav li {position: relative; float: left; width: 20%; padding-bottom: 2px; padding-left: 9px; box-sizing: border-box; }
.nav li:before {content: ''; width: 3px; height: 3px; border-radius: 100%; background: black; position: absolute;left: -2px;top: 5px;}
.nav li a {padding: 2px 2px; border-style: 2px;}
.nav li a:hover {background-color: black; color: white; transition: 1s ease; text-decoration: none;border-radius: 5px}

ㅁ

뭐이렇게 어느정도 된거같다 그리고 벽에 붙는거 없에려면 

row 를 만들어 준다음

 

로우에 패딩을 만들어준다 그럼 옆에 안붙음

 

 

 

그리고 클리어 픽스 넣기 왜넣는지 모르겟다

 

/* claerfix */
.clearfix{*zoom:1;}
.clearfix:before, .clearfix:after {display: block; content: ''; line-height: 0;}
.clearfix:after {clear:both}

리셋 css 에 넣어주고

그다음 이름에 넣어주면 된다고 한다

블로그 이미지

Or71nH

,

웹을 만들어보자 이제 이블로그를안쓴다는 마음으로!!!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

,

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

카테고리 없음 2021. 2. 4. 16:50

이제 리셋 만들자!!

@charset "UTF-8";
/* 여백 초기화 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,button{margin:0;padding:0}

/* 테두리 초기화 */
fieldset,img{border:0 none}

/* 리스트 초기화 */
dl,ul,ol,menu,li{list-style:none}

/* 폰트 초기화 */
body,th,td,input,select,textarea,button{font-size:12px;font-family:'나눔 고딕', 'Nanum Gothic', dotum,'돋움',sans-serif;color:#222;}
a{color:#222;text-decoration:none}
a:hover{color:#118eff;text-decoration:underline}
a:active{background-color:transparent}

/* 폰트 스타일 초기화 */
address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:normal}

 

그리고 스타일 만들자!!

developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders

 

배경 및 테두리 - Web 개발 학습하기 | MDN

이번 수업에서는 CSS 배경과 테두리로 할 수 있는 창의적인 작업을 살펴보겠습니다. 그라데이션 (gradients), 배경 이미지, 둥근 테두리를 추가하는 것에서 배경과 테두리는 CSS 의 많은 스타일 질문

developer.mozilla.org

배경설정방법

 

헤더 이미지 다운

title_html1.png
0.13MB

@charset "UTF-8";

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

드뎌 먼가 되가는군

 

블로그 이미지

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

티스토리툴바