웹 개발일지1.2

2022.08.11

 

웹 개발은 생소하여 모든 것이 다 처음 시작하는 것이다. 알면 알수록 재밌고 나도 웹페이지를 만들고 싶다.

그럼 스파르타 코딩 수업 1주 차 배우고 느낀 것을 정리하겠다.

 

박스는 <div>를 사용한다.

왜 div일까 궁금해서 검색해보니 division이란 약자로 레이아웃을 나누는 데 사용한다고 한다.

 

처음부터 난관에 봉착

색상을 입히는데 자꾸 실패했다. 새로 고침을 해도 색상은 변하지 않았고, 분명 강사님과 같은 코드인 거 같은데 왜 안 되는 것일까 고민을 하면서 검색을 해보니 잘 나오지 않아 튜터님께 즉문즉답을 드렸다.

알고 보니 내 눈에만 보이지 않던 오타가 있었던 것... 오타가 문제의 원인이었다는 것을 알게 되자 괜시리 민망했다.

분명 열심히 봤을 때는 안보였는데ㅠㅠ

 

튜터님이 세심하게 봐주셨다는 것에 감사했고, 앞으로는 더욱 눈에 불을 켜고 오타가 있나 없나 확인해야겠다.

오타로 시간을 잡아먹고 싶지 않다!!

 

로그인 페이지를 만들며 글씨를 가운데에 두기 위한 방법을 설명하셨다.

직접 보지 않고 해보고 싶은 마음에 적혀있는 css 중 간격을 뜻하는 margin이 아닐까 하고 적었지만, 배경이 함께 움직이는 당황스러운 상황이 만들어졌다.

text-align: center;

알고 보니 text가 들어간 이런 멋진 문장이었다.

 

그 뒤, 내가 넣어본 margin과 padding이 나왔는데

margin: 바깥 여백, padding: 내 안쪽 여백이라고 한다.

예를 들어 margin은 박스의 위치가 이동된다.(여백의 크기에 따라)

padding은 박스 안의 크기가 움직인다. 박스가 커지거나 작아지듯

글씨를 정 가운데 놓기 위해서는 padding도 이용해야 했다.

padding-top을 이용해주면 위의 여백을 크게 해 글씨를 아래로 밀어줘 글씨가 정 가운데로 갈 수 있었다.

padding-top:40px;

 

사진을 배경에 삽입할 때 background를 이용해줬다.

background-image: url("이미지");
background-size: cover;
background-position: center;

저 이미지 안에 자신이 원하는 사진의 url을 넣었더니 사진이 생겼다. 다만 자신이 원하는 부분(위치)은 아니었다.

내가 원하는 이미지 부분(위치)을 넣기 위해 cover을 해주니 원하던 이미지 부분이 나왔다.

그 이미지를 배경 가운데로 놓기 위해 center을 이용했다. 유익한 강의 공부였다.

 

팁: background-color는 배경 색을 만들기 때문에 박스 위치를 원하는 대로 변경할 때 도움이 된다.(색상으로 표시가 가능하니까)

원하는 위치로 옮긴 후 제거해주면 깔끔!

 

* 은 모든 태그에 사용하겠다는 뜻

주석처리는 Ctrl + /

css가 길어질 때는 파일 분리를 할 수 있다.(스타일시트 생성)

부트스트랩 사이트에 다양한 게 많다.

 

저장하는 법은 ctrl + s이다. 근데 뭐 뜨는 게 없어서 저장이 된 건지 의문이긴 하다.

 

손쉽게 내용물 정렬

아까 위에서 내용물을 가운데로 놓기 위한 작업을 했다. 그런데 더 쉽게 간단히 가운데로 정렬하는 방법이 있었다.

이 방법이 수를 구체적으로 지정하지 않아도 돼서 더 좋았다. 앞으로는 이 방법을 사용할 것 같다.

내용물을 정렬하는 손쉬운 방법: 

            display: flex;
            flex-direction: column;
            /*row도 가능*/
            justify-content: center;
            align-items: center;

알려주신 이 방법을 사용하니 내용물이 쉽게 정렬됐다.

 

마우스가 올라가면 선이 굵어지는 코드는 hover을 사용한다.

난 hover이 마음에 든다. 뭔가 생동감 있는 느낌이라서 버튼 만들 때 잘 사용할 거 같다ㅎㅎ

 

이미지를 어둡게 하기 위해서는

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('url을 넣어주세요');

0.5 수치를 조절해주면 밝아지기도 하고 더 어두워지기도 한다.

 

줄을 잘 맞추기 위해서는 ctral + alt +L을 해준다! 안 맞춰진 줄을 알아서 맞춰주니 편리하다. 자주 쓰고 있다.

 

꿀팁!!!: 모바일 처리하기

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

이런 식으로 해주면 창을 작게 해도 그 사이즈만큼 내용물이 변해서 보기 편해진다! 즉, 모바일로도 가능!

 

분명 강의 듣고 공부할 때는 기억이 나지만, 며칠이 지나면 많이 까먹을 거 같아 걱정이다. 안 까먹고 싶은데.. 내가 적어 놓은 이 일지들이 나중에 공부에 더 도움이 되었으면 좋겠다.

그 뒤는 1 주차 자바스크립트 맛보기가 나온다. 그건 1.3에서 계속 쓰도록 하겠다!