Kosta DevOps 과정 280기/Java109 문서 객체 모델 DOM (Document Object Model) - 문서객체 모델웹페이지가 로드되면 자바스크립트는 해당페이지의 모든 html 구성요소를 객체로 인식하고 관리한다. html 의 구성요소인 각각의 태그는 객체로 인식되며, 또 계층형의 구조를 갖는다.html 자식은 head와 body 등의 객체로 인식head자식은 title, titele 자식은 텍스트 글자를 가진 텍스트 노드이며 객체로 인식위와 같이 html 의 모든 구성요소를 객체로 파악하는 모델을 DOM 이라고 한다.DOM 객체 모델을 이용해 동적인 html을 표현할 수 있다.사용자 요청에 의하여 새로운 노드 추가, 필요없는 노드를 제거, 수정정적 html vs 동적 html 정적 html : 웹 페이지를 실행할 때 처음부터 HTML 태그로 적힌 문.. 2024. 7. 10. 객체 배열자바스크립트에서는 배열도 객체로 표현한다.자바스크립트의 배열은 자바 ArrayList 처럼 여러가지 자료형을 담을 수 있다.let data = ["홍길동", 20, "서울시 종로구 관철동"];data[0];data[1];data[2];배열의 요소가 객체이거나 배열일 수 있다.[[], [], []] 또는 [{}, {}, {}] 객체Javascript Object Notation => JSON여러가지 속성과 동작으로 구성자바의 Map과 같이 key 와 value 로 이루어진 데이터 셋여러가지의 데이터를 처리할 때, 배열보다 객체가 더 효율적이다.//자바스크립트 객체let data2 = {name : "홍길동", age: 20, addr: "서울시 종로구 관철동"};//접근alert(data2.n.. 2024. 7. 10. 미디어 쿼리 설정 사용방법@media 미디어타입 and (미디어특징){ css 설정} 미디어 종류all : 모든 장치screen : ghkaustv : 텔레비전print : 프린트projection : 프로젝트미디어 타입에 사용할 수 있는 연산자and : 미디어 타입과 미디어 특징을 연결하기 위한 연산자.only: 해당 장치에서만을 의미할때not : 해당 장치를 제외할 때 미디어 특징width : 화면의 너비height : 화면의 높이divice-width : 장치 너비device-height : 장치 높이orientation : 장치 방향max-width : 최대 크기min-width: 최소크기적용안에서 설정 : @media 미디어쿼리 { css설정 }밖에서 설정 : 예시@media screen{ /*css 설정*/}.. 2024. 7. 9. 반응형 웹 반응형 웹 웹페이지 하나로도 사용자가 사용하는 브라우저에 따라 알맞게 서비스하는 것을 말한다. 사용자의 브라우저가 데스크탑이면 데스크탑에 맞도록, 태블릿 pc 이면 태블릿 pc 에 맞도록 스마트폰이면 스마트폰에 알맞도록 자동으로 반응해서 변경되는 것을 말한다. 미디어쿼리 (media query)사용자가 요청하는 장치에 따라 css를 다르게 설정하기 위한 기술 반응형 웹을 위한 설정meta 태그 : 웹 페이지에 대한 추가 정보를 제공뷰포트 설정 : 컴퓨터 그래픽스에서 내용을 표시하는 영역을 뜻한다.스마트폰이나 태블릿 pc 의 반응형 웹 처리를 위해 반드시 뷰포트를 설정해야 한다.설정하지 않으면 desktop 기준으로 보인다.width : 화면너비 --> device-width 로 적는 것이 일반적heigh.. 2024. 7. 8. 수평 레이아웃 (가로로 배치하기) item 들을 가로로 배치하기 위하여 item 클래스에 float 을 left 로 설정하여 다음 노드에 영향을 끼치지 않도록 하기 위하여 부모 노드인 container 에 overflow: hidden 으로 설정할 수도 있고 새로 시작하는 노드인 clear : both 로 설정할 수도 있다. 2024. 7. 8. 그림자 설정하기 text-shadow : 글자에 그림자 설정하기box-shadow : 박스에 그림자 설정하기쉼표를 이용하여 여러개의 shadow 를 줄 수 있다. 2024. 7. 8. position, float + index, overflow position:absolute요소를 원하는 곳에 배치하기 위하여 설정.부모 노드를 기준으로 잡는다.left: 가로 위치 설정top : 세로 위치를 설정부모가 position:relative 이어야 한다.position :fixed많아서 스크롤 해도 그 위치에 고정하고 싶을 때 사용한다.z-index : 노드들이 겹칠 때 쌓이는 순서를 정하기 위해 z-index 를 사용한다.z-index : 의 값이 높을 수록 위에 보이게 된다.z-index를 따로 설정하지 않으면 자동으로 나중에 만든 요소가 위에 올라온다.floatleft: 노드를 왼쪽 정렬하여 배치하기right: : 노드를 오른쪽 정렬하여 배치하기clear : float 을 설정한 경우 계속하여 다음의 노드도 float 의 영향을 받을 수 있기 때.. 2024. 7. 8. font 및 글자 기타 속성 font 속성font-size: 글자 크기font-family : 글꼴font-style : 글자 스타일font-weight : 글자 두께한꺼번에 지정 --> font : font-style font-weight font-size font-family;text-align : 글자 정렬left(기본), right, center, justifyline-height: 행간text-decoration : 언더라인등의 설정 2024. 7. 8. 이전 1 2 3 4 5 6 7 ··· 14 다음