Bootstrap에서 sign-in 폼을 가져와서
html, css 파일을 만들기를 해보자.
https://getbootstrap.com/docs/5.0/examples/
1 ]
1. Bootstrap --> examples에서 Sign-in 폼을 선택한다.
2 ]
2. 빈 공간에 오른쪽 버튼 클릭하고 view page source를 누른다.
페이지 소스를 복사해서 가져온다.
3 ]
3. 코드에디터에 옮긴 html 내용을 웹브라우저에서 열어본다.
index.html 파일 오른쪽 버튼 누르면
Open in Default Browser를 볼 수있다.
하지만 부트스트랩에서 보이던 모습과는 차이가 많이 난다.
아무런 부트스트랩 효과가 안들어가 있다.
부트스트랩 CDN 연결이 되어 있지 않기 때문이다.
4 ]
4. 부트스트랩 cdn 연결하기
부트스트랩 cdn을 찾는다.
https://getbootstrap.com/docs/4.4/getting-started/introduction/
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<-- html 페이지에 붙여넣기
5 ]
5. 기존에 있던 링크를 지우고 cdn으로 교체한다.
이렇게 모양이 변경되었지만 제공하는 디자인과는 차이가 있다.
부트스트랩에서 제공하는 custom css를 아직 실행하지 않아서이다.
6 ]
6. custom css 실행시키기
vs 코드에서가 아니라
부트스트랩의 login view-source 페이지를 다시 가서
<head> 안 <!-- custom styles for this template --> 코멘트가 있다.
거기 링크에 있는 href에 있는 signin.css 를 클릭한다.
그러면 css 내용이 나온다.
6-2 vs코드에서 styles.css 파일을 하나 만들고
이 custom css 내용을 코드에디터 styles.css에 붙여넣기한다.
6-3 style.css 파일
6-4 그리고서 html 파일에서 signin.css를 styles.css로 바꿔 링크를 걸어준다.
7 ]
7. html 에 있는 이미지 바꾸기
원하는 이미지를 같은 폴더에 담아서 연결해준다.
나무 이미지로 바꿔보았다.
[ 8 ]
8. html body 내용 정리하기
input 3개, 버튼 1개가 남게 정리했다.
결과 보기
[ 9 ]
9. css 수정하기
박스를 자세히 보면 가운데 박스도 라운트 처리 되어있는데 이것을 그냥 박스로 고쳐준다.
html에서 타겟을 지워버려서 아래의 css는 적용이 안된다.
html class에
top, middle, bottom 추가 한다.
css에서 존재하지 않은 타겟을 지우고
top, bottom으로 타겟을 변경해 준다.
중간에 middle 도 넣는다.
border-radius: 0; 을 줘서 곡선을 없앤다.
외각 곡선이 없어졌다. 하지만 아랫 줄이 윗줄보다 살짝 두껍다.
.middle 에서
margin-bottom: -1px;
두께를 줄여준다.
해결 못한 문제
입력하려고 클릭을하면 안에 있던 placeholder
글자가 작아져서 위로 올라가는데
이 것은 되지가 않는다.
'Node.js > APIs' 카테고리의 다른 글
| 뉴스레터앱1] 기본 세팅하기 (0) | 2021.10.10 |
|---|---|
| 날씨 API 불러와서 사이트 만들기 간단 총정리 (0) | 2021.10.09 |
| 지역에 따라 날씨 검색되게 하기 | html 만들기 (0) | 2021.10.08 |
| 날씨 API에서 날씨에 따라 다른 아이콘 보이게 하기 (0) | 2021.10.08 |
| 가져온 API 데이터를 유저 브라우저에서 보게하려면? | render하는 법 | express 사용 (0) | 2021.10.08 |
댓글