화면구현/HTML 55

오버플로우

1) 이미지 넣기 2) 옆으로 배치하기 3) 4) 5) overflow 부모 밖 넘어가는 것들을 감춰준다. (전자앨범을 만들 때 사용하기 좋다) ** position static은 움직일 수 없음 따라서 id_row1에 absolute속성을 줌 #id_row1{ position: absolute; width: 420px; height: 1000px; } 전자앨범 만들기 더보기 hidden으로 넣고 고정시켜 parent가 all0 row1가 all0, all1, all2, all3 parent를 움직여 left로 조금 씩 움직이면 all0에서 all1로 all1에서 all2로 더보기 1) 왼쪽으로 움직이기위한 준비 -> left값이 옆으로 빠지지 않음 왜? alert(v_row1.style.left); >..

화면구현/HTML 2020.06.24

Position2

** relative는 static기준으로 움직이기 ** 1) 2) 내부스타일 >> 전체 div값 >> 전체 안에 있는 첫번째 div값 부모가 relative이면 자식 absolute는 부모 기준으로 움직인다. 더보기 부모가 static이면 브라우저 왼쪽 모서리 기준으로 움직인다. >> 두 번재 상자를 첫 번재 상자 옆에 더보기 >> 대각선 밑에 fixed 짜장면 짬뽕 우동 잡채밥 야끼짬뽕 쟁반짜장 간짜장 1) 스크롤 바가 생길 정도로 글자 넣기 더보기 짜장면 짬뽕 우동 잡채밥 야끼짬뽕 쟁반짜장 간짜장 야끼짬뽕 먹고싶다 야끼짬뽕 먹고싶다 야끼짬뽕 먹고싶다 야끼짬뽕 먹고싶다 야끼짬뽕 먹고싶다 야끼짬뽕 먹고싶다 야끼짬뽕 먹고싶다 야끼짬뽕 먹고싶다 야끼짬뽕 먹고싶다 야끼짬뽕 먹고싶다 야끼짬뽕 먹고싶다 야끼짬뽕..

화면구현/HTML 2020.06.23

스타일 사용법(내부와 인라인과 배열)

*** 스타일은 단위 명시!!*** 속성에서는 명시 안 해줘도 됨 외부 스타일 페이지를 따로 만들어 내부스타일 인라인 스타일 접근법 (-하이픈 들어간것) 하이픈빼고 대문자 권장 사용법 배열접근법 >> 움직이며 이미지가 변경되게 더보기 이전코드 1) 틀잡기 v_ball.style.backgroundImage="url("+경로+")"; 2) 경로만들기 3) 전체는? transform v_ball.style.transform="rotate("+각도+"deg)"; 360 넘어가면 값이 너무 커져! 필요없는 값들이 생성이된다 v_gak=(v_gak+10)%360; >> 전체 더보기 transform에 대해 자세히 알아보자 1) 사진 넣기 2) 버튼생성 3) onclick함수 구현 >> z축으로 도는 것이 defa..

화면구현/HTML 2020.06.23

Position

더보기 1) 박성연 임선영 백서윤 김지원 2) 스타일주기 block를 먹고있어 옆자리 허용하지 않음 박성연 임선영 백서윤 김지원 3) inline-block 옆자리 허락하는 block Position 위치 잡는 속성 레이아웃을 배치하거나, 객체를 위치시킬때 사용 default값 default값은 static 왼쪽에서 오른쪽, 위에서 아래로 쌓임 relative static으로 만들어진(브러우저가 만든) 그 지점 기준으로 움직임 태그의 위치를 살짝 변경하고 싶을 때 position: relative 사용 top(위), right(오른쪽), bottom(아래), left(왼쪽) 속성을 사용해 위치 조절이 가능 더보기 static을 변경 못해!! position: static밑의 left와 right 값들은 ..

화면구현/HTML 2020.06.22

타이머

자바스크립트의 타이머는 엄격하지 않음!! setTimeout 시간만큼 함수를 불러줌 setTimeout(함수명, 시간) 1초 뒤 함수 부르기 함수명, 시간(1000분의 1초) 2초마다 함수 부르기(재귀호출) 누가 먼저 불리게?(비동기함수) 제어권을 넘김(2번 먼저 불리고 1번이 불림) 계속 불리고 말고 더보기 div태그는 Division의 약자로 웹사이트의 레이아웃(전체적인 틀)을 만들때 주로 사용 1) Go!만 구현 2) Stop() 구현 stop()을 하려면 timer를 멈춰야함 함수의 리턴값을 지정해줘 3) clearTimeout setTimeout을 취소 setTimeout와 짝꿍

화면구현/HTML 2020.06.22

이미지

images앞에 ./가 생략 이미지태그에 접근하기 1) 아이디주기 > 2) 아이디 가져오기 3) 이미지 소스 바꾸기 4) 이미지 변경하며 크기도 변경 버튼 누르면 점점 이미지가 커졍 5) 다음 버튼 클릭 시 다른 이미지로 변경 더보기 >> 사진목록 >> 배열요소 확인 6) 마지막 사진 나오면 다시 처음 사진이 보이게끔 더보기 v_startIndex로 비교하려면 v_imgs.length으로 var v_index = v_startIndex++; if (v_startIndex == v_imgs.length) { v_startIndex = 0; } v_index로 비교하려면 v_imgs.length으로 function f_next() { var v_index = v_startIndex++; if (v_index..

화면구현/HTML 2020.06.22

콤보박스

1. 사용방법 value값을 0또는 1을 줌 원하는 옵션 선택하세용 아파치 톰캣 IIS 엔진엑스 selected selected를 사용하므로써 디폴트 선택이 엔진엑스로 들어감 선택하세용 아파치 톰캣 IIS 엔진엑스 onchange 기본이벤트를 onchange라 함!! onchange에서 f_chg()를 호출 >> 데스크톱용 더보기 1) 콤보박스에 대해 배워보장 선택하세용 아파치 톰캣 IIS 엔진엑스 2) 콤보박스 안의 내용 클릭하면 '옥진욱짱'이 출력 선택하세용 아파치 톰캣 Interner Information Service(IIS) 엔진엑스 3) 어떤 것을 선택하든지 nginx만 출력 아파치 톰캣 Interner Information Service(IIS) 엔진엑스 선택하세용 4) 선택된것만 출력(정석..

화면구현/HTML 2020.06.22