5. 부트스트랩 이용해서 포스팅박스 추가하기

https://getbootstrap.com/docs/4.0/components/forms/

Forms

 

위의 페이지에 들어가서 forms 코드를 copy

<div class="wrap">으로 묶여있는 곳에 붙여넣어 주고, </form>을 </div>로 바꾼다.

 

그러면 아래와 같이 나오게 되는데,

이메일 박스처럼 보이는 부분을 이제 포스팅 박스 형태로 바꿔주면 된다.

 

 

https://developer.mozilla.org/ko/docs/Web/CSS/border

border - CSS: Cascading Style Sheets | MDN

 

css를 이용해서 꾸미고 싶은 부분 중에, 모르는 것이 있다면 위의 사이트를 활용하면 거의 다 나온다.

 

border를 이용해서 포스팅 박스의 테두리를 만들어주고, border-radius를 통해서 테두리의 둥근 부분을 설정해준다.

 

 

포스팅 박스 만드는 과정

 

1. css를 적용시키기 위해서 class="posting-box"로 이름 설정

2. 붙여넣은 부트스트랩의 글자들(로그인 관련 내용들)을 포스팅 박스 관련 내용으로 바꿔준다. 

3. 포스팅박스 틀을 css로 꾸민다.

 

 

4. 부트스트랩에서 example textarea를 copy해온다.

5. password에 해당하는 <div></div> 위치에 덮어써 붙여넣어준다.

 

포스팅 박스 결과

 

     .posting-box{
        width:500px;
        margin:0px auto 20px auto; /*위 왼쪽 아래 오른쪽*/
        border:solid;
        border-radius: 20px;
        padding:50px;
    }
    ...
 
 
 <div class="posting-box">
  <div class="form-group">
    <label for="exampleInputEmail1">URL</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="">
    <small id="emailHelp" class="form-text text-muted"></small>
</div>
<div class="form-group">
    <label for="exampleFormControlTextarea1">Comment</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
<button type="submit" class="btn btn-primary">Submit</button>

</div>