컴퓨터 언어에 대한 배경 지식이 거의 없었기에 본격적인 코딩 수업에 들어가기 전, 핸드북으로 기본적인 개념에 대한 학습을 진행하였다.

객체란 무엇인지, 그리고 그 기본적인 활용 방법, 연산자, 조건문, 반복문, 배열, etc.

생소한 것들이지만 배우는 만큼 컴퓨터의 작동 방식을 알아가며 세상을 보는 새로운 눈이 열리고 있다.

핸드북 파트에서는 앞으로의 강의를 통해 이러한 것들을 숙달하며 개발자로서 성장해 나갈 것을 기대되었다.

1주차 강의에서는 HTML을 작성하고 그것이 웹페이지에 바로 출력 되어 나오는 신선한 경험을 할 수 있었다.

먼저 웹 브라우저의 작동 원리에 대해 이해하고 조작 방법에 대해 공부했으며,

더 나아가 부트스트랩을 이용하여 간단한 추억 앨범 만들기를 진행했다.

내용물의 사진, 폰트, 버튼, 개수, 크기, 위치 등 자유롭게 바꾸며 효과적으로 꾸미는 방법을 배웠다.

아직은 겉모양 뿐이지만 앞으로의 수업으로 알차게 채워 넣을 동작들이 기대된다.

아래는 내가 만든 코드를 크롬으로 연결 시켜 띄운 결과물과 필기를 첨부한다.

 1주차

margin: 바깥쪽 여백

padding: 안쪽 여백

alt+shift+F : 줄맞춤

뭘 만들 때는 div로 묶어서, 처음엔 범위가 안보이니 background를 green으로 놓고 

부트스트랩 CDN (title 밑에 넣어주면 됨)

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

부트스트랩 사이트:

https://getbootstrap.com/docs/5.3/components/buttons/

이미지 넣기 3줄

      background-image: url('~~~~');

      background-position: center;

      background-size: cover;

/* 안에 있는 내용물을 가운데로 오게 하는것: 아래 4줄*/

/*-> column은 세로정렬. 가로정렬은 column을 row(가로) 로 바꿔서 쓰면 됨*/

      display: flex;

      flex-direction: column;

      align-items: center;

      justify-content: center;

버튼에 class 달지 않고 바로 바꾸는법: 꺽쇠(>)로 mytitle 안에 있는 버튼을 가리킴

    .mytitle>button { }