분류 전체보기69 [CSS] Flex(플렉스) _ 정렬 플렉스(정렬) container요소와 items요소으로 나뉨! 1. container 1-1. display container 설정해주기. display: flex; 블록 요소와 같이 Flex Container 정의 display: inline-flex; 인라인 요소와 같이 Flex Container 정의 1-2.flex-direction flex-direction 수평 정렬 flex-direction : row; 행이 축 (좌->우) flex-direction: row-reverse; 행이 축 (우 -> 좌 ) 수직 정렬 관련된 cloumn, cloumn-reverse가 있지만 원래 block 요소는 수직으로 정렬 되기 때문에 잘 안씀. 행은 수평/ 열은 수직 시작점과 끝점, 주축(main-axis)과.. 2022. 4. 6. [프론트엔드] Emmet(에밋) 사용하기. Emmet(에밋)이란 에밋(Emmet)은 HTML을 편집할 때 빠른 코딩을 위해 사용하는 플러그인이다. 매우 간단한 몇 가지 코드만 입력하면, 자동으로 완전한 HTML 코드를 생성해 준다. VS Code와 CodePen 등 대부분의 에디터에서 기본으로 쓸 수 있는 기능으로 간단한 코드를 입력하고 tab을 누르면 완전한 코드를 생성한다! 예를 들어서 VS Code에서 'div' + [tab]을 하면 가 자동으로 완성된다! 'div>ul>li*4{s}'라고 입력하면 다음 이미지처럼 미리보기가 뜬다. 맞다면 tab을 눌러서 코드에 적용할 수 있다! div.heropy + [tab]을 하면 가 자동으로 완성된다! 1. Emmet 문법 > : Child(자식) + : Sibling(형제) * : Multiplic.. 2022. 4. 5. [프론트앤드] 기본개념, VS Code 확장프로그램 추천, 브라우저 자동 스타일 삭제하기(VS Code, CodePen) [프런트엔드 개발 기본개념] 프런트엔드 개발 : HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고 그것을 사용자와 상호작용할 수 있도록 하는 것!! - HTML(기획자) : 웹의 구조 - CSS (디자이너) : 시각적인 표현(정적) - JS(개발자) : 페이지를 동작시키는 동적 처리 HTML과 CSS는 레이아웃 중심의 사고를 해야하고, JS는 데이터 중심의 사고가 필요하다. 나는 CSS가 어렵게 느껴졌는데 기존 프로그래밍 언어와는 다른 사고방식이 필요하기 때문인 것 같다. 1. 웹앱 (웹애플리케이션) 동작원리 사용자가 주소창에 페이지 주소를 입력하면, 서버에 최초 요청이 간다. 서버는 최초 응답으로 HTML을 먼저 응답으로 보낸다. 이후 사용자 브라우저는 CSS, J.. 2022. 4. 4. [Git] 파일 이름 바꾸기(rename) , 되돌리기(restore), 커밋 수정(revert) 1. rename 1-1. 먼저 잘못된 예시! //잘못된 방식 $ mv {존재하는 파일} {바꿀이름} git이 이름을 변경한 파일을 추적할 수 없다. 이를 되돌리기 위해서는 다시 원래 이름으로 mv를 해준다. 1-2. 올바른 rename 방법 //올바른 rename 방법 $ git mv {존재하는 파일} {바꿀이름} 2. undoing (되돌리기) 이 기능은 많이 쓸 예졍!!! 원래 상태로 되돌리기 어려울 때 쓰면 좋을 명령어이다. 단계별로 되돌리는 작업 $ vi {파일이름} i로 아무렇게나 편집을 한다 어자피 되돌릴 것임!! ㅋㅋ 그 다음 :wq를 해서 저장을 하고 닫는다 $ git status 예전의 깃 같은 경우에는 `checkout --` 이었지만 요즘에는 `restore`로 해야한다. $ git.. 2022. 4. 2. 이전 1 ··· 12 13 14 15 16 17 18 다음
