반응형 web4 Can I Use? 다양한 브라우저에서 특정 기능의 사용 가능 여부를 알려주는 사이트 https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com 2023. 6. 3. 구글 클론 코딩 Preface 이번엔 구글 홈페이지를 만들어봤다. 워낙 화면 구성이 간단해서 쉽게 만들 수 있을 것 같다고 생각했었는데, 막상 교재 없이 모든 웹 요소를 하나하나 제작하다보니 시간이 꽤 오래 걸렸다. 전체적인 레이아웃을 구성하고 색상을 입히는 등 HTML과 관련된 간단한 CSS 작업은 막힘없이 진행할 수 있었는데, 자바스크립트를 사용해 숨겨놓았던 하위 메뉴를 표시하는 작업은 따로 책을 찾아보며 고민할 시간이 필요했다. 아, 그리고 이번 작업은 모든 웹 요소를 픽셀 단위로 제작했는데, 웹 페이지의 크기를 조절할 때마다 메인 로고와 검색 창의 위치가 바뀌는 것이 너무 신경쓰인다. 개강 전에 시간이 되면 그리드 레이아웃, 플렉스박스 레이아웃을 사용해 반응형 웹 페이지를 만들어보려고 한다. 이번엔 하위 메뉴를 .. 2022. 8. 19. 제주 여행사 웹 사이트 Preface HTML + CSS + JavaScript 책의 마지막 부분에 있는 웹 사이트 만들기 프로젝트를 진행하는 과정을 업로드한다. 한 번에 전부 완성하려 했지만, 이틀에 걸쳐 완성해야 할 것 같다. 다른 웹 사이트를 클론 코딩하기 전 연습한다는 생각으로 필요한 부분을 임의로 수정하며 책에 있는 코드를 따라 적고 있다. 처음엔 간단한 웹 사이트를 만드는 것 정도는 쉽게 할 수 있을 것이라 생각했는데, 예상했던 것 보다 신경 쓸 부분이 많다. 무엇보다 처음 큰 틀을 제대로 잡는 것이 정말 중요한 것 같다. 자세한 내용은 코드를 전부 완성한 후 이번 글에 추가하겠다. 모든 코드를 완성했다. 웹 사이트에 링크를 따로 연결한 것도 아니고 기본적인 형태만 만든 것 뿐인데, 시간이 꽤 오래 걸렸다. 그래도 .. 2022. 8. 12. 웹 개발 시작하기 Preface 오늘부터 웹 공부를 시작했다. 책에 30일 코스가 소개되어 있어 이에 맞춰 진도를 나가려고 한다. 다음 장은 '웹 개발 환경 만들기'로 vscode를 설치하고 설정하는 방법을 소개하는데, 나는 이미 해당 ide를 사용해왔으므로 블로그 글은 생략하겠다. 이번 장에선 웹 개발이란 무엇인지, 프런트엔드와 백엔드 영역에서 요구되는 기술엔 어떤 것들이 있는지 등을 알아봤다. 이미 여러 번 공부하고 언급했던 내용이므로 간략하게 정리만 하고 넘어간다. 1. 웹 개발 알아보기 - 웹 사이트의 종류 1) 정적(static) 사이트 2) 동적(dynamic) 사이트 - 서버(server): 인터넷에 연결된 컴퓨터 - 클라이언트(client): 사용자가 웹 사이트에 접근하려고 사용하는 전자기기 → 좁은 의미로.. 2022. 7. 14. 이전 1 다음
