CS/Web9 [2021-07-19] WEB2-JavaScript (33-38강) ◑ 객체의 사용 - 객체 내부에 여러개의 메소드를 담을 경우 해당 메소드들을 서로 콤마(,)로 구분해주어야 한다. ◑ JavaScript 코드를 하나의 파일로 묶어서 사용하기 - 똑같은 JavaScript 코드를 여러가지 페이지에서 동일하게 사용하는 경우, 그 JavaScript코드에 수정사항이 생기면 모든 페이지의 그 코드에 찾아가서 일일이 수정해야 하는 번거로움이 존재한다. 따라서 해당 코드를 이름을 붙여 별도의 페이지에 파일로 저장해두고, 그 코드 필요한 부분에 그 파일 이름을 사용한다. - [ HOW? ] 빈 파일 만들기 (파일명.js) → 내부의 코드만 그 파일안에 옮기기 → 껍데기만 남은 태그에 추가하기 ◑ 라이브러리 & 프레임워크 - 공통점 : 다릉.. 2021. 7. 19. [2021-07--15] WEB2-JavaScript(21-32강) ◑ 배열과 반복문 - while문 (※ 조건식에서 부등호 < 사용) - 태그 selector를 이용한 반복문 : 해당 태그를 가진 모든 애들한테 빠짐없이 똑같은 명령 내릴 때 -document.querySelectorAll('@'); 태그들의 목록 -document.querySelector('@'); 태그 목록 중 첫번째꺼 ◑ 함수 [함수의 장점] 1. 중복된 코드들을 묶어서 사용함으로써 유지보수의 효율성을 높임 2. 웹 페이지의 사이즈가 줄어든다. 3. 해당 함수로 나타난 부분의 코드가 서로 완전히 동일한 코드라는 확신을 보장함 [함수의 선언] 함수 = 입력 (parameter, argument) + 출력 (return) function 함수이름(매개변수) { 수행 내용; } [ 매개변수와 인자 ] &.. 2021. 7. 15. [2021-07-14] WEB2-JavaScript (1-20강) ◑ JavaScript - 사용자와 웹 페이지가 서로 상호작용할 수 있도록 하는 용도 - : html의 언어로 이 안에 있는 코드는 자바스크립트임을 알려주는 태그 - html vs JavaScript html 정적이다.(곧이 곧대로) JavaScript 동적이다.(계산능력 갖춤) - 웹 페이지에서 오른쪽 마우스>검사>Console에서 JavaScript 언어만 입력하고 Enter 치면 바로 수행됨 ◑ 사건(event) - 웹 브라우저 위에서 일어나는 일들 * 버튼을 만드는 태그 : * button에 적을 텍스트값 지정하는 속성 : value=" " * [이벤트] : onclick 속성(클릭 시 수행할 사건 = ex. 'hi'라는 경고장(alert) 뜨게 하기) * 여기서 alert(' '); → 이 부분.. 2021. 7. 14. [2021-07-12~2021-07-13] WEB2-CSS (5-16강) ◑ CSS Properties * font-size: @@px; : text 사이즈 조절 * text-align: center(left, right 등); : text 정렬 조절 * class="@" : 이거 적혀있는 애들은 @이라는 이름의 그룹으로 묶이고, 이 @ 그룹에 대한 스타일을 한번에 관리가능 .saw : 'saw' 이름을 가진 모든 class들에 대하여~ .active : 'active' 이름을 가진 모든 class들에 대하여~ ※ 가장 최근에 작성된 선택자의 명령을 따른다. (만약 .active -> .saw 순서였으면 최종적으로 더 최근에 작성된 .saw 선택자의 명령에 따름) ※ 하나의 대상에 대하여 class는 여러개 지정 가능함, 띄어쓰기로 구분함 < 최근 작성 선택자 명령 따르는 것.. 2021. 7. 13. [2021-07-08] WEB2-CSS (1-4강) ◑ CSS - 웹의 디자인적인 부분을 담당하는 새로운 언어로 등장함 - [장점] (1) 웹의 구조적인 부분이라 더 중요한 html과 디자인적인 부분을 분리하여 사용가능 (2) 웹의 디자인 관리가 더욱 효율적임 (∵ 중복 제거, 한번에 다수의 디자인 관리 가능) ◑ CSS언어로 글자 색 바꾸기 (1) style 태그를 이용하기 - : html의 언어로 html에게 여기부분은 CSS언어라고 말해주는 방법 a { } : '모든 글자에 대하여' 의미 - 디자인 대상을 나타낸다고 '선택자(selector)'라 함 color:red; : '색깔을 빨간색으로' 의미 - 디자인 세부사항 선언하는 '효과(declaration)'라 함 +) CSS언어는 { }안에 작성하며, 문장 끝에 ;을 붙여주어야 한다. (2) sty.. 2021. 7. 8. [2021-07-05 ~ 2021-07-07] WEB1 (17-34강) ▶client : 인터넷상에서 정보를 요청하는 컴퓨터 ▶server : 인터넷상에서 정보를 제공하는 컴퓨터 ( game을 하는 과정에서 : game client / game server web을 이용하는 과정에서 : web client / web server 이런 식으로 지칭함 ) ▶host : 인터넷이 연결되어있는 각 컴퓨터들을 지칭 ▶web hosting : 웹 서버를 운영하기 위한 host를 빌려주는 것 ( 대표적인 web hosting 기업 : github ) ※ 부록 - 코드의 힘 (코드로 할 수 있는 다양한 기능) 1) 동영상 삽입 : 유튜브에서 공유>퍼가기>html 복붙 2) 댓글기능 추가 : DISQUS에서 universial code>윗 html 복붙 3) 채팅기능 추가 : tawk에서 .. 2021. 7. 8. [2021-07-02] WEB1 (13-16강) ◑ 자주 사용되는 슈퍼스타 태그들 : html 소스 코드 맨 위에 위치, '이 소스는 html형식임'을 나타냄 : 이 web의 제목을 의미 (본문의 제목 X), 웹주소의 이름임 : 해당 html 소스가 utf-8 형식으로 열렸음을 나타냄 : 이 소스가 html로 작성되었음을 나타냄 -1st 외곽 : 해당 소스의 정보를 알려주는 윗부분 소스들을 묶음 - 2nd 외곽 : 해당 소스의 본문을 나타내는 아랫부분 소스들을 묶음 - 2nd 외곽 2021. 7. 2. [2021-07-01] WEB1 (9-12강) : 단지 줄바꿈을 나타내는 tag이므로 시작부분에만 기입한다. : 한 단락의 처음과 끝에 기입. 여러 개 사용하여 여백 정도 결정 정해진 여백 정도로만 사용 가능 (cpp 사용하면 여백 정도 수정가능 : 시작 p 뒤에 style="margin-top:40px") - 속성(attribute): tag 이름만으로 실행할 정보가 부족할 때 속성을 통해 추가적인 정보 제공 : 속성들의 순서는 상관 X : ex) src-source (어떤 이미지 파일 가져올건지 주소 표시) width (이미지 크기 어느 정도로 할 건지 표시) ◑ 부모 TAG와 자식 TAG - 여러 개의 태그가 겹쳐있으면 밖에서 감싸는 태그를 '부모 태그', 안에 있는 태그를 '자식 태그'라고 함 - 태그들 중에는 부모 자식 관계가 필수인 아이들.. 2021. 7. 2. [2021-06-30] WEB1 (1-8강) [출처: Youtube 생활코딩 WEB1] * HTML (Hyper Text Markup Language) - web의 밑그림, 뼈대를 그리는 연필 역할 - 기초 문법 : 대상 text TAG ex) html : html -> html ex) html : html -> html ( u : underline ) ex) ~ : (1) h 다음 숫자가 작을 수록 글자 크기 작음 (2) h : headline -> 제목의 역할을 하는 text에 활용 (3) 자동 줄바꿈 처리됨 [참고] - 출처: Youtube 조코딩 프론트엔드 백엔드 기능 화면에 보이는 것들 프론트엔드 작동을 위한 데이터 등을 처리 도구 HTML CSS JavaScript 프레임워크 (개발에 필요한 것들 미리 만들어놓은 도구 모음) Jav.. 2021. 6. 30. 이전 1 다음
