학부생나부랭이/_web_programing9 javascript_study_d2_정리 객체 알아보기 (1) | 자바스크립트는 웹과 관련된 대상을 모두 객체로 인식합니다. 자바스크립트에서 사용하는 객체 종류설명 문서 객체 모델(DOM) 웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지와 링크, 텍스트 필드 등도 모두 객체입니다. 브라우저 관련 객체 웹 브라우저에서 사용하는 정보도 객체로 나타낼 수 있습니다. 내장 객체 웹 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의되어 있는데, 이를 내장 객체라고 합니다. 객체의 인스턴스 만들기 new 객체명 Copy 자바스크립트에서 객체는 참조 형태인 인스턴스(instance)의 형태로 만들어서 사용해야 합니다. 객체의 인스턴스를 만들 때는 new라는 예약어를 사용합니다. 객체 알아보기 (2) | 프로퍼티와 메서드 이.. 2022. 2. 12. javascript_study_d1_정리 자바스크립트로 무엇을 할까 | 웹의 요소를 제어합니다. 웹 애플리케이션을 만듭니다. 다양한 라이브러리를 사용할 수 있습니다. 서버 개발을 할 수 있습니다. 웹 문서 안에 태그 사이에 실행할 자바스크립트 소스를 작성할 수 있습니다. Copy 외부 자바스크립트 파일은 태그 없이 자바스크립트 소스만 작성하고 확장자는 .js 파일로 저장합니다. HTML 문서에서 태그의 src 속성을 이용해서 자바스크립트 파일을 연결하면 됩니다. 간단한 입출력 방법 - 알림 창 출력하기 | alert(메시지) Copy alert()를 입력하고 괄호 안에 따옴표("" 또는'')와 함께 메시지를 넣어 주면 됩니다. 간단한 입출력 방법 - 확인 창 출력하기 | confirm(메시지) Copy 확인 창(confirm)은 사용자가 [확인.. 2022. 1. 24. css_study_d4_정리 미디어 쿼리 알아보기 | 미디어 쿼리는 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법입니다. 미디어 쿼리를 사용하면 접속하는 기기의 화면 크기에 따라 레이아웃이 달라집니다. 미디어 쿼리 구문 @media [only | not] 미디어 유형 [and 조건] * [and 조건] only : 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않습니다. not : not 다음에 지정하는 미디어 유형을 제외합니다. and : 조건을 여러 개 연결해서 추가할 수 있습니다. 미디어 쿼리 적용하기 외부 CSS 파일 연결하기 @import url(css 파일 경로) 미디어 쿼리 조건 웹 문서에 직접 정의하기 그리드 레이아웃 알아보기 | 그리드 레이아웃이란 그리드 레이아웃.. 2022. 1. 18. css_study_d3_정리 하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자 (1) | 특정 요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 합니다. 그리고 현재 요소를 기준으로 바로 한 단계 아래 요소는 자식 요소라고 하며, 그 자식 요소의 한 단계 아래는 손자 요소라고 합니다. 하위 선택자 상위요소 하위요소 Copy 하위 선택자를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택하며 자손 선택자라고도 합니다. 하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자 (2) | 자식 선택자 부모요소 > 자식요소 Copy 자식 선택자는 하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자로, 두 요소 사이에 > 기호를 표시해 부모 요소와 자식 요소를 구분합니다. 형제 요소에 스타일을 적용하는 인접 형제 선택자.. 2022. 1. 14. css_study_d2_정리 블록 레벨 요소 사용하기 | 블록 레벨 요소란 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것을 가리킵니다. 해당 요소의 너비가 100%라는 뜻으로 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없습니다. 블록 레벨 요소를 만드는 대표적인 태그로 , , 등이 있습니다. 인라인 레벨 요소 | 인라인 레벨 요소는 한 줄을 차지하지 않습니다. 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있습니다. 인라인 레벨 요소를 만드는 태그로 , , 등이 있습니다. 박스 모델의 기본 구성 | 박스 모델은 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding), 박스의 테두리(border), 그리고 여러 박스 모델 사이의 여백인 마진(margin) 등의 요소로 구성됩니.. 2022. 1. 7. css_study_d1_정리 인라인 스타일 사용하기 | 인라인 스타일 간단한 스타일 정보를 적용하는 경우에 사용합니다. 스타일을 적용할 대상에 직접 표시하는 방법을 인라인 스타일이라고 합니다. 스타일을 적용하고 싶은 부분이 있다면 해당 태그에 style 속성을 사용해 style="속성: 속성값;" 형태로 스타일을 바꿀 수 있습니다. 내부 스타일 시트 사용하기 | 내부 스타일 시트 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것을 내부 스타일 시트라고 합니다. 스타일 정보는 태그 안에서 정의하고 과 태그 사이에 작성합니다. 외부 스타일 시트 사용하기(CSS 파일) | 외부 스타일 시트 Copy 여러 웹 문서에서 사용할 스타일을 별도 파일로 따로 저장해 놓은 스타일 정보를 외부 스타일 시트라 하고 ***.css**라는 파일 .. 2022. 1. 4. 혼자 끄적여 본 html 오늘 alice academy 를 통해 html 기본적인 것들을 복습해 보았다. 70~80 % 정도는 기억나는 것이었지만, 막상 코드를 치려하니 손이 움직이지 않더라. 그래서 학습하며 vscode 를 통해 혼자 끄적여 보았다. 기본적인 것들을 사용하여 진짜 진짜 간단한 웹페이지라고 하기엔 부끄러운 무언가를 만들었다. 갑자기 이상한 나라의 앨리스가 생각나서 그냥 내키는 대로 주제를 이상한 나라의 앨리스로 잡았는데 지금 생각해보면 참 의식의 흐름대로 행동한것이 보인다. form 을 통해 설문지 비스무리 한것을 형성 하였고, 내부 사정으로 개인정보와 장소 시간을 정하도록 만들어 보았다. 처음엔 form 안에 form 을 넣어서 sumit 과 reset 버튼이 작동을 하지 않았는데 꽤나 지난후에야 form 안에.. 2022. 1. 3. html_study_d2_정리 폼 삽입하기 | 폼을 만드는 태그 여러 폼 요소 Copy 종류설명 method 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정합니다. method에서 사용할 수 있는 속성값은 get과 post입니다. name 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정합니다. action 태그 안의 내용을 처리해 줄 서버 프로그램을 지정합니다. target action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 합니다. autocomplete 폼에서 내용을 입력할 때 예전에 입력한 내용을 자동으로 표시해 주는 자동 완성 기능을 지정합니다. 기본 속성값은 “on”입니다. 폼 요소를 그룹으로 묶는 , 태그 그룹 이름 Copy 하나의 폼 안에서 여러 구역을 나누어 .. 2022. 1. 3. html_study_d1_정리 HTML이란? HTML은 HyperText Markup Language의 줄임말로 웹 문서를 만드는 언어라고 할 수 있습니다. HTML의 기본 기능은 웹 브라우저에 보여 줄 내용에 마크업하고 문서끼리 링크하는 것입니다. HTML 구조 파악하기 HTML 문서는 일반 문서와 달리 정해진 형식에 맞추어 내용을 입력해야 합니다. 웹 문서는 보통 로 시작해 , : 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분입니다. ~ : 실제로 웹 브라우저 화면에 나타나는 내용입니다. 앞으로 우리가 공부할 HTML 태그는 대부분 태그 안에 들어 있습니다. 웹 문서 구조를 만드는 주요 시맨틱 태그 태그는 말 그대로 헤더 영역을 의미합니다. 태그는 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로.. 2021. 12. 30. 이전 1 다음
