링크모음 웹페이지 만들기

완성본

https://soyoung9928.github.io/mypage/

 

 

오늘은 스파르타코딩클럽 정규과정말고

무료로 배포되는 강의

링크트리 같이 나의 링크를 한눈에 모아서 배포하는 웹페이지를 만들어봤다

 

이걸 들어야겠다 생각한건 사실

마지막 단계 때문인데,

 

링크트리나 quv, 아임웹 같이 요즘은 홈페이지 만들기를 쉽게 할 수 있기에

굳이 하나하나 만드는 과정은 사실 필요를 못느낀다

코딩 공부를 위해서 하는것이 아니면,,

그래서 웹개발 코스를 신청한 이유도 단순 코딩때문이었는데

 

내가 웹개발 코스도그렇고 이 무료강의를 보며 가장 가장 가장 궁금했던 것은

개인 서버를 어디에 두고 배포를 하냐는 것이었다

 

회사에서 해본 것은 나스에 파일들을 옮겨서 그걸 배포하는 방식이었는데

이렇게 무료로 배포하는 거면 자신의 서버가 없이도 충분히 배포할 수 있다는 것 아닌가

 

정말 그거 하나 궁금해서 오늘 이 강의를 들었다

 

정답은 깃허브!

 

 

작년에 진짜 아무것도 정말 ,,, 아무것도 모르고

나스 설정하고 ㅠㅠ 배포하고.. 인증서깔고 그렇게 맨땅에 헤딩햇는데

그리고 unity 로 개발하면서 깃허브 협업을 위해 이거저거 해봤지만

실패했던 기억...

 

남들은 이게 모가 쉽다는거야 ㅠㅠ 하면서 깃허브를 그냥 내동댕이 쳐놨었는데

오늘 드디어 써봣다.... 우아

이거 정말 최고아닌가

그래서 개발자들이 다 쓰는건가부다

깃허브는 이렇게 서버를 퍼주면 뭐가 남나 싶은 생각이 ㅋㅋㅋ

그래서 ;ㅅ; 근 1년만에 최초로 깃허브를 사용하고 배포해봤다는 썰... 엄청 길어졌네

 

 

 

오늘 배운 코드는 정규과정에서 배웠던 것 처럼 html과 css의 기본 개념과 함께

선생님이 주는 코드를 따라 써보면서 ㅇㅅㅇ

그냥 한땀한땀 만드는 과정이라 어렵진 않았다

 

아, 하나 잠깐 막힌 부분이 있는데

 

이 부분에서

선생님은 .wrap > a { ~~~~ 이렇게 써내려가서

분명 똑같이했는데 왜 안되는거야 ㅡㅡ

그리고 마우스 커서 올려보니 맞는걸 지정하고있기도했는데..

혹시나해서 > 를 지우고

.wrap a { ~~~~ 로 해서 쓰니까 됐다

음... 왜그런진 모르겠다

 

그래도 이렇게 하나 만들고나니까

웹페이지 코드만 뜯어봐도 이제 어떤 구조로 되어있구나~ 하는걸 알 수 있을것같다

역시 코드는 언어라

알고나면 해석이 가능하다는게 ㅈ ㅐ밌는 점이다

 

오늘 공부하다가 궁금한 것이 하나 있었는데

html을 구성하는,

내가 오늘 한 언어는 무슨언어인가

html 은 파일 유형의 이름이지 언어이름은 아닌것 같은데

 

krpano VR웹페이지도 같은 언어를 쓰는 것 같아서 궁금해졌다

오늘 질문에 남겨놓을까한다

충격적 사실...  html, css가 언어 이름이었다.! 두둥탁

는 내가 오해했고 언어 아닌게 맞음.. 풉키풉키

언어는 맞늗데 메소드언어? 로 개발언어는 아니지만 언어가 맞다

 

 

 

배운 언어들

 

border-radius    : 가장자리 둥글게  // 100%는 원모양

border   :   포토샵의 '획' 

margin   :   밀어내는 공간

    ex)   margin-top: 30px;        위부분 30px 밀어냄(띄움)

box-shadow   :    그림자 만들기

    ex)   box-shadow: 3px 3px 5px 0px black; 

            검정색그림자. 4개의 px이 오른.아래.왼.위 순(시계방향)으로 떨어진 정도라는데 잘 모르겠다..

            적용하면

 

가운데정렬 할때 받은 코드

display: flex; flex-direction: column; justify-content: center; align-items:  center;