Bear_V, hello world!

이번에는 허접하지만 YouTube 클론 코딩을 도전해보았습니다. 아직 코딩 실력이 부족하지만 그래도 한번 도전해보았습니다. 동영상은 와이프가 운영중인 뮤직스튜디오 영상을 넣었구요(깨알광고 ㅎㅎ) 나머지 내용들은 그냥 구글에 보이는대로 긁어와서 넣어보았습니다. 많이 허접하지만 만들어보고, 이정도 까지 만들 수 있는 자신을 보고 나름 만족하였답니다. 다음에는 또 어떤 것을 코딩할까 기대가 되네요.

이번에는 JavaScript를 이용한 웹 그림판을 만들어 보았습니다. 이전에 만들었던 Chrome 확장프로그램처럼 기본적인 JavaScript를 배울 수 있는 좋은 기회였습니다. Chrome 확장프로그램을 만들때는 Local Storage에 데이터를 저장하고 출력해오는 과정을 이해하는것이 쉽지 않았는데, 이번에는 상대적으로 쉽게 이해할 수 있어서 학습하는데 어려움이 덜 했습니다. 전체적인 기능은 그림판과 동일합니다. 원하는 색을 클릭하여 그림을 그리면 됩니다. 'PAINT' 를 클릭하면 'FILL' 버튼이 활성화되고 이는 그림판 캔버스를 원하는 색으로 채울 수 있습니다. 아래에 위치한 'Range' 버튼을 조절하여 펜의 굵기도 조절할 수 있습니다. 'SAVE' 버튼을 누르면 그린 그림을 png 파일 형태..

최근에 HTML과 JavaScript를 배우기 시작하면서, 유명한 유튜브 채널인 노마드코더의 무료 강의를 들었다. 처음 배우는 JavaScript 여서 어렵기는 하였지만 나름 재미있게 들을 수 있었다. 위 사진과 같이 To Do List를 추가할 수 있고, 'X' 버튼을 누르면 등록된 리스트가 삭제된다. 리스트 아래에는 내가 살고 있는 곳의 위치와 온도가 표시가 된다. 배경화면은 새로고침을 할 때마다 자동으로 변경되어 지루함을 덜어준다. 전반적으로 만족스러운 코딩작업이었고, 특히 JavaScript에 대한 기초를 쌓을 수 있는 좋은 시간이었다. 디자인 부분은 좀 더 보완해야 할 부분이라고 생각한다. 앞으로 더 멋진 프로그래밍을 위해 열심히 노력해야겠다!

캐스케이딩(Cascading) 의미 '위에서 아래로 흐른다'는 의미, 계단식으로 적용된다는 뜻 선택자에 여러 스타일이 적용될 때, 스타일 충돌을 막기 위해 우선순위에 따라 적용할 스타일을 결정함. 원리 스타일 우선순위 : 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정, 그 우선순위에 따라 위에서 아래로 스타일 적용 스타일 상속 : 태그들의 포함관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달 스타일 시트에서 '캐스케이딩'은 가장 기본적인 개념이고, 일반적으로 'stylesheet'는 'CasCadingStylesheet(CSS)와 같은 의미로 사용됨 스타일 우선순위 출처: Do it! HTML+CSS+자바스크립트 웹 표준의 정석

Image Audio Video