HTML로 웹의 뼈대를 잡고 CSS를 이용하여 꾸미는 방법까지 익혔습니다. 이에 더해 javascript 문법을 배워보도록 하겠습니다. 1. 자바스크립트의 특징 - 객체 기반의 스크립트 언어 - 대소문자 구별 - 문장 끝에 ;(세미콜론)을 사용(생략이 가능) 2. 자바스크립트의 출력 - Web API Console을 통해 브라우저 Console 창에 출력 3. 자바스크립트의 삽입 방법 i. ✔ 자바스크립트의 실행 순서는 인터프리터 해석 방식이므로 위에서 아래로 실행 ✔ 주석문 // : 한줄 주석, /* 내용 */ : 여러 줄 주석 4. 익스텐션 설치 JavaScript (ES6) code snippets JavaScript (ES6) code snippets 까지 설치를 마쳤다면 JavaScript를 다..

Web 2024. 4. 16. 09:13

솔로의 식탁과 마찬가지로 모바일 버전, 태블릿 버전, 데스크탑 버전으로 구분하여 화면의 크기가 커질 때마다 변화가 생기도록 설정합니다. 모바일, 태블릿, 데스크 탑에서 웹을 볼 때 다음과 같이 나타나도록 만들어보겠습니다. 모바일 버전 태블릿 버전 PC 버전 html로 문서 내용을 다 담아 뼈대를 먼저 만듭니다. 이제 웹 페이지에 담겨있는 내용은 모두 적었습니다. CSS를 이용하여 배열을 조정하겠습니다. 시작하기에 앞서 '웨이브 파도체' 폰트로 변경하고 시작하겠습니다. https://noonnu.cc/font_page/1370 눈누 웨이브 파도체 - 콘텐츠웨이브 주식회사 noonnu.cc header부분의 글자들을 차례로 나열되는 형태로 설정해보겠습니다. 이때 display: inline block;을 작..

Web 2024. 4. 15. 09:11

회원가입, 로그인 페이지를 만들어보았습니다. 회원가입을 누르면 회원가입창으로 이동합니다. 이전에 진행했던 뉴스, 즐겨찾기, 이력서 양식의 내용을 공지사항 하단에 두어 각 글자를 누르면 이동할 수 있게 설정하였습니다. https://integin1212.tistory.com/43 CSS로 웹 꾸미기 이전에 news.html을 생성하여 웹 서버로 전송한 적이 있습니다. https://integin1212.tistory.com/41 HTML Web 만들기 이번 시간에는 HTML만을 이용해서 Web을 만들어보겠습니다. 하이퍼링크, 이미지태그, 아이프 integin1212.tistory.com 실제 웹사이트의 내용을 확인하기위해서는 다음 링크를 확인해주세요. http://integin1212.dothome.co...

Web 2024. 4. 15. 08:57

이번 시간에는 html, css 모두 이용하여 '솔로의 식탁'이라고 불리는 웹 페이지를 만들어보겠습니다. 모바일 버전, 테블릿 버전, 데스크 탑 총 세 가지로 구분하여 만들어보겠습니다. 모바일 버전 태블릿 버전 데스크탑 버전 위와 같이 '솔로 식탁' 페이지를 모바일 버전, 태블릿 버전, 데스크 탑 버전에 따라 배열 방식이 다르다는 것을 눈으로 확인할 수 있습니다. 거의 모든 웹사이트가 모바일, 태블릿, 데스크탑등에 따라 서로 다른 배열 방식을 사용하여 편리한 방식을 제공하고 있습니다. 또 저희는 그러한 경험을 한 번쯤은 해봤습니다. 따라서 이번에는 웹 사이트의 배열 방식을 화소에 따라 구분하여 만들어보겠습니다. 위와 같이 html 코드를 작성하여 뼈대를 갖춥니다. css는 외부 스타일을 이용하겠습니다. ..

Web 2024. 4. 12. 09:05

