본문 바로가기

Programming

Google clone - 구글 홈페이지 따라하기 HTML 공부한 내용을 바탕으로 Google 홈페이지를 따라 만들어보겠다. 에디터는 Visual Studio Code를 사용했다. 부터 시작~! 더보기 HTML 개발환경 세팅을 위해 vscode에서 확장 프로그램 두 가지를 설치했다. 1. open in browser : html 파일을 브라우저에서 열 수 있게 하는 프로그램 html 파일에서 마우스 오른쪽 버튼 -> Open in Browser 클릭! 2. Live HTML Previwer : 실시간으로 html 미리보기를 제공한다. F1눌러서 'show live server preview'치면 오른쪽에 분할된 창이 생겨 실시간 미리보기가 제공된다. 먼저 내 작업폴더(Project)밑에 프로젝트파일(GoogleProject)를 하나 만들고 그 밑에 ht.. 더보기
마크다운이란? 마크다운 문법 / 사용법 총 정리 1. 마크다운이란? - 마크다운을 만든 사람은 존 그루버라는 사람으로 2004년에 HTML로 변환 가능한 텍스트 기반의 마크업언어를 만들었다. 마크다운은 쉽게 읽고 쓸 수 있다는 장점이 있고 특수기호와 문자를 이용하여 매우 간단한 구조의 문법을 사용해 웹에서도 보다 빠르게 컨텐츠를 작성할 수 있고 보다 직관적으로 인식할 수 있다. 최근 깃허브로 마크다운이 각광받기 시작했는데 이 깃허브의 저장소에 관한 정보를 기록하는 README.md는 깃허브를 사용하는 사람이라면 누구나 가장 먼저 접하게 되는 마크다운 문서이다. 마크다운을 통해 설치방법, 소스코드 설명, 이슈 등을 간단하게 기록하고 가독성을 높일 수 있다는 강점이 부각되며 점점 여러 곳으로 퍼져나가게 된다. 2. 마크다운의 역사 - 존 그루버는 2004.. 더보기
[HTML] 시멘틱 마크업 정보의 홍수 속에서 어떻게하면 의미있는 정보에 효율적으로 접근할 수 있을까? 의미있는 태그를 통해 브라우저와 개발자 모두가 태그만으로 문서의 구조를 이해하게 함으로써 정보 검색의 효율을 높이는 시멘틱 웹에 대해 알아보자. ' 시멘틱 마크업 ' - 시멘틱(Semantic) : 의미론적인, 의미있는 - 마크업(Markup) : 표시하다 옛날 옛적의 신문사에서는 글을 쓰는 사람과 글을 인쇄하는 사람이 따로 있었다. 글을 쓰는 사람은 글자의 크기나 굵기와 같은 효과는 직접 수정할 수 없었고 글을 인쇄하는 사람이 제목 영역의 글자의 크기를 키우거나 강조해야 하는 글자의 굵기를 굵게 하는 등의 수정을 거쳐 인쇄를 하였다. 그래서 글을 쓰는 사람은 글을 그냥 주지 않고 제목이 되는 부분, 내용이 되는 부분, 강조해야.. 더보기
[HTML] HTML의 기본 문법 1. 요소(Element) html의 요소는 시작태그(start tag)와 종료태그(end tag), 그리고 그 사이에 위치한 content로 구성된다. html 문서는 요소들의 집합으로 이루어진다. * 요소는 중첩될 수 있다. 즉, 요소는 다른 요소를 포함할 수 있다. 이때 부자관계가 성립되며 이러한 부자관계로 정보를 구조화할 수 있다. Hello World 앞선 포스팅에서 살펴봤던 기본적인 html 문서의 형태이다. - 가장 상위에 태그가 있고 그 하위 태그로 ,태그가 있다. 태그의 하위태그로 ,태그가 있다. 이러한 부자관계를 통해 문서가 구조화될 수 있고 이를 시각적으로 파악하기 쉽게 들여쓰기(indent)를 활용한다. * 빈 요소 (Empty Element) content를 가질 수 없는 요소를 .. 더보기
[HTML] HTML이란? HTML이란? HTML(HyperText Markup language)는 웹페이지를 기술하기 위한 마크업 언어를 말한다. * 마크업 언어: 태그 등을 이용하여 문서나 데이터 구조를 명기하는 언어이다. 태그로 문서의 구조를 표현하며 이러한 태그 방법의 체계를 마크업 언어라 한다. ** 그럼 마크다운은 뭘까? 이름만 봐서는 마크업의 반대개념같지만 그렇지 않다. 마크다운은 마크업 언어의 일종으로 일반 마크업 언어에 비해 사용하기 쉽게 경량화되어있다. 자세한 설명과 사용법이 궁금하다면 아래 포스팅 참고 !(•̀ᴗ•́)و ̑̑ euncoding.tistory.com/5 마크다운이란? 마크다운 문법 / 사용법 총 정리 1. 마크다운이란? - 마크다운을 만든 사람은 존 그루버라는 사람으로 2004년에 HTML로 변환.. 더보기