겉바속촉

이번에는 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로 이동 누르면 각각 잘 작동했다면 성공!^^!