노엘의 샴슈

1. 서버-클라이언트 통신 이해하기 1) 서버 ➡️ 클라이언트 : JSON 데이터 더보기 1) 서울시 미세먼지 Open API http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 그냥 열어보면 데이터가 보기 좋지 않게 뜰 것이다. 그래서 Json형으로 바꿔주는 아래 확장자를 추가한다! 2) JSONVue 설치하기 https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko 3) 다시 데이터 확인해보기 그럼 아래처럼 데이터가 보기 좋게 정리되어 뜨는 것을 확인할 수 있다! 2) 클라이언트 ➡️ 서버 :..

1. Javascript, jQuery, Fetch란 더보기 Javascript : 웹페이지가 특정 상황에 따라 동적으로 작동할 수 있도록 해주는 언어 jQuery : 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 라이브러리 jQuery를 임포트하려면 아래 코드를 head 태그 안에 넣어준다. Fetch : 짧은 코드로 서버에 요청을 보내고 데이터를 받아올 수 있다. 2. 자바스크립트와 HTML의 연결 더보기 1) 자바스크립트 위치 안에 로 작성한다. script 태그 안에 자바스크립트를 작성하는 것. 2) 함수 작성해보기 script 태그 안에 hey() 라는 함수를 정의하고, 버튼 태그 안에 onclick="hey()" 함수를 호출했다. 페이지에서 버튼을 누르면 alert가 뜨는 걸 볼 수..

1. Github 더보기 https://github.com/ GitHub: Let’s build from here GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and fea... github.com 개발자들이 서로 소스코드를 올려두고 공유하는 페이지 코드를 배포해서 홈페이지처럼 접속할 수 있음! 이메일, 닉네임, 비밀번호 입력하고 계정을 만들어서 가입해준다. free 서비스로 들어가기! 2. 저장소 생성하기 더보기..

1. 부트스트랩 더보기 예쁜 CSS 모음집, 잘 골라서 사용하자! 다른 사람이 작성한 CSS를 내 HTML 파일에 적용하는 것. CSS 파일 분리와 동일한 원리 https://getbootstrap.com/docs/5.0/components/buttons/ Buttons Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. getbootstrap.com 부트스트랩 시작 템플릿 Hello! CSS 예제) 홈페이지 상단 화면 만들기 더보기 노엘피디아 영화 기록하기 여기서는 div도 클래스를 지정하고, title, button도 클래스를..

1. CSS 기본 개념 더보기 CSS는 구체적으로 어떤 스타일로 요소가 표시되는지를 정하는 규격. 초기에는 HTML 하나의 문서로 뼈대와 꾸미기도 함께 했지만, 공통적인 디자인을 갖는 문서가 여럿 존재할 경우 하나를 수정하면 다른 파일도 모두 업데이트를 해야하는 번거로움이 있었음 CSS는 이런 문제를 해결함과 동시에 웹페이지의 내용과 스타일의 분리를 통해 역할 분담을 하고 있다. 1) HTML 태그의 style 속성을 이용 2) 노란색 문단 2. 선택자 더보기 어떤 태그에 스타일을 적용할지를 정의해야 하는데 이를 선택자라고 한다. 태그 선택자 : 해당되는 태그 전부에 스타일 적용시킴 태그이름 { 속성1: 속성값1; 속성2: 속성값2; } span { color:#F00; } div { color:#0F0..