오늘도 디벅잉

강의 내용 (무료) 바닐라 JS로 크롬 앱 만들기 (Momentum) 바닐라 JS로 그림판 만들기 한줄 요약 JS 입문자들에게 강추! 추천 대상 1. HTML, CSS를 학습한 프로그래밍 입문자 2. 인터넷 강의를 집중해서 들을 수 있는 사람 3. 과제가 주어지면 더욱 열심히 하게 되는 사람 (챌린지 참여시) 총평 드디어 자바스크립트! 자바스크립트를 통해 HTML, CSS를 조작하고, 데이터를 다루고, API를 활용하는 작업이 흥미로웠다. 우리가 많이 사용하는 Momentum 이라는 크롬 앱을 카피해 봄으로써 앞으로의 학습에 대한 자신감이 붙는다. 코코아 클론 챌린지에 이어 JS 챌린지도 아자아자@🐱‍🏍

코코아 클론 강의를 들으면서도 많은 학습이 되었지만 챌린지에 참여하지 않았다면 능력을 끌어올리기 힘들었을 것 같다 챌린지에 참여하면서 좋았던점을 꼽아보자면 2가지가 있다 첫번째 스스로 코드를 짜는 연습을 할 수 있었다 챌린지 과제를 마주하고, 고민하고, 찾아보고, 코드를 작성하는 시간들로 한단계 성장할 수 있었다 두번째 이유는 다른 사람들의 뛰어난 결과물을 보면서 자극을 받을 수 있었다 좌절할 필요는 없을 것이다 노마드코더에서 강의를 듣고 챌린지에 참여하는 과정을 통해 충분히 성장할 수 있을 것 같다 '아름다운' 코드를 짜는 '아름다운' 프로그래머가 되는 그날까지 파이팅 :D

1. HTML element 배경에 이미지 넣기 css에서 background-image 관련 property를 활용하면 배경을 이미지로 대체할 수 있습니다. background-size: cover; => 이미지의 비율을 유지한 채로 제일 크게 설정합니다. 이미지의 크기가 요소를 초과하면 이미지를 잘라내어 빈 공간이 생기지 않도록 합니다. background-position: center; => 이미지를 가운데 정렬합니다. 2. position: absolute에서 화면 중앙에 배치하기 부모 요소의 좌측 또는 상단에서 50% 만큼 띄운 후에 해당 요소의 좌표값을 50% 만큼 되돌립니다. 3. pseudo selector BEM으로 클래스가 난무하는 것이 싫을 때는 pseudo selector를 잘 활용..

한줄 요약 HTML 및 CSS 재밌게 학습 가능, 강추! 추천 대상 1. 프로그래밍 입문자 2. 인터넷 강의를 집중해서 들을 수 있는 사람 3. 과제가 주어지면 더욱 열심히 하게 되는 사람 총평 프로그래머로서의 주력 스킬을 선택하기 위해 Front-end 부터 Back-end 까지 전체를 훑어보는 과정을 시작하는 첫번째 학습이었다. 클론코딩으로 학습하니 확실히 흥미가 붙는다. HTML과 CSS만으로도 재밌는 화면구성이 가능하다는 점이 특히 흥미로웠다. 역시 기초를 무시할 수 없겠다. 클론코딩의 단점은 학습 이후에 혼자 해보려고 할때 막막해진다는 것이다. 그래서 중요하다고 생각하는 부분은 한번이라도 복습해가면서 학습해 나갔다. 오늘부터 챌린지가 시작되었다. 챌린지란 노마드코더에서 제공하는 강의의 추가 코너..

⚔️지속 업데이트 예정입니다⚔️ 폰트 https://fonts.google.com/ 아이콘 https://fontawesome.com/ https://heroicons.dev/ CSS BEM-like Naming https://cssguidelin.es/#bem-like-naming CSS 그림자 효과 샘플 https://getcssscan.com/css-box-shadow-examples 이미지 랜덤 이미지 받아오기 - 크기 설정이 필요한 경우 URL 뒤에 추가 (ex: /800*600) https://source.unsplash.com/random

CSS 기본 설정 :root - 자주 쓰는 CSS 내용 전역변수 설정 Reset CSS 2.0 - HTML 기본 특성들 없애고 시작하기 BEM (Block Element Modifier) __ : element -- : modifier https://cssguidelin.es/#bem-like-naming CSS Guidelines (2.2.5) – High-level advice and guidelines for writing sane, manageable, scalable CSS CSS Guidelines is a document by me, Harry Roberts. I am a Consultant Front-end Architect from the UK, and I help companies al..

HTML - CSS - JavaScript 관계 HTML - CSS - JavaScript 셋의 관계에 대한 설명을 듣다보니 건축 3대 요소 구조 - 미 - 기능의 관계가 떠올랐다. 웹페이지의 콘텐츠를 구성하는 HTML은 건축의 뼈대가 되는 구조(Structure)와 닮았고, 콘텐츠의 색상, 크기 등 외형을 꾸미는 CSS는 건축에서의 보여지는 아름다움(Beauty)과 의미가 통하며, 동적인 기능을 가능케 하는 JavaScript는 건축의 기능(Function)과 의미가 통한다고 느꼈다. HTML = Structure CSS = Beauty JS = Function 요소(Element)의 닫는 태그(Closing Tag)가 /element 인 이유 HTML에서 닫히는 요소(element)들은 /blabla..

아래 코드를 실행하면 23번째 행(Scraper.scrape())에서 다음과 같은 에러가 발생한다. TypeError: scrape() missing 1 required positional argument: 'self' self 키워드를 매개변수로 받는 메소드는 객체를 통해서 호출해야 한다. 클래스 이름으로 직접 호출시 self 매개변수가 전달되지 않는다. # 참고자료 : 프로그래머 첫걸음 (코리 알트호프 / 한선용 / 한빛미디어)

1. 파이썬에서 연산을 수행하기 위해서는, 피연산자가 연산에 사용될 매직메서드를 포함하고 있어야 한다 (예시 : 더하기 연산을 수행하고 싶음 → 더하기할 각 피연산자는 """__add__""" 메서드를 포함해야 함) 2. 매직메서드 """__repr__"""은 파이썬 클래스가 기본적으로 상속하는 Object 클래스로부터 상속받은 것이다. 해당 객체를 출력하면 """__repr__"""을 호출하고, """__repr__"""에서 return 값으로 정의한 내용을 출력한다.

※ 참고영상 : https://www.youtube.com/watch?v=jpmL9YcXjhg&list=PLa9dKeCAyr7iWPMclcDxbnlTjQ2vjdIDD 파이썬을 학습하다 보면 '__name__', "__main__" 으로 표현된 코드를 종종 마주합니다. __name__ 변수에는 "__main__" 이 들어가거나 "모듈의 이름" 이 들어가거나 둘 중 하나입니다. 파이썬 인터프리터가 최초로 실행한 파일일 때 __name__변수에 "__main__"이 들어가며, 이는 프로그램의 시작점(entry point)이라는 뜻입니다. if __name__ == "__main__" 조건문을 통해 현재 파일이 시작점인지 모듈인지 판단할 수 있고, 시작점 또는 모듈로 사용할 경우에만 실행되는 코드를 작성할 수 ..