아주 늦게.. 쓰는 2주차 후기 저번주차에 이은 자기소개서 발표 시간이였다.
시간을 19시 30분으로 착각하여 지각을했다..
이번 세션은 조별로 진행하였는데, 우리 조는 본인을 제외하고 모두 컴퓨터 공학과 학생이였다..
지금은 모두 시작한지 얼마 지나지 않은 아기사자들이라, 모두 html과 css를 이용하여 자기소개를 작성하고, 자랑하는 시간을 가졌다.
가독성, 디자인 모두 뛰어난 사람들이 많았고, HTML과 CSS의 기본 지식이 있는 사람들이 대부분인듯 했다.
내 자기소개서와 비교를 하니 참 비교가 많이 되었다. 디자인 지식도 없는 나에겐 벽도 느껴질정도.
남들도 처음엔 나와 비슷했을거다. 하며 더욱 동기부여가 되었고, 따라잡으리라 다짐했다.
VS CODE로 자기소개 페이지를 작성하였는데, 우리조 조장님께서 기본적인 세팅을 알려주셨다.
탐색기 연결, 언어선택 후 !tap 등 개발하기 좋은 환경을 만들어 주었다.
또한, Go Live 라는 확장프로그램으로, 내가 만든 HTML 코드를 매번 F5키를 눌러 작동시키지 않고 저장만 하여도
변경한 코드를 적용시켜주는 좋은 확장프로그램도 알려주셨다.
아직 사용하지 않는 개발자 지망생들은 필히 다운로드 받는걸 추천한다.
또 '부트 스트랩' 이라는 웹사이트를 통해 웹페이지를 더욱 손쉽고 다양한 기능들을 활용할수 있는 방법을 알려주셨다.
아직 많은 기능을 활용하기엔 지식이 부족하지만, 여러가지 HTML 과 CSS 기본 예제들이 있어 카피하기 정말 좋다.
하지만 나는 단순 카피하여 적용만 하기 보다는, 해당 코드들이 어떤식으로 쓰여 구성되는지 확인하여 공부가 되었다.
후에 백엔드 과정이나, 단순한 웹페이지를 제작할때엔 굉장히 시간 단축도 되어 유용할것 같다.
먼저 본인은 부트스트랩을 이렇게 사용하였다.
https://getbootstrap.kr/docs/5.1/getting-started/introduction/
시작하기
세계에서 가장 인기있는 프레임워크인 Bootstrap으로 반응형, 모바일 우선 사이트를 jsDelivr와 스타터 페이지 템플릿을 통해 시작해보세요.
getbootstrap.kr
이 웹사이트에 들어간 뒤에 내 HTML 문서에 CSS 태그를 적용해야한다.
VS CODE에서 !tap 하여 기본 구조를 생성한 뒤,
HTML 과 CSS를 연결하는 코드를 작성하고 부트 스트랩의 javascript를 사용하기 위한 코드를 작성해야 한다.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">이 코드를 복사하여 HTML의 <head> 태그 사이에 넣어야 한다. 또한,
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>이 코드를 </body> 전에 이 코드를 작성해야한다.
이러면 부트스트랩을 시작할수 있게 된다.
이후 부트스트랩의 여러가지 기능들을 카피하며 코드들을 이해하고, 내 것으로 만들어 나가야겠다.
후에 추가로 연결한 css와 javascript를 수정하는 법을 안뒤, 만들고 싶은 웹페이지에 쉽게 적용해 나갈 예정이다.
'멋쟁이 사자처럼' 카테고리의 다른 글
| 멋쟁이 사자처럼 10기 해커톤 후기 (0) | 2022.09.11 |
|---|---|
| 멋쟁이 사자처럼 10기 3,4주차 (0) | 2022.05.24 |
| 멋쟁이 사자처럼 10기 1주차 (0) | 2022.04.04 |