말줄임 효과를 통해 글씨를 안보이게 하거나 말줄임표를 표시하여 주는 효과입니다. 한 줄 효과 예시) 동해물과 백두산이 마르고... /* CSS */ .ellipsis1 { width:100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 두 줄 효과 예시) 동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리나라 만세... /* CSS */ .ellipsis2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } 세 줄 효과 예시) 동해물과 백두산이 마르고 닳도록 하..

HTML+CSS 코딩연습 세번째: 메가박스 영화사이트 클론코딩 사용언어 : HTML, CSS, JavaScript 작업기간 : 2021.03 (2주) 참조 : WEBSTORYBOY wtss.tistory.com/category/SITE/03%20MEGABOX 비고 : - [ Sample Image ] 이미지를 클릭하시면 사이트로 연결됩니다. [ Source Code Download ] 아래 링크를 통해 소스코드를 다운받으실 수 있습니다. github.com/ywc1085/Meboxbox_Website_clone_coding ywc1085/Meboxbox_Website_clone_coding 메가박스 사이트 클론코딩하기. Contribute to ywc1085/Meboxbox_Website_clone_co..

장고로 프로젝트 만드는 순서 1. 파이참 프로젝트 만들기 2. 장고 설치 3. 장고 프로젝트 만들기 4. 설정하기 (데이터베이스, S3) 5. 데이터베이스 초기화 6. 관리자 계정 만들기 ----- 7. 앱 만들기 8. 모델 설계 (데이터베이스) ----- 9. 뷰 만들기 (기능,계산) 10. 템플릿 만들기 (화면에 표시될 내용, 양식... HTML, CSS 등) 11. URL 만들기 (대표적인 기능(화면) : CRUD -> Create, Read, Update, Delete) 깃허브 프로젝트 repository 만들기 Create a new repository : Github 사이트 or 데스크탑 어플을 통해 새로운 프로젝트 저장소 생성 .gitignore : 깃으로 버전을 관리하지 않을 폴더와 파일 ..

Django 공식사이트 튜토리얼 따라하기 #1 파이썬 웹개발을 하기 위해서는 프레임워크중 장고와 플라스크에서 선택을 해야하는데 여러 문서들에서 장고를 많이 추천하는듯 하여 장고를 한번 배워보려고 작정... 더딘 속도일것이 뻔하지만 한번 로그를 남겨보면서 배워보려고 합니다... 우선 가이드가 필요할것 같아 유튜브에서 딱 맞는 무료강의가 있어 강의를 따라하며 감을 잡는 것이 목표!! 유튜브 - 명준MJ : python django tutorial 강좌 강의 스피드는 생각보다 빨라 영상을 계속 정지해가면서 코드를 따라가기에 바쁘니 이점 참고... 1. python 설치 www.python.org/ Welcome to Python.org The official home of the Python Programmi..

텍스트가 넘칠때... text-overflow CSS의 속성 세트가 숨겨진 오버 플로우의 콘텐츠에서 문자열이 넘치는 현상을 다음과 같이 정리할 수 있다. (이 text-overflow의 속성은 인라인에서 블록 컨테이너 요소를 넘쳐나는 콘텐츠에만 영향을 준다.) text-overflow: clip; /* 컨텐츠 영영의 한도에서 텍스트를 자르기 때문에 문자 중간에서 잘릴 수 있음 */ text-overflow: ellipsis; /* 잘린 텍스트를 줄임표 (...)로 표시하여 줌 하지만 줄임표를 표시할 공간이 없으면 역시 잘림...*/ text-overflow: "-"; text-overflow: ""; 텍스트가 컨테이너를 넘치게 하려면 다른 CSS 속성을 설정하도록 한다. overflow: hidden; ..

패딩값과 보더값을 포함시키는 box-sizing 모든 요소는 margin, norder, padding 값을 가지고있다. 즉, width값과 height값을 가지고있다 따라서 기본적으로 요소의 가로값과 세로값은 object + margin + padding + border box-sizing 속성은 패딩과 보더의 포함여부를 설정 a {box-sing: border-box;} /* width값 안에 padding과 border값을 포함. */ a {box-sizing: content-box;} /* width값 안에 padding과 border값을 불포함. */ * box-sizing은 반응형 작업시 %와 px를 같이 쓸 경우 용이. * 처음 reset.css 설정시 box-sizing: border-bo..

인라인 요소 중앙정렬 방법 한줄 요소일때 height값과 line-heigh값을 같이 사용하면 중간에 오게 할 수 있음. (많이 쓰는 방법은 아님...) // HTML center // CSS .center { text-align: center; height: 100vh; line-height: 100vh; } .center span { display: inline-block; width: 100px; height: 100px; background-color: #fff; border-radius: 50%; text-align: center; line-height: 100px; } 블록 요소 중앙정렬 방법 블록요소 양쪽에 auto값을 주면 가운데 정렬이 가능. // HTML center // CSS .ce..

파일폴더에 있는 파일의 갯수를 세는방법 const fs = require('fs'); const dir = './directory'; fs.readdir(dir, (err, files) => { console.log(files.length); });

현재날짜와 요일, 그리고 매초 갱신되는 시계 만들기 물론 CSS로 디자인을 정리해 줘야 하지만, 위와 같은 시계를 만드는 코드 CSS로 디자인을 정리안해주면 걍 어글리 텍스트임.... const clockContainer = document.querySelector(".js-clock"), dateTitle = clockContainer.querySelector(".currDate"), clockTitle = clockContainer.querySelector(".currTime"); function getDate(){ const date = new Date(); const week = new Array ('[일]','[월]','[화]','[수]','[목]','[금]','[토]'); const year ..

inline 미니 조건문 템플릿 리터럴 등에서 간단하게 조건문을 추가하고 싶을때 유용한 조건문 문법은 다음과 같다. 조건문 ? true일때 실행문 : else일때 실행문 예시) clockTitle.innerText = `${seconds < 10 ? `0${seconds}` : seconds}`;