'외계어배우기'에 해당되는 글 4건

  1. 2014.11.02 [자바스크립트] Hello, world! 출력하고 부트스트랩 익히기
집 밖/자기개발2014. 11. 2. 03:53

이제 코딩을 하기로 했다. 무서웠지만 그냥 되는 대로 해보자 하는 마음이었다.

뭐부터 해야할지 몰라서 우선은 스토리보드에 있는 디자인을 부트스트랩으로 그려보기로 했다.

부트스트랩 가입하고, 코드에 링크 줄 추가시켜주고 시작.

(이 간단한 거 하느냐 몇 시간을 소비했다 ㅜㅜ)

 

 <link href="css/bootstrap.min.css" rel="stylesheet">

 

 

그리고는 긴장하며 두시간 그린 결과물은 이것!

 

두둥!





이거 그리겠다고 들어간 코드가 100줄이 넘는다.@_@

그 100줄도 온전히 내 힘으로 짠 건 아니다만 뿌듯하긴 겁나 뿌듯하다.ㅋㅋㅋㅋ

일단 Hello, world!출력해놓은 게 어디냠 ㅋㅋㅋㅋㅋ

 

코드 좀 살펴볼까?

 

 

 <body>

    <h1>Hello, world!</h1> ​이렇게 hello world출력해서 확인하고

<div class="container"> container는 사각형의 테두리에 붙지않게 하는 명령어, 이 놈 때문에 사각형 안에 사각형이 이쁘게 자리잡는 거다.

<div class="row"> div로 사각형의 크기 잡아주고(부트스트랩 안에 다 있다)

  <div class="col-md-4">

  <div class="well well-lg">

  <div class="btn-group">

  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 그 안에 들어갈 버튼을 만들어 주고

    1월 <span class="caret"></span> 버튼 가운데에 1월이라고 써준다.

    </button> 

  <ul class="dropdown-menu" role="menu"> 1월을 클릭하면 그 안에 메뉴가 드롭다운되게 보여주는 명령어

    <li><a href="#">1일<span  class="glyphicon glyphicon-ok"></span></a></li> 1일 이라고 보여주게 됨

    <li><a href="#">2일</a></li> 2일 이라고 보여주는, 이하 중복

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

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

  </ul>

  </div> 명령어 닫아주고 실행하면 완성

 

 그 다음엔 <div class="btn-group"> 이 부분부터 </div>까지 긁어서 복사한 다음 1월을 2월로 바꿔주면 1월 버튼 옆에 2월의 버튼이 같은 기능 같은 디자인으로 생성되었다. ㅋㅋㅋ

아싸 ㅋㅋㅋㅋㅋㅋ

 

 

다시 또 긁어서 복사해서 3월로 바꿔주면 이렇게 된다. ㅋㅋㅋㅋ아싸 ㅋㅋㅋㅋㅋㅋ

 

이 작업은 매우 재미가있고  매우 뿌듯하므로 그 옆에 4월을 생성하고 싶지만, 스토리보드를 보면 줄을 바꾸게 되어 있다. ㅜㅡ 줄을 바꿨다. 아무도 추천하지 않았지만 당장 쉬운 방법으로 한 방에 줄을 바꿨다.


 <br> 줄바꿈에 해당하는 명령어 (워드에서 엔터)

 

그리곤 다시 매우 재미있고 매우 뿌듯한 복붙의 향연으로 4,5,6월을 만들었습니다. ㅋㅋㅋㅋ



돌이켜 보면 이 간단한 작업을 두번의 스터디를 거쳐 만들게 되었다.

그리고 저 조악한 버튼들의 초기 이미지는 이러하다.



뭘 어떻게 짜서 이렇게 나왔는지도 모르겠다.



다만 추측하기에, 복붙을 잘못했겠지.-_-

명령어는 아는 게 없으니, 어차피 실수할 수도 없으니까.

 

 

 

이제 버튼을 감싸고 있는 사각형의 크기를 조정할 차례다.

그런데 코드가 너무 길고 스스로 찾아볼 수가 없어서 걱정이 태산이구나.

담배2

 

 

 



Posted by 오드리 byodri

댓글을 달아 주세요