티스토리

Soon Li

검색하기

블로그 홈

Soon Li

moon-li.tistory.com/m

세상살이 이모저모 여행/개발/디자인/판매

구독자: 0

방명록 방문하기

728x90

반응형

주요 글 목록

그냥 개발 일기 (PC용 Todo-list 만들기 - 바닐라JS) 2 위치 서비스를 동의를 해줘야한다. "알람"뜸 추가 사항 작업완료 리스트 표시 function paintToDo(newTodo) { const li = document.createElement("li"); li.id = newTodo.id; const span = document.createElement("span"); span.innerText = newTodo.text; span.addEventListener("click",doneTodo); const button = document.createElement("button"); button.innerText = "❌"; button.addEventListener("click", deleteToDo); li.appendChild(span); li.app.. 공감수 0 댓글수 0 2023. 3. 26.
그냥 개발 일기 (PC용 Todo-list 만들기 - 바닐라JS) 완료된 기능 실시간 시간 표시 환영 로그인 기능 조언 랜덤 보이기 배경 이미지 랜덤 보이기 todo리스트 작성하기 현재 위치 확인기능 위치 기반 날씨 보이기 기능 위치 기반 온도 보이기 기능 진행 하려는것 멋찌게 CSS 하는것. 지금도 하는 중. 엉망진창 망창똥창 최대한 UI를 신경쓴다. 내가 업무할때 사용하기 위함으로 가장 효율적으로 디자인 해볼것 타이머 너무 밝음 -> 연하게 , 마우스 오버할때 밝게 보이기 날씨도 정보는 로딩할때마다 -> 30분 단위로 자동 업데이트 전체적으로 디자인 하기 좋아쓰 최상단에 명언 랜덤으로 나오기 하고 .... 다음 시간에 벌써 일요일 3시다.. 뭐가 바뀌었게.. 날씨쪽 이모티몬 추가 랜덤명언 자리잡고 기기별 사이즈 조절 하고 진짜 자러간다 이제 나머진 진짜 내일 어쨌든.. 공감수 0 댓글수 0 2023. 3. 26.
input box shadow (css) box-shadow: 5px 5px 10px rgba(38, 37, 37, 0.3); 조금 커스터마이징이 가능하다. 색깔에 rgb 대신에 rgba로 바꾸어서 전체적으로 그림자의 투명도를 조절해보았다. * rgba 는 4가지의 숫자가 들어가줘야 하며, 마지막 자리는 0~ 1까지 투명도를 조절하는 부분이다. 1에 가까워질 수록 투명도가 없다 제일 왼쪽에 5px는 우측으로 뻗어나오는 그림자 , 5px는 아래쪽 방향 ,10px는 블러 형태다. 블러 10px : 1px에 가까워질 수록 블러가 없는 깔끔한 면에 가까워진다. 공감수 0 댓글수 0 2023. 3. 25.
input box 투명도 주기 (CSS) 완전히 투명하게 하기 background-color: transparent; 색깔에 투명도 주기 (RGBA) {background-color: rgba(0, 0, 255, 0.3);} rgba가 색깔 + 투명도 조절이 표기된 방식 / 마지막 자리에서 투명도 조절을 함 0~1사이로 투명도 조절 가장 기본 색깔 식 1 {background-color: #0000ff;} /* blue */ 숫자 RGB값으로 표기 {background-color: rgb(0, 0, 255);} /* blue */ * 원하는 색상을 rgb 값을 찾고 , 코드 입력을 rgba로 해서 마지막 수에 원하는 만큼 투명도 조절 공감수 0 댓글수 0 2023. 3. 25.
날씨 API const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`; 이거는 그냥 복사각이다. 공감수 0 댓글수 0 2023. 3. 25.
Todo List 만들기 (JS) 전체코드 const toDoForm = document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); const toDoList = document.getElementById("todo-list"); function deletTodo(event){ const li = event.target.parentElement; li.remove(); } function paintToDo(newTodo){ const li = document.createElement("li"); const span = document.createElement("span"); span.innerText = newTodo; const butt.. 공감수 0 댓글수 0 2023. 3. 24.
Math.를 이용한 데이터 랜덤 소환 (JS) Math.floor(1.9) //내림 > 1 Math.round(1.5) //반올림 > 2 Math.cile(1.2) //올림 > 2 Math.random() //0~1 사이 >? Math.PI //파이 > 3.141592... Math.floor(Math.random() * 10) .. 활용. 데이터 랜덤 불러오기 (데이터 10개 예시) quotes[Math.floor(Math.random() * 10)]); 데이터의 수가 확인되지 않을때 .length 활용 [].lentgh => 길이를 확인가능 console.log(quotes[Math.floor(Math.random() * 10)]); => console.log(quotes[Math.floor(Math.random() * quotes.length).. 공감수 0 댓글수 0 2023. 3. 24.
타이머 초 두자리 만들기 + 숫자를 글자 화 하기 미니멈 두자리 가지기 (텍스트) > "1".padStart(2, "0"); "1".padEnd(2,"0"); 공감수 0 댓글수 0 2023. 3. 24.
타이머 만들기 function getClock() : 시간 나타내기 function getClock(){ const date = new Date(); clock.innerText = (`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`); // console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`); } 시간 : 분 : 초 타이머로 보이기 setInterval 활용 setInterval(getClock, 1000); 1초 마다 반복 표기 인터발되기 전에 먼저 타이머를 보여주기 getClock(); 만들었던 함수 먼저 실행 최종완성 const clock = document.quer.. 공감수 0 댓글수 0 2023. 3. 24.
setTiemout (함수 , 초 ) : 일정 대기시간 후 가동하기 몇초 있다가 함수가 발행하기 원할때 사용 setTimeout(sayHello, 3000); sayHello는 임의로 만든 함수 sayHellow 임의 함수 function sayHello(){ console.log("3초"); } console 결과 더보기 함수는 자동으로 계속 실행이 되기 때문에 원하는 시간 뒤에 가동되길 원할때 이용할 수 있다. 공감수 0 댓글수 0 2023. 3. 24.
setInterval(함수, 초) : 계속 로테이션 가동 기본 디폴트 HTML HTML 00:00 기본적으로 h2 태그에서 id를 clock 으로 주고 디폴트값을 00:00 으로 한다 intaval JS function sayHello(){ console.log("5초"); alert("hello"); } 우선 함수를 하나 만든다. 콘솔로그 찍는거랑, 알람설정 setInterval(sayHello, 5000); 그리고 인터벌 5초로 셋팅 결과 5초 뒤에 알람과 콘솔이 찍힌것을 확인할 수 있다. 공감수 0 댓글수 0 2023. 3. 24.
[html/css] 디스플레이 블록(block)과 인라인(inline) 속성 과 인라인블록 및 플로트에 대하여 display 값이 block 인 것 , ,..., 위에서 아래로 차례대로 배치되는 요소이며, 크기를 지정할 수 있다. display 값이 inline인 것 글을 쓰는 방향으로 줄이 바뀌면서 배치된다. 블록과 달리 크기를 지정할 수 없다. (이미지는 예외) inline-block inline처럼 배치되지만 블록처럼 크기를 가지고 싶을 때 사용하는 속성 display: inline-block; Float 속성 플로트 속성은 요소를 페이지 왼쪽이나 우측에 배치하고 그 주변으로 인라인 요소들을 배치할 수 있게 한다. float: right; 블록, 인라인블록, 인라인 비교 공감수 0 댓글수 0 2023. 2. 3.
[html/css] box size와 border에 대해 box-size width = "300"px 라 하면 어디까지 영향을 미칠까? 우리는 보통 태그를 이용할때 흔히 div 영역을 생각을 한다. 하지만 width의 경우 content 사이즈에 적용이 되어 작업 이후에 UI 사이즈가 padding 값과 border 값에 따라 더 커져있는 경우가 생긴다. 이럴땐 width 값을 우리가 생각하는 테두리 영역까지 지정할 수 있는 코드를 적용하면 된다. box-sizing: border-box; width 아래에 다음과 같은 코드를 적용해 두면 알아서 컨텐츠 사이즈가 조절이된다. border 속성 굵기 - 선 종류 - 색깔 border: 2px solid #ededed; /2px 굵기, 일반 선, #ededed색깔 적용 보드 선 종류 solid , dotted : .. 공감수 0 댓글수 0 2023. 2. 3.
[html/css] 이미지 가로 스크롤 응용 박스를 넘어선 텍스트를 박스에 집어넣는 방법으로는 hidden 과 scroll 이 있었다. 이 부분을 이용하여 이미지 가로 스크롤 만들기 이런식의 그림 배열 형태를 이렇게 가로로 나열 되게 white-space: nowrap; / 줄바꿈 없에기 이것만 적용이 되면 그림을 옆으로 움직일때 화면 전체가 같이 따라 움직인다. 그림 부분만 옆으로 넘겨 보려면 , 스크롤 기능이 들어가면된다. overflow: scroll; 텍스트에도 적용이 가능하고, 이미지에도 적용이 가능함. 다양하게 응용하여 사용할 수 있다. 공감수 0 댓글수 0 2023. 2. 3.
[HTML/CSS] 박스안에 글자가 넘칠때 hidden 또는 스크롤 텍스트가 박스에서 흘러넘칠 때는 overflow 속성 Hidden 박스 넘어가는 글자는 숨기기, 자르기 overflow: hidden; Scroll 항상 스크롤 하기 overflow: scrollo; Auto; 박스만큼 숨기고, 넘치면 스크롤 적용 overflow: auto; 가로 스크롤 overflow 와 함께 쓴다. white-space:nowrap; / 긴텍스트는 옆으로 스크롤이 되어 줄바꿈이 안되게 함 공감수 0 댓글수 0 2023. 2. 3.
HTML / CSS 기본 HTML ~ 영역은 사이트 정보 영역 한글등 기본 표준 인코딩이 가능한 메타 태그 외부 소스 연결 하이퍼링크를 연결한다. 이미지 태그 이미지 속성을 연결한다. font-family : 여러 폰트를 지정할 수 있다. 첫 순서 부터 먼저 대응 - 영어밖에 지원이 되지 않는 폰트일 경우 앞에 1 폰트 뒤에 2폰트 ,3 폰트 식으로 나열할 경우 1폰트가 지원이 되지 않으면 2폰트를 적용 2폰트도 없는 환경에서는 3폰트를 적용 하는 식으로 ~ 구역 ~ 문단 html 내 스타일 태그는 영역에서 태그로 적용 CSS text-align 텍스트 정렬 font-size 폰트 크기 : px 단위 , em , rem 등이 있음 font-weight 폰트 굵기 : 100~ 900 width 넓이 ma.. 공감수 0 댓글수 0 2023. 2. 3.
반복문 기초 점점점 어지럽다. .. 아직 기초인데 반복문은 for 을 쓰나보다 그 안에서 i를 정의 한다. 연결 구조에는 ; 를 쓰나보다 그럼 이어서 .. i는 0인데 10까지 작고 하나씩 차례대로.. 좋아 이제 반복문과 리스트를 섞어보자 아마 이부분이 많이 응용될 것같은 느낌이다. 리스트의 길이 , 갯수를 알기 위해서는 .length로 단순 갯수 확인 리스트를 다 끄집어 내고 싶다 할때 .. 리스트를 꺼내보자 줄줄 나열을 원한다 리스트에서 첫번째는 0번째다 !! for (리스트 맨 앞에서 부터 ; people 사전에 담겨있는 길이까지 ; 하나하나씩 순서대로 ) 를 { 찍어봐라 people 사전에서 , [ 그 안에 값 순번을 i로 ] } 자... 그래서 이제 스코어를 기록하고 전체 사람과 스코어를 불러보고 조건문을 .. 공감수 0 댓글수 0 2021. 8. 24.
조건문 기초 let age =15 의 결과는 그럼 다시 let age = 21은 ? 함수를 보면 많이 헷갈리는데 엑셀 함수다 라고 생각하면 조금 편안해짐 .. && = and || = or == = 같으면 if = 만약에 , else = 아니라면 ..그사이에 또 조건을 더할때에는 else if 이번에 7~20 사이 값은 콘솔에 보이도록 했다. 콘솔에 바로 찍어서 보이는 건 console.log 공감수 0 댓글수 0 2021. 8. 24.
변수, 자료형 기초 변수 let a = 3 a+ 3 = 6 let first_name = 'moon' let last_name = 'Lee' first_name + last_name 'moonLee' let 은 명령 , 정의 * 문자열은 '' 또는 ""를 붙여서 적는다. 자료형 리스트 자료형은 순서가 중요 사용은 [] 이것을 사용한다 1. list let a_list = ["수박","참외","딸기"] 로 리스트를 정의한 뒤 a_list = [1] 이런식으로 불러온다. 그럴때 답은 "참외" *리스트의 순서는 0 부터 시작!! a_list = [0] 으로 불러왔다면 답은 "수박"이 될것이다. 1) 리스트 추가하기 a_list.push('감') => a_list = ["수박","참외","딸기","감"] 이 된다. 2. dict .. 공감수 0 댓글수 0 2021. 8. 24.
css 박스 테두리 관련 구글링이 먼저다. 꾸며져 있는 부트스트랩을 이용하는것도 좋은데 그것도 내입맛에 완벽히 들어맞지는 않다. 그럴때엔 조금의 수정이 필요한데 .. 내머리속에는 사전이 없다. 그럼 가장 중요한건 구글링 !! 예를들어 테두리 (border)에 대하여 알아보고싶다 . CSS border w3shools 또 css border mdn (공식문서) 참조하자아!!! 공감수 0 댓글수 0 2021. 8. 24.
부트스트랩 - 폼 만들기 이런 모양은 부트스트랩에 "forms"에 들어가서 사용 !! 여기서도 보면 무조건의 복붙은 아니다 .. 여기에 보이는 을 로 바꿔 사용하기~!!! 또한 갖가지 여러 유형이 박스들을 볼 수 있는데 내 입맛데로 골라 쓰면 된다. 공감수 0 댓글수 0 2021. 8. 24.
부트스트랩 이용하여 꾸미기 https://getbootstrap.com/docs/4.0/components/alerts/ Alerts Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. getbootstrap.com 자 이제 내가 원하는 스타일을 빠르게 끌고와서 적용하기 !!를 위함이라 반응 하는거, 동작, 컬러, 모양 등 머리 아프게 일일이 짤 필요가 없다 내 마음에 드는것을 골라서 들고오면 된다 !! 그런데 그전에 ~~~ 부트스트랩 시작 템플릿을 깔아놓고 ~~~~!!! (약간 백과사전을 들고오는듯한 느낌) 이걸로 시작해보죠! 공감수 0 댓글수 0 2021. 8. 24.
코딩 주석 입력하기 " 사람은 읽지만 컴퓨터 너는 읽지마!!" 용도 또는 나는 "비공개 처리" 라고 생각하면 이해가 빠를듯 하다 어떠한 일부 연습용이든, 실험용이든, 테스트 용이든 적어놓은 코딩을 지우는 것이 아니라 잠시 적용안되게 비공개 처리를 하고 싶다 !! 그럴땐 해당 코딩 부분을 드래그 한 후 윈도우 : crt + / 맥 : command + / 다시 돌리기 는 해당 부분 드래그 후 다시 command + / (참고로 나는 맥 유저라 커맨드로) ps. 적용되는 부분을 확인하고 지우고 할때 용이할듯 공감수 0 댓글수 0 2021. 8. 23.
구글 폰트 적용하기 https://fonts.google.com/?subset=korean Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 구글 폰트중에 내가 원하는 폰트를 결정 한 뒤 + Select this style 을 클릭 우측 링크 부분 안에 내용을 복사 한다 아래에 붙여넣기 !! 전체 텍스트에 적용할 경우 태그 내에 *{ } 이렇게 css 코드를 넣어주면 전체적용!! 공감수 0 댓글수 0 2021. 8. 23.
html_ div 안에 크기 여백주기 1. 안으로 여백 padding 2. 밖으로 여백 margin 1) 시계 방향으로 위, 오른쪽 , 아래, 왼쪽 형태로 사이즈를 줄 수 있다. - 예 : margin : 20px 0 px 0px 100px; 2) top, left, bottom 형태로 마진을 일일이 줄 수도 있다. - 예 : margin-top / margin-bottom *주의 박스의 여백을 주는데 버튼안에 글이 들어가있는 경우는 박스로 보지 않고 글의 속성이 많아서 가로의 중앙 위치 등의 명령등이 먹히지 않는다. - 예 margin : auto; 그럴 경우 글속성을 하나의 박스 속성으로 만들어주는 명령어가 있다 display: block; 이부분만 삽입해주면 박스나 그림과 같이 정렬 명령이 먹히게 되어있다. 공감수 0 댓글수 0 2021. 8. 23.
html 이미지 셋트 background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg"); background-size: cover; background-position: center; 이미지를 넣는다 이미지가 일부분만 놔와서 전체를 보이게 하는것은 cover 그래도 중앙정렬을 맞추기 위해서 쓰는건 center 공감수 0 댓글수 0 2021. 8. 23.
html 기본요소 나는 구역을 나누죠 나는 문단이에요 bullet point!1 bullet point!2 h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요. h2는 소제목입니다. h3~h6도 각자의 역할이 있죠. 비중은 작지만.. span 태그입니다: 특정 글자를 꾸밀 때 써요 a 태그입니다: http://naver.com/"> 하이퍼링크 img 태그입니다: https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /> input 태그입니다: button 태그입니다: 버튼입니다 textarea 태그입니다: 나는 무엇일까요? 공감수 0 댓글수 0 2021. 8. 23.
웹사이트 제작 준비 1. 파이참 프로 다운로드 링크 https://www.jetbrains.com/pycharm/download/ Download PyCharm: Python IDE for Professional Developers by JetBrains Download the latest version of PyCharm for Windows, macOS or Linux. www.jetbrains.com 2. 젯브레인 회원가입 링크 https://account.jetbrains.com/login JetBrains Account account.jetbrains.com 3. 파이참 라이센스 코드 받기 http://spartacodingclub.shop/pycharm_license 스파르타코딩클럽 | 파이참 라이센스 코드 확인.. 공감수 0 댓글수 0 2021. 8. 23.
html/css/jb #html 뼈대 : 큰 글자 옆에 -> 찾기 박스 옆에 -> 돋보기 밑에 이미지 밑에 텍스트 나열 등등 #css 꾸미기 : 폰트, 색깔, 크기, 사이즈 등 #jb 동작 : 위로 몇분동안 움직이기 , 옆으로 움직이기 팟 하고 나타나기 등 공감수 0 댓글수 0 2021. 8. 19.

728x90

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.