본문 바로가기

WEB

 (75)
4. javascript 외부 스크립트 연결하기, css 외부 연결하기 css 파일은 link 태그를 사용해 외부파일을 연결했다면, js 파일은 script 태그로 연결해서 사용할 수 있다. ex) bootstrap5 CDN 이렇게 디렉토리 경로 뿐만 아니라 웹 주소로도 파일을 받아올 수 있다. 우리가 할 것은 디렉토리 경로로 js/example.js 파일을 불러오는 방법이다 스크립트 만들기 일단 js 파일을 만들어야 가져올 수 있으니 구구단 테이블을 만드는 js 스크립트 만들어 보자. 중첩 for문으로 총 8행 10열을 만들기 위해서는 바깥 for에서 8번, 내부 for에서 10번 반복하면 된다. 8행 10열로 만드니 우리가 자주보면 구구단 테이블이 아니다. 이번에는 10행 8열로 만들어 보자. 내부, 외부 for문 조건을 서로 바꿔준다. 행이 열이되고 열이 행이 되도록 ..
3. javascript 제어문(조건문, 선택문, 반복문, 분기문) 정리 제어문에는 조건문(선택문), 반복문, 분기문 4가지가 있다. 분기문 같은 경우 조건이 있는 곳이면 어디든 사용가능하다. 조건문 조건문에는 if, switch가 있다. if, else if, else 3가지 키워드를 조합해서 쓰는 if문 선택문이라고도 불리는 switch문은 switch, case를 사용한다. 반복문 while, do while, for문을 사용하며, 약간식 차이가 있다. 개인적으로 반복문부터 진짜 프로그래밍 시작이라고 생각한다. 단순반복작업에서 해방될 수 있기 때문이다. do while 경우 다른 반복문과 달리 조건이 맞든 틀리든 반드시 한번은 실행되기 때문에 특별한 경우에 유용하게 사용할 수 있다. 분기문 분기문으로는 break, continue가 있는데 말 그대로 흐름을 벗어나는 것이..
2. javascript 연산자 정리 javascript Data type String, Number, Boolean, undefined, null, typeof 값들이 제공된다. Boolean 경우 0, null, "", undefined는 false, 나머진 true이다. undefined는 변수를 선언하고 아무것도 대입하지 않은 상태이다. null은 빈 데이터로 undefined과 다르다. typeof는 변수의 자료형을 알려준다. javascript operator 이제 연산자만 간단히 정리하고 넘어가면 될 것 같다. 산술 연산자 증감 연산자 연산자 우선 순위 + - * / % --변수 ++변수 변수-- 변수++ ( ) 문자 결합 연산자 비교 연산자 -- ++ ! "문자" + 222 > = >= < 512 ? "오른쪽 입니다." ..
1. javascript 시작하기 Do it 자바스크립트 + 제이쿼리 책을 이용해 공부할 생각이다 js는 정적인 웹문서를 사용자 편의에 맞게 동적으로 만들어 주는 언어라고 한다. http://www.yes24.com/Product/Goods/59461086 Do it! 자바스크립트 + 제이쿼리 입문 - YES24 4년 연속 베스트셀러! 전면 개정판으로 출간!자바스크립트, 제이쿼리의 기본부터 실전에 필요한 핵심까지 모두 담았다!‘두잇 시리즈 최고 작품’이라 평가받은 책! 전면 개정판으로 더욱 알차 www.yes24.com 앞에서 공부했던 것과 같은 시리즈 책이다. 저자는 정인용으로 HTML 책과 다르다. 개발 환경 기존과 동일하게 크롬, 비주얼 코드를 사용한다. 고경희 선생님은 코드에서 브라우저를 바로 여는 확장을 안알려줬는데 정인용 선생..
11. bootstrap5으로 메인 페이지 만들기 오늘은 지금까지 배웠던 것들로 페이지를 만들어 볼 생각이다. 커뮤니티를 만들려고 했는데, 뭔가 채워 넣을게 많은 조리사 자격증 사이트로 정했다. 사진들은 무료 이미지사이트에서 다운받아 사용하였다. 솔직히 사진이 있으니까 뭔가 그럴듯해보이지만, 사실 별로 한건 없다. header navbar와 드롭박스를 가져와서 사용하였다. 각 태그를 누르면 페이지에 연결되게 만들어야 하는데, js를 모르니 페이지 만드는게 노가다라서 여기까지만 했다. section 섹션은 리스트로된 글 목록, 카드로된 이미지를 row, col을 이용해 반응형으로 만들어 놓았다. 글목록과 카드 둘다 col-12 col-md-6 col-lg-4 기준으로 만들었다. footer 예제로 제공되는 footer를 가져와 넣어주기만 했다. 기타 페이..
10. bootstrap5 components component 같은 경우 원하는 걸 기억했다가 잘 찾아쓰면 되기 때문에 코드를 외울 필요는 없어 보인다. bootstrap 사이트에서 필요할 때 복사해서 쓰도록 하자. https://getbootstrap.com/docs/5.2/components/accordion/ Accordion Build vertically collapsing accordions in combination with our Collapse JavaScript plugin. getbootstrap.com accordion 아코디언은 악기처럼 접었다폈다 할 수 있는 component이다. alert 주의문을 쓸 때 사용, 스타일만 변하지 따로 기능은 없다. badge 텍스트를 아이콘처럼 badge로 만들어 준다. breadcrumb..
9. bootstrap5 로그인, 회원가입 페이지 만들기 로그인 페이지 다른 사이트 로그인 페이지와 비슷하게 만들었다. form 태그를 가장 바깥 컨테이너로 사용했고 div 태그로 내부를 만들어줬다. text, password, submit, checkbox를 vstack으로 쌓아줬다. 그다음 hstack으로 아이디 찾기와 비밀번호 찾기, 회원가입 링크를 만들어 주었다. 만들다보니 배치하는데 생각이 많이 필요했다. 조금 더 익숙해져야할 필요가 있어 보인다. 회원가입 페이지 회원가입 페이지는 breakpoint-md 를 사용해 2가지 형태로 나오게 만들었다. 로그인 페이지보다 배치하는데 더 고민을 많이 했다. 생각을 하다 그냥 열을 4, 8로 나눠서 한 행을 다 채워넣었다. vstack으로 margin top, bottom 대신 gap-3을 사용했다. 끝으로 회..
8. bootstrap5 form controls bootstrap form, input, textarea form 태그는 사용자입력을 받는 태그들의 컨테이너입니다. 입력을 받는 건은 input, textarea 태그로 입력 받습니다. 스타일 적용대상 .form-label label .form-control input .form-control form-control-lg input .form-control form-control-sm input .form-control-plaintext input color color 타입 input에 적용되는 스타일 스타일 적용대상 .form-control form-control-color input file file 타입 input에 적용되는 스타일 Datalist datalist 태그를 이용한 사용자 편의성 제공 ..

티스토리툴바