본문 바로가기

TIL

[TIL-17] 연구소 홈페이지 만들기 * 메뉴바 만들기 그리드로 병렬 균일하게 4등분 : 1fr 1fr 1fr 1fr 가운데 정렬 : "text-align: center;" 배경색 설정 paddle= 5px 링크 걸린 텍스트 밑줄 없애기 https://coding-restaurant.tistory.com/229 https://aboooks.tistory.com/120 text-decoration : none; [심화] a 태그에 마우스 올렸을 때, "a:hover" !important : 스타일 속성 우선순위 무시하고 강제 적용 더보기
[TIL-16] 노마드코더 코코아톡 클론코딩 #1.1~#1.6 / 연구소 홈페이지 만들기 준비하기 브라우저 : 구글 크롬 다운. 브레이브도 광고 없어서 좋음. Visual Studio Code 다운. github desktop 다운. 웹사이트 = text 개발자는 코드(텍스트)를 쓰고, 브라우저가 이해해서 웹사이트를 만듦. 2~3 종류의 언어로 이뤄져있음. HTML/CSS/Javascript HTML 브라우저는 사람 언어 이해 못 함. contents가 뭔지 알려줘야 함. html로 브라우저에 content 구조 설명 * 폰트 적용하기 https://velog.io/@kim-jaemin420/Web-font%EC%9B%B9-%ED%8F%B0%ED%8A%B8%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C http://webberstudy.com/html-css/css-1/f.. 더보기
[TIL-15] 생활코딩 WEB2 JavaScript-34~37(완강) 34. 파일로 쪼개서 정리정돈하기 많은 웹페이지 감당하기 위해 연관된 코드들을 파일로 묶어서 그룹핑. 같은 코드를 각 페이지의 html 파일마다 적을 필요 없음. js 파일을 한번 수정하면 연결된 모든 웹페이지가 수정됨. 코드가 명확해지고 의미 파악 뚜렷해짐. 파일 쪼개기 새로운 파일 "파일명.js" 만들고, 웹브라우저가 js 파일을 다운로드해서 해당 페이지의 html 파일에 그 코드가 있는 것처럼 작동. 35. 라이브러리와 프레임워크 다른 사람의 도움을 받아 소프트웨어 만들기 라이브러리 : 내가 만들 프로그램의 부품이 되는 소프트웨어를 재사용하기 쉽도록 정리된 것. jQuery : 가장 유명하고 안정적. 검색해서 파일 다운로드 혹은 CDN 예) 구글에서 제공하는 CDN 선택해서 앞에 코드 복붙하면 jQ.. 더보기
[TIL-14] 생활코딩 WEB2 JavaScript-31~33 31. 객체와 반복문 객체의 데이터 모조리 가져와야 하는 경우 : "javascript object iterate(순회)" 검색 for in key 값 : 객체 안 정보의 이름. 원하는 정보에 도달할 수 있는 열쇠. 배열에서는 순서대로 정리되어있어서 index. for(var key in coworkers) { 코드 } coworkers라는 객체의 데이터의 수만큼 중괄호 속 코드가 실행됨. 그때마다 coworkers의 key 값들을 하나하나 변수값으로 사용. 32. 객체프로퍼티와 메소드 객체에는 문자뿐 아니라 숫자, 배열, 함수 등의 데이터 모두 담을 수 있음. coworkers.showAll = function(){ for(var key in this){ document.write(key+' : '+t.. 더보기
[TIL-13] 생활코딩 WEB2 JavaScript-23~30 23. 배열과 반복문의 활용 페이지 내 모든 태그 선택하기 검색 추천 : "javascript get element by css selector multiple" querySelectorAll 결과가 노드리스트로 나옴. 배열 같은 것. NodeList(5) [a, a, a, a, a] var alist = document.querySelectorAll('a'); - 위 결과를 alist라는 변수에 담음. console.log(alist[0]); - 괄호 안 결과를 콘솔 창에 출력. 인덱스 번호가 0인 태그 나옴. 반복문 통해 노드리스트의 모든 태그 선택할 수 있음. 25. 함수 ~ 26. 함수 : 매개변수와 인자 ~ 27. 함수(리턴) ~ 28. 함수의 활용 쓰임 코드를 효율적으로 리팩토링. 연속적이지 .. 더보기
[TIL-12] 생활코딩 WEB2 JavaScript-19~22 20. 배열 : 새로운 데이터 타입 집에 살림살이가 많아지면 옷장, 책장, 냉장고, 서랍장 등에 물건을 정리해넣듯, 많아진 데이터를 연관된 것들끼리 정리정돈해두는 수납상자. 문법(syntax) 대괄호로 감싸며 여러 값을 콤마(,)로 이어 쓸 수 있음. "문자"로 표기하듯, [배열원소1, 배열원소2]. 변수를 이용해서 배열의 이름 정함. 예) var cowerkers = ["egoing", "leezche"]; 속성 수납해둔 배열값 가져오는 방법 document.write(cowerkers[index 번호]) : 첫번째 자리의 값은 0번째. 데이터 추가하는 방법 배열명.push("추가할 값") 어디에 추가할지는 "javascript array" 검색하면 알 수 있음. 수납된 배열값의 개수 document... 더보기
[TIL-11] 생활코딩 WEB2 JavaScript-13~18 14. 조건문 예고 토글 : 상황에 따라 다른 기능 구현됨.(on/off) if라는 조건문에 따라. 15. 비교 연산자와 불리언 === : 동등 비교연산자. 왼쪽과 오른쪽 값이 같냐(이항 연산자). 좌항과 우항의 관계에 따라 true 혹은 false 값 출력. 이 두가지 값을 묶어서 '불리언'이라 부름. 또 하나의 데이터 타입. html에서는 " 더보기
[TIL-10] 생활코딩 WEB2 JavaScript-1~12 2. 수업의 목적 html은 웹페이지 한번 뜨면 끝인데 자바스크립트는 동적인 효과를 줄 수 있다. 사용자와 상호작용. 야간모드 버튼 만들기 onclick 속성 안의 내용은 자바스크립트로 해석. 3. HTML과 JS의 만남: script 태그 : 이 태그 안의 내용은 자바스크립트라고 알려줌. 1+1을 입력하면 html은 문자 그대로를 출력하지만 자바스크립트는 계산기 기능을 작동해서 2라고 출력. 4. HTML과 JS의 만남: 이벤트 : 버튼을 입력할 거다. 버튼 안의 값은 hi다. onclick : 클릭하면 'hi'라고 적힌 경고창(alert)이 뜰거다. onclick 속성의 값은 반드시 JS가 와야 함. 웹브라우저가 그 값을 기억하고 있다가, onclick 속성이 포함된 태그를 사용자가 클릭할 때 JS .. 더보기

티스토리툴바