본문 바로가기

전체 글

[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 .. 더보기
[TIL-9] 생활코딩 WEB2 CSS-12~15(완강) 12. 미디어 쿼리 소개 반응형 웹 : 화면의 크기에 따라 웹페이지 요소들이 반응하여 동작. 미디어 쿼리 : CSS 영역 안에 반응할 조건 설명(@media) 후, 반응할 내용 씀. @media(min-width:800px) { div{ display:none; } } 화면의 크기가 최소 800px(800px 이상)일 때 모든 div 태그가 화면에 표시되지 않는다. 13. 미디어 쿼리 써먹기 grid의 display를 block으로 하면 나란히 안 나오고 화면 전체 폭 차지. [오류 났던 것] #grid ul이라고 앞에서 선택자를 지정했던 부분을 미디어 쿼리 안에서 수정할 땐 그냥 ul이라고 하면 안되고 #grid ul이라고 그대로 가져와야 함. [못 고친 것] 유튜브 영상을 가져다놓은 페이지가 있는데,.. 더보기
[TIL-8] 생활코딩 WEB2 CSS-6~11 6. CSS 속성 스스로 알아내기 글자 크기 크게 : property는 font-size. 값의 단위는 px. 글자 가운데 정렬 : property는 text-align. 값은 center. 7. CSS 선택자의 기본 class 선택자 : 같은 것들 그룹핑해주는 기능. html 문법으로 태그 안에 class="saw"라고 해두고, css 영역에서 .saw라고 하면 saw라는 클래스에 해당하는 것들 선택됨. class="saw active"라고 클래스에 두개 이상의 값을 넣을 수도 있음. 띄어쓰기로 구분. id 선택자 그런데 적용될 우선순위를 지정해주려면 id="active"라고 해두고, css 영역에서 #active라고 씀. 그럼 id 선택자가 class 선택자를 이김. 같은 id 값은 한 번만 쓸 수 .. 더보기
[TIL-7] 생활코딩 WEB2 CSS-1~5 3. CSS의 등장 : 주석 처리 이 웹페이지에 있는 모든 a를 선택하여[선택자], 색깔(속성, property)을 검정(값, value)으로[효과/선언]. CSS 장점 코딩할 때 중복을 없앨수록 좋음. 웹페이지의 사이즈도 줄어들고 수정 편함. 효율적. 코드의 정보와 디자인 분리 가능. 4. CSS의 기본 문법 태그 : 선택자(selector) : 태그는 효과의 대상이 지정되어있지 않으므로 a{}라는 코드(선택자)가 추가로 필요했던 것. 속성 : 적용할 내용의 태그 안에서 style을 html의 속성으로 사용. style이라는 속성은 효과(declaration)를 지정함. 하나의 선택자에 대해 여러 개 효과 지정할 경우 ;(세미콜론)으로 구분. 더보기
[TIL-6] 생활코딩 WEB1-19~부록(완강) 19. 웹서버 운영하기 ~ 웹서버 설치 ~ 웹서버와 http ~ 웹서버와 웹브라우저의 통신 웹서버 아파치(apache) 이용 윈도우에서 아파치 설치하기 위해 bitnami wamp stack 검색. bitnami 다운. 설치된 bitnami manager 통해 웹서버 끄고 켤 수 있음. welcome 옆 "manage servers"탭에서 "apache web server"가 초록색이면 켜져있는 것. 켜져있어야 "go to application" 했을 때 "비트나미: 오픈 소스" 창 볼 수 있음. 주소창에 "localhost"라 돼있는데 "http://127.0.0.1/index.html"라고 쳐도 똑같은 페이지 나와야 함. 이 index.html은 아파치 파일 안에 존재. "htdocs(하이퍼텍스트 다.. 더보기

티스토리툴바