그렇다 추석이다..추석 연휴의 시작이다 하지만 난 공부를 해야만한다 적어도 2시간씩은 해야하지 않을까 한다....나는 부족하기 때문이다..
숙제만이라도 해야지.... 오늘의 목표 코딩으로 나만의 특종신문 만들기.
그렇게 2시간한다던걸
오후까지 이어가고있다.
이쁘게 잘 하고싶다는 욕심이 생기니 놓지 못한다.
내일 배움 캠프
과제겸 추석 선물로 나만의 특종 신문 만들기라는것을 하라고 해서 할것이다..
나만의 신문 만들기
움직이게 만들어 질것이다
우선 그곳에 들어가는 사진을 만들어야 하기에
내 셀카를 이용하여 dream.ai 라는 곳을 이용하여 좀 미래적이고 사이버펑크 스러운 사진으로 변경했다.
그리고 그 사진이 움직여야하기에 https://www.d-id.com/ 라는 곳을 이용을 했다.
그렇게 이미지를 만들고 기본적인 틀에 적용을 시키니....
<html>
<head>
<link
href='https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic|Droid+Serif:400,700,400italic,700italic'
rel='stylesheet' type='text/css'>
<title>Happen in the future</title>
<meta name="viewport" content="width=device-width">
<meta property="og:image"
content="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/free/codingday/steampunk.png">
<meta property="og:title" content="코딩으로 나만의 특종 신문 만들기">
<meta property="og:description" content="호외요! 꿈을 담은 특종 신문을 확인해보세요!">
<link rel="stylesheet" href="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/free/codingday/news.css">
<script src="https://s3.ap-northeast-2.amazonaws.com/
materials.spartacodingclub.kr/free/codingday/news.js"></script>
</head>
<body>
<div class="head">
<div class="headerobjectswrapper">
<div class="weatherforcastbox"><span style="font-style: italic;">Weatherforcast for the next 24 hours:
Plenty of Sunshine</span><br><span>Wind: 7km/h SSE; Ther: 21°C; Hum: 82%</span></div>
<header>DREAM POST</header>
</div>
<div class="subhead">ICON, Teheran-ro - Thursday August 05, 2033 - Seven Pages</div>
</div>
<div class="content">
<div class="collumns">
<div class="collumn">
<div class="head"><span class="headline hl3">고양이들, 세계를 지배하다!</span>
<p><span class="headline hl4">고양이들과의 동행이 세상을 바꿨다. 이제는 그들의 시대, 그리고 나는 그들의 통역자가 되었다-Yurok.J</span></p>
</div>
도시의 각 모서리에서 고양이들의 권력이 느껴진다. 불과 몇 년 전까지만 해도 그저 도시의 한 부분이었던 고양이들이 지금은 세계의 중심으로 떠올랐다.
진유록은 이러한 변화의 핵심 인물로, 고양이들과 인간 세계 사이의 중재자로 활약하고 있다.
<figure class="figure">
<img class="media"
src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/free/codingday/jackpot.png"
alt="">
</figure>
<p>불특정 다수의 고양이들이 뭔가를 원하면, 그 메시지를 인간들에게 전달한다. 그의 특별한 능력으로 고양이들의 의사를 파악하고, 그들의 지도 아래 인간들에게 필요한 지침을 제공한다.
세계는 이 놀라운 변화에 적응 중이다. 고양이들은 권력을 획득하긴 했지만, 그들은 평화롭게 지배하고 있으며, 그들과 인간은 서로 협력하는 관계를 유지하고 있다. 통역자의 노력 덕분에, 고양이와 인간 사이의 갈등은 최소화되었으며, 이제 모두가 고양이 지배의 새로운 세계에서 평화롭게 공존하고 있다.
세계는 고양이들의 지배 아래 새로운 순서를 맞이하고 있으며, 통역자들은 이 새로운 세상에서 인간과 고양이 사이의 중요한 다리 역할을 계속하며, 두 종 사이의 화합을 도모하고 있다.
</p>
</div>
<div class="collumn">
<div class="head"><span class="headline hl1">호외! 진유록, 디지털 우주의 건축가로 등극!
</span>
<p><span class="headline hl2">도시의 희미한 불빛 아래, 희망의 불씨를 지피던 진유록이 새로운 디지털 우주를 창조함으로써, 사이버 스페이스 건축가로의 전설적인 발걸음을 시작했다.
그의 꿈은 코드를 이용하여 우주의 아름다움과 신비를 디지털 예술품으로 변환하는 것이었다. 대부분은 그저 환상일 뿐이라 여겼지만, 오늘, 그의 꿈이 현실의 세계에서 빛나고 있다.
이 시대는 과학과 기술이 빠르게 발전하며, 디지털 세계의 가능성이 무궁무진하다. 하지만 우주의 신비를 코드로 옮기는 것은 아직도 도전적인 분야였다.
진유록은 도시의 어두운 연구실에서 수년 동안 이 연구를 이어왔다.</p>
<figure class="figure">
<video src="myphoto.mp4"
controls loop muted autoplay></video>
<figcaption class="figcaption">"Now we can go into space without training."
</figcaption>
</figure>
<p>그의 노력 끝에, 별과 행성, 은하의 기적 같은 현상들을 가상의 사이버 스페이스에서 체험할 수 있는 디지털 예술품을 완성했다.
이는 단순한 가상 현실이 아닌, 사용자들이 직접 탐험하고 경험할 수 있는 디지털 우주로, 그 안의 모든 요소와 세부 사항까지도 진유록의 손에서 탄생했다.
<span
class="citation">"코드로 태어난 우주 예술품, 신세계의 경계를 넘어 사이버 스페이스의 신비를 창조하다"</span>
많은 사람들은 이 놀라운 성과 앞에 큰 감탄을 금치 못하고 있다. 이제, 그의 꿈이 현실의 세계에서 빛나고, 우리도 그의 창조한 디지털 우주에서의 모험을 기대하며, 진유록의 기적 같은 예술 작품을 환영한다.</p>
</div>
<div class="collumn">
<div class="head"><span class="headline hl5">도심을 벗어나, 여행하며 일하는 삶의 모험 시작!</span>
<p><span class="headline hl6">“세계는 넓고, 삶의 여유는 도심을 벗어나 찾을 수 있었다. 여행하며 일하는 것, 그것이 나의 새로운 삶의 시작이었다.” </span></p>
</div>
2130년, 기술의 발전으로 인해 시간 여행이 가능해진 세계에서, 사람들은 더 이상 현재의 시간에만 국한된 삶을 살지 않는다.
도시의 한계와 시간의 제약에서 벗어나, 과거나 미래의 다양한 시대를 여행하며 일하는 새로운 삶의 방식이 등장했다.
이러한 삶의 방식을 선택한 사람들은 과거의 역사적 순간들이나 미래의 기술 발전된 세상에서 일하며, 그 시대의 문화와 사람들과 교류한다.
이는 단순히 일을 위한 것뿐만 아니라, 삶의 진짜 의미와 가치를 찾기 위한 여정이기도 하다.</p>
<figure class="figure">
<img class="media"
src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/free/codingday/nomad.png" alt="">
</figure>
<p>각 시간의 풍경 속에서 일하며, 그곳의 문화와 사람들과 교류하면서 삶의 진짜 의미와 가치를 발견하는 이들.
도심의 번잡함에서 벗어나, 자연과 함께 일하는 삶은 많은 사람들에게 새로운 삶의 방향을 제시하며, 그들의 삶에 새로운 변화의 바람을 불어넣는다.</p>
<p>오늘날, 시간 여행을 통해 다양한 시대에서 일하고 경험하는 삶의 방식은 점점 더 많은 사람들에게 인기를 얻고 있다.
이 새로운 삶의 패러다임은 미래의 사람들에게 삶의 새로운 가능성과 무한한 경험을 제공하며, 우리의 삶에 새로운 차원의 변화를 가져다주고 있다.</p>
</div>
</div>
</div>
</body>
</html>이런식이 되었다....
그리고 제공해주는 CSS도 있었지만 내가 배우는게 없는 너무 일방적인 따라하기라는 느낌떄문에
CSS는 내가 스스로 짜보기로했다.
그러기 위해선 내가 코드를 잘 봐야할 필요가 있는데
저것들은 너무 읽기가 힘들었다 그래서 CSS를 손대기 전에 을른!!!다 바꿔보자 하는 식으로 article를 이용해서 각 기사마다 틀래스를 지정해줬다.
<div class="collumn cat-article"> ... </div>
<div class="collumn space-article"> ... </div>
<div class="collumn travel-article"> ... </div>이제 완전히 CSS를 새로 짜야하기에 기본적인것부터 적용하며 최대한 비슷하며 나의 느낌이 있게 만들것이다.
이렇게까지는 만들었는데 너무 진전이없다...
어렵다는 생각을 마구마구한다....
그렇게 약 1시간을 뚜당뚜당하며 보내다보니
원하던 모양끼지 나왔다 이제 이과제에 공유해준 스트립트를 추가해서 내가 원하는 페이지로 만들기만 하면된다.
이제 깃에 올려서 배포를 해보자구!!!
우선 터미널을 틀어주고
git remote add origin "주소솰라솰라"
해서 연결 슥 해주고ㅓ
git add . git commit -m "fdjskljgkljl" git push origin "master"
로서 끝!!!!
비록 강의로서 나온 것이였지만
잠깐 휴식의 느낌으로 했지만 뭔가 너무 본격적이 되어버렸다//...
https://jinyr1128.github.io/TGPJ/
으로 만들어 놨으니 틈틈히 생각해봐야겠다.
회고
중간에 무언가를 바꾸며 손을 본다는것은 어쩌면...처음부터 만드는것보다 어려운 일이 아닐까 한다...
미친짓이란 뜻이다...상대방의 의도 내 의도 딱딱 맞게 알잘딱깔센으로 해야하는게 쉽지않다.
개발이란 무엇인가..를 공부하는 거북이의 성장일기 🐢