코딩각

HTML 스니펫 으로 편하게 코딩하는법 | HTML Snippets 설치와 사용법 | 비주얼 스튜디오 코드 익스텐션

HTML 코드을 작성하려면 문서의 기본 구조부터 작성해야 한다. ... 이렇게 시작되는 내용이다. 템플릿 파일을 복사해서 사용하는 방법도 있지만 비주얼 스튜디오에서 기본적으로 제공하는 자동완성 기능과 HTML Snippets Extension 을 사용하면 몇개의 타이핑으로도 완성이 가능하다. 우선 비주얼 스튜디오를 열고 파일을 하나 만든다. -> (파일명).html 비주얼 스튜디오 코드는 파일의 확장자 html 을 확인하고 이 파일이 html 파일임을 인식한다. html 을 입력하면 자동완성이 뜬다. 여기서 html : 5 를 선택하면 기본 구조를 만들어 준다. 가장 기본적인 문서의 골격을 만들었다. 여기서 html lang="en" 을 "ko"로 바꾼다. 문서의 기능에는 상관이 없지만 검색엔진이 en ..
코딩(CODING)/HTML | CSS 2020. 11. 30. 19:48

HTML/CSS | 프론트엔드 개발이란? 프로그래밍 이야기

* 이글은 웹페이지 기초 레이아웃에 대한 포스팅을 작성하다 잡설이 길어져서 분리한 글이다. 처음에 HTML을 배울 때는 같은 간단한 태그부터 시작한다. 처음으로 몇 개의 태그를 달아놓으니 인터넷에 글자가 써지는 기적같은 일은 좀체 잊기 힘든 경험이다. SNS에 글을 쓰는 느낌하고도 다르다. SNS는 글을 쓰고 공유하는 질서가 있지만 백지에서 웹사이트를 만들어 보는 것은 또 다른 차원의 경험이다. SNS에서는 정해진 규칙에 따라 글을 쓰지만 HTML를 사용해서 웹사이틀 만드는 것은 집을 짓는 것과 비슷하다. 나의 웹사이트는 하나의 창조물이고 집이다. 그래서 초창기 웹의 초창기에 홈페이지(Home Page - 집 페이지) 라고 이름을 붙였다. 홈페이지에 좀 더 개인적이고 탐색의 의미를 부여해서 블로그(Blo..
코딩(CODING)/HTML | CSS 2020. 11. 30. 06:32

CSS HTML | 폰트이야기 | 상업용 무료 웹폰트 사용법 | @Font-face | @import

웹사이트와 블로그를 돋보이게 하는 것은 디자인이다. 폰트는 항상 웹에서 빼놓을 수 없는 중요한 요소다. 폰트의 역사를 잠깐 알아보면 가장 오래된 폰트 중의 하나는 굴림체이다. 인터넷 초창기 시절부터 MS 윈도우에서 기본으로 제공해서 별 생각없이 사용했던 굴림체라 별 거부감은 들지 않는다. MS-DOS 시절을 생각하면 컴퓨터에 한글이 잘 나온다는 사실만으로도 반갑던 때가 있었다. MSX 같은 교육용 컴퓨터에서 한글 폰트가 있었다고 하는데 용량을 생각하면 지금 처럼 제대로 사용은 어려웠을 것이다. 시간이 흘러 2020년 현재 굴림체하면 왠지 모르게 촌스럽게 느껴진다. 위키백과에 따르면 굴림체는 70년대 중반부터 사용되 왔다고 한다. 그렇게까지 오래된 폰트였는지 처음 알았다;;; 70년대에 활자 기계 (타자기..
코딩(CODING)/HTML | CSS 2020. 11. 29. 22:39

폰트 어썸 5 무료 아이콘 사용하기 | HTML / CSS

폰트 어썸은 무료 버전을 사용해도 1600개나 되는 아이콘을 사용할 수 있다. 약 5메가 정도의 웹버전을 다운로드 해도 되고 가입을 하면 cdn 을 사용할 수 있다. 이메일 주소를 확인하고 이름 등 간단한 정보만 입력하면 되니까 가입하는 것도 나쁘지 않다. 웹사이트에 사용하려면 아무래도 가입하거나 설치 버전을 이용하는 것이 좋겠지만 그전에 테스트를 해보고 싶다면 아래 CDNJS 사이트에서 사용해 보는 것도 나쁘지 않다. 폰트 어썸은 현재 6버전이 베타 테스트 하는 중인데 안정화된 최신 버전이 5니까 5를 사용해보자. *CDN - 폰트어썸 다운로드 : CDN 으로 사용해볼 수 있다. font-awesome - Libraries - cdnjs - The #1 free and open source CDN bu..
코딩(CODING)/HTML | CSS 2020. 11. 29. 16:21

CSS HTML | 속성 선택자, 후손 선택자, 자손 선택자

HTML 태그중에는 특정 속성이 있다. 태그의 개수도 많지만 거기다 속성까지 다양하니까 복잡하다. CSS가 분리되서 나온 것은 HTML 태그는 마크업이란 뜻에 맞게 구조의 표현에 집중하고 디자인 부분은 CSS (모질라 팀에서는 메이크업이라 한다)에 맡긴다는 취지인데 어쨋든 처음 배우는 입장에서는 복잡해 보인다. 가장 빠른 방법은 뭐가 되었던 직접 해보는 수 밖에 없다. 속성 선택자 속성 선택자는 태그의 속성을 선택하는 것이다. input의 속성이 다양하니 한번 적용해 보자. 모양은 같아도 input type이 각자 다르다. 배경색을 바꿔보면 구분이 되서 좋다. 물론 사용자에게 입력받는 폼양식을 이렇게 알록달록하게 할일은 없겠지만 속성을 지정하는 것이 어떤 것인지 알 수 있다. 분명 태그는 input 태그..
코딩(CODING)/HTML | CSS 2020. 9. 23. 01:25
◀ 1 2 3 4 5 6 7 8 ▶

티스토리툴바