전체 글 (59) 썸네일형 리스트형 [기초 이론] How to add the JavaScript to WebPage? 웹 페이지에 JavaScript를 어떻게 넣을까? CSS와 비슷한 방법으로 JavaScript를 HTML 코드에 적용할 수 있다. CSS가 요소로 외부 스타일 시트를 적용하고, 요소로 내부 스타일 시트를 적용했다면 JavaScript는 외부 JavaScript 가장 많이 쓰이는 방식으로 내부 JavaScript를 외부 파일로 분리하고 싶을 때 사용한다. 내부 JavaScript와 마찬가지로 HTML 파일의 부분의 최하단에 아래와 같이 입력한다. Lorem ipsum let a = 0; 인라인 JavaScript 가끔 HTML에 JavaScript 코드가 포함될 수 있다. HTML 코드에 인라인으로 CSS를 넣는 것처럼 인라인 JavaScript 또한 HTML 코드가 무거워지고, 수정이 비효율적이므로 되도.. [기초 이론] What is the JavaScript doing on WebPage? 웹 페이지에서 JavaScript는 어떤 일을 하는가 브라우저가 웹 페이지를 불러오면 브라우저는 코드(HTML, CSS, JavaScript)를 실행 환경(브라우저 탭)에서 실행한다. 원자재를 가져와서 상품을 생산하는 공장처럼 생각할 수 있다. JavaScript는 웹 페이지에서 복잡한 프로그래밍 기능을 구현할 수 있다. 예를 들어 DOM (Document Object Model) API를 통해 HTML과 CSS를 동적으로 수정, 사용자 인터페이스를 업데이트하는 일에 가장 많이 쓰인다. 참고로 웹 페이지의 코드는 보통 문서 상에 나타나는 위에서 아래로 나열되는 순서 그대로 불러와 실행한다. 수정하려는 HTML과 CSS 코드보다 JavaScript를 먼저 불러와 실행하면 먹히지 않을 수 있다. → 브라우저.. [기초 이론] What is the JavaScript? JavScript란 무엇인가? JavaScript를 설명하기 전에 웹을 구성하는 요소를 설명하고자 한다. 만약 웹이 사람이라면 어떻게 표현될 수 있을까? 그것을 단적으로 보여주는 Dev Human의 사진을 참고하여 설명하도록 하겠다. HTML(HyperText Markup Language)는 인체 자체의 뼈, 즉 큰 구조를 짜고 의미를 부여하는 마크업 언어이다. 페이지의 문단이 들어가는 위치나 데이터 표와 외부 이미지/비디오를 정의한다. CSS(Cascading Style Sheets)는 정돈된 인간이다. 구조로 구성된 HTML 콘텐츠에 스타일을 적용할 수 있는 스타일 규칙 언어로 배경색을 추가하거나, 글꼴을 바꾸고, 콘텐츠를 신문처럼 다열 레이아웃으로 배치할 수 있다. eyes { display: fl.. [기초 이론] 서론 자바스크립트를 오래 공부하고 있지만 스스로 코드 짜는 걸 어려워하는 이유는 언어 자체를 이해 못했다기 보다 문법이 약해 어떻게 작성해야 할 지 모르는 탓이다. 영어는 문법 까짓 대충 몰라도 바디랭귀지와 억양으로 소통은 가능한데 비해 컴퓨터는 멍청하기 때문에 완벽하게 말하지 않으면 내가 무엇을 전달하고 싶은 지 모른다. 이에 자바스크립트 기본 문법을 암기 겸 필사하도록 한다. 참고 자료는 MDN과 내가 여태 들은 JavaScript 영상 강의이다. MDN의 JavaScript 내용은 프로그래밍 내용도 다소 포함되어 있다. 비전공자인 내가 전공자인 개발자들에게 뒤처지지 않는다는 것을 보여주고 싶으므로 내년 상반기에 정보처리기사 자격증을 따기 위해 개념을 확실히 짚고 갈 것이다. 코코아톡 클론 코딩 완강 HTML과 CSS는 이미 경력도 있고 여러차례 프로젝트를 진행해보며 나름 전문성이 있다고 생각했으나 B.E.M이라던지 root의 변수 등 최신 문법에 대해선 무지했다. 그 영향인지 전 직장에서 코드에 대해 한 번 지적을 받은 기억이 있어 계획엔 없었으나 최대한 빠르게 프로젝트를 끝냈다. 기간은 강좌와 클로닝 타임을 포함해 약 일주일 정도 걸렸으며 아니나다를까 제일 약한 부분이었던 flexbox나 animation에 대해 좀 더 심층적으로 공부할 수 있었다. 하단의 내용은 클론을 진행하며 메모해둔 TIL의 내용이다. 추후에 한 번 더 MDN이나 구글링을 통해 예문을 확인해 보고 tistory에 메모할 생각이다. 하나는 이미 완성해두었으니 바닐라 JS 챌린지와 동시 진행이 가능하겠군. [결과물] https:.. [Figma] 비율을 유지한 채 크기를 줄이는 법 공모전을 준비하며 Figma로 로고를 제작했다. 문제는 상단 바에 넣어야하기 때문에 크기를 줄여야하는데 circle radius의 값이 유지된 채 줄어들어 큰 배너와 작은 배너의 비율이 동일하게 나오지 않았다. 그럴 땐 단축키 'K'버튼을 누르면 Move(V)아이콘이 Scale(K)로 활성화 되는 것을 볼 수 있다. 그럼 이제 정상적으로 비율을 유지한 채 크기 조정이 가능하다! 내겐 넘나 어려운 JavaScript 예나 지금이나 문법은 왜 이렇게 나를 괴롭히는 것인가. 영어 공부할 때 미드를 보거나 좋아하는 배우 기사 읽는 건 좋아했지만 S+V+O는 어려워 했듯이 JavaScript 강의도 듣는 내내 머리를 쥐어짜게 된다. for, while, this, callback... 당장 처음보는 개념도 많고. 영어에서 either는 둘 중 하나를 고를 때 쓰고 neither는 양 쪽 모두 부정할 때 쓰는 거다라는 말을 들었을 땐, I see, I see ㅇㅇ 알 것 같아~ 당장 시험치면 그 답을 고를 수 있을 듯?이라고 생각하지만 지금 나와서 이 단어의 정확한 사용법을 적재적소에 배치해서 문장을 말해봐라라고 하면 아무 말도 할 수가 없다. 이렇듯 JavaScript도 강의를 당장 들을 때 개념은 알 것 같은데 막상 문제.. webSite 22.04 웹페이지 UI 디자인 시안 https://www.sketchappsources.com/ 이전 1 ··· 4 5 6 7 8 다음
