목록 web/html + css + javascript (7)
KEEP GOING
Spring을 이용한 챗봇 개발 프로젝트를 완성시키고자 여러 사이트를 뒤지던 중에 아주 좋은 영상을 발견했습니다. 참고한 영상은 조코딩님의 자바스크립트 api 구현 영상입니다. https://www.youtube.com/watch?v=QPEUU89AOg8 해당 영상은 api에 대해 갓벽한 설명을 하고 있습니다. (조코딩님 정말 최고신듯) 2019년 영상이라 실습을 진행하면서 조금씩 바뀐 정보들이 있길래 글을 작성해봅니다. 먼저 영상을 참고하여 json, api, jQuery, ajax 등이 무엇인지 이해 바랍니다. 이전 html 실습을 위해 설치해둔 프레임워크인 atom이 있어서 저는 atom 위에서 실습을 진행하였습니다. 참고로 atom에서의 코드 정렬 단축키는 영상에 있는 프레임워크와는 다른데 htt..
html파일에 외부 자바스크립트 파일을 추가해보는 실습을 진행하였다. 1. jsTest.html JAVA SCRIPT test 나는 6월 22일부터 에스에스엔씨에서 현장실습을 진행중이다. html css 기본 공부를 마쳤고 자바스크립트를 배우고 있다. 2.sample.js var heading = document.querySelector('#heading'); heading.onclick = function(){ heading.style.color = "red"; } // 간단한 메시지 표시 // alert("고앵이 사쥔을 보여드릴 예정입니다"); // var reply = confirm("확인 취소 둘중에 하나만 골라봐"); var name = prompt("이름을 입력하세요"); document.wr..
HTML 문서에 자바스크립트를 활용하면 페이지를 움직이는 효과를 넣어줄 수 있다. 활용 예시 1. 웹 사이트 상위 메뉴에 마우스 올렸을 때 하위 메뉴를 펼치기 2. 같은 화면에서 탭누르면 여러 컨텐츠 보여주기 3. 사용자 입력 정보가 서버에 전송할 양식에 맞는지 검사 4. 웹 어플리케이션 제작 사용자와 실시간으로 통신할 수 있는 웹을 만들 수 있다. 공개된 API문서나 데이터 시각화 라이브러리를 사용해 사이트를 제작할 수 있는데 이때 자바스크립트를 사용한다. 5. 서버 개발 자바 스크립트를 이용해 백엔드 개발을 할 수 있다. 자바스크립트를 이용하여 백엔드 개발을 할때 사용하는 프레임워크로는 Node.js가 있다. 특징 1. 이미지나 텍스트 등을 전체를 display한 이후에 적용해야 하므로 태그 직전에 ..
CSS는 HTML을 꾸며주는 스타일시트라고 하였으나 정확히 말하자면 캐스케이딩 스타일 시트(Cascading Stylesheet)이다. 캐스케이딩은 CSS 약자의 맨 앞글자를 뜻하는데 스타일시트에서 위에서 아래로 우선순위가 존재한다는 의미 이다. 그래서 CSS에서는 특정 요소에서 스타일이 중복이 발생할 때 충돌이 발생하지 않기 위해 우선 순위에 따라 스타일을 적용할 수 있다. 스타일 우선순위 : 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일을 적용한다. 스타일 우선순위는 다음과 같다. ! important : 가장 우선 적용되는 스타일이다. 인라인 스타일 : 해당 태그만 스타일을 적용한다 id 스타일 : 한 문서에서 한 번만 적용할 수 있다. (선..
기존에 있던 html 파일에 스타일시트인 css를 적용해보았다. css를 적용하면 색상, 글꼴, 글짜 크기 등 디자인을 다양하게 바꿀 수 있다. 실습 코드 현장실습 나는 6월 22일부터 에스에스엔씨에서 현장실습을 진행중이다. 지금은 html을 배우고 있으며 css와 자바스크립트를 배울 예정이다. MVC Spring framework를 이해하고자 간단한 프론트 엔드 스킬을 연마중이다. 8월 플랜 인턴 공고 확인하기 ncs 준비하기 오픽따기 9월 플랜 학점 관리 인턴 공고 확인 준비중... 관심사 은행, 증권, 보험 금융 it it 신기술 해당 코드에서의 이 부분은 현재 html 파일이 저장된 위치에 존재하는 css 파일을 참조한 것이다. 다시 말해, 외부 파일을 참조한 방식이다. . . . . . 실행 결과
실습으로 감자빵 주문 사이트를 만들어 보았다. 실습에 진행한 코드는 다음과 같다. 감자빵 주문 사이트 상품 선택 MENU 원조 감자빵 치즈 감자빵 고구마 감자빵 주문할 상품을 선택하세요 원조 감자빵 치즈 감자빵 고구마 감자빵 포장 여부 포장 포장 안함 비회원 주문 연락처 배송 정보 주소 : 경기도 수원시 배송 기간 : 최대 7일 소요 아이디 비밀번호 . . . 출력한 결과
스프링 프레임워크 기반 실습을 진행하던 와중에 프론트엔드 지식이 부족하여 실습을 진행하였다. html을 편집할 텍스트 에디터로는 아톰을 사용하였다. https://atom.io/ A hackable text editor for the 21st Century At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it. atom.io ! 현장실습 나는 6월 22일부터 에스에스엔씨에서 현장실습을 진..