솧디의 취.꾸 (취미 꾸미기)

솧디는 구독/공감/좋아요 /댓글/ 소통 환영합니다! ♥는 무적권 누르고 읽어주세요^^!

솧디의 취.꾸! 인스타&유튜브  ▼자세히 보기 클릭 자세히보기

개발_개발일지

프론트엔드 코딩 1주차 HTML 화면구성하기(부트스트랩 활용)

솧디 2022. 8. 1. 20:06
반응형

 

안뇽 솧디입니다:)

현재 스파르타코딩클럽에서 코딩강의를 듣고있어요!ㅎㅎ

첫 입문자도 보고 금방따라할수있드아!ㅋㅋ

 

그래서 코딩1주차 개발일지를 써보기로해쑴당!

 

1) HTML

2)CSS

웹 화면구성의 기본인 html, css를 간단히 실습해보았습니다!

 

 

HTML로 div안에 이름지정해서 페이지 나눠주고 뼈대를 만들어줍니다!

배우기 전엔 저화면이 외계어 같았는데 이젠..보인다리..ㅋㅋㅋ

 

화면안에 박스만드는거라고 보면되는데

너비, 간격, 색, 라인 등 값으로 지정해서 모양을 만들어주는 것이라 보면됨!ㅎㅎ

 

하지만 일일히 코드는 다 칠 수 없으니 부트스트랩을 이용해 코드복사복사!

https://getbootstrap.com/

 

Bootstrap

The most popular HTML, CSS, and JS library in the world.

getbootstrap.com

 

첫번째로 만든 페이지!

생각보다...재밌다ㅋㅋ 코드보면서 내가 구상한대로 화면에 구현되니 

잼남ㅋㅋㅋㅋ

 

 

하지만 ... 고비는 왔으니.. 바로 css

이건 html로 열심히 div묶어서 박스만들면 각각의 박스를 색이나 간격 이런것을 조정하는 꾸미기인데

오른쪽으로 버튼 띄우게하고 이런것도 일일히 계산하며 해줘야함ㅋㅋㅋ

그래도 열심히 css에 공들일수록 페이지는 이뻐짐!ㅋㅋ

 

이리...간단한 페이지도 조정하면서 간격보고 하느라

한시간남짓걸림...ㅋㅋㅋㅋㅋ

덕질반영으루 랜더스페이지로 만들었긔ㅋㅋㅋㅋㅋ

코딩1주차는 일단 이렇게 지나간..드아..ㅋㅋㅋ

 

그럼이만 총총

 

728x90
반응형