연습 UI
HTML,CSS를 활용한 웹페이지 제작
Read more만들어보게 된 계기
"비전공자로써 프론트엔드 개발 공부를 하고 있는 나로써는 많은 점들이 부족하고 또 부족하다.
특히 javascript는 학습한지 1달이 지난 지금 까지도 이해가 안가는 부분이 너무나도 많다.
그래서 나는 js를 활용을 안하고 웹페이지를 한번 제작해볼까? 라는 생각이 들었다.
물론 js 활용 능력이 무르익지 않아서 사용을 못한 것이지 앞으로도 계속 이렇게만 제작 해보려는 생각은 아니다."
제작 과정
"개발자 현직 친구는 나에게 유튜브와 구글은 개발자의 교과서와도 같다고 해주었다.
그 만큼 개발이라는 직군은 웹상에서 집단지성이 모여 있는 아주 큰 사회를 형성하고 있다.
코드 작성이 익숙치 않은 나는 유튜브에 나온 내용을 천천히 직접 따라 적으며 적용해보기로 하였다."
https://www.youtube.com/watch?v=zSg4_d6Qhzc 의 영상을 보고 따라서 제작을 해보았다.소스와 이미지파일등 여러가지 정보공유를 해주었기 때문에 해당 제작자의 영상을 보게 되었는데 정말 많은 도움이 되었다.
HTML:
연습 Website UI | Part 1 제작 사이트 URL: http://127.0.0.1:5500/index.html
CSS: 제작하며 가장 많은 지식을 얻은 부분은 CSS부분이다.
justify-content의 기본적 정의 및 설명
CSS 속성 은 브라우저가 플렉스 컨테이너의 기본 축 과 그리드 컨테이너의 인라인 축을 justify-content따라 콘텐츠 항목 사이와 주위에 공간을 분배하는 방법을 정의합니다 .
position의 기본적 정의 및 설명
CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다.
그 밖에 box-shadow, align-items 등 MDN에 나와있는 정의를 봐도 잘 이해가 안가고 와닿지 않았던 속성들을 영상을 보며 직접 제작하다보니 이해가 가게 되었다.
제작 결과물
마치며...
HTML,CSS만을 활용해서 이렇게 다이나믹하고 깔끔해 보이는 웹페이지를 제작 할 수 있다는 것이 신기하였다. 개인적으로 CSS의 활용을 좀 더 깊이 있게 할 수 있게 된 것 같았다. 비록 따라 적으며 익힌 것이지만 이번 웹페이지를 제작하며 내가 이렇게 제작한 웹페이지에 JS를 활용하여 좀 더 재밌고 다이나믹한 기능들을 집어넣는다면?? 이라는 생각이 너무 많이 들었다. 나는 아직 갈 길이 멀다. 절망적인 말인것 같지만 정말로 이 말 말고는 다른 말을 할수 없다. 그러나 동영상 강의만 보고 있던 나로써는 이번 경험이 개발 재미에 가속화를 불러 일으켰다고 생각이 들어 한편으로는 다행이라는 생각이 들었다. 하루 빨리 JS를 이해하고 능숙하게 활용하여 새로운 것을 창조해내고 싶다.
why?