HTML 폼(form) 태그 사용하기 그리고 티스토리 웹 페이지는 대부분 폼(form) 태그를 사용합니다. 사용자에게 정보만 제공하는 게 아니라 대부분은 사용자로부터 입력 양식을 받습니다. 예로 로그인할 때 사용자 아이디와 패스워드 정보를 받거나 회원가입 시 가입정보를 받습니다. 이처럼 웹은 클라이언트와 서버 간 상호 정보를 주고받고 합니다. 그럼 폼(form) 태그를 사용하는 방법에 대해서 알아보죠. 폼(form) 태그 ▼ 작동 방식 […]
HTML 하이퍼링크 삽입하기 – a 태그 HTML(HyperText Markup Language) 약자에서 알 수 있듯이 웹 페이지 링크를 통해 인터넷에서 원하는 정보를 찾아갑니다. 앵커(a) 태그를 사용하면 다른 웹 페이지 또는 다른 웹 사이트로 이동할 수 있습니다. 그럼 앵커(a) 태그를 사용하여 하이퍼링크를 추가하는 방법에 대해서 알아보죠. 앵커(a) 태그 1. a 태그 기본 사용법 2. a 태그의 주요 속성
HTML 오디오, 비디오 삽입하기 – audio, video 태그 웹 페이지에서 글자, 이미지 이외에도 오디오(음성) 및 비디오(동영상)를 추가하는 경우가 많이 있습니다. 특히 요즘에는 인터넷 속도가 빠르기 때문에 글자 이외에도 동영상을 많이 추가합니다. HTML5에서는 <audio> 태그와 <video> 태그가 추가되어 쉽게 오디오와 비디오를 추가할 수 있습니다. 그럼 웹 페이지에 오디오 및 비디오를 삽입하는 방법에 대해서 알아보죠. 오디오(audio), 비디오(video)
HTML 이미지 삽입하기, img 태그 및 속성(src, alt) HTML 태그 중에서 글자(텍스트) 관련 태그 다음으로 많이 사용되는 태그는 아마도 이미지 태그입니다. 예로 블로그 포스트를 작성할 때 글만 작성하는 것보다 정보를 시각적으로 전달하기 위해서 사용 예제 및 화면 캡처 이미지를 추가합니다. 그럼 이미지를 삽입하는 img 태그 및 속성에 대해서 알아보죠. 이미지 태그 및 속성 1. 이미지
HTML 테이블(표) 태그 – table, tr, th, td 과거에는 페이지 레이아웃까지 <table>로 만들었지만, 지금은 레이아웃은 <div>+CSS로, 데이터가 표 형태일 때만 테이블을 사용합니다. 이 글은 <table>의 필수 태그와 속성, 접근성까지 고려한 올바른 마크업 예제를 정리했습니다. 1) 테이블(표) 관련 태그 태그 설명 <table> 행과 열로 구성된 표 컨테이너 <tr> 표의 행(row) <th> 열/행의 헤더 셀(기본 굵게·가운데 정렬,
HTML 목록(리스트) 태그 – ol, ul, li, dl, dd, dt 웹 페이지를 만들 때 빠지지 않는 태그 중 하나가 목록(리스트) 태그입니다. 단순히 목록을 만들 때에도 자주 사용하지만 CSS와 함께 사용하여 내비게이션을 만들거나 콘텐츠를 배치할 때에도 자주 사용하는 태그입니다. 그럼 목록 태그에 대해서 알아보죠. 목록 태그 ☞ 목록 태그는 순서 있는 목록, 순서 없는 목록, 설명
HTML 글자(텍스트) 관련 태그 정리 vs 티스토리 에디터 태그 중에서도 가장 많이 사용되는 태그는 글자(텍스트) 관련 태그입니다. 텍스트 관련 태그에는 제목, 단락, 줄 바꿈 등 여러 가지 태그가 있습니다. 그럼 텍스트 관련 태그들에 대해서 알아보고 티스토리 에디터에서 텍스트 관련 태그는 어떤 종류가 있는지에 대해서도 알아보죠. 글자(텍스트) 관련 태그 1. 제목(Headings) 관련 태그 태그 설명 <hn>
HTML 제목 태그 h1~h6 vs 티스토리 에디터 제목 1~3 비교 태그 중에서 가장 많이 사용하는 태그는 텍스트 관련 태그입니다. 예로 블로그를 작성할 때 거의 대부분은 텍스트이고 다음으로 이미지인 것 같습니다. 텍스트 관련 태그는 제목, 본문, 단락, 줄 바꿈 태그 등이 있습니다. 그중에서도 제목을 나타내는 h1~h6 태그에 대해서 알아보죠. 그리고 검색엔진 최적화(SEO)에서는 h1 태그는 반드시 존재해야
HTML 시맨틱 태그 종류, 웹 페이지 레이아웃 구성 예제 블로그를 운영하면서 웹 페이지 레이아웃 구조를 알고 있으면 운영하는데 많은 도움이 됩니다. 특히 구글 애드센스 광고 코드를 추가할 때 원하는 위치에 광고를 추가할 수도 있습니다. 웹 문서에는 전혀 영향이 없고 웹 문서 구조를 나타내는 태그가 있습니다. 그럼 웹 문서 구조를 위한 태그들에 대해서 알아보죠. 시맨틱 태그
티스토리 운영을 위한 HTML head 태그 정리 및 적용 사례 head 태그는 웹 페이지 본문에는 보이지 않지만 웹 브라우저가 알아야 하는 정보를 입력하는 부분입니다. 티스토리에서 스킨 편집한다는 말은 대부분 head 태그에 meta 태그와 스크립트를 추가한다는 말입니다. 예로 head 태그에 광고 스크립트 코드를 추가하거나 검색 사이트 소유권 확인을 위한 meta 태그를 추가합니다. 그럼 head 태그에 대해서
