[Log]내일배움캠프 웹프로그래밍 1주차 개발일지

1주차 개발일지

내일 배움 캠프 웹 프로그래밍 1주 차를 수강하면서 공부한 것을 정리하여 보겠습니다.

 

일단 1주 차에는 HTML, CSS, Javascript에 대한 것에 대한 것을 간단하게 맛볼 수 있게 해 주면서 마지막 과제에서 1주 차의 내용을 한 번씩 다시 생각해 볼 수 있게 구성되어있었습니다.

 

실습을 하면서 가장 많이 사용한 단축키를 정리하여보면

1. ctrl + alt + L : 자동정렬

2. ctrl + a : 모두 선택

3. ctrl + / : 주석 설정

이 있습니다.

 

강의를 들으면서 태그 안에 들어가야 하는 내용이 무엇인지를 생각하면서 학습하는 것이 중요하다고 생각을 하였는데 'HTML은 뼈대 CSS는 꾸미기'라는 말과 함께 head태그와 body태그에 들어가는 것을 알고 있는 것이 중요하겠습니다.

 

head안에는 페이지의 속성 정보를 즉 css와 관련된 정보가 head안에 들어가 있어야 하고 body에는 뼈대를 이룰 수 있는 여러 텍스트와 태그가 들어갑니다.

 

이것에 대해서 예를 들어가며 정리를 하자면 첫 번째 Quiz였던 간단한 로그인 페이지 만들어보기를 살펴보면서 정리할 수 있겠습니다. 

해당 예제를 실습하기 위하여 폰트 변경 웹사이트를 이용하였는데

구글 웹 폰트 이용하는 방법은 밑의 링크에 정리하였습니다.

웹 페이지 폰트 변경하기 - 구글 웹 폰트

웹 페이지 폰트 변경하기 - 구글 웹 폰트

 

밑의 코드는 위에 언급하였던 로그인 페이지 만들어보기 코드입니다.

7행의 " <link rel="stylesheet" type="text/css" href="mystyle.css"> " 로 CSS파일을 따로 만들어서 추가시켜놓은 모습이며 CSS 파일을 제외한 결과 문은 코드 밑의 사진과 같습니다.

로그인페이지만들어보기코드

위에 설명하였던 것과 같이 body의 html 뼈대만 남은 상태이며 head태그와 같이 이미 정해져 있는 스타일은 유지가 되는 모습을 볼 수 있습니다.

css파일적용전

위의 파일에 css파일을 적용하게 되면 밑의 사진과 같은 모습을 구현할 수 있었습니다.

로그인페이지css파일적용

처음 코드에서 head태그 밑 6행에 폰트를 사용하기 위한 라이브러리를 불러온 것을 확인할 수 있으며 이를 *{} 안에 font-family 코드를 추가하여 전역 적용시킨 것을 볼 수 있습니다.

 

그리고 image를 추가하는 방법에서 image 태그를 이용하는 방법도 있는 것으로 알고 있지만 여기서는 h1과 h5태그를 감싸고 있는 div태그에 스타일을 적용하여서 그림을 추가하였습니다.

 

그리고 스타일 안에서 그림을 적용할 때는 기본적으로 밑의 코드를 공식처럼 사용합니다.

background-image: url("image_URL");
background-size: cover;
background-position: center;

 

그리고 사진 모서리를 둥글게 하기 위하여 border-radius: 10px를 적용하였습니다.

 

* 두 가지 margin과 padding의 개념을 보자면

margin : 바깥 여백

padding : 안쪽 여백 

margin_padding개념

해당 사항까지 첫 번째 Quiz에 대한 내용이었습니다.

 

두 번째 Quiz는 "스파르타 피디아"의 틀을 가지고 포스팅 박스를 만드는 것을 해보았습니다. 

이것을 하기 전에 "스파르타 피디아"와 같이 화면을 구성하기 위하여서는 부트 스트랩을 이용할 수 있어야 합니다.

부트 스트랩의 이용방법은 밑에 정리하였습니다.

[Bootstrap] 부트 스트랩 사용방법

[Bootstrap] 부트 스트랩 사용방법

이번 예제는 P 태그에 텍스트로 작성되는 형식이어서 밑의 사진과 같이 다른 사진의 내용으로 추가적으로 정리하겠습니다.

구현모습

부트 스트랩을 이용하여서 카드를 가져오게 된다면 기본적인 모습을 볼 수 있습니다.

부트 스트랩의 기본 틀과 margin, width, height 등을 이용하면 외형은 구성할 수 있습니다.

텍스트 부분을 변경하게 되면 기본적인 문단 태그에 텍스트로 구성된 카드를 볼 수 있는데 위의 사진과 같이 하이퍼링크도 있고 글자색도 다른 형식으로 변경하기 위하여 <a> 앵커 태그와 class의 옆에 class를 하나 더 추가시키는 것을 이용하였습니다.

&amp;lt;a&amp;gt;를이용하여하이퍼링크연결

<p> 태그 대신 <a> 태그를 사용하며 href에 원하는 URL 주소를 입력하면 됩니다.

파란색글자를위하여클래스추가

class를 선언할 때 옆으로 여러 개의 클래스를 추가할 수 있습니다. class="클래스 1 클래스 2 클래스 3" 이때 클래스와 클래스 사이는 스페이스바로 구분합니다.

위에서는 commentcol라는 클래스를 추가하여서 글자의 색깔과 굵기를 변화시켰습니다.

commentcol클래스

마지막으로는 javascript를 맛볼 수 있는 과정이 남아있는데 간단하게 말하여서 함수를 만들어서 그것을 실행할 수 있게 하는 것이 javascript입니다. 

 

