겉바속촉

이제 제이쿼리를 해보도록 합시다 두둥 test명을 가진 html파일 하나 생성해주었습니다 위와 같이 형광펜 칠해진 부분에 src="https://code.jquery.com/jquery-3.5.1.js"를 script에 넣어줍니다. 다운받지 않아도 직접 CDN을 넣어주는 방법이쥬:) 그리고 저는 bootstrap링크까지 추가해버렸습니다:) 이 상태에서 템플릿을 아예 만들어두고 시작할게요:) 매번 일일이 치려면 힘드니까요! 전체 선택 - 복사 하신 상태에서 우클릭 - new - html file - file name 지정 - next 꼭꼭꼭 next 눌러주셔야 합니다!!! 그래서 HTML Templates를 클릭 후 next 클릭해주세요 New 클릭 다음과 같이 name과 description 지어주신 후..

이번에는 ul이랑 li 사용해서 코드를 짜보도록 할게요:)table에만 css를 적용할 수 있는 것이 아니쥬?text에도 가능합니다!! 다음과 같이 코드를 작성해주세요순서 없는 list기 때문에 ul을 사용해주는 것이에요그리고 각각 들어갈 데이터들은 li 태그를 사용해주는 것입니다:) 1일차 1번예제 2번예제 3번예제 2일차 1번예제 2번예제 3번예제 3일차 1번예제 2번예제 3번예제 4일차 1번예제 2번예제 3번예제 컴파일 여기서 포인트는 hover를 썼다는 점입니다hover는 바로다음과 같이 마우스를 올려보면 blue로 바뀌게 해주는 것이에요!!색깔은 자기맘!! 다음과 같이 작성해주세요:)ul.submenu>li>a:hover { color: blue; }

이번 시간에는 아예 css파일을 따로 생성해준 후에html파일을 만들어보도록 할게요:) table을 또 만들려고 하는데요그 전에 table style에 대한 css를 따로 해주는 거죠!! 1. 다음과 같이 우클릭 - new - other 2. css를 타이핑 -> next -> 이름 생성 3. 다음과 같은 화면이 뜨면 ok 4. css파일 코드 작성해주기@charset "EUC-KR"; table { border: 2px solid gray; width: 500px; } tr, th, td{ border: 1px dotted gray; font-size: 10pt; } 5. html파일 생성해준 후에 table안에 들어갈 코드 작성 다음과 같이 작성해주시고~ 중간고사 성적 JAVA JSP Spring 8..

지난 번 포스팅에서 html로 tabel 생성하는 방법에 대해서 익혔는데요:)2020/06/16 - [취업일기/블록체인] - [html] table 생성하기[html] table 생성하기이번에는 table을 만들어보려고 하는데요:) 우선 개념을 짚고 가보도록 할게요!! tr -> 각각의 한 행을 의미 (table row) td -> 하나의 칸을 의미 (table data) th -> 제목에 많이 사용 (table header) / 굵게, 가..2-juhyun-2.tistory.com 항상 저런 모양의 테이블만 존재하지 않기 때문에우리는 경우에 따라서 행을 합치거나 열을 합쳐주어야 합니다 그래서 이제 행과 열을 합쳐보려고 합니다짚고 넘어갈 개념은 바로rowspan -> 행 병합 = 행들을 합쳐버리기cols..

이번에는 table을 만들어보려고 하는데요:) 우선 개념을 짚고 가보도록 할게요!! tr -> 각각의 한 행을 의미 (table row) td -> 하나의 칸을 의미 (table data) th -> 제목에 많이 사용 (table header) / 굵게, 가운데 정렬 table 디자인은 css를 사용해주려고합니다. table {border: 2px solid gray;} tr, td, th {border: 1px dotted purple;} 라고 작성했습니다 그리고 이제 table안에 들어갈 내용들을 작성해주시면 되는데요 행1 -> 행2 -> 행3 요런 순서로 데이터들이 들어간다고 생각해시면 됩니다:) 위의 그림이 이해가 가셨다면 다음과 같이 작성해보도록 할게요:) 이름 나이 학과 주소 보라돌이 10 체..

이번에는 우리가 이미지 파일 4개를 가지고 와서 작업을 해보도록 할게요:) 우선 블럭 사이에다가 div를 만들어줄게요:) 그리고 컴파일 해보시면 눈에 보이는 것은 아무것도 없을 거에요:) 그래서 윗 부분에 css로 style 작성해주세요!! 그리고 다음과 같이 스크립트문까지 완성해주시면 끝입니다!! 컴파일 해보시면 다음과 같이 디저트 4가지 이미지가 나오는 데요:) 각각 이미지를 클릭해보시면 ----> onclick 행위 아래 div 위치에 클릭한 이미지가 뜹니다 ----> window.onload = function이 작동

이번에는 우리가 입력창에 입력한 데이터들이 다른 페이지에 출력되게 하는 것을 배워볼게요:) html파일 두가지를 작성해줄거에요 1. dataOpen.html 여기서 포인트는 우리가 모드 readonly 즉 읽기전용으로 만들어주기 때문에 수정이 불가합니다. 윗 부분에서 dataopen함수를 만들어서 너비 300 높이 200짜리 window창이 열리도록 작성해줍니다:) 그리고 스크립트 블럭 안에서 폼을 만들어주시는거에요!! 이름 핸드폰 주소 2. dataSend.html 이제 새로 작성하는 html파일은 우리가 데이터를 작성해주는 페이지를 만든다고 생각해주세요 윗부분은 style css만들어주시고 스크립트 블럭 안에 datasend라는 함수를 만들어주세요:) 아까 작성했던 내용을 복사해서 가져오신 후에 re..

이번에는 자바스크립트 활용해서 array test를 해보도록 하겠습니다:) 1. 배열테스트 2. 10개의 난수 출력해보기 body사이에다가 다음과 같이 작성해볼게요:) 10개의 난수출력 3. 초기값 주고 컬러별로 출력해보기 초기값 주고 컬러별로 출력 4. 초기값 안주고 기본 초기값 안주고 기본

이번시간은 olul연습해보려고합니다!^^! 우선 css코드 만들어서 바디에들어갈 내용에 대해서 폰트사이즈와 백그라운드컬러 설정해주었구요:) 바디 사이에는 블럭을 넣어줍니다. 이 블럭안에 들어갈 것이 바로 순서 있는 목록(Ordered List)들입니다!! 순서 있는 목록은 ol로, 목록의 내용은 li로 작성해주시면 끝! 다음 보이시는 것과 같이 순서 있는 목록은 1, 2, 3, ···차례대로 증가하는 번호가 붙게 됩니다. 이번에는 1이 아니라 50번부터 주고싶은데요:) 그럴때는 블럭에서 에다가 start값을 지정해주세요! 아니? 나는 거꾸로 주고싶은데? 50 49 48....요렇게!! 그렇다면 start값은 50을 주되 뒷부분에 reversed ="reversed" 요렇게 추가해주세요 이제는 순서 없는 ..