＊반짝이는＊이끌림

WEB1 HTML을 끝낸지 얼마 안 된 것 같은데 어느새 WEB2의 CSS를 완강하였네요~!~! css를 공부하면서, 기존에 html로만 짜던 것보다 훨씬 효율적이고, 디자인적으로도 예쁘게 짤 수 있다는 것을 알았습니다. 굉장히 기초만 배웠기에 아직 배워야 할 부분들이 많을 것 같아요. 일단 지난번에 html로 만들어 github에 올렸던 페이지부터 css를 활용해 고쳐보고 싶어요~!~! github repository https://github.com/2kkeullim/2kkeullim 웹 사이트 주소 https://2kkeullim.github.io/2kkeullim/ Introducing about 2kkeullim 2kkeullim.github.io

* Windows 운영체제 기준으로 작성되었습니다. * vs code editor를 사용합니다. § CSS 코드의 재사용 → Click! 하나의 웹 사이트에서 모든 웹페이지들에게 동일한 스타일을 주고 싶을 때 중복적으로 코드를 계속 작성하는건 번거로우므로, 코드를 재사용 해 봅시다. 일단 모든 html 파일 들에서 중복되고 있는 CSS 코드들( 태그 제외)을 복사해서 style.css 파일에 붙여넣어 봅시다. 그 후 기존의 html 파일들에서 태그를 지워주고, 태그를 이용한다면, style.css라는 별도의 파일에 저장된 CSS를 기존의 html들에서 사용할 수 있게 됩니다. * style.css * h1 { text-align: center; font-size: 60px; border-bottom:3p..

* Windows 운영체제 기준으로 작성되었습니다. * vs code editor를 사용합니다. § CSS의 등장 → Click! CSS는 HTML과는 완전히 다른 언어이기 때문에 CSS를 사용해주기 위해서는 란 태그를 사용해주어야 합니다. 이라는 태그는 속성의 효과만 있어서는 효과를 어느 태그에 지정해야하는지 알 수 없기 때문에 앞에 적용되어야 하는 태그 + { }를 사용해 css의 효과를 지정할 태그를 선택할 수 있습니다. 위의 예시에서 css의 효과가 적용되는 태그인 a는 선택자(selector)라고 하며, 선택자에게 지정될 효과 color:red;와 text-decoration: none;를 declaration으로 부르며, color나 text-decoration는 property(속성)이라 부..

* 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 운영체제 기준으로 작성되었습니다. § 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 태그의 부모이다라고 정해져 있는 것은 아님에 유의합시다. 몇 몇 태그의 경우에는 부모, 자식 관계처럼 고정 관계의 태그들도 있습니다. 아래에서 공부할 태그들인 , 태그들도 부모 자식 관계가 고정인 태그들..