이전에 news.html을 생성하여 웹 서버로 전송한 적이 있습니다. https://integin1212.tistory.com/41 HTML Web 만들기 이번 시간에는 HTML만을 이용해서 Web을 만들어보겠습니다. 하이퍼링크, 이미지태그, 아이프레임등 HTML 문법을 이용하여 4개의 웹사이트를 만들어보도록 하겠습니다. 3개의 웹사이트가 1개의 매인 integin1212.tistory.com CSS코드로 가운데 정렬 및 이미지의 색상, 그림자 등을 추가하면 가독성이 더 높아질 것으로 기대됩니다. 따라서 단순 HTML문서에 CSS 코드를 추가하여 가독성을 높이도록 하겠습니다. CSS 코드를 적용하는 방법에는 인라인 스타일, 내부 스타일, 외부 스타일로 총 3가지가 있습니다. 3가지 중에서 외부 스타일을 ..

Web 2024. 4. 8. 17:14

저번 시간에 문단 태그, 제목 태그 등 몇 가지 태그와 이미지 태그를 공부해봤습니다. 이번에는 하이퍼 링크를 통해 클릭 한 번으로 다른 웹 사이트로 이동하는 기능, 웹사이트 안에 또 다른 웹사이트를 삽입하는 기능 등 구체적인 속성들에 대해서 알아보겠습니다. 순서는 다음과 같습니다. 1 하이퍼 링크 2 책갈피 3 테이블 유형 4 아이프레임 5 폼 태그 1. 하이퍼 링크 저번 시간에 절대 경로와 상대 경로가 무엇인지 익혔습니다. 절대 경로와 상대 경로를 사용하여 사이트 또는 파일에 연결하도록 구현해보겠습니다. 상대 경로에 사용한 '내 첫 웹페이지'와 '서브페이지'는 웹 사이트가 아닌 확장자 html인 html문서입니다. 서브페이지에는 지난 시간에 배웠던 이미지 태그를 이용하였습니다. 또, 돌아가기를 통해 1..

Web 2024. 4. 5. 16:24

이번 시간에는 HTML만을 이용해서 Web을 만들어보겠습니다. 하이퍼링크, 이미지태그, 아이프레임등 HTML 문법을 이용하여 4개의 웹사이트를 만들어보도록 하겠습니다. 3개의 웹사이트가 1개의 매인 웹사이트에 종속되게 만들어보겠습니다. 닷홈 호스팅을 이용해 아래와 같은 문서를 작성해보자. 메인 페인지(index.html) - 자유롭게 작성 뉴스기사(news.html) - 포털 기사 중 하나를 선택하여 뉴스기사 이미지를 포함한 기사 내용의 문서를 작성 즐겨찾기(favorite.html) - 자신이 자주 방문하는 사이트 3곳이상 캡쳐화면을 포함하여 링크를 작성 이력서(resume.html) - 온라인 이력서 작성 에는 각 페이지의 제목으로 구성 a. 메인 페이지 (index.html) b. 뉴스기사(news..

Web 2024. 4. 4. 17:43

파이썬, MySQL 문법까지 공부해보았습니다. 이제는 웹 개발을 위해 파이썬과 SQL을 옆으로 잠깐 미뤄두고 HTML 문법에 대해서 알아보겠습니다. HTML은 문서작성의 목적성을 위한 것이기 때문에 웹을 꾸미거나 장식은 HTML이후 CSS를 통해 익히도록 하겠습니다. 여태 구글 코랩, 주피터 노트북을 사용했었습니다. 널리 쓰이고 있는 툴 중 하나인 Visual Code로 HTML을 다뤄보겠습니다. Visual Code는 상대적으로 적은 용량을 차지하며 extension을 이용하여 필요한 파일들을 설치하여 사용하는 방식입니다. Visual Code의 설치 링크입니다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Vi..

Web 2024. 4. 3. 17:29