Web/기타

[JS] 2. Movie Seat Booking

프로젝트 설명 간단한 영화관 좌석 선택 기능 구현입니다. 영화관 좌석 배치표를 보여주며 선택 가능한 좌석을 클릭하면 해당 좌석을 강조해줍니다. 좌석표 아래에는 몇 개의 좌석을 선택했는지와 총 영화표 값을 보여줍니다. 기억하고싶은 내용 CSS nth-of-type .seat:nth-of-type(2) { margin-right: 18px; } .seat:nth-last-of-type(2) { margin-left: 18px; } 왼쪽, 오른쪽은 두열씩 배치됨을 보여주기 위해 사용한 css문법입니다. 좌석은 각 행에 8좌석씩 존재합니다. 양쪽 두 좌석 사이에 길이 있기 때문에 떨어트려 보여줍니다. 해당 css가 적용되지 않는다면 이렇게 좌석들이 붙어있게 됩니다. 만약 제가 이것을 예제처럼 구현한다면 flex..

[JS] 1. Form Validator

Udemy에 올라와있는 20 Web Projects With Vanilla JavaScript 코스를 구매하였습니다. 리액트를 공부하고 개인 프로젝트를 해 보며 면서 JS 기초를 보강할 필요성을 느꼈기 때문입니다. 총 20개의 미니 프로젝트를 진행하는 강좌입니다. 하루 1~3개 정도의 프로젝트를 해 볼 예정이고 이 카테고리는 강의를 들으며 공부한내용을 정리하는 포스팅입니다. 프로젝트 설명 첫 프로젝트는 폼 벨리데이터입니다. HTML form으로 인풋을 받아와 js로 적절성 검사를 진행합니다. 인트로 프로젝트이니만큼 간단한 html,css,js를 소개합니다. 폼을 작성하고 Submit버튼을 누르면 검증 결과가 보여집니다. 조건에 맞게 올바르게 입력되면 input 영역 테두리 색이 초록색, 그렇지 않으면 빨..

[Github] ssh 인증 방식으로 변경하기

8월 13일부터 기존의 패스워드 인증방식 지원을 중단한다고 이전부터 알림 메일이 왔다. 하지만 그동안 읽지 않았음 그러다 대체공휴일인 16일까지 푹 쉬고 다시 공부한걸 저장하는데 안된다는 메세지가 뜸. 이제부턴 개인 토큰을 사용해야 한다고 한다. 메세지에 뜨는 링크를 따라가면 토큰을 발급하는 과정을 쉽게 따라할 수 있다. 그런데 기존에 커밋만해두고 푸쉬해두지 않은 리파지토리가 있는데 어쨌거나 이 커밋부분을 다 푸쉬해야 하는 상황. 기존 https방식으로 클론된 리파지토리를 ssh인증으로 변경해야 했다. 1. remote 브랜치 연결 $ git remote -v https 주소로 연결되어있는 원격 저장소를 ssh로 바꿔주어야함. 해당 저장소의 ssh주소는 깃허브의 해당 리파지토리로 들어가면 확인 가능 이후..

iterm2 테마 변경후 폰트 깨짐 해결/폰트 변경

결론: 깨짐이 없는 폰트를 다운받자 iTerm2를 다운받고 좀 더 예쁘게 쓰고싶어서 테마를 변경하던중, 현재 작업중인 브랜치를 보여준다는 zsh테마를 변경했다. ZSH_THEME="agnoster" 로 변경하면 브랜치가 뜬다고 했는데... 이거먼데..왜 화살표가 안뜨고 깨지는건데... 폰트 문제인것 같아서 폰트를 바꿔주기로 했다. iTerm2 -> Preference -> Profiles -> Text 로 들어가서 폰트를 변경 할 수 있다. 기본으로 Monaco라는 폰트로 설정되어 있었는데 기본으로 뜨는 다른 폰트들을 적용 해 보아도 변함없이 깨졌다. 한글이 지원되는 폰트를 다운받아서 설치해보았다. 그러니까 바로 잘 나타났다. 깃 작업환경에서 브랜치를 나타내는 문자도 깨짐없이 잘 뜬다. 네이버 D2 Co..

티스토리 블로그에 TOC 달기

참고한 블로그 링크가 여깄징 https://depast.tistory.com/40 위 블로그의 글을 통해 라이브러리로 간단하게 달았다. 올려주신 코드를 그대로 사용하니 스크롤을 반쯤 내려야 목록이 뜨게 된다. 나는 포스트를 들어올 때 부터 바로 떴으면 좋겠어서 수정을 했다. 내가 수정한 디자인 문제점 발견 간단하게 수정후 원하는 위치에 달려있는 목록창을 보고 느낀 뿌듯함은 찰나였고 카테고리 메뉴를 열어도 지조있게 제자리를 고수하는 녀석을 발견 이걸 또 수정하기 너무 귀찮아서 잠시 고민했다. 1.처음 코드 그대로 복구해서 스크롤 중간에만 띄우기 2. 그냥 이대로 쓰자 그냥 2번으로 가기로 ㅎㅎ..귀찮으니까 어차피 나중에 다른 플랫폼으로 블로그를 이전하고싶기 때문에 있는대로 쓰기로했다.

여행 기록 웹페이지 제작하기

제작 목적 html, css, js에 익숙해질겸 간단한 웹페이지 하나를 제작해보았다. 친구들과 여행했던 그리스 사진들과 사진마다 설명을 보여주는 웹페이지를 제작하기로 결정. 소개 9개의 사진을 보여주고 클릭하면 해당 사진을 크게 보여주고 오른쪽엔 그 사진에 대해 작성한 글을 보여준다. 선택된 사진을 한번 더 클릭하면 다시 사진 목록을 띄워주어 다른 사진도 확인 가능. 초기 디자인 사실 초창기 컨셉은 2000년도 느낌의 웹페이지 느낌을 만들고 싶었다. 뭔가.. html로 열심히 꾸민듯한 그런 느낌. 화면 가운데에 사진들을 보여주고 클릭한 사진을 배경으로, 사진을 고르는 선택창은 글을 보여주는 창으로 바뀌는 방식으로 계획을 잡았다. 그런데 막상 그렇게 만들고 나니 마음에 들지 않았다. 설명창을 완전 하얀색으..