본문 바로가기

기초45

2주차_서버와 통신하기 2 Ajax 연습하기 $.get(url).then(function (data) { console.log(data); }); -$.get함수 사용시 점(".")을 꼭 사용해야 함 ajax요청 중에 데이터를 가지고 오는 것은 get요청, get 요청을 만들 때 뒤에 주소를 쓰면 주소에 결과를 가지고 옴 결과를 사용할때는 .then을 연결해서 사용할 수 있음 -.then부분 작성시 괄호가 많아 제대로 작성하기 어려울 수 있음. 주의요망 위 코드의 내용은 데이터를 다 가져왔으면 then(그러면), then절이 console.log로 데이터를 출력 $.get(url).then(function (data) { for (let i = 0; i < data.length; i++) { $("#titles").text(dat.. 2022. 11. 30.
2주차_서버와 통신하기 jQuery 시작 jQuery는 빠르고 작고 기능이 풍부한 JavaScript 라이브러리 다양한 브라우저에서 작동하는 사용하기 쉬운 API를 사용하여 HTML 문서 순회 및 조작, 이벤트 처리, 애니메이션 및 Ajax와 같은 작업을 훨씬 더 간단하게 만듬 라이브러리란? 다 직접 개발하는것이 효율적이지 않으니 전세계의 많은 개발자들이 써보라고 공개를 해놓은 코드 jQuery 공식홈페이지: https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handli.. 2022. 11. 28.
1주차_화면만들기 3 HTML 상세 label: 입력을 하는 태그들을 좀 더 쉽게 사용할 수 있도록 도와주는 태그 figure: 웹페이지로부터 독립적인 콘텐츠 표현 CSS 상세 가이드문서 링크: https://developer.mozilla.org/ko/ 부트스트랩 확장 href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" cdn: 기술적으로 최적화를 통해서 빠르게 접근해 주게 할 뿐만 아니라 어떤 서비스에서 다운로드 받았을 적에 그대로 활용 할 수 있는 장점이 있음 -외부의 있는 서비스를 이용할 때에는 cdn을 사용할 것을 권장 부트스트랩 링크: https://getbootstrap.kr/ 2022. 11. 23.
1주차_화면만들기 2 파일 관리하기 css파일과 html파일을 분리해서 관리 - 파일의 경로를 표현할때 현재 디렉토리를 표현하는 점(.)과 슬래시(/)를 꼭 포함하여 작성해야함 게시판 리스트 만들기 클래스는 각 값에 띄어쓰기로 구분, 새로운걸 넣고 싶다면 띄어쓰기를 하고 넣어주면 됨 Javascript 기본 웹사이트 안에서 어떤 동작을 만들어 낼때는 자바스크립트 사용 사용자와 상호작용하는 웹사이트를 만들때 필요 Javascript 기본문법 : 변수 let a = 10; console.log(a); - 대부분의 코드는 각 줄 마지막에 세미콜론(;)을 생략해도 동작하지만 생략하지 않는 것을 권장 지시자를 쓰고 변수명을 쓰고 변수에 들어갈 값을 씀 ex) let 변수명 = 값; Javascript 기본문법: 제어문(1) 조건문 조.. 2022. 11. 21.
1주차_화면만들기 웹 사이트의 구성원리 사용자가 브라우저를 켜서 주소를 입력 브라우저는 알파벳으로 되어있는 네이버 주소를 실제 숫자로 이루어져 있는 주소로 변경 숫자주소를 가지고 실제 네이버에게 컨텐츠 요청 이때 웹페이지를 요청하게 되면 네이버서버에서 브라우저에게 코드를 전달 브라우저가 받은 코드를 해석해서 사용자에게 페이지를 보여줌 웹사이트를 만든다는 것은 코드를 작성하는 것 위 이미지로 보면 웹사이트를 만든다는 것은 네이버가 전달해주는 코드를 작성하는 일을 말함 게시판 리스트 만들기 - 대부분의 태그는 여는태그()와 닫는태그(/)로 이루어져 있음 - 스타일 부분에 클래스 이름을 지정해서 스타일을 지정할 수 있음 클래스를 생성하여 CSS를 적용할때는 .classname {} 형태로 작성해야 함 클래스 의미를 가진 태그는.. 2022. 11. 16.
<13> HTML & CSS [속성 - 박스모델] width: 요소의 가로 너비를 지정 값: auto - 브라우저의 너비를 계산(기본값: auto, 블록요소: 100%, 인라인요소: 가로세로넓이x 글자특화) 단위 - px, em, cm등 단위로 지정 height: 요소의 세로 너비를 지정 값: auto - 브라우저의 너비를 계산(기본값: auto, 블록요소: 0, 인라인요소: 가로세로넓이x 글자특화) 단위 - px, em, cm등 단위로 지정 max-width, min-width: 요소의 최대 가로 너비를 지정, 요소의 최소 가로 너비를 지정 값: auto - 브라우저의 너비를 계산 단위 - px, em, %등 단위로 지정(기본값: none(없다)) 값: auto - 브라우저의 너비를 계산 단위 - px, em, %등 단위로 지정(.. 2022. 8. 17.
<12> HTML & CSS [css 단위] 1. px: 해상도에 따른 상대단위, 고정하는데 사용하는 픽셀 단위(가장 많이 사용) 2. %: 상대적으로 부모요소의 사이즈 영향을 받음 3. em: 자기 자신의 폰트 사이즈에 대해 영향을 받음 즉 font-size가 10px이면 600px = 60em 4. rem: HTML에 지정된 폰트 사이즈의 영향만을 받음 5. vw: 화면에 출력하는 화면전체를 뷰포트(Viewport)라고 하는데 뷰포트의 비율로 가로넓이 6. vh: 뷰포트의 비율로 세로넓이 7. vmin: 뷰포트의 최소넓이 즉 가로와 세로를 생각했을때 더 짧은 쪽에 비율로 넓이가 됨 8. vmax: 뷰포트의 최대넓이 2022. 8. 17.
<11> HTML & CSS [문법] 선택자 { ex) div { 속성: 속성값; color: red; /* 여기는 주석부분입니다 */ } } 선택자의 역할: 속성과 값을 지정할 대상을 검색 속성과 값의 역할: 검색된 대상에 지정될 CSS 명령 /* Comment */: 문서 내 수정사항이나 설명 등을 작성(주석) [선언방식] 인라인 방식: HTML 요소(태그)의 'style' 속성에 직접 작성하는 방식 ex) HELLO 내장방식: HTML 안에 작성하는 방식 ex) HELLO 링크방식: HTML를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식(추천방식) 병렬방식 호출 ex)HTML: HELLO ------------------------------------------------------------------ CSS(com.. 2022. 8. 8.
<10> HTML & CSS [CSS Reset] - CSS 초기화 - 브라우저가 제공하는 스타일이 표준화 되어있지 않기 때문에 브라우저 마다 모양이 달라 초기화 하여 사용 reset.css.cdn 검색 → reset-css CDN by jsDeliver 선택 → Copy to Clipboard클릭 → Copy HTML → 쓰는 코드 style 맨위에 삽입 [Codepen] 간이 코딩장소 - 개발환경을 세팅할 필요가 없음 - HTML은 로 감싸진 형태로 시작하기 때문에 body 태그로 감싸져있다고 가정한후 코딩 시작 - CSS는 설정을 통해 Reset상태 즉 초기화 상태에서 시작 가능 [Emmet] 태그를 좀더 빠르고 쉽게 쓰기위한 문법 ex) div를 쓰고 tab을 누르면 자동으로 가 써짐 2022. 8. 5.

티스토리툴바