겉바속촉

우리가 지난번에 만들어둔 템플릿 덕분에html 파일을 만들때마다다음과 같이 코드가 작성되어 나옵니다 이제 다음과 같이 코드를 작성해주세요:) 여러가지 예제를 연습해볼게요! 제목입니다1 제목입니다2 제목입니다3 제목입니다4 제목입니다5 문단안에 링크태그가 있다 두번째 태그에는 링크는 손자이다 one two three four five six 여자에게 인기있는 남자직업 프로그래머 연예인 백수 약사 남자에게 인기있는 여자직업 교사 주부 프로그래머 약사 일반적인 문단이다 문단안에 Span태그있습니다 아이유 이쁘죠? 숨겨진 문단 자리를 차지하지 못한 문단 투명한 문단 오늘은 즐거운 화요일 Nice to Meet you 안녕하세요 Hello jquery div_Happy div_A div_B 클래스추가 클래스제거 ..

이제 제이쿼리를 해보도록 합시다 두둥 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..

이번에는 난수를 발생시키고 나서 그 수가 무엇인지 맞추는 간단한 게임을 만들어보도록 할게요:) 다음과 같이 코드를 작성해주세요 숫자입력: 여기까지 작성하신 후에 컴파일해보시면 숫자입력: 네모 ---> 이것만 나옵니다 왜냐면 우리가 아직은 div로 공간만 주었기 때문이죠:) 눈에는 보이지 않습니다. ---> 이렇게 숫자가 출력될 공간 생성해주시고 ----> 이렇게 이미지가 출력될 공간 생성해주시는 겁니다 이제 나타나게 해보도록 할게요:) title 밑에 그럼 다음과 같이 잘 나오죠?! 이제는 난수를 발생시키고 우리가 입력한 수와 비교해서 큰지 작은지 문장이 나오도록 설정해주시면 끝입니다. 1.난수 function 생성해주기 window.onload=function(){ rnd=parseInt(Math.ra..