내일배움캠프를 시작하고 첫 주말을 맞이했다. 내 나름 공부도 해야했던 시간이였고 어느정도 공부를 하다가 일주일에 누적된 피로도 해소하는 시간이였다고 생각한다. 하루하루 나눠서 쓰고싶었지만, 토~일요일 동안 컴퓨터를 사용할 여건이 없었고, 주말이 지나서 작성을 하게 되었는데 뭔가 몰아서 일기를 적는 느낌이였지만, 기록을 한다는 것에 의의를 두고싶었고, 그래서 지금에서 작성하게 되었다.

 토요일은 하루의 대부분을 휴식과 취미생활로 보냈는데, 나는 웹소설을 읽는 것을 좋아하기 때문에, 일주일 동안 몰아서 웹소설을 꽤나 많이 읽었다. 그런데 이전에 웹소설을 읽으면서 별 생각을 하지 않고 읽었었는데, 게임이 아닌 다른분야의 프로그래밍 공부를 하다보니, 내가 사용하는 어플리케이션은 어떤 구조로 만들어 졌을까? 하는 생각도 들었다. 내 생활에 프로그래밍이 차지하는 부분이 늘었다고 생각되었다.

 그리고 일요일에는 내 고향 친구들과 함께 모여 롤드컵을 보았다. 이 날의 경기는 많은걸 느낄 수 있었던 경기였던거 같다. 나는 LOL이라는 게임을 꽤나 오래했었고, 지금도 일주일에 2~3판정도 즐길정도의 게임이다. 내 인생의 1/3을 차지하는 기간동안 즐겼던 게임이니깐, 내 안에서 꽤나 큰 부분을 차지하는 게임이라고 생각한다. 그리고, 친구의 영향으로 내 나름대로 나는 DRX의 골수 팬까지 아니지만, T1보다 더 긍정적인 의미로 좋아하는 팀이라고 생각한다. 당연히 이 날의 경기는 DRX의 팬으로써 응원했고, 결국 DRX가 우승을 하는것을 지켜보았다. 이번 롤드컵 시리즈에서 가장 감명깊에 봤던 인터뷰가 있다. 그것은 바로, "꺾이지 않는 마음"을 섬네일로 사용한 인터뷰 영상인데, 아무리 좌절하고 싶은 환경이고, 힘들다고 해도, 내가 포기하지않고 끝까지 밀어붙일 수 있다면, 좋은 결과를 얻을 수 있다는 내용의 인터뷰 인데, 이 문구가 참 내 상황과 그 마음에 와닿는다고 생각한다. 나도 개발자로 취직하기 위해 꺾이지 않는 마음을 가져야 겠다고 인터뷰 영상을 보면서 생각했고, 이 롤드컵의 결승 시리즈를 보면서 다시한번 마음속에 다지게 되었다.

 다음 주부터는 본격적으로 spring 공부를 시작하게 된다. 이제부터는 정말 본격적으로 하겠지? 공부하는 것이 아무리 힘들고 어려워도, "꺾이지 않는 마음"으로 결과를 얻을 수 있었으면 한다. 또한, 언젠가 힘들때 TIL을 되돌아보면서 다시한번 마음가짐을 고쳐 잡을 수 있었으면 한다.

 오늘은 드디어 미니 프로젝트 발표가 있는 날이다. 오전에 팀원들과 모여서 미니프로젝트를 마무리 하는 시간을 가졌고, 발표 자료도 마무리 했다. 그리고 오후 시간이 되었고, 오후 시간에 한 주간의 성과물을 발표 하는 시간을 가지게 되었다. 결과적으로는 다양한 방식의 코드들과, 다양한 사람들을 볼 수 있었고, 유익한 시간이 되었다고 생각한다.

 우리팀의 발표는 1부 중간쯤의 순서였는데, 다른 여러 사람들이 우리의 작업물을 보고 있다는 생각이 들어서 좀 긴장하게 되었다. 팀장님께서 발표를 마치고 각 팀원들 간 서로 개발중에 가장 의미있었던 코드를 이야기 하는 시간이 있었는데, zoom에서 마이크 이슈가 있어서 나는 아쉽게도 나의 코드에 대해서 이야기를 못하였다. 

 그래서 이자리를 이용해서 나에게 의미있는 코드를 이야기를 하려고 한다. 나는 이번에 처음으로 강의를 들으면서 웹 개발을 시작하였고, 나의 부족한 점을 메꾸기 위해서 주어진 예제를 따라하는 것이 전부였다고 생각한다. 내가 무엇을 배우든 간에 가장 중요한 것은 이해를 하지 못하고 지나가는 것을 탐탁치 않아한다. 그런 부분에서 이번에 내가 프로젝트에 제출 했던, 스크롤 애니메이션 구현 코드는 나의 웹 언어 이해를 한단계 향상 시켜주었던 코드였고, 그렇기 때문에 의미가 있던 코드라고 생각한다.

