반응형 웹 만들기6 줄 바꿈 이전 두가지 포스팅에서 태그를 이용하여 내용을 강조하는 방법, 자주 사용되는 태그, 모르는 태그를 찾는 방법 등을 배웠다. 다음으로 서로 경쟁관계에 있는 두 태그를 이용하여 줄바꿈을 하는 방법을 알아본다. 이전 포스팅에서 작성한 본문은 다음과 같다. 위의 코드 빨간 박스를 보면 단락을 구분하기 위해 줄바꿈을 했지만 웹페이지에서 동작하지 않는다. 이는 줄바꿈을 위해서 태그가 필요하기 때문이다. 우리는 줄바꿈 태그가 무엇인지 모르기 때문에 찾아야 한다. 이전의 포스팅에서 다룬 내용과 같이 태그는 일상생활의 경험을 토대로 유사한 단어를 활용하기 때문에 검색할때도 필요한 기능과 유사한 내용으로 검색하면 된다. 위와 같이 검색을 하면 태그에 관한 글들이 나온다. 따라서, HTML에서 새로운 줄을 표현할 때는 태그.. 2022. 12. 13. 태그 사용 빈도 통계 태그 사용 빈도 통계 이제 태그가 무엇이고 태그를 어떻게 사용하는지 알게 되었다. 하지만 내가 알고 있는 strong, u가 전부인 반면 오늘날의 HTML은 약 150개가 넘는 태그가 존재하고 이를 어떤 상황에 어떻게 사용할지에 대해 전부 외울 수는 없다. 태그가 무엇인지 알면 구글링을 통해 검색하여 알 수 있지만 알고 있는 태그 자체가 적다면 코딩하는 것이 너무 불편할 것이다. 따라서, 태그의 사용빈도 통계를 이용하여 밑천으로 알고 있으면 편리한 태그가 무엇인지를 판단한다. 구글에서는 전 세계에 있는 수많은 웹페이지를 분석한다. 그 분석 결과를 잘 정리 정도한 사이트는 다음과 같다. https://advancedwebranking.com/html/ HTML Study | Advanced Web Rank.. 2022. 12. 12. 기본 문법, 태그 사용하기 이제 코딩을 시작하기에 앞서 만들었든 기획서를 보자. 이런 모양의 웹페이지는 한 번에 만들수 없고, 조각조각 구현하며 전체적으로 완성해 나가야 한다. 이번에는 붉은색으로 표시된 부분을 먼저 작업 한다. 1.html에 빨간 박스에 들어갈 내용을 저장한 후 웹브라우저를 리로드 한다. 여기 내용에서 '프로덕트가 만들어지는 과정에대해 모르는 내가 기획이라는 것을 해도 될까'? 라는 부분이 중요한 내용이라는 생각이 들어 강조하기 위해 글씨를 진하게 표시하고 싶다. 과 으로 진하게 표시하고 싶은 구간을 감싸주면 다음과 같이 글씨가 강조가 된다. 처음으로 태그를 사용한 결과이다. 이는 절대 사소한 것이 아니고, 웹이 아무리 복잡해도 본질적으로는 이것을 벗어나지 않는다고 강의에서 강조를 한다. 이제 '프로덕트가 만들어.. 2022. 12. 12. 실습 환경 준비 이제 코딩을 하기 위해서는 에디터(Editor)라는 프로그램이 필요하다. 각 운영체제에는 윈도(메모장), 맥(텍스트 편집기), 리눅스(gedit) 등 이미 에디터가 준비 되어 있지만 각 사용법이 다르기 때문에 github에서 만든 Atom(아톰)으로 통일한다. 아래 주소에서 프로그램을 다운로드해서 설치한다. https://atom.io/ A hackable text editor for the 21st Century At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t.. 2022. 12. 9. 코딩의 이해 이제 기획이 끝났으니 구현을 할 차례이다. 이에 앞서, 사람이 하는일과 기계가 하는일을 분리해서 생각해보고 어떤 것이 원인이고 어떤 것이 결과인지 추론해본다. 이것은 강의 전체를 통틀어서 가장 중요하다고 강조되고 있다. 위의 사진에서 오른쪽이 사람이 하는 일이면서 원인이고, 그것에 대한 결과가 왼쪽이면서 기계가 하는 일이다. 사람이 하는 일, 다시 말해서 원인을 부르는 여러 표현은 다음과 같다. 부호 또는 신호라는 의미의 코드(code) 원천이라는 뜻의 소스(Source) 약속이라는 의미에서 언어(컴퓨터 언어) 기계가 하는 일, 다시 말해서 결과를 부르는 여러 표현이 다음과 같다. 애플리케이션(줄여서, 앱) 프로그램 웹에서 결과는 웹 페이지 웹페이지가 모여있으면 웹사이트 기능이 좀 많으면 웹애플리케이션(.. 2022. 12. 8. 웹 만들기 - 기획 웹을 만들기에 앞서 어떤 웹을 만들 것인지 상상하고 계획하는 과정이 필요하고, 이를 기획이라고 한다. 강의에서 코딩수업의 내용을 잘 정리 정돈할 수 있는 웹사이트를 다음과 같이 그린다. 1. 제일 위쪽에는 수업의 전체 제목을 적어봤다. 2. 왼쪽에는 수업의 목차를 적었고, 목차에는 링크가 걸려 있다. 링크를 클릭하면 링크에 해당하는 콘텐츠가 오른쪽에 표시된다. 3. 오른쪽의 상단엔 제목이 표시되고, 본문에는 제목에 대한 자세한 설명이 표시된다. 강의에서 웹페이지를 만드는 것이 남의 문제가 아닌 나의 문제라고 상상하라고 강조한다. 똑같이 해도 되지만 자신의 생각으로 정보를 채워가면서 수업을 따라간다면 수업이 보다 의미 있을 것이라고 한다. 따라서, 나는 나의 위의 예시를 응용해 나의 블로그를 웹페이지로 만.. 2022. 12. 8. 이전 1 다음 반응형
