개발 (4) 썸네일형 리스트형 코딩 2주차 - 1 스파르타 코딩에서 맞이한 2주차 첫 수업이다. 넷플릭스의 웹페이지를 본따서 만드는 프로젝트를 하는데 상당히 재미있다. 1주차 때 했던 것을 다시 복습하는 개념이어서 이전에 사용했던 태그들이나 코드들을 다시 사용하였고 처음보다 더 정교하게 페이지를 제작할 수 있었던 거 같다. 코드들을 보면 title 아래에 있는 것이 부트스트랩을 사용하게 해주는 코드이다. 저게 없으면 부트스트랩에서 코드를 복사하여 사용하더라도 제대로 작동이 안된다. body 태그안에 있는 코드들은 부트스트랩에서 갖고 온 코드이다. 마음에 드는 것이 보이면 마우스 우클릭하여 검사 누른 뒤에 해당 부분에 코드들을 복사하여 사용할 수 있다. 위의 코드들을 이용하여 구현한 스파르타 플릭스이다. 아직 미완성이지만 다음 교육 때 서서히 완성도 있게.. 코딩 1주차 - 3 저번 시간에 부트스트랩을 이용해서 페이지 상단을 꾸며보았고 상단에 이어 페이지 전체를 간단하게 제작해보는 시간을 갖게되었다. 코드가 너무 길어 일부분만 올리겠다. 부트스트랩 코드를 복사하여 붙여서 사용했는데 새로운 사실을 알게되었다. 부트스트랩 cdn을 헤더에 쓰지않고 코드를 복사하여 사용하게 되면 제대로 구현이 안된다. 그렇기에 유의해야겠다. 부트스트랩에선 다양한 css 디자인이 많기 때문에 참고하여 사용하면 괜찮을 거 같다. 끝으로 이번 시간은 저번에 배웠던 디스플레이 구문을 이용한 위치를 잡는 것과 마진, 그리고 패딩의 개념을 이해하고 적용을 잘했던 거 같다. 코딩 1주차 - 2 1주차 2번째로 작성하는 글이다. 저번시간엔 html과 css로 간단한 로그인 페이지를 제작하였고 이번엔 페이지에 들어가는 상단을 제작해보았다. 상단을 제작할 때 여러가지 요소가 들어갔는데 display: flex; flex-direction: column; align-items: center; justify-content: center; 위의 코드를 사용하여 상단의 위치를 잡아주고 css 스타일을 사용하여 버튼의 모양이나 크기, 글자색깔 등을 꾸며주었다. 또한 부트스트랩 라이브러리를 이용하여 배경의 이미지를 추가하였다. 부트스트랩은 타인이 제작한 레이아웃, 버튼, 입력창 등 디자인과 기능을 자바스크립트로 만든 프레임워크여서 가져다가 이용을 하면 아주 편리하다. 코딩 1주차 - 1 스파르타 코딩에서 맞이하는 1주차엔 html 과 css에 대한 것을 배웠다. 이번 교육에서 이해하고 알아가야할 부분은 바로 이것이다. { HTML은 웹의 뼈대를 잡아주는 구역을 나타내는 코드이며 웹의 전반을 HTML을 통해서 작성할 수 있다. CSS는 HTML을 통해 작성된 뼈대를 원하는 스타일에 꾸며주는 코드이다. } 참고로 html은 프로그래밍 언어가 아닌 마크업 언어라는 것을 알고 있으면 된다. "마크업 언어란 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리구조를 명시하기 위한 규칙들으 정의한 언어이다." 이렇게 html과 css를 이용한 간단한 로그인 페이지를 만들어보았다. 이전 1 다음
