코딩각

HTML5 기초 | 테이블 태그와 이미지 태그

테이블 태그 테이블 태그는 복잡해보이나 의외로 간단하다. 열과 행의 계층이다. 리스트의 확장 정도이다. 과거에 레이아웃 구성에 table 태그를 많이 사용했었다. 지금도 쓸만하다. 말 그대로 테이블을 만들기 위해서 최적인 태그다. tag description table table tag tr table row th table head hd table data 기본 테이블 제목 헤더 1 헤더 2 헤더 3 데이타 1 데이타 2 데이타 3 데이타 1 데이타 2 데이타 3 테이블 속성 (셀 합치기) 테이블의 colspan 과 rowspan 속성을 활용하면 셀을 요리조리 합치면서 레이아웃을 만들 수 있다. col은 column 열 row 는 행을 합치는 것이다. 은근히 블록 배치게임하고 비슷하다. 일반 GUI 프..
코딩(CODING)/HTML | CSS 2020. 8. 20. 11:47

HTML5 기초 | 기본 글자 태그, 목록태그(리스트)

기본 글자 태그 Tag description b 굵은 글자 i 기울어진 글자 small 작은글자 sub 아래에 붙는다 sup 위에 붙는다 ins 밑줄 그어짐 del 가운데 줄이 그어짐 글자에 태그를 넣는다 기본글자이다 글자에 태그를 넣는다 bold 글자에 태그를 넣는다 italic 글자에 태그를 넣는다 small 글자에 태그를 넣는다 sub 글자에 태그를 넣는다 sup 글자에 태그를 넣는다 ins 글자에 태그를 넣는다 del 루비문자 루비는 일본어에서 사용되는 글자형식이다. 한자어가 많은 일본어 특성상 후리가나를 달기 위해서 사용된다.(후리가나: 한자어 발음) 루비문자 가나다라 마바사아 한국어에서는 그다지 사용할 일이 없을 것 이다. 사실 일본에서도 후리가나는 어린이들 보는 책에나 다는 것으로 인식을 해..
코딩(CODING)/HTML | CSS 2020. 8. 20. 10:40

HTML5 기초 | 문서의 구조, 앵커 태그 a

HTML5 문서의 구조 HTML5의 문서의 구조를 살펴보자. 말 그대로 Head는 머리 Body는 몸통이라 생각하면 된다. Body는 사용자가 보는 컨텐츠의 구조를 만들고, Head는 Body라는 컨텐츠에 대한 메타 정보가 들어간다. * HTML5 문서의 구조 태그 내용 이 문서는 HTML5임을 웹브라우저에게 알린다. 구글같은 검색엔진이 이 웹페이지를 탐색할 때 언어를 인식한다. 'ko' 는 한국이고 'en'은 미국이다. 아무래도 국가 코드가 인식된 나라에서 검색될 활률이 높다. head 태그와 body 태그가 포함된다. viewport는 모바일 기기 설정에 관련된 태그인데 이 포스트에서는 다루지 않는다. 모바일 화면 디자인에 구글 검색을 활용한다. title 은 웹페이지의 내용에 따라 변경할 수 있다...
코딩(CODING)/HTML | CSS 2020. 8. 19. 14:47

HTML5 기초 | h1과 p 태그 (Heading과 Paragraph)

*HTML의 구조 HTML은 웹브라우저를 통해 사용자에게 보이는 부분과 가려진 부분으로 나눠진다. 크롬이나 엣지 브라우저를 사용하면 아무 웹사이트에 가서 마우스 오른쪽 버튼 => 검사를 클릭하면 오른쪽에(혹은 아래쪽에) 개발자 도구가 나온다. 요소에서 아래의 내용이 html 문서이다. 하나의 html 페이지가 만들어지기 위해 뒤에서 CSS, 자바스크립트, 서버사이드 소프트웨어들이 돌아간다. 지금 단계에서 다 알 수 없는 내용이다. 그렇지만 웹페이지를 구성하는데 있어서 내가 지금 작성하고 있는 HTML이 어디에 해당하는 것인가는 파악할 필요는 있다. * HTML 기본태그 (Heading) 이렇게 생각하면 쉽다. 웹페이지를 하나의 책이라고 생각한다. 책이니까 제목이 있어야 하고 또 주제별 제목도 있을 거이고..
코딩(CODING)/HTML | CSS 2020. 8. 19. 13:14

HTML5 기초 | 비주얼 스튜디오 코드 설치와 초기설정, 테마, 실행 테스트

*HTML5 준비사항 HTML을 학습하기 위해서는 몇 가지 준비가 필요하다. 사실 무작정 메모장을 열고 HTML5 파일을 편집하거나, 온라인 IDE를 사용하는 것도 가능은 하지만 나에게 맞는 개발환경을 갖추는게 더 효율적이다. 이 포스팅에서는 비주얼 스튜디오 코드와 크롬 웹브라우저를 사용해서 튜토리얼을 진행한다. 설치에 품은 들지만 익숙해지면 아주 쾌적한 개발환경이다. ※비주얼 스튜디오 코드와 비주얼 스튜디오는 같은 회사에서 만들었지만 전혀 다른 프로그램이다. 혼동에 주의한다. 1. 비주얼 스튜디오 코드(Visual Studio Code) 설치 웹사이트에 들어가서 프로그램을 다운로드 받는다. Mac OS, 윈도우, 리눅스 버전이 있다. 자신의 OS에 맞는 파일을 다운로드 한다. https://code.v..
코딩(CODING)/HTML | CSS 2020. 8. 19. 11:40
◀ 1 ··· 4 5 6 7 8 ▶

티스토리툴바