메모 웹 만들어보기

css를 배우기 전에 html 만으로 만들어봤던 메모장 html에 지금까지 배운 css를 적용시켜봤다.

​

사실 내가 최종적으로 목표하는 것은 특정한 메모를 적을 수 있는 웹 사이트를 만들어서

직접 이 웹에 불특정 다수의 유저가 접속하면, 유저들 각자의 마음대로 메모를 기록할 수 있는 웹 사이트를 만드는게 목표지만!! -> 이건 자바를 배워야 비로소 개별적인 메모를 채워넣을 수 있다 .!!

​

그래서 일단 자바를 적용하기 이전 단계까지

지금까지 공부한 css와 html을 바탕으로 포스트잇을 구현시킨 기록이 되겠다. 😆

​

---

​

​

1.포스트잇 1

​

일단 처음에 싱글 포스트잇을 만들어보는 연습을 했다.

이렇게 포스트잇 하나를 만들었다.

처음 css적용은 은근 생각할 게 많았다.

​

-box shadow를 설정하는게 조금 생각을 해야했음.

-id 속성은 #태그로 나타냄.

 

위의 single 포스트잇을 만든 코드는 이렇다.

오늘의 시

내가 그다지 사랑하던 그대여
내 한평생에 차마 그대를 잊을 수 없소이다
내 차례에 못 올 사랑인 줄은 알면서도
나 혼자는 꾸준히 생각하리다
자, 그러면 내내 어여쁘소서.

이상_ 이런 시

 

2. 포스트잇 -여러개 붙인 모습 구현해보기

최종적으로 웹 사이트를 만들었을 때의 틀(?)을 만들어 보았다.

아직 자바를 안 배워서 웹으로 접속한 개개인이 메모할 수 있는 기능은 못 만들기에 ..ㅎ

임의의 메모들을 채워넣은 상황이다.

전반적인 큰~~~! 틀은 이렇게 만들어보고 싶다!

 

코드도 기록해두기!

<style>
        @import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
        *{
            margin:0;
            padding:0'
        }
        h2{
            font-weight: bold;
            font-size:30px;
        }
        p{
            font-size: 25px;
            font-weight: normal;
        }
        ul,li{
            list-style-type: none;
            margin: 10px;
        }
        ul{
            display:flex;
            flex-wrap: wrap;
            justify-content: center;;
        }
        .a{
            font-family: 'Indie Flower';
            
        }
        body {
            margin: 20px auto;
            font-family: 'Indie Flower';
            background:#4e2b09;
            color:#fff;
        }

        ul li a {
            width: 250px;
            height: 250px;
            border:1px solid black;
            padding:10px;
            display: block;
            background: #ffc;
            text-decoration: none;
            box-shadow: 5px 5px 7px rgba(33,33,33,.7);
            transition: transform .15s linear;
        }
        ul li:nth-child(even) a{
            transform:rotate(4deg);
            position:relative;
            top:5px;
        }
        ul li:nth-child(3n) a{
            transform: rotate(-4deg);
            position: relative;
            top:-5px;
        }
        ul li:nth-child(5n) a{
            transform: rotate(5deg);
            position: relative;
            top: -10px;

        }
        ul li:hover, ul li a:focus{
            animation-duration: 2s;
            transform: scale(1.1);
            position:relative;
            z-index: 3; 
        }
        
    </style>

 

빨리 더 많은 c언어와 코딩공부를 해서 개별적으로 메모할 수 있는 웹 사이트를 만들어보고싶다,