코딩 / / 2022. 6. 18. 19:38

[스파르타 코딩클럽] - 웹개발 종합반 1주차

반응형

결과물

배운 내용

1주차 강의는 html, css, javascript 총 3가지를 배웠다. 전부 한번씩 들어봤지만 막상 설명하려고 하면 생소한 개념에 대해 확실히 정의할 수 있게 되었다. 결과물의 홈페이지를 보고 각각의 개념을 설명하자면 다음과 같다.

 

  • html : 닉네임과 응원댓글을 적을수 있는 칸을 만들고 응원남기기 버튼을 만들자! (내용물)
  • css : 닉네임과 응원댓글칸이 들어가는 상자의 크기는 500px, 버튼은 왼쪽에 놓자! (디자인)
  • javascript : 응원남기기를 누르면 코멘트가 추가되게 기능을 넣자! (반응)
//코딩에서 중요한건 변수,자료형, 함수, 조건문, 반복문 5가지이다
//반복문은 어려우니까 당분간 예제만 외울것
//list하고 같이 노는게 반복문이다

나중에 javascript 맛보기를 실행할 때는 코딩의 기본 개념 5가지를 말해주고 기본 예제를 몇가지 가르켜주셨다.

 

코팅 팁

아무래도 코딩이라는 개념조차 처음 접하는 사람들을 위하는 강의이다보니 코딩을 하는 과정에 있어서 필요한 팁들이 많았다. 나 역시도 혼자서 파이썬을 공부하면서 느꼈지만 코딩을 처음 공부하는 사람들은 무턱대고 각각의 코드들의 기능을 외우려는 경향이 있는것 같다. 강의자분께서는 "코딩은 외우는 것이 아니라 복사 붙여넣기 하는 것"이라며 실제로 앞서 한번 사용했거나, 예시로 적힌 코드들을 그대로 복사한 뒤 안쪽의 이미지나 내용물을 바꿔가며 강의를 진행하셨다. 

 

실제로 "왜 이 코드는 세미콜론(;)을 쓰고 저 코드는 앞에 마침표(.)를 붙이지??" 같은 쓸데없는 질문을 배제하니 코드를 배우는 시간이 매우 빠르게 진행되었고 결과물도 그럴듯하게 잘 나왔다. 

 

 

막혔던 부분

최근 청춘페스티벌에서 윤하의 노래를 감명깊게 들어 좋아하는 가수의 팬명록을 만드는 과제에서 윤하의 팬명록을 만들어보았다. 최근 나온 6집앨범의 커버 중에서 윤하의 얼굴 부분이 사이트의 타이틀에 표시되게 하고 싶었으나, 기존의 코딩을 사용하면 애매하게 눈이 짤리는 현상이 발생했다.

3월에 발매된 따끈따끈한 6집 앨범

.mytitle {
    background-color: green;
    width: 100%;
    height: 250px;

    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
    background-position: center;
    background-size: cover;

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

    color: white;
}

기존의 코드를 복사 붙여넣기 한 경우 -> 윤하의 얼굴부분이 일부 잘리게 된다.

기존의 코드 중에서 background-position 혹은 background-size를 바꾼다면 문제를 해결할 수 있을까 싶어 다양한 조합을 시도해보게된다. 

 

background-position: top; 으로 시도했을 경우, 위로 정렬이 되는 것을 확인

 

 

 

중간에서 조금만 더 사진이 위로가게 할 수없을까 고민하던 중, 초록색 글씨에 마우스를 갖다대니 해당 코드의 설명이 쭉~ 뜬다.

background-position의 사용방법을 매우 친절하게 알려준다

 

background-position - CSS: Cascading Style Sheets | MDN

The background-position CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin.

developer.mozilla.org

설명의 링크를 타고 들어가면 예시와 함께 더욱 친절하게 알려준다.

알아본 결과 background-position의 경우 X축, Y축을 두가지를 지정할 수 있으며 처음은 보통 처음 쓰는 값은 X축, 나중쓰는 값은 Y축으로 페센트범위로도 이동이 가능하다고 한다. 

 

 

 

고민해결

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

    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://static-musique.qub.ca/images/covers/vb/1z/zvrhku05v1zvb_max.jpg");
    background-position: center 55%;
    background-size: cover;

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

    color: white;
}

그렇게 해서 완성한 코드. 55%를 하니 딱 맞았다.

 

 

마치며

월요일에 다 끝내놓고 추가로 공부하려고 의욕이 넘쳤지만, 의외로 바쁜 한주를 보내며 수업은 토요일 저녁이 되어서야 끝마쳤다. 생각보다 쉽게쉽게 넘어가는 수업에 놀랐고 짧지만 굉장히 빠른 진도와 알찬 구성이 만족스러운 강의였다. 다음주의 강의도 기대가 된다.

 

 

반응형
  • 네이버 블로그 공유
  • 네이버 밴드 공유
  • 페이스북 공유
  • 카카오스토리 공유