목록전체 글 (659)
겉바속촉
이미지1 이미지2 이미지3 점점크게 점점작게 컴파일 해보시면다음과 같이 뜰텐데요:) 이미지1버튼 누른경우 확인 눌러보시면 다음과 같이 사진이 뜹니다 점점크게 버튼 누른 경우 점점 작게 버튼 누른 경우
우리가 지난번에 만들어둔 템플릿 덕분에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..
이번에는 자바스크립트 활용해서 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" 요렇게 추가해주세요 이제는 순서 없는 ..
fucntion을 여러개 만들어서 alert창으로 확인해볼게요:) 컴파일 해보시면 다음과 같이 뜹니다:) 사이에 우리가 button타입으로 주었기 때문에 클릭 가능한 것들이쥬? value값에 넣어 준 값들이 버튼에 들어가 있구요!! onclick에 지정해준 함수들이 잘 작동되는 지 하나씩 눌러봅시다! 첫번째 alert 누르면 --> test1 함수가 작동되는 데 123을 넣은 결과가 도출됩니다:) 두번째 alert 누르면 --> test2 함수가 작동되는 데 문자열 str인 HELLO를 넣은 결과가 도출됩니다:) 세번째 confirm 누르면 --> test3 함수가 작동되는 데 이 함수는 confirm창이 뜨도록 되어 있습니다 확인 버튼을 누르면 = 추가됐어요 취소 버튼을 누르면 = 취소했어요 네번째 p..
이번에는 onchange를 연습해보도록 합시다:) 우선 html파일 3개를 만들어주세요 그 다음 이미지를 넣고 select로 이동시켜볼게요 select1 select1페이지입니다 select2 select2페이지입니다 select3 select3페이지입니다 main 블럭 사이에 을 만들어주세요 그리고 를 주실 건데요 ---> onchange 를 적용시켜주시는 겁니다. 선택하세요 페이지1로 이동 페이지2로 이동 페이지3로 이동 컴파일해보시면 다음과 같은 창이 실행이 됩니다. 선택하세요 박스 클릭하시면 다음과 같이 목록이 뜹니다:) 코드에서 작성한 각각의 value값들인 거쥬 페이지1로 이동 누르면 페이지2로 이동 누르면 페이지3로 이동 누르면 각각 잘 작동했다면 성공!^^!