웹퍼블리셔(9)
-
프로젝트 작업 전 기초공사 세팅
한 프로젝트를 시작하기 전 미리 잡아둬야할 부분 정리- 1. 스타일링 CSS 1. 폰트 제일 먼저 사용할 폰트 정하기 주로 웹폰트를 많이 사용하므로 먼저 링크 가져오기. 2. css 초기화 브라우저가 기본으로 가지고 있는 css 속성들 초기화 시키기 3. SCSS 세팅 - 변수 - mixin - 클래스 - 미디어쿼리 2. 공통 컴포넌트 구성 1. 상태관리 세팅 ReactRouter reducer, onCreate, onRemove, onEdit 만들기 2. 프로젝트 state context export const DiaryStateContext = React.createContext(); 컴포넌트 트리를 컨텍스트의 프로바이더로 감싸주고 데이터를 밸류로 전달. 일기 데이터를 관리하는 앱 컴포넌트의 데이터 ..
2022.09.04 -
[css] 반응형 웹을 위한 media query / 실무에서 느낀 점
미디어쿼리 css 사용 방식 혼자 포트폴리오 작업할 때 쓰던 쿼리 방식은 다음과 같았다. @mixin responsive($media) { @media screen and (max-width:$media) { @content; } } .inner { width: 1200px; margin: 0 auto; @include responsive(1200px) { width: 100%; } } 이런 식으로 따로 반응형 작업에 대해서 빼지 않고 각 element 밑에 추가하는 방식이었다. 물론 breakpoint 도 정의해두었지만 필요할때는 정해진 분기 이외에 따로 값을 지정하기도 했다. 이 방법은 내가 그냥 만들면서 편리한 방법이었다. 구조가 복잡해질수록 클래스명을 중복해서 작성할 필요가 없었으니까. // _r..
2021.09.08 -
[git bash] 리눅스 명령어 공부
$ pwd : print working directory $ ls : list -la / -al : list all $ cd : change directory ~ 현재 접속 중인 홈 디렉터리 ./ 현재 작업 중인 디렉터리 ../ 상위 디렉터리 $ mkdir 00 : make directory $ rm : remove -r : 하위 디렉터리와 파일까지 삭제 $ clear : 터미널 창의 내용 삭제 $ exit : 터미널 창 종료 $ vim 00.txt : vim을 이용한 파일 생성 i / a : insert / add 입력모드 esc : ex 모드 :w / :write :q / :quit :wq 00 : write and quit, 파일 이름 입력 시 그 이름으로 저장 :q! 문서를 저장하지 않고 편집기 ..
2021.08.04 -
인터넷의 원리
인터넷의 원리 웹사이트 주소 웹페이지가 가지고 있는 고유한 주소 http://www.google.com https:// 프로토콜 어떤 방식으로 웹사이트에 접속할지, 즉 인터넷 탐색 시의 이동 수단. http와 https는 거의 동일한 프로토콜이지만 https는 암호화를 통해 보안성이 강화됨. www 대부분 붙이지 않아도 상관없지만 완전한 주소를 보여주기 위해. 전화를 걸때 국가번호를 빼고 말해도 되는 것처럼. google.com 도메인 모든 웹사이트는 최소 1개의 ip주소가 존재한다. 컴퓨터는 도메인이 아닌 ip주소라는 숫자코드를 이용해 접속한다. 도메인을 ip 주소로 전환하기 위해 DNS, domain name service를 이용한다. DNS는 주소록이라고 보면 되고, 컴퓨터는 dns를 이용해 ip ..
2021.08.03 -
[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