＊반짝이는＊이끌림

* 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! 다양한 태그들을 활용해보기 위해 추가로 글을 복사하여 붙여넣었습니다. 다육식물 정의 사막이나 높은 산과 같이 건조한 환경에서 생존하기 위해서 줄기, 잎 그리고 뿌리에 많은 양의 수분을 저장할 수 있는 식물을 말한다. 다육식물은 우기와 건기가 뚜렷이 구분되는 사막지역, 고산지대나 한랭지, 해안지대, 염호지대 등에서 자란다. 다육식물은 건조한 환경에 적응하여 독립적으로 진화한 형태로서 하나의 분류군을 이루지 않고 다양한 과에 속해있다. 아메리카 대륙, 아프리카. 마다가스카르 섬, 아라비아 반도, 카나리아 제도, 아시아, 동유럽 등 세계 여..

* Windows 운영체제 기준으로 작성되었습니다. § 기본 문법 - 태그 → Click! 지난 시간에 여기까지 진행했었습니다. Hello Web 밑으로 훵해 보이는 화면에 글자를 출력해보고자 합니다. VS code로 1.html 파일을 열어 글을 작성해봅시다. (직접 작성하기엔 귀찮으므로 인터넷 상에서 글을 복사해와서 붙여넣기 해 볼 예정입니다.) 요즘 다육식물을 키우는 중이라 다육식물을 검색한 후 네이버 지식백과에 있는 글을 복사해서 붙여넣어 보았습니다. 사막이나 높은 산과 같이 건조한 환경에서 생존하기 위해서 줄기, 잎 그리고 뿌리에 많은 양의 수분을 저장할 수 있는 식물을 말한다. 다육식물은 우기와 건기가 뚜렷이 구분되는 사막지역, 고산지대나 한랭지, 해안지대, 염호지대 등에서 자란다. 다육식물은..

* Windows 운영체제 기준으로 작성되었습니다. § HTML 코딩 실습 환경 준비(HyperText Markup Language) → Click! 강의에서 editor로는 Atom을 사용하며, 공식 홈페이지(링크)를 통해 Atom을 다운받을 수 있습니다. 전 Atom editor 대신 이전에 깔아놓았던 VS code를 활용해 볼 예정이며, VS code의 경우 공식 홈페이지(링크)를 통해 다운받을 수 있습니다. VS code 실행 default browser로 Chrome을 사용하고 있기 때문에 Chrome창이 뜬 것을 볼 수 있습니다. (시크릿 모드로 창이 뜬 이유는 항상 Chrome을 실행 시 Secret mode에서 실행되게 해 놓았기 때문입니다.) 방금 만든 1.html 파일에 Hello We..