'코딩배우기'에 해당되는 글 1건

  1. 2014.11.02 [자바스크립트] 월 별 버튼과 이미지 입력창 만들기
집 밖/자기개발2014. 11. 2. 03:59

 

 




짜자잔, 

홧팅2

이제 12월까지 모두 버튼이 생겼고, 밑에 IDEA BLOCK 버튼과 이미지 입력창이 완성되었다.

아 뿌듯해서 죽는 줄 알았네. 이것이 정녕 나와 컴퓨터가 만들어낸 합작품이란 말인가.

정말 알면 알수록 너란 컴퓨터, 매력 쩐다.

후훗, 코드 봅시다.

 

 

우선 왼쪽이 휑~한 거 보이지? 줄정렬을 했다. 

1월부터~12월의 복붙향연을 벌이고 나니 코드가 192줄이 나왔어 ㄷ ㄷ ㄷ..

도저히 그냥 볼 수 없어서 왼쪽을 정렬하고 나니 훨씬 찾기도 편하고 수정도 쉬워짐.

아 색색이 참 아릅답기도 하구나. 마이 코드.

 

 

신나는 복붙이 끝나고 보니 이런게 출력되어 있었다. 3월과 4월엔 <br>이 세 번 들어가 있었고,10월~12월까진 숫자가 두 자리수라 버튼이 커지는 현상... -_- 

1. <br>은 오류가 너무 많고 매번 입력해줘야 하니 더이상 안되겠다. 다른 방법으로 고치자.

2. 버튼 크기를 통일하자.

당면한 과제입니다. 해결해 봅세다.

 

 

 

 <style>

       button.calendar {

       width: 60px; 버튼값을 아예 지정해주는 거지, 60px로

       }

 

       .mb10 { 이건 마진값(버튼과 버튼사이)을 지정해주기 위한 명령어

       margin-bottom: 8px; 버튼과 버튼사이에 8px로 띄운다는 뜻이 된다.

       }

      </style>

  </head>

  <body>

   <h1>Hello, world!</h1> 보면 head안에 들어가 있다. body를 감싸고 있는 코드라는 얘기지. 이제 body 안에 써진 <br>태그는 모두 지워도 된다. mb10이 <br>이 훨씬 이쁘고 고급지다.

 

 

자! 이제 실행을 시켜보면?

 

 

담배2

 

버튼값이 너무 과했거나 div박스가 너무 작았나보네.. 그럼 div박스를 크게 키워야재

 

 <body>

   <h1>Hello, world!</h1>

   <div class="container">

   <div class="row">

   <div class="col-md-3"> 요기서 원래 2로 되어있던 숫자를 3으로 바꿔줌

   <div class="well well-lg">

   <div>

 

 

이제 박스는 해결이 되었고,

밑에 IDEA BLOCK박스를 만들어야 할 차례

 

 <div class="btn-group pull-right">

   <button type="button" class="btn btn-primary calendar dropdown-toggle" data-toggle="dropdown">

   12월 <span class="caret"></span>

   </button>

   <ul class="dropdown-menu" role="menu">

   <li><a href="#">1일<span  class="glyphicon glyphicon-ok"></span></a></li>

   <li><a href="#">2일</a></li>

   <li><a href="#">3일</a></li>

   <li><a href="#">4일</a></li>

   </ul>

   </div>

   </div>  

   </div>

   <div>

   <button type="button" class="btn btn-primary" style="width:100%; margin: 10px 0px">

   IDEA BLOCK 버튼 생성

   </button>

   </div>

 

 

 

버튼이 12월 버튼 밑에 크고 길쭉한 모양으로 들어갈 것이므로 12월 밑에 만들어 준다. 크기랑 마진값 주고 나면 생성 완료, 내 친김에 밑에 입력창까지 만들어 볼까. 아우 오늘 아주 진도 쭉쭉나가는 구만.

 

 <div>

   <button type="button" class="btn btn-primary" style="width:100%; margin: 10px 0px">

   IDEA BLOCK

   </button>

   </div>

   <div style="border: 1px dotted #CCC; height: 300px;"> 1px로 땡땡이 무늬, cccccc라는 색으로 네모칸을 만듬

   </div>

 

 

이제 다 됐다!

얼른 실행 실행

 

 

캬캬캬캬캬캬캬캬캬

이제 머리도 아프고 그만 집에 가고 싶지만 조금만 힘을 더 내어, 칼날에 베듯 아프게 생긴 저 모서리를 동그랗게 굴려보자. 

 

 <div>

   <button type="button" class="btn btn-primary" style="width:100%; margin: 10px 0px">

   IDEA BLOCK

   </button>

   </div>

   <div style="border: 1px dotted #CCC; height: 300px; border-radius: 2em; "> radius값을 2로 주면 2만큼 둥굴려진다.

 

 

 

완성!

 

즐거워 

 

뿌듯 뿌듯 개뿌듯

 

그러나 이로써 코딩의 줄은 200줄이 되었고, 월 별에 날짜까지 입력한다고 가정하면 600줄을 넘어가는 사태가 발생하게 되었....

안들려

그렇게 되면 기능은 붙이기도 전에 박스만들어 놓고 끝내자는 얘기인데..

이젠 때가 되었다. 자바스크립트 출동하여 코드를 줄여야 한다.

 

듣자하니 자바스크립트 들어가면 영혼이 탈탈탈 털리는 경지에 오를 수 있다는데 ㅜㅜ

아아 그동안 참 즐거웠다. 복붙의 향연!

 

 

 

 

덧, J언니가 강의해준 패딩과 마진의 차이점, 클라쓰의 정의

요약하면, 

패딩은 속성이며, 컨텐츠를 감싸고 있는 보더의 내부값

마진은 요소와 요소사이의 간격

클라쓰는 속성의 집합으로 이해하고 있겠다.

 

아 내가 지금 무슨말 하는 거니 -_-

 

하여간 명확하진 않지만, 감으로는 알 것만 같은 느낌적인 느낌

 

 

 

 

 

 

Posted by 오드리 byodri

댓글을 달아 주세요