본문 바로가기

분류 전체보기

 (84)
프론트엔드 로드맵 28 - CSS 전처리기 SASS CSS 전처리기 (CSS Preprocessor)에는 Sass, Less 등이 있다. 전처리기는 말그대로 CSS가 실행되기 이전에 사용하는 기능을 말한다. 전처리기는 CSS 작성의 단점을 보완한 것이기 때문에 가독성이 높고 코드 재사용에 유리하다. 우선 전처리기로 작성한 뒤 CSS로 컴파일한다. 전처리기에서 작성한 것은 웹에서 작동하지 않기 때문에 css파일로의 컴파일이 필요하다. SASS는 {} braces와 ; 세미콜론을 사용하지 않는다. 네스팅이라고 하는데 .contents 자식 요소들은 그 아래로 붙여서 나열한다. .contents width: 100px height: 200px ul color: red li padding: 10px &:last-child padding-left: 20px 변수를..
자바스크립트 뒤로가기 감지 이벤트 실행 로그인 코드를 짜다가 비밀번호가 맞지 않을 경우 뒤로가기가 실행되게 함 (다른 페이지에서 유효성 검사후 실패시 뒤로가게 설정) 기존에 짠 자바스크립트 이벤트 함수들은 평소에 실행이 되다가 뒤로가기 실행으로 다시 돌아왔을 때는 window.onload로는 먹히지 않음. 뒤로가기를 어떻게 감지하나 찾아봤다. pageshow/pagehide 이벤트로 실행시키면 된다. window.pageshow
익스에서 :before, :after 영역 밖으로 이동 시 hidden 처리되는 경우 크롬에서 실컷 테스트하다가 익스에서 크로스 브라우징을 하다보면 봉변을 당하기 십상이다. button에 캐럿 기호를 만들어 말주머니처럼 꾸몄는데, 이 캐럿을 :before 가상 선택자로 생성하면서 새로운 봉변을 당했다. 인사말 역대 회장 /* CSS */ .tab_btn {position: relative; display: inline-block; height: 40px; line-height: 40px; padding: 0px 20px; background: #272343; margin: 0 5px; color: #fff;} .tab_now:before {content: ""; position: absolute; bottom: -10px; right: 35%; display: inline-block; b..
두 줄 이상 텍스트 세로 중앙 정렬하는 방법 한 줄 짜리 간단한 텍스트는 line-height이나 padding 값 등등으로 중앙 정렬을 얼추 맞출 수 있다. 안녕하세요 텍스트가 2줄 이상이 되면 어떨까. line-height 를 적용하면 참변을 당한다. padding이나 margin으로 얼추 맞추는 것도 가능하겠지만, 길이가 서로 다른 여러개의 텍스트 박스를 정렬해야할 경우엔 맞추기가 어렵다. 일일이 하나하나 패딩값을 주기도 어려움. 이럴때 사용하는 세로 중앙 정렬 방법들을 소개한다. 1. position으로 50%, 50% 정렬 후 transform 하기 position으로 top과 left를 각각 50%로 적용하면 텍스트의 시작점이 중간으로 온다. 텍스트 길이에서 반 만큼 땡겨와야 정확히 중간 지점을 찾을 수 있다. HTML 삽입 미리보기할 ..
프론트엔드 로드맵 27 - CSS 구조 방법론 BEM(Block Element Modifier) BEM(Block Element Modifier)은 CSS구조를 개선시키기 위한 방법론(convention)을 말한다. 클래스 이름을 짓는 것에 대한 방법을 제시하며 ID에는 사용이 불가하다(오로지 클래스명에만). BEM 방법론의 이점으로는 보다 쉽게 네이밍을 할 수 있다. 클래스명을 여러번 반복해 재사용하고 HTML과 CSS의 코딩 구조가 일관되도록 한다. 유지/보수가 쉽고 보다 유연한 코드를 만든다. BLOCK 블록 한 페이지 안에 구현되는 요소들을 영역으로 구분짓고 이에 따른 이름을 붙인다. 각 페이지마다 재사용할 수 있으면서 자체적으로 의미가 부여되어 있다. 블럭은 클래스명의 가장 처음 자리에 온다. ex) header, container, menu, input, button 등 ELEMENT 요..
프론트엔드 로드맵 26 - 패키지 매니저 yarn yarn은 npm과 동일한 자바스크립트의 패키지 매니저다. 기존에 사용하던 npm의 단점을 보안하기 위해 페이스북, 구글 등의 엔지니어들이 협력해 만든 것이다. 보다 빠르고 안정적이며 보안성이 뛰어나다고 주장하고 있다. yarn 설치하기. npm이 깔려있다면 npm을 통해 설치할 수 있다. npm install --global yarn 의존성 모듈 yarn add [package-name]@[version-or-tag] [option] 패키지 업그레이드 $ yarn upgrade [package]@[version] 패키지 제거 $ yarn remove [package] 이외에는 공식 사이트를 참조하면 되겠다. 참고 사이트 : https://www.vobour.com/yarn-%EC%B2%98%EC%9D%..
프론트엔드 로드맵 25 - 패키지 매니저 npm이란? 소프트웨어를 만들 때 다른 사람이 만든 모듈을 이용하는데, 이 때 사용하는 모듈이 많아지면 복잡한 문제가 발생한다. 패키지 매니저는 이러한 모듈들을 관리하는 도구다. 자바스크립트에서 필요한 패키지 관리자 툴에는 npm, yarn, brew가 대표적인 세 가지다. 이들 중 npm 개념을 이해하고 넘어가보자. npm (Node Packaged Manager)은 Node.js에서 주로 사용하는 패키지 관리자 툴이다. node.js를 설치하면서 npm을 같이 설치하면 된다. $ npm -v node.js 애플리케이션이 예상치 못한 오류로 종료되는 경우를 고려해 무중단 상태로 운영을 돕는 프로세스 매니저 PM2라는 것이 있다. PM2는 npm으로 설치가 가능하다. pm2를 설치한다. $ npm install pm..
프론트엔드 로드맵 24 - 웹보안지식 : HTTPS/CORS/컨텐츠 보안 정책/OWASP 보안 취약점 HTTP(HyperText Transfer Protocol, 웹 서버와 클라이언트 컴퓨터 사이에 웹 브라우저에 문서를 불러오기 위한 통신 규약)는 정보를 텍스트로 주고 받는다. 단순 텍스트이기 때문에 네트워크에서 전송 신호를 인터셉트하는 경우 원하지 않는 데이터 유출이 발생할 수 있다. 이 취약점을 보안하기 위해 나온 프로토콜이 HTTPS다. HTTP에 S(Secure Socket)가 추가된 것이다. 기본 틀은 HTTP와 거의 동일하나 데이터 주고 받는 과정에서 '보안'요소가 추가됐다. HTTPS는 웹 서버에 접속하는 클라이언트에게 모두 다른 암호를 제공한다. 또 서버와 클라이언트가 2개의 키를 서로 암호화한다. 한 키는 공개키 저장소에 등록해 사용하고, 나머지는 개인키로 이용해 통신한다. 클라이언트는 ..
프론트엔드 로드맵 23 - Github깃허브 계정 생성 및 사용 방법 (왕초보도 따라할 수 있다!) 먼저 깃허브 계정을 만들자. https://github.com/ 위의 깃허브 사이트에 들어가서 닉네임과 이메일 입력하고 가입한다. 이제 다른 사람들과 혹은 내 개인적인 프로젝트가 입력될 저장소라는 것을 만들어 본다. (이메일 인증 등등의 과정을 거쳐야 한다) Start a project를 누른다. 저장소의 이름 Repository과 설명을 입력한 뒤 initialize this repository with a README에 쳌까지 해준 뒤 create repository 저장소 생성! 빠밤- 그러면 이렇게 저장소가 만들어진다. 내 저장소의 주소는 https://github.com/내 아이디/저장소 이름 형식으로 지어진다. 내 저장소 주소는 원격 저장소랑 클론 맨들 때마다 입력해야 하므로 따로 메모장에 복..
프론트엔드 로드맵 22 - Git 기본 사용법 Git은 다수의 사람들(혹은 개인)이 동일한 작업을 동시에 할때 수정 범위부터 수정된 내용까지 히스토리까지 함께 복제해, 언제든 복구가 가능하도록 만든 분산 버전 관리 시스템이다. 1. 커밋 Commit 파일을 저장소에 기록하려면 커밋을 눌러줘야 한다. 커밋한 기록들은 시간순으로 정렬된다. 커밋은 이력을 남기는 중요한 작업이므로 커밋 버튼을 누를 때 메시지를 필수로 입력해야 한다 (변경된 사항을 확인하고 바로 찾아낼 수 있도록) 첫째 줄 : 헤더 코드 변경 (커밋 내의 변경 내용을 요약) 둘째 줄 : 빈 칸 셋째 줄 : 헤더 라인이 미흡해 다른 디자인으로 변경 (변경한 구체적인 이유 기재) 작업하는 폴더를 작업 트리 Work Tree라고 부르며, 저장소와 작업 트리 사이에 공간을 인덱스Index라고 한다..

티스토리툴바