개인 프로젝트 스크롤 애니메이션 구현 내용
구현을 위해 이해했던 코드 부분(HTML)

 

 한 주간의 회고 

 - 이제부터 주간이 끝날 때마다 TIL에 한주간의 회고를 작성하려고 한다. 이 것은 내가 한주간 무엇을 느꼈고 배웠고, 내가 무엇을 더 노력할 수 있을지 고민할 공간이라고 생각해 주면 좋을거 같다.

 이번주는 여러가지로 정신이 없었던 한 주였던거 같다. 웹 개발을 처음 시작했고, 그것을 이해하고 프로젝트에 적용하기 위해 상당한 시간을 투자했던거 같고, 어느정도 성과가 있었다고 생각한다. 이번 주에 가장 중요하게 여겼던 것, 바로 팀 프로젝트에서 팀원들에게 피해를 주지 않기였는데 그것도 어느정도 이뤘다고 생각한다. 나름 팀원들에게 따라갈 수 있었던 것 같다. 한 주간 고생한 팀원들에게 감사한다.
 다음 프로젝트부터 새로운 팀원과 새로운 주제로 새로운 주간을 시작한다고 한다. 나는 과연 이것을 위해 무엇을 노력할 수 있을까 곰곰히 생각해봤는데, 내 대학 생활동안 항상 부족했다고 느꼈던 CS에 대해서 천천히 공부해 보려고 한다. 그래서 책도 구입했고, 일주일에 최소 6시간 이상 CS에 대해서 공부해야겠다고 생각했다. 내 블로그에 추가할 포스팅 그리고 개인적인 CS공부, 내일 배움캠프. 크게 3가지가 이제 내 일주일의 밀도를 꽉꽉 채워주지 않을까 예상해본다. 이제 다음주도 힘내서 한주를 보내야겠다.

지난시간에 만든 페이지

 먼저 페이지의 글꼴을 수정해보자. https://fonts.google.com/?subset=korean 에서 마음에 드는 글꼴을 정하고, 정했으면 그림과 같이 따라한다.

해당부분을 html에 삽입
CSS 파일에 복사

글꼴은 페이지 전체에 적용할 것이기 떄문에, 페이지 부분인 <body> 적용한다.

/*글꼴 적용*/
body{
    font-family: 'Jua', sans-serif;
}
/* 외곽선 적용 login-box */

    outline-width: 2px;
    outline-color: #030303;
    outline-style: solid;

외곽선과 글꼴이 추가된 모습

 그리고 로그인 페이지의 영역을 확실히 하기 위해서 외곽선을 추가해 주었다. 이제 전체적인 모양은 정해 졌으니 내부요소를 수정하자. 먼저 각각의 요소들을 영역의 가운데 정렬을 하자.

/* 로그인 페이지 요소 가운데 정렬 */
    display: flex;
    flex-direction: column;
    align-content: center;
    text-align: center;
    justify-content: center;
    align-items: center;

가운데 정렬이 된 모습니다.

 이것으로 로그인 페이지 작성을 완료 하였다.

'HTML,CSS,JavaScript' 카테고리의 다른 글

07. CSS, 배경 이미지 추가하기  (0) 2022.11.04
06. CSS, 로그인 페이지 만들기  (0) 2022.11.03
05. CSS, 사용하기  (0) 2022.11.03
04. CSS, 기초  (0) 2022.11.03
03. HTML, 본문  (0) 2022.11.03

 지난 시간에 했던 상태에 이어서, 이번엔 로그인 박스 뒤편에 이미지를 추가해 볼 것이다. 이미지를 가져오는 것은 웹 페이지를 꾸밀 때 많이 활용한다. 

 일단 마음에 드는 이미지를 구해왔다. 고양이사진 

 이 이미지를 넣으려면 다음과 같은 css 코드가 필요하다.

