분류 전체보기(130)
-
[git] git의 기본개념 이해하기 (feat. 생활코딩)
git, github, 깃허브데스크탑, 소스트리.. 깃허브데스크탑을 이용하여 깃허브에 포폴을 올려두긴 했으나 뭔가 기본 개념이 부족한 것 같아서 생활코딩으로 깃의 개념을 잡아보았다. 깔끔한 설명이 장점인 생활코딩이다보니 용어에 대한 기본 개념이 확실히 잡혀진다. 이외에 참고한 사이트 역시 포스팅 최하단에 링크해둔다. Git 이란, 문서를 분산 관리하기 위해 만들어진 시스템 여러 개의 파일과 복잡한 파일명 없이도 모든 변경사항을 보존할 수 있고, 각 변경 사항에 대한 해설 추가가 가능하다. Git 의 세가지 목적 : version , backup, collaboration 1. 버전 관리 각각 버전 간의 차이점을 한눈에 확인할 수 있다. 변경 사항을 추적할 수 있다. commit 을 이용하여 새로운 버전을..
2021.07.22 -
[css] margin과 padding 적재적소에 사용하는 법 (feat. margin-collapsing 마진병합현상/마진상쇄현상)
margin과 padding의 차이점? 아니, margin 과 padding 의 정확한 사용법! 어느덧 코딩한지 8개월차, (학원 다닌 기간 포함) 마진과 패딩의 차이점을 이론적으로는 충~분히 알고 있다. 그런데 실전에서 적용하려고 하니 그 사용 대상이 애매해지는 경우가 많았다. 생각하기에 따라 margin 과 padding을 적용하는 곳이 달라진다. 물론 이것 또한 일종의 방법론이긴 하나 적절하게 나누어서 사용하는 것이 제일이다. 예를 들면, B 박스 안에 A 박스가 있을 때, A 박스의 위치를 잡기 위해서는 어떻게 코딩하느냐. 나는 B 박스에 패딩을 줘서 A 박스의 영역을 잡곤 했는데, 물론 이것도 틀린 방법은 아니다. 박스를 어떻게 볼지 그 관점에 따라 달라지는 것인데, 아래의 그림을 참고하자. 다..
2021.07.20 -
이미지 사이즈 줄이기, 용량 압축 (feat 포토샵& tinyPNG)
현재 다니는 곳에서는 주로 포토샵, XD로 디자인 시안을 넘겨받는데, 작은 아이콘에서는 문제가 크게 되진 않으나 배경 이미지 등을 저장할 때는 용량이 클수록 리소스도 많이 차지하고 로딩시간도 느려진다. 따라서 최대한 퀄리티를 살리면서 용량을 줄이는 것이 중요하다. 포토샵 작업 시 이미지 저장할 때에는, 무조건 save for web을 사용한다. 이 때 주의할 점은, * 퀄리티는 70~80 정도로 지정한다. - 이렇게 해도 육안으로는 큰 차이가 없다. * metadata는 none으로 설정한다. - 중요하지 않은 데이터는 생략하여 용량을 더 낮춘다. 이렇게 하면 일반 save와 비교했을때 이미지 크기를 반 정도로 줄일 수 있다. 여기서 이미지 압축하는 사이트를 이용하여 한번 더 압축을 해주면, 원본 사이즈..
2021.07.19 -
모바일 웹 vs 웹 앱 차이점 feat. 네이티브앱, 하이브리드앱
학원에서 수업하면서 네이티브앱, 하이브리드앱, 웹앱의 차이점에 대해 배운 적이 있다. (출처 : https://m.blog.naver.com/acornedu/221012420292 ) 이제와서 다시 보니 그 차이가 조금 분명하지 못한 것 같아서 좀 더 검색을 해 보았다. 모바일웹은 말그대로 반응형 혹은 적응형 작업이 된 웹페이지이다. 웹앱은 모바일웹과 같으나 겉모습과 구동방식을 마치 앱인 것처럼 꾸며놓은 것이 웹앱이다. 즉, 웹 기술로 네이티브앱을 흉내낸 것. 하이브리드앱은 쇼핑몰 등에서 주로 사용하는 방식으로, 껍데기만 앱이고 내용물은 웹이다. 따라서 웹 기반이므로 잦은 업데이트가 있더라도 앱을 따로 업데이트할 필요가 없어서 유지보수에 용이하다. 또한 네이티브앱에서만 가능한 스토어 등록 등의 기능을 사..
2021.06.16 -
퍼블리싱 작업 완료 후 확인해야 하는 부분
실무에서 퍼블리싱 작업을 하다보면 꼭 해야하지만 까먹는 부분이 있어 정리해본다. 작업의 완성도를 높이기 위해 html, css, script 작성이 완료되면 다음과 같은 절차를 통해 내가 만든 작업물을 확인 후 컨펌을 보낸다. 1. 크로스브라우징 - ie에서만 돌아가면 대부분 돌아간다. 먼저 ie 확인 후, 다른 부분 수정을 하고 다른 브라우저들 확인할 것. 2. 모바일 - 개발자도구로 모바일 사이즈만 확인하는 것이 아닌 직접 핸드폰으로 확인해 볼 것. 아이폰의 경우 주소줄 등에 의해 높이가 더 짧아지므로 유의. 3. w3c validator - html, css의 웹표준 검사는 필수 4. OpenWax - 크롬의 익스텐션 중 하나로 웹접근성을 점수로 세분화하여 체크해준다. 위의 4가지 항목은 신입퍼블리..
2021.06.16 -
퍼블리싱 기본 이해 ( http https 차이, 파싱 뜻, 페이지 속도 )
http / https http : 불특정 다수를 상대로 모두에게 공개. 엄청 가벼운 것이 장점. 요청 프로세스가 짧으므로 쿠키를 사용하고 그래서 보안에 취약 https : 보안인증서를 사용하는 절차로 요청 프로세스에 보안레이어가 추가되어 무거워짐. mangkyu.tistory.com/98 [Web] HTTP와 HTTPS 및 차이점 1. HTTP란? [ HTTP(Hyper Text Transfer Protocol)란? ] HTTP(Hyper Text Transfer Protocol)란 서버/클라이언트 모델을 따라 데이터를 주고 받기 위한 프로토콜이다. 즉, HTTP는 인터넷에서 하이퍼텍스트를 교환.. mangkyu.tistory.com 파싱 parsing, 구문 분석이라는 의미로 문서(데이터)의 내용을 ..
2021.05.13