HTML (9) 썸네일형 리스트형 [JavaScript] 문서 객체 모델 01 문서 객체 모델의 기본 용어와 개념 문서 객체 모델 기본 용어 - 문서 객체 : 태그를 자바스크립트에서 사용할 수 있는 객체로 만든 것 - 문서 객체를 조작한다는 말은 결국 태그를 조작한다는 의미 - 요소 노드 : 태그와 2. 이벤트 활용 Process - 1 Process - 2 02 문서 객체 선택 '문서 객체를 선택한다' : 이미 존재하는 HTML태그를 자바스크립트에서 문서 객체로 변환하는 것 1개 선택 document.getElementByld(아이디) 아이디로 1개 선택 document.querySelector(선택자) 선택자로 1개 선택 여러 개 선택 document.getElementsByName(이름) name 속성으로 여러 개 선택 document.getElementsByClassN.. [JavaScript] 자바스크립트 기본 문법 01 자바스크립트 기본 용어와 출력 방법 자바스크립트 기본 용어 - 표현식 : 값을 만들어 내는 간단한 코드 273; 10 + 20 + 30 *2; var name = '파'+'이'+'썬'; alert('Hello JavaScript'); - 문장 : 프로그래밍 언어에 실행할 수 있는 코드의 최소 단위 273 10+20+30*2 'JavaScript' - 종결 : 문장 마지막에 세미콜론(;) 또는 줄바꿈 자바스크립트 기본 용어 - 키워드 : 자바스크립트를 처음 만들 때 정해진 특별한 의미가 부여된 단어 - 식별자 : 자바스크립트에서 변수나 함수 등에 이름을 붙일 때 사용하는 단어 키워드를 사용하면 안된다 특수 문자는 _과 $만 허용 숫자로 시작하면 안됨 공백을 입력하면 안됨 식별자 생성 관례 생성자 함수.. [CSS] 반응형 웹 01 반응형 웹 소개 반응형 웹 - 웹 페이지 하나로도 데스크톱, 태블릿PC, 스마트폰에 맞게 디자인이 자동으로 반응해서 변경되는 웹 페이지 ○ 개발 효율성, 유지 보수 용이 - 미디어 쿼리(media query)를 사용해 개발 뷰포트 설정 - meta 태그 : 추가적인 웹 페이지 정보를 제공 - 뷰포트와 관련한 meta 관련 설정 - viewport meta 태그 - name 속성에 viewport가 입력된 meta 태그 - viewport meta 태그의 content 속성에 입력할 수 있는 값 width 화면 너비 width=240 height 화면 높이 height=800 initail-scale 초기 확대 비율 initial-scale=2.0 user-scalable 확대 및 축소 가능 여부 u.. [CSS] 레이아웃 구성 01 수평, 중앙, One True 정렬 레이아웃 수평 정렬 레이아웃 - float와 overflow 속성을 사용해 레이아웃을 만들기 - 규칙: 자손에게 float 속성을 지정하고, 부모의 overflow속성에는 hidden키워드를 적용 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint dolore consectetur rerum quisquam error eligendi mollitia facilis officiis similique non. Totam reprehenderit eveniet optio possimus quo et minus voluptatibus molestias. 메뉴 - 1 메뉴 - 2 메뉴 - 3 메뉴 - 4 Lorem.. [CSS] CSS3 속성 01 박스 속성 - 웹 페이지의 레이아웃을 구성할 때 가장 중요 margin 속성 테두리와 다른 태그 사이의 테두리 바깥쪽 여백 border 테두리 padding 테두리와 글자 사이의 테두리 안쪽 여백, 배경색은 padding 영역까지만 적용 width 글자를 감싸는 영역의 가로 크기 height 글자를 감싸는 영역의 세로 크기 박스 크기와 여백 - width와 height 속성 : 글자를 감싸는 영역의 크기를 지정 - border : 테두리의 두께 지정 - margin : 테두리와 다른 태그의 간격을 지정 - padding : 테두리와 바깥쪽 여백을 지정 태그 전체의 크기 구하기 * margin, border, padding 속성은 양쪽에 위치하므로 2를 곱함 - 전체 너비 = width + 2 x (.. [CSS] CSS3 기초 : 선택자와 단위 01 선택자의 용도와 사용법 CSS 개요 - 선택자 : CSS3에서 특정 HTML 태그를 선택할 때 사용 - 스타일시트 : CSS로 작성된 코드 - 기본 선택자 전체 선택자 * HTML 페이지 내부의 태그를 모두 선택 태그 선택자 태그 HTML 페이지 내부의 특정 태그를 모두 선택 아이디 선택자 #아이디 특정 id 속성이 있는 태그 선택, 웹 표준에 id 속성은 웹 페이지 내부에서 중복되면 안 된다는 규정이 있으므로 아이디 선택자는 특정 태그 하나를 선택할 때 사용 클래스 선택자 .클래스 특정 클래스가 있는 태그 선택 전체 선택자와 태그 선택자 1. 전체 선택자 사용하기 제목 글자 태그 Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantiu.. [HTML] 입력 양식 태그와 구조화 태그 01 입력 양식 태그 입력 양식 - 사용자에게 정보를 입력받는 요소 입력 양식 개요 - 태그 : 영역 생성 입력 양식 종류 기본 입력 양식 태그 - 태그의 type 속성을 이용해 다양한 기본 입력 양식 생성 간단한 입력 양식 생성 - 라디오 버튼의 name 속성을 이용해 여러 대상 중 하나만 선택하는 형태 이 름 성 별 남자 여자 선택 가능한 입력 양식 1. 한 항목만 선택하기 : 태그 이용 - 목록으로 보여주는 항목 중 하나 또는 여러 개를 선택할 때 사용 - 기본적으로 하나만 선택 가능 - , 태그를 함께 사용 점심 메뉴 김밥 떡볶이 돈까스 라면 2. 여러 항목 선택하기 : 태그의 multiple 속성 사용 점심 메뉴 김밥 떡볶이 돈까스 라면 3. 선택 옵션 묶기 : 태그 사용 점심 메뉴 김밥 떡볶이.. [HTML] HTML5 기본 태그 01 글자 태그 제목과 본문 글자 태그 - 문서의 제목을 표현할 때 사용 - h는 heading을 의미 태그 설명 제목 글자 h1 첫 번째로 큰 제목 글자 생성 h2 두 번째로 큰 제목 글자 생성 h3 세 번째로 큰 제목 글자 생성 h4 네 번째로 큰 제목 글자 생성 h5 다섯 번째로 큰 제목 글자 생성 h6 여섯 번째로 큰 제목 글자 생성 본문 글자 p 본문 문단 생성 br 줄 바꿈 hr 수평 줄 삽입 제목 글자 태그 h1 글자 태그 h2 글자 태그 h3 글자 태그 h4 글자 태그 h5 글자 태그 h6 Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae expedita dicta debitis quidem dignissimos officii.. 이전 1 2 다음