background-image: url("https://cdn.ksilbo.co.kr/news/photo/202106/902252_501806_3356.png");

이미지 사용

  이미지를 사용했지만, 정상적으로 이미지가 표현 되는거 같지 않다. 이미지의 크기에 비해 보이는 부분이 적어보이기 때문이다. 이 것을 해결하기 위해서는 다음과 같은 코드가 필요하다

background-size: cover;

아기고양이가 전부 보여진다

 

'HTML,CSS,JavaScript' 카테고리의 다른 글

08. CSS, 로그인 페이지 완성하기  (0) 2022.11.04
06. CSS, 로그인 페이지 만들기  (0) 2022.11.03
05. CSS, 사용하기  (0) 2022.11.03
04. CSS, 기초  (0) 2022.11.03
03. HTML, 본문  (0) 2022.11.03

 내배캠을 시작하고 1주차가 끝나간다. 벌써 4일차나 되었다.

 

 오전시간에는 팀 프로젝트 개인페이지 및 팀 전체 페이지를 마무리 했다. 먼저, 비어있던 페이지에 무엇을 채울까 고민해 봤지만, 생각나는게 너무 없어서 결국 비우기로 했다. 그렇게 하고 나니, 페이지의 색 때문에, 글씨가 너무 잘 눈에 안들어오는 것 같았다. 

배경색 때문에 눈에 잘 안들어오는 흰색의 글씨

 그렇게 해서 글자에 외곽선을 추가하기로 했다.

글자에 외곽선을 추가했을 뿐인데 눈에 확들어온다

 개인 페이지작업은 이정도로 하고 프로젝트를 마무리 하기로 했다. 

 오전 시간이 끝날 때 쯤에, 매니저님과 상담 시간이 있었다. 상담 시간동안 궁금한 것도 앞으로 내가 어떻게 해야할지 이야기를 할 수 있었다.

 오후 시간동안에는 이번 주 동안 내가 무엇을 했는지 복습하는 시간을 가졌다. 덤으로 블로그 포스팅도 같이 했다. 오랜만에 쓰는 포스팅이라 뭔가 어색한것도 많아보인다 내가 이해했던 것을 글로 풀어 쓰려고 하니깐 시간이 더 많이 걸리는거 같았다.  주말까지 이번주에 수강했던 강의들을 포스팅하는게 목표가 될 것 같다. 

 이제 내일은 이번주 내내 했던 팀 프로젝트 발표를 하는 날이다. 이번주 내내 했던 것들을 보여주는 것이 조금 떨리긴 하지만, 잘 준비해야겠다.

단순한 로그인 페이지

 

<!-- HTML -->
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>로그인페이지</title>
    <link rel="stylesheet" type="text/css" href="../static/mycss.css">
</head>

<body>
    <div class="login-box">
        <h1>로그인 페이지</h1>
        <p>ID: <input type="text" /></p>
        <p>PW: <input type="text" /></p>
        <button>로그인하기</button>
    </div>
</body>

</html>

 


 지금 만들어진 로그인 페이지는 너무나 단순하다. 일단 화면의 왼쪽 위에 위치하고 있기 때문에, 시각적으로 좋아 보이지 않는다. 먼저 로그인 페이지의 div 부분을 가운데로 옮긴다. 일단 가운데 정렬을 하기 위해서, 내가 사용하고 있는 로그인 창의 크기를 알기 위해서 background-color 키워드를 이용해서, 영역의 색을 칠해준다.

 

/* CSS */
.login-box {
    background-color: red;
}

background css를 적용시키면 다음과 같이 변한다.

이 상태를 보면, 현재 로그인 창의 가로길이는 화면 전체를 의미한다. 즉, 로그인 창의 크기를 조절할 필요가 있다. 

.login-box {
    background-color: red;

    width : 240px;
    height : 200px;
}

작아진 로그인 박스

 이제 로그인 박스를 가운데로 옮겨주자. 

