본문 바로가기

CodeTech

 (70)
Git - 8 [branch] branch - branch란 가지라는 뜻으로 git에서는 원본(master)에 가지(branch)를 쳐서 다른방향으로 개발해 나가는 뜻이다. - 위 그림과 같이 한가지에서 다른 곁가지로 실험적인 코드를 개발하며 원본을 손상시키지 않고 코딩을 할때 유용하며 특히 다른 사람과 코딩을 할때 해당 사람들과 코드가 겹치지 않아 매우 유용하게 쓰인다. - 또한 개발하는 종류가 다양할 때 즉, 유료 버전 혹은 무료 버전이라던가 교사용, 학생용 등 개발하는 버전을 관리 할 때도 매우 유용하다. git branch [branch_name] - 브렌치를 생성하기 위한 명령어로 해당명령어로서 master 로부터 새롭게 나아갈 수 있다. git checkout [branch_name] - master 혹은 다른 branch..
HTML\CSS Tip - 3[CSS - uppercase ] 1. CSS - uppercase text-transform: uppercase - 해당 element의 글자를 모두 대문자로 만들어준다. - 소문자나 대문자나 둘다 허용 2. 부분 지정 class - 코드 상에 다른 divider가 있을 수 있는데 open-post__members 라는 클래스가 지정된 element안에 있는 divider만 지정된다. 3. 같은 코드를 찾아서 수정하고 싶다면? alt + 클릭을 통해서 같은 부분을 지정하는 것도 있지만 같은 부분을 드래그해서 마크한다음 ctrl + D 를 여러번 눌러서 수정하고 싶은 부분을 한번에 마크할 수 있다. 4. 양옆을 자연스럽게 center로 margin을 놓고 싶다면? margin : auto 를 사용하자 5. boxsizing - boxsi..
HTML\CSS Tip - 2[Center에 놓이는 기술, Reset CSS, ColorZilla, page Ruler redux, :not[()] ] 1. Centering 여러 컨테이너들이 놓여있을때 서로의 크기 때문에 justify-content: space between으로 해도 정확하게 중간으로 가게하지 못한다. 얼추 비슷하게는 되지만 말이다. 이때 여러 컨테이너들 중 딱 한개의 요소가 정중앙에 있게 하는 기술이있다. 위와 같이 중앙 정렬이 잘안될 때는 모든 요소 width: 33%를 맞추고 해당하는 부분만 다시 중앙정렬을 해주면 완벽히 중앙에 해당요소가 간다. 시계가 갔다. 2. Reset CSS - 브라우저에 의해 기본적으로 적용되는 margin이나 기타 공백들을 없애고 - 아얘 깔끔히 모든 값이 0인 상태에서 시작하고 싶을 떄 사용한다. 구글링을 통해 파일을 찾아낸다음. meyerweb.com/eric/tools/css/reset/ CSS..
HTML\CSS Tip - 1 [코드 단축어, 아이콘사이트, index.html, fontawesome, heroicons, googlefont] index.html 대부분의 웹서버가 default로 index.html 이라는 파일을 찾아보도록 설정되어 있다. 영어에서는 index라는 말은 첫번째 라는 의미를 갖고 있으므로 visual studio html TIP 1. 기본 html 형식 - ! 누르고 난후 엔터 아래와 같이 예쁜 html파일이 찍히게 된다. link:css - 단축키로서 이후 엔터를 누르면 이렇게 바로 설정이되고, css폴더 아래에 style.css파일을 만든경우이므로 이렇게 수정만 하면 css파일과 html파일이 연동이 되었다. 계단식 html 구조를 쉽게 만들자 tag>tag>tag*숫자>tag -> a a .. .class이름>tag.class이름*숫자 2. drag image in screen 이렇게 이미지와 코드(코드와 ..
.gitignore 파일 (git이 인식을 안했으면 하는 파일 데스노트) .gitignore 이라는 파일은 자신이 무시하고 싶은 파일이름을 담으면 git이 해당 파일을 무시한다. -> root 디렉토리 내에서 screenshot 이라는 폴더를 무시하고 싶어 .gitignore 파일을 만들면 아주 약하게 screenshot이라는 폴더의 이름이 연하게 변한다. 지우면 원래대로 돌아간다. git bash에서 git add . git commit git push를 해준다음 그외 gitignore이 안먹힐 때는 #1. config 디렉토리 무시 git rm --cached config/ -r #2. db_conn.php 파일 무시 git rm --cached db_conn.php #3. sql 확장자 무시 git rm --cached *.sql github을 들어가봐도 screensh..
CSS - 10 [media query] media query - 웹브라우저는 다양한 화면에서 실행될 수 있다. 휴대폰, 태블릿, 대화면 tv, 모니터등 다양한 화면에 맞춰 css는 화면 비율을 맞추고 바꾸고 화면을 감지 할 수 있다. - 화면을 감지하여 해당하는 화면비율로 웹브라우저를 맞춰주는 것이 media query이다. @media screen and (max-width: 400px){ } 위구문 전체가 의미하는것은 '이 스크린이 400px보다 작으면 아래를 실행 하라' 물론 @media screen and (max-width: 400px) and (max-width: 650px) ... { } 와 같이 다양한 조건을 넣을 수도 있다. 스크린의 크기를 줄였더니 적용이된다. 또한 웹브라우저로 다양한 타입의 화면으로 브라우저를 봤을 때 어떤..
CSS - 9 [animation, Animista] animation transform과는 다르게 어떠한 움직임으로 상태를 변화시키켜 애니메이션을 만드는 것말고 그냥 화면에 자동으로 애니메이션이 동작하는 경우 @keyframes 애니메이션이름{ from{ transform: } to{ transform: } } tag { animation: 애니메이션이름 시간 ease-in function } - from 부터 to까지 움직이는 animation을 만들고 싶다. 이제는 애니메이션의 스탭을 줘보자 : 상태를 여러 형태로 바꾸면서 이어지게 하자 위와 같이 여러 단계별로 나누어서 상태를 변화 시킬수 있다. 단계는 1% 2% 등 0~ 100%까지 나눌수 있다. 무조건 애니메이션을 transform으로만 만들라는 것은 아니다. border-radius: 50%등 ..
CSS - 8 [States, Transition, Transformation] States - 웹페이지에서 inspect다음에 우측 하단에 요소를 누르고 :hov를 누르면 우측하단 처럼 state 상태가 나온다. - 버튼을 누르고 있으면 상태가 변한다. 이렇게 다양한 상태를 꾸미고 싶을 때 사용하는 selector가 있다. - active, hover, visited, focus, focus-within 이렇게 5가지 상태가 존재한다. active : 버튼을 눌러 활성화 되었을 때 hover : 마우스를 올려만 두었을 때 focus : 키보드로 선택되었을 때 visited : 링크에만 적용이되며 링크를 타고 해당 사이트를 방문하면 링크의 색이 바뀌는 상태 focus-within : 부모에만 적용이된다. attributtes:state {} - 상태에 따라 바뀌는 것을 특정하거나 꾸..

티스토리툴바