[CSS]웹 디자인 해보기-blog 2편 구현-1

[Blog] 웹 뷰만 만들어보자.

1. state

search는 icon으로 만들거예요.

https://fontawesome.com/

아이콘을 무료로 html에 넣을 수 있는 사이트예요. (자세히보기)

2.html

실행 코드

1 2 3 4 5 6 7

<div class="state">    <p>Alencion's blog</p>    <div class="search">       <input type="text" placeholder="search is...">       <i class="fas fa-search"></i>    </div> </div> Colored by Color Scripter

cs

html을 이용해 state를 만들어보았어요.

블로그 이름과 search박스를 아이콘과 input태그를 이용해서 표현했어요.

3. CSS

실행 코드

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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

.state{   /* box model */   padding: 20px;   border-bottom: 1.2px solid gray;   background: #fff;   /* assignment */   position: static;   /* text */   font-family: 'Ubuntu', sans-serif;   font-size: 24px; } .state p{   /* box model */   margin: 0;   padding: 0;   /* assignment */   display: inline;   /* text */   font-size: 30px;   text-align: left; } .state .search{   border: 1px solid black;   border-radius: 20px;   display: inline-block;   float: right;   width: 35.6px;   height: 33.6px;   box-sizing: border-box;   transition: 0.5;   overflow: hidden;   transition: 0.5s; } .state .search input{   position: relative;   right: -15px;   top: -2px;   width: 250px;   border: none; } .state .search input:focus{   outline: none; } .state .search i {   /* assignment */   position: absolute;   width: 35.6px;   top: 20px;   right: 20px;   line-height: 33.6px;   text-align: center;   color: black;   font-size: 1rem;   background: #fff;   border-radius: 50%;   transform: scale(0.95); } Colored by Color Scripter

cs

위 코드엔 누락 됬지만 state영역 확인을 위해 body태그에 배경색을 gray로 주었어요.

블로그 폰트는 Ubuntu 체로 했어요.