본문 바로가기

분류 전체보기

(81)
[CSS] 단위 (rem/em, vh/vw, vmin/vmax) 제목에서의 단위 말고도 많은 것들이 있지만, 반응형을 생각했을때 가장 많이 쓰이고 중요하다 생각되는 것만 담아봤습니다. 아래 베이스 코드로 진행하도록 하겠습니다. /* --- HTML --- */ /* --- CSS --- */ html { font-size: 16px; } .item { background-color: lightcoral; } [ rem과 em ] 1rem - 최상위 태그의 font-size (r = root) 1em - 현재 태그의 font-size 최상위의 font-size: 16px 이라고 가정하고 예를 들어보겠습니다. .item { font-size: 2rem; height: 5em; width: 10em; } font-size --> 16 * 2 = 32 (root의 font-..
[Javascript] 배열 다루기(map, filter, find, every, some, reduce, forEach) Javascript에서 참 유용하게 사용할 수 있는 배열 함수들 입니다. 처음 접했을 때는 뭔가 사용법도 어려워 보이고 복잡해보였지만... 알고나면 이렇게 편할수가 없는..!! [map] map은 말 그대로 매핑 시켜준다고 생각하면 편합니다. 배열의 원소들을 입맛에 맞게 바꿔줄 수 있습니다. 배열을 loop 돌면서 바꿔줍니다. 간단한 예로 1~10까지의 배열이 있고 1을 더해주는 코드 입니다. 하지만 저렇게 한다고 arr 변수가 바뀌는 것은 아니므로 주의해야 합니다. let arr = [1,2,3,4,5,6,7,8,9,10]; arr.map(item => item + 1); > 결과 조금 더 복잡한 경우를 본다면 각 원소와 함께 인덱스도 가져올 수 있습니다. 그리고 단순 연산이 아닌, 다른 형태로도 바꿀..
[CSS] Grid 2차 배열 형태의 레이아웃 설정을 도와주는 속성입니다. bootstrap이나 프레임워크에서 제공하는 것을 주로 활용했었는데, css만으로도 충분히 그에 뒤지지 않게 해낼 수 있습니다. 1 2 3 4 5 6 7 위 html을 바탕으로 테스트 했고, 아래 속성들은 item-layout에 적용했습니다. [display] display: grid; display가 grid로 되어있어야 이하 grid 관련 속성들을 이용할 수 있습니다. [grid-gap, grid-column-gap, grid-row-gap] 각 column과 row 사이의 간격을 정의합니다. grid-gap은 둘 다의 간격이고 나머지는 각각 column, row의 간격입니다. [grid-template-rows, grid-template-col..
Git 명령어 모음 git init .git 이라는 하위 디렉토리를 만든다. .git 디렉토리에는 저장소에 필요한 뼈대 파일(Skeleton)이 들어 있음. git config --list git 설정 리스트 git ls-files --others --exclude-standard untracked 파일 목록 조회. (stage 전 단계의 파일들) git add . (recommend git add -p) 모든 untracked 파일들을 stage 상태로 전환 p 옵션을 붙이면 하나씩 차례대로 변경부분을 보여주며, staging 할건지 물어봄 하지만 새로운 파일에는 적용이 안됨. 고로, 새로 프로젝트 생성했을 때는 사용못함. (staging에 대해 물어볼 때, 여러 옵션이 있지만, y/n/q 정도만 알아도 될듯 -> yes..
[CSS] stroke-dasharray, stroke-dashoffset 활용하여 animation 만들기 stroke-dasharray와 stroke-dashoffset은 svg를 가지고 animation을 만드는데 활용되곤 합니다. 여기서 다뤄볼 것은 css로만 하는 방법과 javascript로 하는 방법입니다. 먼저, stroke-dasharray와 stroke-dashoffset에 대한 개념부터 확인하고 가겠습니다. - stroke-dasharray는 점선을 만들어주는 놈이고 - stroke-dashoffset은 어디부터 시작할 것인지 정해주는 놈입니다. 위 circle을 예로 봐보겠습니다. 원의 전체 길이(둘레)는 1359.7597... 입니다. 그리고 시작점은 시계방향 90도 지점부터 입니다. 그리고 이 원은 stroke-dasharray: 100 입니다. 그러므로 dasharray 값은 점선을 만..
Github readme.md에 이미지 업로드 하기 직접적으로 readme 파일에 사진을 넣지는 못합니다. 그래서 우회(?) 하는 방법을 사용하는데, 1. Issues로 가서, New issue를 눌러줍니다. 2. 텍스트 편집부분에 사진을 복붙하거나 드래그 하면 github 서버에 자동으로 이미지 생성이 됩니다. 3. 저걸 그대로 복붙해서 readme 파일에 넣어도 되고, 저 https://~ 링크 주소를 활용해서 html 형태로 작성해도 됩니다. 끝!
[카카오 코딩 테스트] 좌물쇠와 열쇠 https://tech.kakao.com/2019/10/02/kakao-blind-recruitment-2020-round1/ 2020 신입 개발자 블라인드 채용 1차 코딩 테스트 문제 해설 – tech.kakao.com 올해에도 2020이라는 멋진 숫자와 함께, 카카오의 신입 개발자 채용을 시작했습니다! 그 여정 중 첫 단계로 1차 코딩 테스트가 지난 9월 7일 토요일 오후 2시부터 오후 7시까지 5시간 동안 진행됐는데요. 저희 준비위원들도 설렘과 긴장 속에 원활한 진행을 위해 노력했고, 무사히 1차 테스트를 마칠 수 있었습니다. 테스트에는 총 7문제가 출제됐고, 응시자는 5시간 이내에 순서와 상관없이 문제를 해결해야 했습니다. 문제의 배치는 작년과 마찬가지로 쉬운 난이 tech.kakao.com 3번..
[카카오 코딩 테스트] 괄호 변환 https://tech.kakao.com/2019/10/02/kakao-blind-recruitment-2020-round1/ 2020 신입 개발자 블라인드 채용 1차 코딩 테스트 문제 해설 올해에도 2020이라는 멋진 숫자와 함께, 카카오의 신입 개발자 채용을 시작했습니다! 그 여정 중 첫 단계로 1차 코딩 테스트가 지난 9월 7일 토요일 오후 2시부터 오후 7시까지 5시간 동안 진행됐는데요. 저희 준비위원들도 설렘과 긴장 속에 원활한 진행을 위해 노력했고, 무사히 1차 테스트를 마칠 수 있었습니다. 테스트에는 총 7문제가 출제됐고, 응시자는 5시간 이내에 순서와 상관없이 문제를 해결해야 했습니다. 문제의 배치는 작년과 마찬가지로 쉬운 난이 tech.kakao.com 2번 괄호 변환 문제입니다. 문제 ..