분류 전체보기
-
[CSS] 나를 괴롭혔던 CSS Box model, Good Bye: Position, DisplayLanguage/HTML&CSS 2022. 10. 18. 18:54
사전스터디 기간 동안, CSS...는 늘 나를 괴롭혀왔다. box-model 에서, HTML 요소는 요소별로 고유의 레벨이 존재하는데 그 레벨의 특성을 무시한 채 css 작업을 하니 삽질의 연속이었다. 아래 내용을 다시 학습 하고 난 후, "아 왜 안돼!!!" 라며 짜증이 났던 한 순간이 떠올라 얼굴이 화끈거렸다. 그 이유는, 자판기 커피 머신에 대고 드립커피 왜 안나와! 라고 짜증내는 것과 같은 격인데 inline 요소에 패딩값 줘놓고 왜 안바뀌냐며 짜증이 났던 것이다... 정확히는, inline 요소에 패딩 값을 지정할 수는 있다. 하지만 그 요소 위와 아래에 block 요소를 배치해보면 레이아웃이 겹치게 된다. 그 이유는 inline 요소가 height를 가지지 않기 때문이다. 블록의 경우 heig..
-
HTML 문서에 이미지를 삽입하는 방법 2가지Language/HTML&CSS 2022. 10. 18. 10:21
1. HTML 문서에 이미지를 삽입하는 방법 1. HTML 태그를 삽입하는 방법 2. CSS의 backgound-image 속성으로 이미지를 삽입하는 방법 우리에게 주어진 선택지는 2가지, 그렇다면 어떤 방법을 언제 사용할지 선택하는 기준은 무엇일까 궁금했다. 일단 둘의 차이를 보자면, 1. HTML태그는 HTML문서에, CSS는 CSS문서에 담는다. 2. 웹브라우저는 HTML 태그는 태그에 담긴 내용(정보)은 정보로 인식하지만, CSS 문서는 정보로 인식하지 않는다. 일단 두 방법에서 가장 큰 차이는 사용 목적이다. 따라서 HTML의 역할은 이 웹문서가 어떤 구조로 어떤 정보를 담고있는 문서인지를 설명하는 것이고 CSS는 그 문서를 보기 좋게 다듬어주는 역할을 한다. 여기서 차이가 생긴다. 그래서 본래..
-
[노마드코더] 바닐라JS로 크롬 앱 만들기 - #3. TodolistProject 2022. 10. 14. 19:36
이 부분은 지식적인 내용보다 깨달은 내용들에 대한 회고를 주로 하고자 한다. 3. TODOLIST 3.1 회고 todolist 기능을 구현하는데 꼬박 2일정도 걸렸다. 중간에 도저히 어려워서 이 부분만 따로 강의를 다시 듣고 코드를 작성했다.(보고 따라치지 않고 니코가 코드를 작성하는 맥락을 파악하려고 노력했다.) 결국 어렵고 장황하게라도 기능 구현에는 성공했지만 고군분투 하고 나서 느낀 점들이 앞으로 프로그래밍 할 때 굉장히 중요한 관점이 될 것 같아서 따로 메모해둔다. 이런 것이 부족했다. 보통 글을 쓸 때, 개요를 먼저 잡고, 개요마다 소제목들을 붙인다. 그리고 이 틀을 바탕으로 글을 써내려간다. 글이 완성되면 개요에 맞게 잘 썼는지 퇴고하는 과정을 거친다. 프로그래밍도 글쓰기와 비슷한 것 같다. ..
-
[노마드코더] 바닐라JS로 크롬 앱 만들기 - #2. LoginProject 2022. 10. 13. 17:28
2. LOGIN 2.1 회고 - 노마드코더 강의에서 로그인 기능은 백앤드 서버를 구축하지 않고 진행한다. 대신 localStorage(web api)의 도움을 받아 서버에 따로 저장하지 않고 웹 브라우저에 저장된 데이터를 활용한다. 개인적으로 백앤드 서버를 간단하게라도 구축해서 구현하는 방법을 알고 싶었지만 그럴 수 없어서 아쉬웠따! - 강의에서 한것 외로 log-out 기능을 구현했는데 todolist가 있는채로 로그아웃하면 html에 목록이 그대로 남아있는다 ㅠ 로컬스토리지랑 메모리가 비워지는데 html이 왜남는건지... 이걸 해결하는 것이 추후 과제다! 이것만 끝내면 css작업하려고한다. - 로그아웃 버튼을 누르면 todolist로 추가된 html 있는 요소를 없애기 위해서 오만가지 뻘짓을 했는데 ..
-
[노마드코더] 바닐라JS로 크롬 앱 만들기 - #1. Javascript on the BrowserProject 2022. 10. 12. 00:50
1. The Document Object 1.1 document object html과 js가 연결되면 js는 html에 접근하고 읽고 변경할 수 있도록 document라는 object를 자동 생성한다. 이 객체를 활용해 우리는 javascript를 활용해 html에 새로운 태그를 추가하거나 수정, 삭제, 식별자 부여 등의 작업을 할 수 있다. 정적 기능을 구현하고자 한다면 굳이 js를 활용할 필요는 없어보인다. The Document Object When an HTML document is loaded into a web browser, it becomes a document object. The document object is the root node of the HTML document. The ..
-
JavaScript 100제 오답노트 26번_행성문제 2Language/JavaScript 2022. 10. 6. 00:59
JEJU CODING BASE CAMP - CODE FESTIVAL JavaScript 100제 26. 행성 문제2 우리 태양계를 이루는 행성은 수성, 금성, 지구, 화성, 목성, 토성, 천왕성, 해왕성이 있습니다. 이 행성들의 영어 이름은 Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune입니다. 행성의 한글 이름을 입력하면 영어 이름을 반환하는 프로그램을 만들어 주세요. //문제 답안 const planets = { '수성' : 'Mercury', '금성' : 'Venus', '지구' : 'Earth', '화성' : 'Mars', '목성' : 'Jupiter', '토성' : 'Saturn', '천왕성' : 'Uranus', '해왕성' : 'N..
-
[MAC] 캡스락 대문자 기능 끄기 by. Karabiner-Elements, BTT기타 2022. 10. 5. 01:13
맥북에서 영문 타이핑 하다가 한글 타이핑하려고 캡스락을 눌렀는데, 대문자를 계속 입력하는 상태로 되면 정말 짜증이 납니다. 이 모드를 풀려면 캡스락을 2초 정도 계속 눌러주거나 ctrl + space를 눌러줘야 하거든요. 이게 귀찮고 타이핑 시간을 잡아먹습니다. (코딩할 때는 주로 영문을 사용하기 때문에 불편하지 않을 수 있겠지만) 어쨌든, 이 문제를 해결하고 싶어서 여기저기 찾아보다가 이런 글을 보았습니다. 출처 : https://cafe.naver.com/inmacbook/2328279 이 글은 우측 커맨드 키에 한영키 기능을 추가하는 방법이었는데요. 윈도우 키보드에 익숙하신 분들은 위의 셋팅들을 참고하시면 바꾸실 수 있겠지만 저는 이미 맥에 익숙해져서 이 방식이 불편했습니다. 그리고 캡스락을 길게 ..
-
[생활코딩] Home ServerServer 2022. 10. 1. 04:32
HOME SERVER ※ 주의사항 본 내용은 생활코딩 유튜브 채널의 WEB2-Home Server 강의를 듣고 제가 나름대로 이해한 내용을 잊지 않기 위해 기록한 것입니다. 따라서, 여기에 담긴 정보는 적확한 정보가 아닐 수 있으며 수많은 개념들을 후려친 설명일 수 있으니 생활코딩 강의를 통해 학습하실 것을 권합니다. 1. Router 라우터는 우리가 집에서 사용하는 공유기이다. 인터넷은 컴퓨터들을 관계짓는(네트워킹) 기술이다. 누군가와 관계를 맺을 때 통성명을 하듯, 컴퓨터도 외부의 컴퓨터와 네트워킹 하기 위해서는 서로를 부를 이름이 필요하다. 그 이름을 우리는 IP(Internet Protocol)이라고 한다. 즉, 인터넷 환경을 사용하기 위해서 모든 컴퓨터(기기)는 IP 주소를 가져야한다. 라우터는..
-
JavaScript 100제 1부 오답노트 (1~20)Language/JavaScript 2022. 9. 30. 20:23
JEJU CODING BASE CAMP - CODE FESTIVAL JavaScript 100제 1부 8. 객체의 키 이름 중복 자바스크립트 객체를 다음과 같이 만들었다. 출력값을 입력하시오. (출력값은 공백을 넣지 않습니다. ) var d = { 'height':180, 'weight':78, 'weight':84, 'temperature':36, 'eyesight':1 }; console.log(d['weight']); -> 객체의 키 값이 중복되었을 경우, 마지막 키의 값을 가져온다. 따라서 출력값은 84이다. 9. concat을 활용한 출력 방법 다음 소스 코드를 완성하여 날짜와 시간을 출력하시오. var year = '2019'; var month = '04'; var day = '26'; va..
-
자기소개 페이지 CONTACT 메시지 보내기 기능 - Google Apps Mail, 정적 HTML FormProject 2022. 9. 30. 18:51
자기소개 페이지에서 contact 메시지 보내기 기능을 구현하기 위해 유튜브, 구글링으로 node.js, aws, mySQL 관련 내용들을 따라하며 시행착오를 겪었다. 그 결과가 성공이었든 실패였든 블로그에 글을 남기면 피와 살이 되리라 생각하고 무작정 덤벼들었지만... 일단 결과는 실패였고 "왜 실패 했는가?"를 알 수 없어 결국 블로깅하기도 실패했다 ㅠㅠ... vscode로 커밋하기, 터미널 명령어 등등 곁가지 잡지식들만 습득하고.... 중요한 내용은 배우지 못한 것 같아 "무엇을 블로그에 남길 것인가?"도 잘 모르겠다.. ㅋㅋ 그래서 대안으로 Google Apps Mail을 활용하여(백앤드 필요없는) 기능을 구현했다. 이 기능을 구현하는데 참고한 자료는 아래 링크이다. 출처 : https://vel..