Golden Bird

9~10월 내에 공부할 것들. 1. 그동안 공부한 웹 내용 리뷰 2. 생활코딩 WEB 1 +) 9/8 강의 들으며 그동안 작성해놨던 글에 보충 중이다. 3. HTML 토이 프로젝트 4. 생활코딩 JS 5. JS 토이 프로젝트 -> 최대한 빨리 해서 우테크 지원해볼 수 있을까,...?

자바 입문 공부를 하다보니 속성과 프로퍼티가 계속 나오는데 정확하게 뭔지 모르겠어서 하는 정리~~ 정리하다보니 내가 모르는 용어가 정말 많구나를 느꼈다~~ intro 브라우저는 웹페이지를 만나면 HTML을 읽어(파싱(parsing)) DOM 객체를 생성한다. * DOM: 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성해 메모리에 적재한다. 즉, 모든 요소, 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 객체들의 부자 관계를 표현하는 트리 구조로 구성한 것이 DOM. 이 DOM은 JS로 동적으로 변경할 수 있고, 변경된 DOM은 렌더링에 반영된다. * Rendering 렌더링: html로 입력받아 해석해서 표준 출력 장치(모니터)로 출력하는 과..

JS는 HTML에 동적 요소를 더하는 것! 다음과 같은 다양한 확장 기능을 사용할 수 있다. 브라우저 Application Programing Interface (APIs) — 브라우저에 내장된 API로 HTML을 동적으로 생성하고 CSS 스타일을 설정하거나, 사용자의 웹캠으로부터 비디오 스트림을 수집하거나 조작하는 것, 또는 3D 그래픽이나 오디오 샘플을 생성하는 것과 같은 다양한 기능을 제공합니다. 제3자 (third-party) API를 활용해 개발자는 트위터나 페이스북 같은 다른 컨텐츠 공급사부터 제공되는 기능을 자신의 사이트에 통합할 수 있습니다. +) JS 더 알아보기 https://developer.mozilla.org/en-US/docs/Learn/JavaScript [JavaScript ..

CSS: style-sheet 언어. (프로그래밍 언어 X, 마크업 언어 X) 주석: /* */ [실습] HTML 파일에 아래의 코드 추가. - 1. href: 스타일 시트 경로 저장. - 2. rel(relationship): 사용해 현재 문서와 link하는 문서의 관계 설명. - stylee/style.css 코드 내용은 아래와 같음. p { color: red; } 전체 구조 = rule set. Rule set은 {} 로 감싸져야 함. selector: HTML 중 꾸밀 요소를 선택. 여기선 p를 꾸민다. +)선택자 가이드 Declaration: 꾸밀 내용 selector 요소(p)의 Property를 property value로 한다. [CSS의 레이아웃] padding: 컨텐트 주위의 공간 (..

HTML (Hypertext Markup Language,하이퍼텍스트 마크업 언어): 웹페이지의 구조를 브라우저에게 알려주는 마크업 언어. [HTML의 개별 요소들] 1. element: HTML을 구성하고 있는 '요소'를 뜻함. *HTML elements는 대소문자 구분 X. 보통 가독성을 위해 소문자 사용. 1-1) Block-level elements: 두 요소 사이의 줄을 바꿀 때 사용. (단락 등) 인라인 요소를 제외하고 다른 요소들에 중첩될 수 있음. 1-2) Inline elements: 문장, 단어 같은 작은 부분에 대해서만 적용. 하이퍼링크를 정의하는 요소인 , Text를 강조하는 요소인 , 1-3) empty element: ex) 사진을 넣기 위해 단일 태그 사용. : src(필수)는..

C / web_projects / test-site / 1~4 index.html: 홈페이지의 내용 포함, 즉 사이트에 처음 접속시 나오는 화면(텍스트&이미지). 텍스트 에디터로 작성. images 폴더: 사이트에 이용할 모든 이미지 styles 폴더: CSS 코드 포함 (문자, 배경색 세팅 등) scripts 폴더: JavaScript 코드를 포함, 즉 사이트에 상호작용하는 기능을 추가할 때 (클릭할 때 자료를 불러오는 버튼 등) HTML에 이미지 불러오기: 파일 경로 관련 규칙 호출하는 HTML 파일과 같은 디렉토리에 있는 파일을 연결하려면 파일이름만 사용하면 됩니다. 예시: my-image.jpg. 하위 폴더에 위치한 파일을 참조하기 위해서는, 디렉토리 이름과 전방향 슬래시(/)를 경로 앞에 추가합..

1. 웹사이트의 내용, 외관에 대한 계획 세우기: 2. 간단한 스케치 3. 자원 선택 - 필요한 색(the Color Picker), 이미지(Google Images), 글꼴(Google Fonts) - 색의 hex 코드를 저장해놓을 것. - 이미지 다운로드 / 웹 주소 복사. - 저작권 보호를 위해 goolge images > search tools > usage rights - 글꼴: add to collection > use **폰트 적용하는 방법이 나와있는데 css 공부를 아직 안해서인지 뭔지 모르겠음 원래 디자인을 좋아해서 그런지 되게 재밌다!

Main - Web과 함께 시작하기 - Web 개발 학습하기 / MDN https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web [목차] 기본 소프트웨어 설치하기(Installing basic software) 07/03 clear! 웹사이트의 외관은 어떻게 할까요?(What will your website look like?) 07/03 clear! 파일 다루기(Dealing with files) 07/03 clear! HTML 기본 07/02 clear! CSS 기본 07/08 clear! JavaScript 기본 07/16 clear! 웹사이트 출판하기(예제 코드 출판) 웹의 동작 방식 +) HTML 코드 편집기 https:/..