position의 속성
> position: static -> 기본값(이동 불가)
> position: relative
> position: abslute
> position: fixed
> position: sticky
relative란?
- 자기 자신을 기준으로 이동
absolute란?
- 이름과 같이 절대적 위치에 둘 수 있음.
- 부모를 기준으로 이동
- absolute를 쓸 경우, 기준이 될 부모에게 relative를 부여하고 원하는 위치에 지정
fixed란?
- viewpoint를 기준으로 고정
sticky란?
- 스크롤 영역 기준으로 배치
- 부모 컨테이너 안에서 스크롤링 시 스크롤링 방향에 따라 지정된 포지션에서 유지
parseInt() 함수
parseInt(string, radix)
파라미터
> string: 숫자로 변환한 문자열
> radix: string 문자열을 읽을 진법(2~36의 수)
리턴값
> string을 정수로 변환한 값
예제
String number1 = new String("1234");
String number2 = new String("4321");
System.out.println(number1 + number2);
결과를 출력 -> 12344321 출력
1234 + 4321을 했을 시 int형이라면 결과가 5555로 나오지만, number1과 number2의 타입은 string, 즉 문자열 타입이기 때문에 +를 사용하면 계산이 아닌 단순 문자열을 연결해 주는 값이 나옴.
int타입으로 저장하여 결과를 5555로 출력하고 싶다면?
=> parseInt() 를 사용하자
String strNum1 = new String("1234");
String strNum2 = new String("4321");
int num1 = Integer.parseInt(strNum1);
int num2 = Integer.parseInt(strNum2);
System.out.println(num1 + num2);
다음과 같이 strNum1과 strNum2를 parseInt()를 사용하여 int타입으로 변환해 주면 답은 5555가 나옴.
int만 가능한가?
=> x. 숫자와 관련된 타입은 전부 가능
- Byte.parseByte();
- Short.parseShort();
- Integer.parseInt();
- Long.parseLong();
- Float.parseFloat();
- Double.parseDouble();
href란?
> 하이퍼 참조.
> = 다음에는 참조할 파일명을 씀
href = '#'을 쓰는 경우들
> 같은 문서 내의 해당 element로 이동하도록 함
링크의 URL
- 절대 주소 ex) href=“http://www.tcpschool.com/index.php”
- 상대 주소 ex) href=“/lecture/logo.png”
- 같은 페이지 내에서 명시된 id를 갖고 있는 요소 연결 ex) href=“#bottom”
- 스크립트 ex) href=“javascript:alert(‘반갑습니다!’)”
예제
<a href="https://www.naver.com">네이버 사이트로 이동!</a>절대 주소
<p id="top">모든 국민은 행위시의 법률에 의하여
...
받지 아니한다.</p>
<a href="#top">Top으로 이동</a>같은 페이지 내에서 명시된 id를 갖고 있는 요소 연결
<a href="javascript:alert('자바스크립트가 실행되었습니다.');">자바스크립트 실행!</a>자바 스크립트
출처: https://www.tcpschool.com/html-tag-attrs/a-href
onmouseover란?
> 마우스 커서가 HTML 요소 위로 이동하면 활성화
- onmouseover 이벤트는 이벤트가 발생했을 때 실행할 함수만을 매개변수로 받음
- onmouseover 이벤트를 갖고 있는 요소 위로 마우스를 가져다 댐 -> 스크립트 정의된 함수 실행
- 이벤트의 매개변수로 지정한 함수 이름은 이벤트가 활성화 될 때마다 실행
onmouseover의 리턴값
> 아무것도 리턴 X
> 작동 확인하고 싶으면 마우스를 가져갈 때마다 정의한 함수가 실행하는지 확인
object.onmouseover = function_name() { function_script };
onmouseout란?
> 마우스 커서가 HTML 요소를 벗어나면 활성화
elementOfDOM.onmouseout = nameOfFunction;
elementOfDOM은 document의 요소를 나타냄 -> 마우스 커서가 요소 영역에서 나갈 때 onmouseout 활성화 후 특정 작업 수행
예제
<!DOCTYPE html>
<html>
<body>
<img onmouseover="onmouseoverFunction(this)" onmouseout="onmouseoutFunction(this)" src="https://images.unsplash.com/photo-1686481394225-dba348a3ee0f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1965&q=80" width="64" height="64">
<p>마우스를 이미지에 가져가면 onmouseoverFunction() 실행.</p>
<p>마우스를 이미지에 밖으로 옮기면 onmouseoutFunction() 실행.</p>
<script>
function onmouseoverFunction(x) {
x.style.height = "128px";
x.style.width = "128px";
}
function onmouseoutFunction(x) {
x.style.height = "64px";
x.style.width = "64px";
}
</script>
</body>
</html>
마우스 커서를 가져다 대면 이미지가 확대됨
마우스 커서를 이미지에서 떼면 이미지는 원래 크기로 돌아감
출처: https://sisiblog.tistory.com/400 [달삼쓰뱉:티스토리]
'워게임 스터디' 카테고리의 다른 글
| [250408][Webhacking] old-25 (0) | 2025.04.08 |
|---|---|
| [250408] wrapper (0) | 2025.04.08 |
| [250401][Webhacking] old-10 (0) | 2025.04.01 |
| [250325][Webhacking] old-12 (0) | 2025.03.25 |
| [250219] [dreamhack] ex-reg-ex (0) | 2025.02.19 |