목록코딩 공부 (69)
인생은 여행 人生は旅
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/WC7ld/btsCUZ4kJV3/kTp35UkheCGNZWvsSooHnk/img.png)
JavaScript - 사용자와 상호작용을 하는 언어. HTML 을 제어해서 웹페이지를 다이나믹하게 만들어줄수 있다. (HTML 위에서 작동) 마우스 우클릭 - 검사를 누르면 Elements 가 보이는데 이것이 Tag 이다. 웹페이지를 구성하고 있는 HTML 을 볼수 있다. onclick - 사용자가 버튼을 누를 때, 실행되도록하는 Tag 자바 스크립트 안에 수식을 넣으면 계산을 해서 출력해줄수 있지만, HTML 은 할수 없다. doctype html> JavaScript - html document.write('hellow world'); document.write(1+1); 오오... 그냥 단순히 입력한 글을 보여주는게 아니라, JavaScript 는 계산을 한 값을 보여주었다 ^^
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dT4Rii/btsCTV8AoDa/2QmXFsBChkFGxKQDC1GjYk/img.png)
반응형 웹, 디자인 : 화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 동작한다. 순수한 웹에서 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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bLj9zq/btsCOHbuRPC/cbqS7KJgT6UfdRJm99R3m0/img.png)
#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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/CUE3e/btsCIDU9Ix4/9tthb1HTk2q1Oo0hENOKik/img.png)
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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bc8Uez/btsCG5cwXVs/xHZMp1PnygTG5ychO0JTu0/img.png)
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 = 화면 전체를 사용(..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/HZ5R9/btsCAhKCt0p/rzOK2k0haCwx2fJ2R0USJk/img.png)
- 글자를 빨간색으로 만들어주는 태그 - 이 안의 내용은 무시하라는 태그 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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/mq6hN/btsCqvCE7Jv/OGllkGRdbtZl335ijDcBBK/img.png)
◎ 비주얼 스튜디오 안의 확장 프로그램 중 하나인 Live Server를 설치! 정상적으로 설치되면 우측 하단에 Go Live 가 표시된다! ◎Go Live를 클릭하면 내가 만든 웹사이트가 새로운 창에 뜨고 우측 하단엔 Port : 5500이라고 표시된다. -> 전 세계적으로 내 컴퓨터 자신을 가리키는 주소로 약속된 주소 내가 실행한 웹서버를 통해서 서비스되는 웹페이지가 만들어진 것이고 실시간으로 편집이 가능하다 ^^ 코드를 편집만 해주면 실시간으로 내용이 변경된다. - 같은 와이파이에 연결 상태에서 또 다른 확장 프로그램인 IP Address 를 설치. 그러면 오른쪽 제일 하단에 나의 IP 가 표시되고 IP 주소를 웹 브라우저에 입력하면 바로 접속할 수 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bskm73/btsCpe1ZHiG/5UuhCokj8rJIvQLLmTjxyk/img.png)
◎ 클라이언트(고객)가 서버에 무언가를 요청하면 서버는 거기에 맞는 응답을 하여 정보를 보내준다. 내가 만든 코드를 저장해둘수 있고, 그 코드들은 업로드하여 전 세계에서 볼 수 있는 웹페이지를 만들 수 있다. GitHub 란 사이트에선 단순히 저장만 할수 있는 게 아니라 이렇게 Pages란 메뉴를 통해 내가 만든 사이트를 어디서든 웹사이트를 통해 볼수 있도록 해준다 ^^ 신기하게도 내가 입력했던 HTML 코드를 어디서든 볼수 있는 웹사이틀 만들어 보았습니다~ GitHub란 사이트를 통해 굉장히 간단히 진행 되었습니다 ^^