균형있게 가운데로 움직였다.

  찾아보면 여러가지 방법으로 가운데 정렬하는 방법이 많은데, 여기서는 margin을 이용한 방법을 사용하였다.

    margin: auto;

 margin은 워드 프로세서의 들여쓰기 방식과 비슷하다고 생각한다. 현재 위치한 position 값에서 margin에 설정한 값만큼 이동 시켜주는 것이다. 여기서는 auto 키워드를 사용했는데, 이 auto 키워드는 가능한 많이를 표현해주는 것이고, margin은 기본적으로 4가지의 값을 가지는데, margin-left의 값과 margin-right의 값이 같아지는 지점이 가능한 많이 밀어주는 것이기 때문에, 중앙에 정렬이 되는 것이다.

 이제 단색의 배경을 제거해주면 중앙에 정렬된 로그인 페이지가 등장한다.

중앙에 정렬된 로그인 페이지

'HTML,CSS,JavaScript' 카테고리의 다른 글

08. CSS, 로그인 페이지 완성하기  (0) 2022.11.04
07. CSS, 배경 이미지 추가하기  (0) 2022.11.04
05. CSS, 사용하기  (0) 2022.11.03
04. CSS, 기초  (0) 2022.11.03
03. HTML, 본문  (0) 2022.11.03

먼저, 간단한 아래와 같은 HTML 파일을 준비했다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title> 나만의 로그인 페이지 </title>
</head>
<body>
    <h1> 로그인 페이지 </h1>
    <p>ID: <input type="text"/></p>
    <p>PW: <input type="text"/></p>
    <button> 로그인하기 </button>
</body>
</html>

위의 코드를 활용한 간단한 페이지

 이제부터 css를 활용해서 위 페이지를 꾸며 볼 것이다.

 

 가장먼저 프로젝트아래 templates 폴더와 static 폴더를 생성한뒤, html 파일은 templates 폴더에 넣어주고 css파일을 static 폴더 아래에 생성 해주었다.

간단한 폴더 구조

 이제부터 html 파일에, css 파일을 연결할 것이다. 아래의 코드를 활용하여 <title> </title> 태그 아래에 붙여 주었다.

<link rel="stylesheet" type="text/css" href = "../static/mycss.css">

 이제부터, html에서 구조를 만들면, css 파일에서 레이아웃과 디자인을 구현할 것이다. 이제부터 시작이다.

'HTML,CSS,JavaScript' 카테고리의 다른 글

07. CSS, 배경 이미지 추가하기  (0) 2022.11.04
06. CSS, 로그인 페이지 만들기  (0) 2022.11.03
04. CSS, 기초  (0) 2022.11.03
03. HTML, 본문  (0) 2022.11.03
02. HTML, 제목  (0) 2022.11.03

 지난 시간까지 웹페이지를 만드는 뼈대, HTML에 대해 간략하게 알아 보았다. 그리고 이번 시간에는 CSS, 즉 웹페이지를 트랜디하게 바꿔주는 언어에 대해 알아볼 것 이다.

 먼저, CSS를 알기 전에 HTML의 구조에 대해 생각해 볼 필요가 있다. HTML의 태그는 부모-자식의 구조를 가지는데, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요하다. 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받는다.

 

 

 HTML을 왼쪽과 같은 그림처럼 부모와 자식간의 관계를 가지는데, 자식 태그의 속성들은 부모 태그에 영향을 주지는 않지만, 부모 태그의 속성은 자식 태그에 영향을 준다. 

 즉, 부모 태그의 글씨 속성을 빨강으로 변경 하였다고 하면, 자식 태그1, 2가 모두 영향을 받는다. 반대로, 자식 태그 1의 글씨 속성이 빨강으로 변경된다고 부모 태그나 자식 태그 2에 영향을 주지 않는다.

 HTML의 특징을 이해하고, 이제부터 CSS를 사용하는 방법을 알아볼 것 이다. 

 

 

 

 CSS는 HTML의 <head> ~ </head> 안에 <style> ~ </style> 태그를 이용해 작성한다. <body> ~ </body> 안의 html 태그에 내가 편집할 각각의 요소에 class를 만들어, class 단위로 편집하는 것이 가장 큰 특징이다. 즉, 하나의 태그가 여러개의 class를 가질 수 있다. 

 이 특징을 이해하고 이제부터 CSS를 다루어 볼 것이다.

 

'HTML,CSS,JavaScript' 카테고리의 다른 글

06. CSS, 로그인 페이지 만들기  (0) 2022.11.03
05. CSS, 사용하기  (0) 2022.11.03
03. HTML, 본문  (0) 2022.11.03
02. HTML, 제목  (0) 2022.11.03
01. HTML, 시작  (0) 2022.11.03

+ Recent posts