내일배움캠프 1일차, git 특강과 미니 프로젝트 진행
第1天
첫날 아침 9시에 줌에서 다같이 모여 OT 및 프로젝트 발제를 진행했다. 처음으로 팀 안에서 팀원들을 만나 소통해보았다. 물론 전에도 코딩 스터디를 했었지만, 이렇게 한 프로젝트를 위해 만나 계획부터 기능 구현까지 진행하려고 하는 것은 처음이었다. 와이어프레임 설계부터 기능 구현 역할 분담까지 정말 만만치않았지만 으쌰으쌰 어찌저찌 했다.
아무튼 첫날 내가 한 것은
1️⃣ 팀원 별 이모지 만들기
2️⃣ git 특강 듣기
이틀동안 내가 해야할 것은
1️⃣ 모달창 구현하기
나는 각자의 캐릭터를 누르면 팀원 소개 상세 카드가 모달창으로 나타나게 하는 기능을 맡게 되었다.
좀 하다보니 git 특강 시간이 되어서 들으러갔는데 이게 뭐지 싶었다. 중간부터 꼬이면서 좀 어렵다고 생각했는데 그것 보단 지금 생각해보니 그냥 강의에 집중이 안되었다. 그래도 다시 강의 복습하면서 따라해보면 금방 극복해나갈 수 있을 듯 ?
강의 다 듣고 다시 돌아와서 만들었던 이모지들을 전에 만들어봤던 부트스트랩 카드에 이미지로 넣는 작업하는데 이미지 url을 html body 부분에 넣는 건 해봤는데 url이 없고 파일이 나에게 있는 이미지는 한 번도 넣어보지 못해 막혔었다. 그래서 구글링으로 찾아보니 이러한 게시글을 보게 되었고 결국엔 해결했다 ! (정말 기초 중에 기초였지만 이제 시작이니 그럴 수 있다고 자기합리화)
1. 이미지 태그와 경로 작성법
여기서 이미지 태그에 대한 필수 속성과 두가지의 경로 작성법이 나와있다.
<img src = " " />" " 안에 절대 경로인 url이나 최상위 드라이브 등의 고정 주소를 넣거나,
../(상위 폴더로 이동)를 사용하여 상대 경로인 현재 작성하고 있는 파일의 위치에 따라 달라지는 경로를 넣으면 된다.
이 때 상대 경로로 작성 시 이미지 파일의 이름을 한 눈에 봐도 무슨 파일인지 알 수 있을 정도로 명확하게 변경해주는게 좋다.
만약에 파일이 위처럼 되어있다면 아래 예시처럼 코드를 쓰면 된다.
<img src="../static/img/jhj.png">
2. HTML에서 CSS와 JavaScript 분리 & 연결
hmtl과 css와 javascript는 분리해서 관리해주면 좋다고 한다.
왜일까 ? 찾아봤더니
1️⃣ 코드가 길어져서 가독성이 떨어지는 걸 방지할 수 있다.
2️⃣ 동일한 스타일이나 자바스크립트를 다른 html 파일에 적용하기 쉽다.
3️⃣ 유지보수가 쉽다.
그럼 어떻게 하면 될까 ?
<link rel="stylesheet" href="../static/style.css" /> <script defer src="../static/main.js"></script>
html의 head 태그 안에 script 태그를 이용하여 js 확장자를 가진 자바스크립트 파일을 연결하고 link 태그를 이용하여 CSS 확장자를 가진 스타일 시트 파일을 분리, 연결해주면 된다.
3. 외부 문서를 연결하는 link 태그와 속성들
차이를 알게 된 link 태그의 속성들이다.
1️⃣ href : 연결할 곳의 주소, 문서를 연결하는 a 태그
2️⃣ rel : 현재 문서와 연결 문서의 관계를 표시
(ex. 스타일시트로 연결하는 경우 - rel="stylesheet")
3️⃣ type : 연결문서의 MIME 유형 (Multipurpose Internet Mail Extantions) (hrep 속성이 설정될 때만 사용)
웹에서 내용 유형(content type)을 말할 때 자주 쓰임
4️⃣ media : 연결 문서가 표시될 장치 또는 미디어 유형
+ 자세한 예시는 참고 링크롱롱
4. 화면 분할
구글링하다 어쩌다가 알게 된 화면 분할 단축키
VSCode 보기탭에서도 분할 가능하지만 일의 능률을 위해 단축키 쓰는 건 너무나도 좋기에 적어본다.
화면 분할 ctrl(command) + \
화면 수직분할 ctrl(command) + k 그리고 ctrl(command) + \
待办清单
- 깃 특강 내용 정리해서 올리기
+ 중국어 쓰고싶은데 쓸 데 없어서 부제에라도 적어봤는데 계속 이렇게 적어야지 홍홍홍