사용을 위하여서는 말 그대로 <script> 태그 안에 함수 function을 만들어서 사용하여야 합니다.

보통은 alert 함수를 만들어서 btn의 클릭에 연결하여 사용하는 테스트를 해보면 되며 함수와 alert의 구조는 보통 밑과 같습니다. 

함수생성

함수를 만들 때는 head태그 안에 작성하도록 하며 해당 함수의 이름은 function 옆의 hey()입니다.

버튼

이것을 버튼의 <a> 태그 안에 onclick을 이용하여 연결하여줍니다.

이렇게 되면 포스팅 박스를 클릭하였을 때 안녕이라는 alert이 뜨는 것을 확인할 수 있습니다.

1주 차에서 배운 것만으로는 btn이 지원해주는 onclick등과 같은 기능의 원리 그리고 function을 만들 때 alert이라는 것만을 입력하여도 저렇게 경고창에 안녕!!이라는 글이 뜨게 되는 원리에 대한 내용을 정확히는 모르겠지만 btn을 누를 때 onclick을 사용하며 javascript에서 alert이라는 것이 이미 정해져 있어서 사용할 수 있는 것이라는 것을 알 수 있습니다.

 

이렇게 대략적으로 화면 구성을 했다고 생각하고 포스팅 박스를 만드는 과정을 보도록 하겠습니다.

포스팅박스모습

Quiz에서 제시한 포스팅 박스의 모습은 위와 같습니다.

스파르타 피디아의 카드 모습을 보면서 필요한 내용을 생각해 봐야 합니다. 처음에 영화 이미지, 영화 제목, 영화 설명, 별점, 코멘트로 구성되어있는 것을 확인할 수 있습니다.

스파르타피디아카드

이곳에서 영화 이미지, 영화 제목, 영화 설명은 포스팅 박스 넣는 것이 아니고 해당 영화 정보를 받아올 수 있는 주소에서 가져오면 되며 별점과 코멘트를 직접 입력할 수 있게 구성하면 되겠습니다.

이렇게 생각하면 입력되어야 하는 입력값은 3개 url, 별점, 코멘트가 될 것입니다. 

하여 위의 포스팅 박스와 같은 모습으로 만들면 된다는 것을 알 수 있습니다.

 

CSS위주의 Quiz이기에 몇 가지 부분만 정리를 해보자면 

box-shadow: 0px 0px 3px 0px gray;

- 포스팅 박스의 옆에 흐릿하게 음영을 넣은 것에 대한 CSS 코드 

width: 95%;
max-width: 500px;

- 모바일 등의 환경에서 가로폭이 95%로 유지되게 하는 코드

 

이렇게 두 가지 정도가 있겠습니다.

여기까지 두 번째 Quiz 스파르타 피디아 포스팅 박스 완성하기였습니다.

 

*다음으로는 Javascript에 대한 내용을 훑어보겠습니다.

1. let : 변수를 선언합니다.

2. console.log(변수) : 괄호 안의 변수에 대한 값을 출력해줍니다.

3. a = b : a에 b를 대입

4. 사칙연산이 가능 

5. 리스트와 딕셔너리

- 리스트 : 순서를 지켜서 가지고 있는 형태  ex) b_list = [1,2, 'hey',3]

- 딕셔너리 :  키와 벨류 값의 묶음 ex) b_dict = {'name':'Bob', 'age':21

6. 조건문과 반복문

- if 조건문 : if, else if, 마지막은 else의 구성으로 사용하는 함수

- for 반복문 : 말 그대로 반복을 위한 함수

 

마지막으로는 팬명록을 만드는 과제를 한 것을 정리하겠습니다.

결과물부터 확인해보면 밑의 사진과 같이 만들어 보았습니다. 

완성모습

순서대로 정리해보자면

Step 1. 첫 번째 사진 부분은 첫 번째 Quiz에서 이미지를 추가했던 것과 같이 background-image에 사진을 추가하여 만들었습니다.

.mytitle {
    width: 100%;
    height: 250px;

    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://tartfroyo.com/wp-content/uploads/2016/10/10cmstalker.jpg');

    background-position-y: -90px;
    background-position-x: center;

    background-size: cover;

    color: white;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

Step 2. 기본적으로 부트스트랩을 사용하여야 하기 때문에 부트 스트랩 스타터 템플릿을 적용하여 라이브러리를 추가하여줍니다.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

Step 3. 사진 부분은 스파르타 피디아의 내용을 가져와줬습니다.

팬명록사진

<div class="mytitle">
    <h1>십센치(10cm) 팬명록</h1>
</div>

<body> 태그의 내용은 <div> 안에 <h1> 한 개로 이루어진 모습이지만 사진이 들어가면서 뭔가 채워진 느낌이 납니다.

같이 다니는 background-image와 backgorund-positon, background-size를 잊지 않도록 합니다.

 

Step 4. 스파르타 피디아의 포스팅 박스 코드에서 일부분을 삭제하여 구성하였습니다.

포스팅박스와비슷한구조

Step 5. 간단한 텍스트와 카드 quote 만을 가지고 구성하였습니다.

- 해당 내용은 부트스트랩의 내용을 그대로 가져와서 사용하였습니다.

<div class="card">
    <div class="card-body">
        <blockquote class="blockquote mb-0">
            <p>새로운 앨범 너무 멋져요~!</p>
            <footer class="blockquote-footer"><cite title="Source Title">호빵맨</cite></footer>
        </blockquote>
    </div>
</div>

 

개인 학습을 정리하기 위한 포스팅입니다. 

문제점이나 문의점은 댓글로 부탁드립니다.