＊반짝이는＊이끌림

* 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 운영체제 기준으로 작성되었습니다. * 중간 쯤에 나오는 vs code에서 UTF-8로 인코딩 옵션을 변경하는 부분 주의해주세요!! (전 처음 시도했을 때 실패했기 때문에 실패 용으로 남겨두었습니다 :

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

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

* Windows 운영체제 기준으로 작성되었습니다. * 앞으로 웹 페이지는 잘 보이기 위해 125%로 확대한 상태의 캡쳐본으로 올릴 예정입니다. § 줄바꿈 → Click! 다양한 태그들을 활용해보기 위해 추가로 글을 복사하여 붙여넣었습니다. 다육식물 정의 사막이나 높은 산과 같이 건조한 환경에서 생존하기 위해서 줄기, 잎 그리고 뿌리에 많은 양의 수분을 저장할 수 있는 식물을 말한다. 다육식물은 우기와 건기가 뚜렷이 구분되는 사막지역, 고산지대나 한랭지, 해안지대, 염호지대 등에서 자란다. 다육식물은 건조한 환경에 적응하여 독립적으로 진화한 형태로서 하나의 분류군을 이루지 않고 다양한 과에 속해있다. 아메리카 대륙, 아프리카. 마다가스카르 섬, 아라비아 반도, 카나리아 제도, 아시아, 동유럽 등 세계 여..