- 분류 전체보기 (344)
Just Do IT!
스파르타코딩클럽 내일배움캠프 2일차 본문
첫 번째 프로젝트 시작
어제는 S.A. 작성하고 끝났는데,
오늘부터 본격적으로 프로젝트 시작...!
각자 자기소개 페이지 구현해보고 다시 모여서 이야기하는 걸로 오전을 시작했다.
그래서 오늘의 TIL은 페이지를 구현해보면서 적어둔
- 이전에 배웠던 것 같은데 다시 쓰려니 기억 안나는 것
- 헷갈리는 것
들을 적어보려고 한다.
CSS에 웹폰트 삽입하기
기본 폰트는 너무 딱딱하기도 하고, 더 예쁜 페이지를 제작하고자 웹폰트를 이용하기로 했다.
우리 조의 조원 분이 눈누 사이트를 공유해주셔서 이 곳에서 하나 골라서 삽입했다.
눈누에 있는 폰트를 사용하려면
이 부분을 복사해 CSS 파일 상단에 붙여넣기만 하면 된다!
그런데,
나는 그냥 붙여넣기만 하면 끝날 줄 알았는데 폰트를 적용하려면 폰트를 사용할 곳에 적용해야 한다는 걸 뒤늦게 깨달았다.
계속 새로고침만 하고 있던 나...나중에야 하나한 적용했다.
제대로 적용하려면,
body {
font-family: 'GangwonEdu_OTFBoldA';
}위의 예시처럼 원하는 곳에 font-family를 적어야 한다.
이런 내용을 HTML, CSS 기초를 배울 때 분명히 실습해본 것 같은데 막상 하려니 기억이 나지 않아서 결국 구글링을 통해 찾아보았다. 미래의 내가 혹시라도 다시 까먹을 수 있으니 TIL에 적어두는 걸로...!
부트스트랩 사용하기
부트스트랩은 사실 올해 상반기에 현장 실습을 하면서 엄청나게 찾아보았던 사이트이다.
현장 실습을 하면서 회사 홈페이지의 리뉴얼을 해보라고 해서 부트스트랩 템플릿을 다운받아 회사에 적용했었다. 물론 여러 가지 이유로 내가 리뉴얼한 홈페이지가 실제로 올라가진 않았지만, 굉장히 좋은 경험이었다.
그 당시 사용했던 부트스트랩은 이번에 구현했던 것처럼 하나씩 가져와서 사용한 건 아니었고,
다 만들어진 템플릿을 따와서 회사 홈페이지를 만들었었기 때문에 내가 직접 부트스트랩으로 구현하는 건 처음이었다.
그래서 웹개발종합반을 들으면서 뭔가 반가웠었다 ㅎㅎ
어제 만든 와이어 프레임에 조원 분이 사용할 만한 input group을 알려주셔서 그걸로 열심히 구현해보았다.
나중에 혹시 까먹을까봐 코드를 덧붙이자면,
HTML 파일의 <head>부분에 아래의 코드를 적으면, 원하는 button이나 card 등을 복사해서 내 사이트에 사용할 수 있다.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">물론 그냥 무작정 붙여넣기 하면 안되고,
만드려는 기획에 따라서 수정해야 하니까 사실상 내가 만드는 게 맞긴 하다.
그래도 디자인과 틀이 정해져 있기 때문에
부트스트랩을 이용하면 정말 깔끔하게 만들 수가 있다.
ul / li 기호 없애기
아, 이건 프로젝트와 관련한 아주 사소한 일이었는데...ㅋㅋㅋ
분명 기호 없애는 게 뭔지 아는데 자꾸 오타를 내는 것이었다..그것도 모르고 나는 왜 적용이 안되나 하고 새로고침만 무한반복했고...결국 구글링을 해서 알아낸 뒤에야 오타를 발견했다..!
그래서 나의 오타 남용 방지를 위해 짧게 적어둔다.
.comment_li {
list-style: none;
}앞으로 절대 까먹지 않기로....ㅎ (오타 금지)
CSS | margin 과 padding 의 차이
이 그림을 보면 padding 과 margin의 차이를 알 수 가 있다.
- padding : 내용과 border(테두리) 사이의 여유 공간
- 위, 아래, 오른쪽, 왼쪽 여백을 모두 줄 수 있다.
- 일부만 줄 수도 있으며 auto로 선언할 경우 가운데 정렬이 된다.
- margin : 요소 주위의 여백 (주변 요소들과 거리를 둘 수 있게 만든다)
- 1개의 속성만 사용할 경우 안쪽 여백을 주게 된다.
- padding과 달리 auto로 선언할 수 없다.
<!-- 위, 오른쪽, 아래, 왼쪽 여백 -->
margin: 10px 5px 10px 5px;
<!-- 첫번째 값은 위와 아래 / 두번째 값은 오른쪽과 왼쪽 여백 -->
margin: 10px 5px;
<!-- 일부만 여백을 줄 수 있음 -->
margin-right: 20px;
padding-top: 10px;
<!-- magin만 auto 가능 -->
magin: auto;
<!-- 안쪽 여백 변경 -->
padding: 20px예시까지 적었는데, 사실 예시처럼 구현하기는 한다.
모니터를 나눠서 반은 파이참, 반은 구현한 페이지를 켜놓고 코딩 중인데
조금만 숫자를 바꿔도 쑥쑥 바뀌는 페이지가 당황스럽다...;
분명히 그럴듯 하게 바꾼것 같은데 전체 페이지로 보면 또 아닌 것도 많고...
솔직히 이렇게 차이점을 적어놓았지만, 나중에 다시 헷갈릴 나를 안다.
오늘 튜터님과의 면담에서 CSS에 대한 어려움을 이야기했는데, 지금은 익숙하지 않지만
나중에는 매번 쓰는 것만 쓰기 때문에 몇 달만 계속 구글링하고 적용하고 하는 시간이 필요하다고 하셨다.
이것도 마찬가지겠지. 솔직히 CSS가 지금은 더 어려운 듯 하다.
오늘 만든 소개 페이지 현황
물론 아직 고쳐야 할 점들이 많다.
그럴듯(?) 하게 만들어보긴 했는데 메인 페이지도 구현해야 하고, 특히 DB 부분은 아직 시작도 하지 않았다.
다른 조원분들도 각자의 소개 페이지를 만들었는데 각자의 페이지를 보는 맛이 있다.
서로 비슷한 듯, 다르다.
같은 와이어 프레임을 가지고 동일하게 구현하는 게 이렇게나 힘들다...
사실 오전에는 와이어 프레임을 생각하지 않고 내 방식대로 그리고 있었는데, 그건 아닌것 같다는 생각이 들어서
얼른 펼쳐놓고 그 프레임을 보면서 그림을 그려보았다.
아직 서툴기도 하고, 지금도 고쳐야 할 점이 여럿 보이지만
그래도 오늘 하루 내내 코딩에 집중하는 내 자신이 참 신기했다.
오랜 시간 코딩에 몰입한다는 게 이런게 아닐까 싶다. 물론 초반이라 중간중간 많이 쉬긴 했다...ㅋㅋㅋ
이렇게 또 2일차가 끝나간다.
프로젝트만 해서 사실 TIL에 적을 게 없을 줄 알고 걱정했는데 그건 나의 오만일 뿐이었다.
안다고 생각했지만 갑자기 생각 안나는 것도 있고, 다시 보니 모르는 것들도 있고...
뭐든 기록을 해 두어야 나중에 찾아 볼 수 있겠다는 생각이 든다. 이런 글들이 쌓여서 미래의 나를 만드는 거겠지.
이런게 TIL 글의 장점이 아닌가 싶다.
'스파르타코딩클럽 내일배움캠프 > TIL' 카테고리의 다른 글
| 스파르타코딩클럽 내일배움캠프 6일차 (1) | 2022.11.07 |
|---|---|
| 스파르타코딩클럽 내일배움캠프 5일차 (0) | 2022.11.04 |
| 스파르타코딩클럽 내일배움캠프 4일차 (0) | 2022.11.03 |
| 스파르타코딩클럽 내일배움캠프 3일차 (1) | 2022.11.02 |
| 스파르타코딩클럽 내일배움캠프 1일차 (1) | 2022.10.31 |
