본문 바로가기
반응형

분류 전체보기514

[html,css,javascript] ESC버튼, 이미지 화면 밖 클릭으로 화면 닫기 ESC modal Close : stackoverflow.com/questions/27758991/css-html-modal-using-the-escape-key-click-outside-to-close CSS/HTML Modal- Using the Escape key/Click outside to close I have the following modal working, http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/ on my site. It's exactly what I want in terms of ease of use, and function. The only issue I have is how to make the stackoverflow.com ESC Windo.. 2021. 3. 6.
[에러해결][django] OSError: [WinError 123] 파일 이름, 디렉터리 이름 또는 볼륨 레이블 구문이 잘못되었습니다: 장고 에러 발생 : OSError: [WinError 123] 파일 이름, 디렉터리 이름 또는 볼륨 레이블 구문이 잘못되었습다 : '' 원인 : 프로젝트 폴더 > settings.py에서 ' , '를 작성하지 않음 문제 해결 : comma 추가 도움 출처 : ojjy.tistory.com/57 2021. 3. 4.
[드림코딩] 무료 폰트, 무료 로고 이미지 사이트 폰트 어썸 : 다양한 로고, 아이콘을 제공해주는 사이트Font AwesomeThe world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.fontawesome.com구글 폰트 : 다양한 폰트 다운로드Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.com CSS를 게임으로 길러보자CSS DinerA fun game to help you learn and practice CSS selectors.flukeout.github.ioCSS FlexBox 연습.. 2021. 3. 3.
[드림코딩] 반응형 헤더(Responsive Header) 만들기. 종합 정리 간단하게 반응형 헤더를 만들어보자이를 위해 사용할 파일 3가지index.htmlstyle.cssmain.js1 단계 : 기본적인 반응형 웹 형태 만들기1. html1-1. head- 구글 폰트에서 사용할 폰트의 링크를 복사,붙여넣기- 폰트 어썸의 CDN을 복붙한다. 우측 최상단 프로필이미지 클릭 > CDN 클릭 현재 index.html의 헤드태그는 다음과 같다. 1.2 body참고로 Font Awesome에서 이미지의 Copy HTML은 다음 위치에 있으며 이를 body태그에 넣어준다. 현재 body 태그 InformationCenter 여기서 잠깐!코드를 수정하는 즉시 새로고침없이 확인할 필요가 있다.Live Server라는 Vscode 익스텐션을 활용하면 된다.설치했다면 F1 > Live Server.. 2021. 3. 2.
[드림코딩] CSS : em, rem / Responsive CSS Units 프론트엔드 필수 반응형 CSS 단위 EM과 REMCSS 기본 형태selector { property : value; } 절대적 사이즈 유닛 : pxpx : Pixels픽셀이란, 모니터위에서 화면에 나타낼 수 있는 가장 작은 단위고정된 사이즈라 컨테이너 사이즈가 바뀌어도 폰트사이즈 그대로. 컨테이너에 따라 사이즈가 바뀔 수 있도록 px대신 %로 설정하기도 한다. 상대적 사이즈 유닛 중 주로 쓰이는 유닛부모 엘리먼트 기준으로 사이즈 할당부모 무관하게 브라우저 기준으로 사이즈 할당 1. 부모 엘리먼트 기준 할당em (%도 마찬가지)부모 엘리먼트를 기준으로 상대적으로 사이즈 반영현재 지정된 폰트 사이즈를 나타내는 단위.동일한 font-size라도 폰트 종류에 따라 사이즈가 달라짐1em == 16px (기본 ht.. 2021. 3. 2.
[Git] Commit, Push 했는데 contribution이 안된다. 깃허브 잔디가 안 심어진다면? 커밋할 폴더로 들어가서 git bash를 실행시킨 뒤 깃허브와 동일한 계정정보로 git config를 재설정해줘야한다. git config --global user.name "myname" git config --global user.email "myemail@gmail.com" 이렇게 해준 뒤, Commit, Push해주면 Git hub contribution, 잔디심기가 진행된다. [Git] 깃허브 시작하기. 총정리 (init, add, commit, push, pull) 1. git bash 실행 후 이름, 이메일 입력 git config --global user.name "myname" git config --global user.email "myemail@gmail.com" 2. 저장소 설정 후.. 2021. 3. 1.
[드림코딩] CSS 기초 : padding, display, position, flexbox, justify, align 기본 사이트CSS 참고서 - CSS: Cascading Style Sheets | MDNstyle-rule ::= selectors-list { properties-list } ... where : selectors-list ::= selector[:pseudo-class] [::pseudo-element] [, selectors-list] properties-list ::= [property : value] [; properties-list] 아래 선택자, 의사 클래스, 의사 요소 목developer.mozilla.org기존 CSS 정리 목록CSS의 구성 모든 태그에 green 색상 적용하기 div태그는 빈박스라서 색상을 넣어도 반영이 되지 않는다.하지만 width, height를 지정하면 색상이 반영.. 2021. 3. 1.
[드림코딩][VSCODE] 추천하는 익스텐션 11가지 [Live Server] 작성 중인 html,css 코드가 즉각 반영되어 어떻게 수정되는지를 알 수 있다. 설치 해준 뒤 F1을 누르고 live server를 검색하여 실행하면 끝! [HTML to CSS autocompletion] VSCODE에서 html에서 사용한 class, id명을 효과적으로 css에 적용하기 위한 VSCODE 익스텐션 이걸 사용하면 초성만 써도 네임이 작동완성된다. 2021. 3. 1.
[드림코딩] HTML Emmet 문법 작성하기 div태그안에 ul태그 안에 li태그가 있는데 ol태그는 ul태그의 형제다.div>ul>li^ol div>header>(ul>(li>a)*2)^footer>pdiv>(header>ul>(li>a)*2)+footer>p p태그의 컨텐츠는 hellop{hello}hellop태그의 클래스 네임은 'class숫자' 이며 클래스네임은 'item숫자'. 1~5까지 총 5개를 만들어보자p.class${item$}*5 item1 item2 item3 item4 item5p태그에 더미용 텍스트를 넣자p>loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, eius, quos. Cumque dolorem veritatis non ipsa quasi d.. 2021. 3. 1.
[드림코딩] HTML 시작하기 기본 참고서 : developer.mozilla.org/ko/docs/Web/HTML HTML: Hypertext Markup Language | MDN 와 요소를 통해 외부 프로그램 없이 오디오와 비디오 미디어를 재생할 수 있습니다. HTML 요소는 공통 특성을 공유하는 요소끼리 묶는 콘텐츠 카테고리 한 가지 이상에 속할 수 있습니다. 콘텐츠 developer.mozilla.org ko.wikipedia.org/wiki/HTML HTML - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 최신 HTML 버전인 HTML5의 로고이다. 하이퍼텍스트 마크업 언어(HyperText Markup Language, HTML, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)는 웹 페이지를 ko.. 2021. 3. 1.
[장고 실전] 1. free bootstrap template 검색 bootstrapmade.com/bethany-free-onepage-bootstrap-theme/download/ Bethany - Free Onepage Bootstrap Theme | BootstrapMade Subscribe to our newsletter to receive notifications of new templates and updates! bootstrapmade.com 2021. 2. 27.
[VSCODE] Git Bash에서 바로 실행하기 VSCODE에서 실행하고자 하는 폴더로 이동 > 우측마우스 > Git Bash Here 클릭 code . 을 입력하면 VSCODE에 해당 폴더의 모든 파일이 들어간 채 실행된다. 참고 : irrationnelle.tistory.com/11 2021. 2. 27.
[Git] [rejected] master -> master 오류 해결 에러 발생 : [rejected] master -> master 원인 : Github의 원격 저장소와 로컬 저장소의 내용이 무관하기 때문 해결방법 : $ git pull origin master --allow--unrelated-histories git에서는 서로 관련 기록이 없는 이질적인 두 프로젝트를 병합할 때 기본적으로 거부하는데, 이것을 허용해 주는 코드 Git 설치 및 사용 방법 간단한 Git 설치 및 사용 방법 정리​Git 다운로드아래 링크로 접속하여 Download for Windows 클릭을 ... blog.naver.com 2021. 2. 27.
[Git] fatal: refusing to merge unrelated histories 해결 에러발생 : fatal: refusing to merge unrelated histories 해결 방법 : push 전에 먼저 pull을 해서 프로젝트를 병합해주면 해결 refusing to merge unrelated histories 만약 위 방법이 안된다면 하단 방법으로 진행 git pull origin 브런치명 --allow-unrelated-histories 브런치명이 master라면 하단을 입력 git pull origin master --allow-unrelated-histories 도움 : gdtbgl93.tistory.com/63 2021. 2. 27.
[Git 에러] fatal: couldn't find remote ref master 해결 git pull origin master를 입력했더니 다음과 같은 에러가 발생했다. 에러 : fatal: couldn't find remote ref master 원인 : Github의 기본 생성 브랜치 이름이 입력한 것과 달라서 나타난 것. 다시말해서 $ git pull origin master 에서 master가 아닌 다른 이름을 썼다는 의미다. 본인의 Repository로 가서 확인 후 name을 제대로 쓰면 된다. Branch Name 확인방법 Branch Name을 main이 아닌 master로 바꾸고 싶다면? 브랜치 페이지의 좌측 하단에 있는 펜모양을 클릭 이름을 바꿔주고 초록색의 Rename branch버튼을 눌러주면 끝! 수정 후 메인페이지에 나타난 창 도움이 되셨다면 하단의 ❤하트❤ 클릭.. 2021. 2. 27.
[Git] error: remote origin already exists. 오류 해결 에러 발생 : error: remote origin already exists. 해결 : $ git remote rm origin 참고자료 2021. 2. 27.
[VSCODE] Git Hub 커밋 중 오류 해결 Make sure you configure your 'user.name' and 'user.email' in git. 해결방법 : Git 초기설정이 안되어 있기 때문. git config --global user.name "myname" git config --global user.email "myemail@gmail.com" 을 입력해준다. 그럼에도 오류가 발생한다면 하단 자료를 보고 순서대로 따라하면 된다. 0ver-grow.tistory.com/835 깃허브 시작하기. 총정리 (init, add, commit, push, pull) 1. git bash 실행 후 이름, 이메일 입력 git config --global user.name "myname" git config --global user.em.. 2021. 2. 27.
[VSCODE] gitignore로 가상환경 제외하고 깃허브 커밋하기 (python, django, venv) express에선 다음과 같이 .gitignore를 통해 필요없는 파일들을 제외 시켰다. 1. express 시작하기 / .gitignore 설정방법 / 깃허브 커밋하기 npm을 설치해주자 npm init 이렇게하면 node_modules과 함께 package-lock.json, package.json이 설치된다. 그리고 npm install express 를 입력하여 익스프레스를 설치하면 package.json파일의 dependency에 expr.. 0ver-grow.tistory.com 그렇다면 django에선 어떻게 gitignore를 설정해야 할까? 홈페이지를 통해 쉽게 gitignore의 코드를 만들 수 있다. gitignore.io Create useful .gitignore files for.. 2021. 2. 26.
반응형

티스토리툴바