본문 바로가기
반응형

HTML12

구글 클론 코딩 Preface 이번엔 구글 홈페이지를 만들어봤다. 워낙 화면 구성이 간단해서 쉽게 만들 수 있을 것 같다고 생각했었는데, 막상 교재 없이 모든 웹 요소를 하나하나 제작하다보니 시간이 꽤 오래 걸렸다. 전체적인 레이아웃을 구성하고 색상을 입히는 등 HTML과 관련된 간단한 CSS 작업은 막힘없이 진행할 수 있었는데, 자바스크립트를 사용해 숨겨놓았던 하위 메뉴를 표시하는 작업은 따로 책을 찾아보며 고민할 시간이 필요했다. 아, 그리고 이번 작업은 모든 웹 요소를 픽셀 단위로 제작했는데, 웹 페이지의 크기를 조절할 때마다 메인 로고와 검색 창의 위치가 바뀌는 것이 너무 신경쓰인다. 개강 전에 시간이 되면 그리드 레이아웃, 플렉스박스 레이아웃을 사용해 반응형 웹 페이지를 만들어보려고 한다. 이번엔 하위 메뉴를 .. 2022. 8. 19.
제주 여행사 웹 사이트 Preface HTML + CSS + JavaScript 책의 마지막 부분에 있는 웹 사이트 만들기 프로젝트를 진행하는 과정을 업로드한다. 한 번에 전부 완성하려 했지만, 이틀에 걸쳐 완성해야 할 것 같다. 다른 웹 사이트를 클론 코딩하기 전 연습한다는 생각으로 필요한 부분을 임의로 수정하며 책에 있는 코드를 따라 적고 있다. 처음엔 간단한 웹 사이트를 만드는 것 정도는 쉽게 할 수 있을 것이라 생각했는데, 예상했던 것 보다 신경 쓸 부분이 많다. 무엇보다 처음 큰 틀을 제대로 잡는 것이 정말 중요한 것 같다. 자세한 내용은 코드를 전부 완성한 후 이번 글에 추가하겠다. 모든 코드를 완성했다. 웹 사이트에 링크를 따로 연결한 것도 아니고 기본적인 형태만 만든 것 뿐인데, 시간이 꽤 오래 걸렸다. 그래도 .. 2022. 8. 12.
HTML, CSS 태그 및 속성 Preface 헷갈리는 태그나 속성이 있을 때마다 매번 블로그 글이나 책을 찾다 보니 시간이 너무 오래 걸린다. 웹 언어들의 주요 태그나 속성들을 한 눈에 쉽게 보고자 글을 업로드한다. 1. HTML ○ 태그 종류 설명 문서 유형을 지정한다. 웹 문서의 시작과 끝을 나타낸다. 웹 브라우저가 문서를 해석하는 데 필요한 정보를 입력한다. 웹 문서와 관련된 정보를 지정할 때 사용한다. 문서의 제목을 나타낸다. 실제 웹 브라우저에 표시할 내용을 입력한다. 헤더 영역을 의미한다. 같은 웹 문서 안에서 다른 위치로 연결하거나다른 웹 문서로 연결하는 링크를 만든다. 웹 문서에서 핵심이 되는 내용을 넣는다. 웹에서 실제로 보여주고 싶은 내용을 넣는다. 웹 문서에서 콘텐츠 영역을 나타낸다. 사이드 바를 만든다. 웹 문서.. 2022. 7. 26.
웹 브라우저 종류에 따른 HTML 태그 호환 여부 확인 웹 브라우저 종류에 따른 HTML 태그의 호환 여부를 확인할 수 있는 사이트다. 또한, HTML 사용 도중 발생하는 몇몇 문제점들의 해결 방법을 찾을 수도 있다. https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com 2022. 7. 20.
[HTML] 입력 양식 작성하기 (2) Preface 이번 장을 끝으로 해당 책의 HTML 파트를 모두 마쳤다. HTML의 문법 자체는 전체적으로 매우 평이한 수준이라고 생각한다. 그러나 태그들과 해당 태그의 속성들이 너무 다양해서 원하는 형식의 내용을 정확히 작성하기 위해선 많은 경험이 필요할 것 같다. 투자한 시간 대비 실력 향상이 완전한 정비례 관계일 것 같은 느낌? 다음 장부턴 HTML로 작성한 기본 뼈대를 꾸미는 작업을 하는 CSS 공부를 시작한다. 2. 사용자 입력을 위한 input 태그 - type의 number, range 필드에서 사용할 수 있는 속성 1) min: 필드에 입력할 수 있는 최솟값을 지정한다. (디폴트 값: 0) 2) max: 필드에 입력할 수 있는 최댓값을 지정한다. (디폴트 값: 100) 3) step: 숫자.. 2022. 7. 18.
[HTML] 입력 양식 작성하기 (1) Preface 이번 장에선 폼을 사용하는 방법과 input 태그의 다양한 속성을 공부했다. input 태그는 속성의 종류가 정말 많아 웬만한 타입의 정보는 모두 입력받을 수 있을 것 같다는 생각을 했다. 또, 이번 장에선 서버 프로그램과 연관된 것이라며 다루지 않고 넘어간 몇몇 속성들이 있는데, 이들을 보며 지난 책에서 PHP와 Apache를 연동하여 웹 서버를 잠시 다루었던 것이 떠올랐다. 그러다 문득 제대로 된 동적 웹 사이트를 만들려면 서버 스크립트 언어도 배워야 할 것 같다는 생각이 들어 친구에게 실무에선 PHP와 JSP 중 주로 어떤 언어를 사용하는지 물어봤다. 친구는 서버사이드 렌더링을 하지 않기 때문에 서버 스크립트 언어를 사용하지 않는다는 답변을 줬다. 구글링을 통해 서버사이드 렌더링의 정.. 2022. 7. 17.
[HTML] 웹 문서에 다양한 내용 입력하기 (2) Preface 이번 장에선 이미지, 오디오, 비디오, 하이퍼링크를 삽입하는 방법을 공부한 후 마지막엔 두 가지의 연습문제를 풀어봤다. 역시 어려운 부분은 없었고, 연습 문제도 손쉽게 해결할 수 있었다. HTML은 크게 고민할 부분이 없어서 딱히 적을만한 내용이 없다... 4. 이미지 삽입하기 - 태그: 웹 문서에 이미지를 삽입할 때 사용 1) src 속성: 이미지 파일의 경로를 지정 2) alt 속성: 화면 낭독기 등에서 이미지를 대신해서 읽어 줄 텍스트를 입력 (대체 텍스트) - 파일 경로 삽입 방법 1) 웹 문서 파일과 이미지 파일이 같은 경로: 이미지 파일의 이름만 적으면 된다. 2) 웹 문서 폴더의 하위 폴더에 이미지 파일: 하위 폴더와 함께 이미지 파일 이름을 적는다. - 웹에서 사용하는 이미지.. 2022. 7. 16.
[HTML] 웹 문서에 다양한 내용 입력하기 (1) Preface 이번 장에선 텍스트, 목록, 표에서 사용할 수 있는 태그들을 공부했다. 예제를 바탕으로 조금만 수정해도 내가 원하는 형태의 결과를 웹 브라우저에 출력할 수 있어서 그런지 쉽고 재미있다고 느껴졌다. 다만 태그의 종류가 너무 많아 원하는 형식을 만들어주는 태그를 바로바로 사용하려면 꽤나 숙련되어야 할 것 같다는 생각이 들었다. 이번 책의 HTML 부분이 끝나면 주요한 태그들을 아이패드에 정리해서 시간 날 때마다 볼 계획이다. 1. 텍스트 입력하기 - 태그: 제목을 나타내는 태그 1) n의 자리에는 1~6의 숫자가 들어가며, 크기를 나타낸다. - 태그: 텍스트 단락을 만든다. 1) 편집기에서 줄을 바꾸더라도 웹 브라우저에선 한 줄로 표시된다. 2) 텍스트 단락의 내용이 길어 화면에 한 줄로 표시.. 2022. 7. 15.
[HTML] HTML 기본 문서 만들기 Preface 이번 장에선 HTML 파일의 전체적인 구조와 몇 가지 주요한 시맨틱 태그를 알아봤다. HTML의 문법 자체는 어려운 부분이 없는 것 같고, 몇몇 주된 태그들의 종류와 사용 방법 정도만 익히면 충분히 내가 원하는 내용을 웹 상에 표현할 수 있을 것 같다. 아, 그리고 책에 자세히 소개되지 않는 태그들 중 궁금한 것들은 따로 정리해 놓자. 1. HTML과 첫 만남 - HTML(Hyper Text Markup Language): 웹 문서를 만드는 언어 - 하이퍼텍스트: 문서를 서로 연결해주는 링크 - 태그(tag): 웹 문서의 다양한 부분을 구분할 수 있도록 해주는 꼬리표 - HTML의 기본 기능: 웹 브라우저에게 보여 줄 내용을 마크업하고 문서끼리 링크하는 것 - 스타일 시트(style she.. 2022. 7. 14.
웹 개발 시작하기 Preface 오늘부터 웹 공부를 시작했다. 책에 30일 코스가 소개되어 있어 이에 맞춰 진도를 나가려고 한다. 다음 장은 '웹 개발 환경 만들기'로 vscode를 설치하고 설정하는 방법을 소개하는데, 나는 이미 해당 ide를 사용해왔으므로 블로그 글은 생략하겠다. 이번 장에선 웹 개발이란 무엇인지, 프런트엔드와 백엔드 영역에서 요구되는 기술엔 어떤 것들이 있는지 등을 알아봤다. 이미 여러 번 공부하고 언급했던 내용이므로 간략하게 정리만 하고 넘어간다. 1. 웹 개발 알아보기 - 웹 사이트의 종류 1) 정적(static) 사이트 2) 동적(dynamic) 사이트 - 서버(server): 인터넷에 연결된 컴퓨터 - 클라이언트(client): 사용자가 웹 사이트에 접근하려고 사용하는 전자기기 → 좁은 의미로.. 2022. 7. 14.

티스토리툴바