It
-
문서 객체 모델자바 초보개발/HTML 2023. 12. 6. 15:01
HTML 문서 객체 모델 기본 용어와 사용에 대해서. 정적 생성: 웹페이지를 처음 실행할 때 HTML 태그로 적힌 문서 객체를 생성하는것 동적 생성: 웹페이지 실행중 스크립트로 문서 객체를 생성하는것 문서 객체 모델: 웹 브라우저가 HTML파일을 분석하고 출력하는 방식. DOM(Document Object Model) 이라고 줄여 부르기도 한다. 웹페이지 실행 순서 HTML 스크립트는 일반적으로 위에서 아래로 시작되기 때문에, 위에 선행되지 않은 요소에 대해서 속성값을 변경할 수 없다. DOCTYPE html> DOM fault example //h1 태그 배경 색상 변경 document.querySelector('h1').style.backgroundColor= 'red'; //h2 태그 글자 색상 변..
-
JS 기초자바 초보개발/HTML 2023. 12. 4. 16:33
여태 기초적인 웹페이지 동작을 위해 HTML을 통해 정보를 표시하고, 그 정보의 디자인을 위한 CSS를 사용하는 방법을 학습했다. 오늘은 자바스크립트의 기본적인 사용법을 학습한다. 자바 스크립트는 html 태그 위치와 상관없이 만들 수 있지만, 스크립트가 위에서 아래로 실행되기 때문에 스크립트 실행이 우선되야할 경우 head부분에 작성해서 사용한다. 자료형 자바 스크립트에서는 자바와 달리 변수,메서드 선언시에 자료형을 지정하지 않는다. 숫자형 : 정수와 실수의 자료형 구분이 없다. 문자열 : 문자집합.자바와 동일 날짜 객체 Date는 문자열 형태로 저장된다. 연산자는 자바와 동일하지만, 두드러지게 차이나는 연산자는 아래와 같다. == 연산자를 사용시 자바스크립트는 10 == '10'이 true가 나온다...
-
CSS 기초자바 초보개발/HTML 2023. 11. 30. 15:46
CSS3를 사용하여 여태 작성했던 HTML코드에 정렬과 꾸미기를 적용해보려고 한다. CSS는 HTML의 태그 내에서 태그를 사용하여 적용할 수 있고, { } 블록 안에 코드를 입력해 적용한다. ex) *{border : 0px} 상속관계 이전에 HTML을 사용해보면서 , 태그 안에 태그를 넣을 수 있다는 것을 알게되었다. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit 예시1. 위를 예시로 보면 태그 안에 태그가 두개 들어가있다. CSS로 태그를 스타일변경시 ..