인생은 여행 人生は旅

DOCTYPE html> [ Event - 웹브라우저에서 일어나는 일들 ] - 어떠한 이벤트가 일어났을 때, 어떠한 자바스크립트가 실행되도록 하는 것들. - 이러한 이벤트들을 이용해서 사용자와 상호작용하는 웹페이지, 웹사이트를 만들 수 있다! - onclick - 사용자가 클릭했을 때 이벤트 실행. - onchange - 글씨를 입력해서 내용이 바뀌었을 때 이벤트 발생. - onkeydown - 어떤 키를 눌렀을 때 이벤트 발생. - alert - 경고창 띄우기 아무 생각 없이 사용했던 웹페이지의 동작원리를 어느 정도 알게 되는 것 같아 신기하고 재밌는 수업이었습니다 :)

JavaScript - 사용자와 상호작용을 하는 언어. HTML 을 제어해서 웹페이지를 다이나믹하게 만들어줄수 있다. (HTML 위에서 작동) 마우스 우클릭 - 검사를 누르면 Elements 가 보이는데 이것이 Tag 이다. 웹페이지를 구성하고 있는 HTML 을 볼수 있다. onclick - 사용자가 버튼을 누를 때, 실행되도록하는 Tag 자바 스크립트 안에 수식을 넣으면 계산을 해서 출력해줄수 있지만, HTML 은 할수 없다. doctype html> JavaScript - html document.write('hellow world'); document.write(1+1); 오오... 그냥 단순히 입력한 글을 보여주는게 아니라, JavaScript 는 계산을 한 값을 보여주었다 ^^

반응형 웹, 디자인 : 화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 동작한다. 순수한 웹에서 CSS로 구현하는 핵심적인 개념이 미디어 쿼리(Media Query) DOCTYPE html> div{ border:10px solid green; font-size:60px; } @media(max-width:800px) { div{ display:none; } } Responsive 분명 똑같이 타이핑 했는데 ^^;; 결과가 안 나오는 결과가.... doctype html> WEB - CSS body{ margin:0; } a { color:black; text-decoration: none; } h1 { font-size:45px; text-align: center; border-bottom:1px..

#grid{ border:5px solid pink; display:gird; grid-template-columns: 150px 1fr; } div{ border:5px solid gray ; } NAVIGATION ARTICLE 뭔가 좀 다른 결과가 ^^; 수업중간에 빠뜨린 게 있는 건지 아무리 찾아봐도 모르겠어요 ㅎㅎ doctype html> WEB1 - CSS body{ margin:0; } a { color:black; text-decoration: none; } h1 { font-size:60px; text-align: center; border-bottom:1px solid gray; margin:0; padding:20px; } ol{ border-right:1px solid gray; w..

a { color:black; text-decoration: none; } #active { color:red; } .saw{ color:gray; } .active { color:red; } h1 { font-size:60px; text-align: center; border-bottom:1px solid gray; margin:0; padding:20px; } body{ margin:0; } a { color:black; text-decoration: none; } #active { color:red; } .saw{ color:gray; } .active { color:red; } h1 { font-size:60px; text-align: center; border-bottom:1px solid gr..

a {. Tag 선택자 - 가장 아래 color:black; text-decoration: none; } #active { ID 선택자 - 가장 높음 / ID 값은 한번만 등장할 수 있다! color:red; } .saw{. Class 선택자 - 중간 단계 color:gray; } .active { saw active tag로 이 부분만 변경할 수 있다. color:red; } h1 { font-size:60px; text-align: center; } doctype html> /* block level element */ h1{ border-width:5px; border-color:red; border-style:solid; } /* inline element */ h1 tag = 화면 전체를 사용(..

- 글자를 빨간색으로 만들어주는 태그 - 이 안의 내용은 무시하라는 태그 a{ } - 웹페이지 안의 모든 a tag를 선택 a = Selector : 선택자 Declaration : 선언, 효과 Property : 속성 Value : 값 HTML에서는 글자 하나씩 font tag로 색상을 지정해줘야 했지만, CSS는 하나의 tag로 전체 색상을 한 번에 바꿀 수 있다. 즉, 유지보수가 굉장히 간편해진다 ^^ CSS = 디자인 담당! CSS 대신 Style Tag 를 사용해서 같은 효과를 줄수도 있다. a { color:black; 글자 색상 text-decoration: none; } h1 { font-size:60px; 글자크기 픽셀로 조정 text-align: center; 가운데 정렬 } CSS P..

◎ 비주얼 스튜디오 안의 확장 프로그램 중 하나인 Live Server를 설치! 정상적으로 설치되면 우측 하단에 Go Live 가 표시된다! ◎Go Live를 클릭하면 내가 만든 웹사이트가 새로운 창에 뜨고 우측 하단엔 Port : 5500이라고 표시된다. -> 전 세계적으로 내 컴퓨터 자신을 가리키는 주소로 약속된 주소 내가 실행한 웹서버를 통해서 서비스되는 웹페이지가 만들어진 것이고 실시간으로 편집이 가능하다 ^^ 코드를 편집만 해주면 실시간으로 내용이 변경된다. - 같은 와이파이에 연결 상태에서 또 다른 확장 프로그램인 IP Address 를 설치. 그러면 오른쪽 제일 하단에 나의 IP 가 표시되고 IP 주소를 웹 브라우저에 입력하면 바로 접속할 수 ..