Forms Demo Enter a Username: Enter a Password Enter a color Enter a number 검색 쿼리 구조 쿼리 구조는 회사마다 다르다. //유튜브 https://www.youtube.com/results?search_query=dog // 네이버 https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=1&ie=utf8&query=%EC%9E%94%EB%82%98%EB%B9%84 //Reddit https://www.reddit.com/search/?q=rabbit : 그동안 태그에 대해서 거의 잊다시피 했는데 웹부캠 강의를 들으면서 다시 한 번 상기할 수 있었다. 은 UI항목(버튼,텍스트 등) ..

안녕하세요. brandy 입니다. 요즘 Web 개발 공부에 다시 매진하고 있는데, 공부하면서 미디어쿼리 라는 것을 알게 되었습니다. 솔직히 말해서 프론트엔드 분야는 남의 일이라고 생각했지만,, 풀스택으로 공부하는게 맞다고 생각하여 프론트엔드 백엔드 둘다 공부를 하고 있습니다. ※ 반응형 웹페이지가 중요한 이유? Responsive Web Design (RWD) 우선 반응형 웹페이지는 하나의 웹사이트에서 PC,스마트폰,태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법 페이지 디자인은 사용자가 콘텐츠를 보기 위해 가로로 스크롤하거나 핀치 또는 확대/축소하지 않고도 모든 화면 크기에서 올바르게 렌더링 될 수 있는 경우가 반응형입니다. 출처 : bradf..

VSCode를 이용하여 웹개발을 많이 진행합니다. 그중에서도 빠른 마크업을 위한 도구인 Emmet(에밋)이 있는데요, 저도 놓치고 있었던 부분이 있어서 한번 정리해보고자 합니다. 빠른 마크업이 중요한 이유 ? html이나 xml 같은 마크업 언어는 코드의 양이 많기 때문에 시간 단축이 중요합니다. 그래서 html에서는 emmet 같은 tool들이 개발자들이 좀 더 빠르게 코드를 작성할 수 있도록 지원해주죠. https://docs.emmet.io/abbreviations/syntax/ 정리하기 앞서, Nesting Operator에 대해 알아보도록 하겠습니다. Nesting Operator은 약어 요소를 생성된 트리 안에 배치하는데 사용하고, 컨텍스트 요소의 내부 또는 근처에 배치할지 여부를 결정합니다...

저는 잔나비를 삼행시로 한번 지어봤습니다. 밑의 잔 / 나 / 비 버튼을 하나씩 클릭하면 잔 = ~ / 나 = ~ / 비 = ~ 에 대한 삼행시 문구가 한 줄씩 출력되는 프로그램입니다. html과 Javascript를 이용하였습니다. '잔' 버튼을 클릭하였을 때 HTML 페이지 출력결과입니다. '나' 버튼을 클릭하였을 때 HTML 페이지 출력결과입니다. '비' 버튼을 클릭하였을 때 HTML 페이지 출력결과입니다. 꼭 잔>나>비 순서대로 누르지 않아도 '나' 버튼만 클릭하였을 때 '나를 설레게 만든다' 문구가 먼저 출력될 수 있습니다. 다른 버튼도 마찬가지입니다. 사용환경은 VSCode입니다. html 코드 태그 안에서 index.js 파일을 가져오기 위하여 코드를 사용하였습니다. 삼행시 문구가 출력되기 ..

안녕하세요. brandy 입니다. 이번 모각코 Javascript 3차시에서는 HTML과 Javascript를 연결하는 방법에 대해 학습하였습니다. 1222.html click me

안녕하세요. brandy 입니다. 오늘은 모각코 Javascript 2일차 DOM 구조에 대해 학습하였습니다. 웹 페이지는 일종의 문서 = document입니다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 합니다. 즉, 동일한 문서를 사용하였는데도 다른 형태로 나타날 수 있다는 겁니다(웹 브라우저 화면에 나타나거나 or HTML 소스 자체로 나타나거나) 그중에서도 DOM은 Javascript에서 사용하는 개념으로, 웹 페이지의 객체 지향 표현입니다. Javascript와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있습니다. * 문서 객체란? 이나 같은 html 문서 태그들을 Javascript가 이용할 수 있는 object(객체)..