＊반짝이는＊이끌림

드디어 생활코딩 WEB1을 완강하였습니다~!~! html에 대해서 하나도 몰랐었는데, 이제 한발짝 나아간 기분이네요. html을 이용해 글도 써보고, 태그도 달아보고, 사진도 넣어보며, 리스트도 추가해봤었어요. 또한, 추가 기능으로 링크도 넣어봤으며, 더 나아가서 댓글 기능도 추가해보고, 동영상도 넣어봤으며, 방문자 분석기와 채팅도 추가해봤습니다! 아직은 부족한 점이 많고, 막 시작했지만, 계속 공부하며, 조금씩 더 배워나가야겠어요. https://github.com/2kkeullim/2kkeullim 아래는 제가 github을 이용해 호스팅한 웹사이트입니다^^ https://2kkeullim.github.io/2kkeullim/ Introducing about 2kkeullim 2kkeullim.git..

* Windows 운영체제 기준으로 작성되었습니다. § 부록 : 코드의 힘 1. 동영상 삽입 → Click! 먼저 유튜브를 이용해 웹 페이지에 넣고싶은 영상을 골라줍니다. 혹여나 저작권 문제가 발생할까 싶어 관련 법 조항을 찾아보았습니다! [유튜브 이용약관 제4조 A항] A. 귀하(유튜브 서비스 이용자)는 YouTube의 사전 서면 승인 없이는 본 서비스 또는 콘텐츠의 어느 부분이라도 그리고 이를 어떤 매체로도 배포하지 않을 것에 동의합니다. 단, YouTube가 본 서비스에서 제공된 기능(예를 들어, Embeddable Player)을 통하여 그러한 배포를 위한 수단을 제공하는 경우는 제외합니다. [유튜브 이용약관 제5조 B항] B. 콘텐츠는 있는 그대로 귀하에게 제공됩니다. 귀하는 본 서비스의 제공된..

* Windows 운영체제 기준으로 작성되었습니다. § 웹서버 운영 : 윈도우 → Click! 아파치 웹서버를 윈도우에 직접 설치하는 것은 까다롭기 때문에 아파치를 윈도우에 설치해주는 프로그램들을 이용해 볼 겁니다. 검색창에 how to easy install apache on window라고 검색하면 아파치 공식 홈페이지를 찾을 수 있습니다. Downloading Apache for Windows 아래에 있는 링크를 클릭하면 아파치가 자동으로 깔립니다. ApacheHaus Apache Lounge Bitnami WAMP Stack WampServer XAMPP 강사님께서 Bitnami WAMP Stack을 사용해서 설치하고자 하였으니 저도 그걸로 설치해보겠습니다. WAMP는 Windows Apache,..

* Windows 운영체제 기준으로 작성되었습니다. § 웹호스팅(github pages) → Click! 직접 웹서버를 운영하긴 쉽지 않은 일이기 때문에 github의 웹호스팅 기능을 이용해 홈페이지를 운영해보도록 하겠습니다. github 홈페이지에 접속한 후 아이디가 있으신 분들은 로그인(sign in)해주시고, 아이디가 없는 경우 회원가입(sign up)을 진행해주세요~! 그 후 repository라는 저장소를 생성해 줄 겁니다. New repository 클릭! 이런 화면이 뜰 텐데요. 여기에다가 이제 정보를 입력해주시면 됩니다~! 전 레포지토리 이름은 2kkeullim, Public으로 생성해주고, Initialize this repository with a README를 체크해주었습니다! 이 부..

* Windows 운영체제 기준으로 작성되었습니다. § 웹사이트 완성 → Click! 그럼 이번에는 웹 페이지들을 엮어 하나의 완성된 웹 사이트를 만들어봅시당~!! 저는 조금 더 제대로 된 웹 사이트를 만들어보고자 지난번에 작성했던 시를 지우고 제 자기소개 페이지를 한 번 만들어보았습니다. 파란색으로 되어있는 2kkeullim, Who?, What? 부분은 각각 index.html, 1.html, 2.html로 링크를 걸어주었어요! 이제 각 html을 만들어주기 위해 현재 만들어져있는 1.html을 복사해볼게요! 이렇게 만들어져 있는 1.html을 우클릭 후 복사를 클릭한 후, 1.html 밑의 비어있는 공간 아무데나 우클릭 후 붙여넣기를 클릭해주면 copy(복사본)이 만들어집니다. 그럼 링크를 걸어주기..

* Windows 운영체제 기준으로 작성되었습니다. § HTML 태그의 제왕 → Click! 이번에는 HTML에서 가장 중요하다고 여겨지는 태그 에 대해서 공부해봅시다. a는 anchor의 첫글자를 땄으며 정보의 바다에 정박한다는 닻을 의미하며, 링크를 거는데 사용됩니다. 이 태그가 없었다면, 전세계의 모든 웹페이지는 고립되었을 것이며, 검색 엔진 역시 없었을 것입니다. 제가 위의 Click!이란 글자에 링크를 걸어둔 것처럼 이번엔 태그를 이용해 지난번에 만들어두었던 웹 페이지에 링크를 걸어봅시다! 저는 지난번에 작성했던 시 아무르 강가에서/박정대 님의 시가 담겨있는 책의 링크를 [출처] 아무르 강가에서 / 박정대 이 부분에 달아보고자 합니다. "링크를 걸고 싶은 텍스트" 여기에서 href는 hypert..

* Windows 운영체제 기준으로 작성되었습니다. § 부모 자식과 목록 → Click! 이렇게 parent 태그에 포함된 child 태그를 자식 태그라고 하며, child 태그를 포함하는 parent태그를 부모 태그라고 합니다. (실제론 와 라는 이름의 태그는 없으며 태그 사이의 관계를 표현하기 위해 저렇게 표현해보았습니다.) opentutorials 위의 태그를 보면 p 태그가 a 태그의 부모, a 태그가 p 태그의 자식임을 알 수 있습니다. 하지만 항상 a 태그가 p 태그의 자식이다, p 태그가 a 태그의 부모이다라고 정해져 있는 것은 아님에 유의합시다. 몇 몇 태그의 경우에는 부모, 자식 관계처럼 고정 관계의 태그들도 있습니다. 아래에서 공부할 태그들인 , 태그들도 부모 자식 관계가 고정인 태그들..

* Windows 운영체제 기준으로 작성되었습니다. § 최후의 문법 속성 & img → Click! 지금까지의 웹 페이지에는 글밖에 없어 무난하게 보였습니다. 이미지를 넣어 기존보다 조금 더 화려한 페이지를 만들어봅시당. 이미지를 넣기 위해 사용하는 태그는 입니다. 태그의 경우 단순히 태그만 작성한다고 해서 이미지가 입력되지는 않습니다. 어떤 이미지인지를 나타내기 위한 속성들도 포함시켜야 이미지를 입력할 수 있다. src(source)를 활용해 이미지의 주소를 적어주면 태그의 위치에 이미지를 넣어주게 됩니다. 이 때 꼭 이미지 파일의 확장명까지 작성해주어야 이미지가 로드됩니다. 이미지의 크기를 조절하고 싶을 땐 width 속성을 활용해주면 됩니다. width 속성의 경우 필수는 아니므로 (width="원..