html: 레이아웃 구조 ↓↓↓ 차례대로 먼저 보고 오기 ↓↓↓ 서당개 웹 튜토리얼 시작! Let's Start! '서당개 웹 공부' 튜토리얼 소개 서당개 웹공부 프롤로그 프롤로그 튜토리얼 소개 (링크트리 스타일 랜딩페이지 만들기) 누구에게 도움이 될까? 긴~ 서론 '랜딩페이지 제작 판매'를 하는 것이 올 liis.tistory.com 서당개 웹 튜토리얼 00. 무료 소스 코드 편집기: vscode 웹사이트 제작하기 위한 소스 코드 편집기: 비주얼 스튜디오 코드(Visual Studio Code, VSCode) 서당개 웹 튜토리얼 시작! Let's Start! '서당개 웹 공부' 튜토리얼 소개 서당개 웹공부 프롤로그 프롤로그 튜 liis.tistory.com 서당개 웹 튜토리얼 01. 웹 퍼블리싱 전 기..

웹 제작 기초 작업: 와이어프레임 작성하고 초기 세팅하기 서당개 웹 튜토리얼 시작! Let's Start! '서당개 웹 공부' 튜토리얼 소개 서당개 웹공부 프롤로그 프롤로그 튜토리얼 소개 (링크트리 스타일 랜딩페이지 만들기) 누구에게 도움이 될까? 긴~ 서론 '랜딩페이지 제작 판매'를 하는 것이 올 liis.tistory.com 서당개 웹 튜토리얼 00. 무료 소스 코드 편집기: vscode 웹사이트 제작하기 위한 소스 코드 편집기: 비주얼 스튜디오 코드(Visual Studio Code, VSCode) 서당개 웹 튜토리얼 시작! Let's Start! '서당개 웹 공부' 튜토리얼 소개 서당개 웹공부 프롤로그 프롤로그 튜 liis.tistory.com ↑ 지난 포스팅에서 웹사이트를 만들 때 사용하는 소스..

웹사이트 제작하기 위한 소스 코드 편집기: 비주얼 스튜디오 코드(Visual Studio Code, VSCode) 서당개 웹 튜토리얼 시작! Let's Start! '서당개 웹 공부' 튜토리얼 소개 서당개 웹공부 프롤로그 프롤로그 튜토리얼 소개 (링크트리 스타일 랜딩페이지 만들기) 누구에게 도움이 될까? 긴~ 서론 '랜딩페이지 제작 판매'를 하는 것이 올 liis.tistory.com ↑지난 포스팅을 통해서 링크트리 형태의 랜딩페이지를 제작하기로 하며 '서당개 웹 공부'의 포문(?)을 열었다. 웹페이지는 메모장만 있어도 만들 수 있지만, 좀 더 편리하게 소스를 작성하기 위해 소스 코드 편집기를 이용하면 좋다. 이전에 웹 퍼블리싱을 독학할 때 개발자 분께 추천 받은 무료 프로그램인 '앱타나(Aptana)'..

'서당개 웹 공부' 튜토리얼 소개 서당개 웹공부 프롤로그 프롤로그 튜토리얼 소개 (링크트리 스타일 랜딩페이지 만들기) 누구에게 도움이 될까? 긴~ 서론 '랜딩페이지 제작 판매'를 하는 것이 올해 목표 중 하나였다. 웹 퍼블리싱에 관심도 있고 회사에서 웹디자인 할 때마다 퍼블리싱을 어깨너머 배우기도 했기 때문에 서당개 풍월 읊 듯 간단하게 웹 페이지를 제작하는 것은 할 수 있을 것 같아 용기있게 목표로 삼았지만, liis - 2021년 새해 목표 4가지 웹 특성 상 발생할 수 있는 여러가지 오류를 해결하기에는 서당개 수준의 웹 경험만 가지고서는 돈을 받고 웹 제작을 하는 것은 아직 무리가 있다고 생각이 들었다. 그래서 티스토리 블로그에 '튜토리얼' 방식으로 랜딩페이지를 처음부터 끝까지 만들어보는 경험을 공..

웹 퍼블리싱: 구글 머티리얼 아이콘 (Google Material Design Icons) 웹사이트를 만들다보면 필수적으로 또는 부수적으로 '아이콘'이 필요하다. 예를 들어 티스토리에도 있는 '메뉴'나 '검색' 아이콘 같은 경우다. 이런 아이콘들은 사용자들에게 익숙한 기본 형태가 있고 크게 변경할 수 있는 여지가 많지 않기 때문에 구글 머티리얼 아이콘 같이 이미 만들어진 아이콘들을 적용하는 것도 간편한 방법이다. 구글 머티리얼 아이콘의 가장 큰 장점 중에 하나는 '폰트'처럼 사용할 수 있기 때문에, 폰트의 컬러, 사이즈를 바꾸는 것처럼 아이콘의 컬러, 사이즈를 아주 쉽게 바꿀 수 있다. 또한 디스플레이 해상도 상관없이 깨끗한 이미지를 보여주기 때문에 매번 이미지를 만들어서 사용할 필요가 없다. 티스토리 ..

웹 퍼블리싱: 가운데 정렬 하는 방법 CSS를 하다보면 가운데 정렬 시키는 방법들이 정말 다양하다는 것을 알 수 있다. 그런데 종종 가운데 정렬이 생각한대로 적용이 잘 안될 때가 있어서 답답할 때가 있다. 헷갈리기도 하고... 내가 가운데 정렬 시킬 때 쓰는 방법은 총 3가지인데, 공부할 겸 어떤 상황에 어떤 방식을 사용해야 하는지 정리해보려고 한다! 가운데 정렬 하는 방법 3가지 text-align: center; margin: auto 0; transform: translate(X, Y); text-align: center; : text의 정렬을 뜻하고, 'center'는 텍스트를 가운데에 정렬을 시킨다는 뜻이다. 말 그래도 '텍스트'만 가운데 정렬 시키는 방법이다. text-align를 적용하면 자..