HTML 썸네일형 리스트형 [Html-기초편] 태그란 무엇인가? 안녕하세요. 키미추입니다. 티스토리 블로그에서 HTML 에디터 사용하는 방법에 이어 태그에 대해(기초편)을 알려드리려고 합니다. 1.태그란 무엇인가? HTML은 웹 페이지의 표준 마크업 언어입니다. HTML을 사용하면 자신의 웹사이트를 만들 수 있습니다. 태그는 HTML에서 사용되는 명령어,언어입니다. 2.태그는 어떻게 사용하는가? 모든 태그는 시작 태그와 일부 콘텐츠 그리고 종료 태그로 정의됩니다. 태그는 사용할때 순서가 중요합니다. 여는 태그 : 닫는 태그 : 예를 들어, B(글자 굵게)이라는 태그를 사용하려고 합니다. 글자 굵게 하는 B태그 사용! 다른 예시, 단락 태그는 P를 사용 먼저 여는 태그를 맨앞에 써주고, 내용 맨 끝에는 닫는 태그를 써줍니다. 간단히 말해 내용 앞뒤로 여는 태그와 닫는 .. 더보기 [Html-기초편] 티스토리 HTML 에디터 사용하는 방법 안녕하세요. 키미추입니다. 티스토리 블로그에서 HTML 에디터 사용하는 방법(기초편)을 알려드리려고 합니다. 1.티스토리 에디터 구성 티스토리 글쓰기 편집을 누르면 흔히 보던 제목과 본문으로 나눠진 깨끗한 여백의 글쓰기 화면이 나옵니다. 티스토리의 장점은 단순 글을 쓰고 사진과 동영상을 넣는 기능뿐만아니라 편집자가 직접 코딩을 할 수 있는 HTML 편집기 모드를 허용하고 있는데요. 아래처럼 티스토리 에디터는 기본모드 / HTML모드를 사용할 수 있어요. 우리는 HTML 모드를 사용해서 글쓰는 방법을 알아볼 거예요. 2.HTML 모드 켜기 이제 본격적으로 HTML 모드를 사용해봅시다. 티스토리 글쓰기를 들어가면 우측 끝 버튼을 보면 '기본모드'라고 되어 있어요. 클릭하면 드롭다운 방식으로 '기본모드/ 마크.. 더보기 [Html] 컬러감이 좋은 그라데이션① hex-color 모음 안녕하세요. 키미추입니다. HTML에서 배경색,글자색상 등 그러데이션 속성과 유용한 hex-color를 알려드리려고 합니다. 1.그라데이션 적용 방법과 간단 설명 background 에서 속성을 linear-gradient로 해준다. 그리고 괄호 안의 (그라데이션의 방향, 색상1 폭, 색상2 폭)은 값 변경 사용할 수 있다. html에 적용할때는 에 아래서 맘에드는 색상 코드를 넣어주면 된다. 👇👇자세한 코드 삽입 방법은 아래 글에 첨부했습니다.👇👇 [Html] 제목을 강조하는 꾸미기 방법 & 예제 안녕하세요. 키미추입니다. 오늘은 HTML에서 제목이나 본문의 포인트가 되는 단락 등 글자를 강조하는 다양한 방법들을 소개드립니다. 우리는 하루에도 몇 개 많으면 수 십개 이상의 블로그를 방 kimmychuc.. 더보기 [Html] 표,테이블(Table) 꾸미는 방법2 & 예제 안녕하세요. 키미추입니다. 표,테이블을 꾸밀 수 있는 다양한 소스들을 표,테이블 꾸미는 방법①을 참고해서 활용해보세요. 1.블로그 Html 편집 및 적용방법 표,테이블 꾸미는 방법①←참고 2.쉽고 빠른 소스적용 내용 앞을 아래 코드로 대체시켜주면 새로운 표 꾸미기가 적용된다. 즉 "예시" 앞에 쓰여진 더보기 [Html] 표,테이블(Table) 꾸미는 방법 안녕하세요. 키미추입니다. 오늘은 다양한 곳에서 많이 사용되는 표(Table,테이블)의 활용방법과 꾸미는 방법까지 알아보겠습니다. 1.에디터(편집기)라면 필수 기능 표는 한컴오피스,마이크로오피스 등 글쓰기를 지원하는 에디터 형식에서는 기본적으로 갖고 있는 기능입니다. 자주 사용하는 한글,엑셀,워드,블로그는 글을 쓰고 편집하는 일종의 에디터 형식 프로그램이며 이 프로그램들 안에 있는 표는 일상에서 내용을 정리하거나 목차 등을 만들때 매우 쉽고 간편하게 실용적으로 쓰이는 기능입니다. 한글,엑셀,워드에서는 표에 꾸미기가 가능하도록 자체 옵션이 포함되어 있어 쉽게 다양한 표 꾸미기가 가능한데 비해 대부분 블로그는 표 꾸미기에 대해 아주 간단한 옵션만 가지고 있는 경우가 대부분입니다. 하지만 직접적인 HTML편집.. 더보기 [Html] a태그 링크 정리(새창으로 열기,현재창으로 열기) 안녕하세요. 키미추입니다. HTML 링크 걸어주는 방법 총정리를 해보았습니다. 블로그를 하다보니..더군다나 티스토리 블로그라서 HTML을 조금씩 만지면서 사용하곤 하는데, 자주 사용되는 태그는 아마도 링크를 걸어주는 a태그가 아닐까싶다. 블로그 에디터 자체에서 링크 걸어주는 방법도 있지만.. 버릇처럼 자꾸만 HTML 에디터 모드에서 일일이 a href=""...를 쳐주고 있다. 전용 에디터 경우 자동완성으로 조금 더 빠르고 편하게 사용할 수 있지만 블로그에서는 일일이 수작업으로 하나하나 쳐줘야 한다. 자주 사용하는 링크와 기타링크에 대한 것까지 정리해놓으면 내 블로그 쓰는 시간도 단축되고 여러 방면에서 훨씬 효율적일 것으로 본다. 1.링크 의미,뜻 링크는 다른 페이지나 문서,파일 간의 연결을 의미하며 기.. 더보기 [Html] 제목을 강조하는 꾸미기 방법2 안녕하세요. 키미추입니다. 이번 HTML강좌에서는 저번 [제목을 강조하는 꾸미기①]편에 이어 더욱 다양한 디자인 소스들을 준비했습니다. 1-1.HTML 에디터 모드 변경 방법을 모른다면? [Html강좌] 제목을 강조하는 꾸미기① ←여기에 자세한 설명과 방법이 있습니다. 1-2.코드 삽입은 어떻게 하는가? 마찬가지로 [Html강좌] 제목을 강조하는 꾸미기①(링크O)에서 설명과 방법을 알 수 있습니다. 2.다양한 小제목 디자인 2-1.코드적용과 예시 색상 코드는 원하는 색깔로 변경 사용이 편하도록 보기 좋게 따로 표시해두었습니다. 구글에서 HTML Hex Color 내용 심플하고 간결하지만 단락 구분이 잘되는 내용 심플하고 간결하지만 단락 구분이 잘되는 Ⅱ 본문 꾸미기 내용 #3 그라데이션 배경색을 넣어 포.. 더보기 [Html] 제목을 강조하는 꾸미기 방법 & 예제 안녕하세요. 키미추입니다. 오늘은 HTML에서 제목이나 본문의 포인트가 되는 단락 등 글자를 강조하는 다양한 방법들을 소개드립니다. 우리는 하루에도 몇 개 많으면 수 십개 이상의 블로그를 방문하는 블로그와 아주 가깝고도 친밀한 삶을 살고 있습니다. 국내 대표적인 블로그 플랫폼은 네이버와 티스토리가 있습니다. 네이버 블로그와 티스토리 블로그는 각각 고유의 매력적인 특징이 있는데 가끔 블로그 방문하면 글자,텍스트가 꾸며진 형태를 꽤 많이 보게 됩니다. 이러한 형태는 블로그 운영자가 직접 HTML로 텍스트를 꾸며준 것인데요. HTML 편집기가 지원되는 블로그에서 가능한 것으로 사용자가 직접 내 블로그를 자유자재로 꾸밀 수 있는 HTML 편집이 가능한 것이 매력인 티스토리 블로그의 주요 특징입니다. 다른 블로그.. 더보기 [Html] 텍스트가 바뀌는 애니메이션 & 예제 안녕하세요. 키미추추입니다. 이번에는 글자,텍스트에 전환하기를 주면서 강조 효과가 있는 애니메이션을 배워보겠습니다. Make 누구나 생활코딩 쉽게 배우는 TRY! Q. 초보자가 보기에 난이도가 있어보이는데 어렵지 않을까요? A. 어려운 태그를 사용하지 않아요. HTML에서 아주 초보적인 개념,지식만 있더라도 바로 코드를 적용할 수 있어 전혀 어렵지 않아요. 물론, 코드가 길지않고 기초 태그만 사용하니 생초보자도 쉽게 따라할 수 있습니다. Q. CSS,Javascript를 전혀 사용하지 않고도 만들 수 있는건가요? A. 네. 해당 강좌는 HTML에서 애니메이션을 만드는 강좌입니다. 코드 적용하기 /* 빨강색 글씨에 보여지길 원하는 텍스트 입력. flip이 감싸고 있는 텍스트는 유동적이게 전환될 텍스트 영역.. 더보기 [Html] 클릭시 특정 위치로 이동하기 & 예제 안녕하세요. 키미추입니다. HTML 첫강좌를 오픈하게 되어 인사드립니다. 첫번째 Html 강좌에서는 현재 페이지에서 클릭시 특정 위치로 이동하기를 소개하는 강좌로 누구나 쉽게 따라할수 있도록 하였으니 쉽고 재밌게 배우시고, 앞으로도 많은 격려 바랍니다. 1.서론 기본적으로 다른 페이지로 이동이 가능한 링크 걸기는 아주 많이 쓰이는 태그이다. 대표적으로 태그이다. 하지만 a태그에 단순 url만 삽입은 페이지 간의 이동이 될 뿐이고, 같은 페이지 안에서 특정 위치로 이동 또는 다른 페이지의 특정 위치로의 이동은 조금 더 섬세하면서도 세밀한 작업이 필요하다. 2.id를 이용한 방법 첫번째로는 id이름으로 이동을 html에서 태그를 걸어주고, 이동할 위치에 이동할 위치입니다. 태그를 삽입하면 특정 위치로 이동이.. 더보기 이전 1 다음
