본문 바로가기

WEB

(88)

[CSS] border-collapse (collapse, separate) border-collapse 속성은 표 테두리가 분리 또는 상쇄될지를 결정한다. border-collapse: collapse; // 상쇄 border-collapse: separate; // 분리 예제를 보면서 확인해보자! Step08_table.html 표(table) 형식으로 정보를 출력하기 번호 이름 주소 1 김구라 노량진 2 해골 행신동 번호 이름 주소 1 김구라 노량진 2 해골 행신동 번호 이름 주소 1 김구라 노량진 2 해골 행신동 두번째 표는 border-collapse : collapse 한 것이다. 세번째 표는 border-collapse : separate 한 것이다.

[HTML] table의 모든 것 - <tr>,<th>,<td>,<thead> , <tbody>,<tfoot>,<caption>,<colgroup>,colspan, rowspan HTML에서 테이블은 로 만든다. - table로 가장 바깥쪽을 둘러싼다. 내부에 행을 나타내는 tr과 셀을 나타내는 th, td 태그 등이 사용된다. - table row이다. 표 내부에서 행을 나타내는 태그이다. - table header이다. 헤더칸을 나타낸다. 기본으로 중앙정렬, 두껍게가 설정되어있다. - table data이다. 일반적인 칸을 나타내는 태그이다. 기본으로 왼쪽 정렬이 된다. table의 각 영역을 구분지어서 사용하고 싶을때 thead, tbody, tfoot으로 구분지어서 사용한다. - 표의 머리글을 지정한다. - 표의 본문글을 지정한다. - 표의 바닥글을 지정한다. - 표의 제목을 나타낸다. 이 요소는 table 요소의 가장 첫 번째 자식으로 와야한다. - 테이블의 컬럼에 적용..

[HTML] 목록 만들기 / ul, ol, dl 목록을 만들려면 태그를 사용해야한다. 은 순서가 필요없는 목록을 만든다. (Unordered-List) 은 숫자나 알파벳 등 순서가 있는 목록을 만든다. (Order-List) 은 사전처럼 용어를 설명하는 목록을 만든다. (Definition-List or Description-List) 과 을 사용할 때는 를 사용하는데 list item의 약자이다. 은 와 를 사용하는데 는 Description-Term의 약자이고 는 Description-Description의 약자이다. 는 주로 용어를 표기하고 는 그 용어의 설명을 표기한다. Step05_ul.html 순서 없는 목록(unordered list) ul 요소 친구 목록입니다. 김구라 해골 원숭이 어떤 목록을 나타낼때 문자열을 단순히 나열하는게 아니고 ..

[HTML] span span은 인라인 요소이다. div와 span의 다른점은 div는 줄 바꿈이 되지만 span은 줄 바꿈이 되지 않는다. span은 span 요소 하나하나에 style을 지정할 수 있다. Step04_inlineElement.html 인라인(inline) 요소에 대해 알아보기 하나 두울 세엣 span 요소는 인라인 요소 입니다. 하나 두울 세엣 span 요소는 인라인 요소 입니다. Step04_inlineElement2.html 인라인(inline) 요소에 대해 알아보기 하나 두울 세엣 span 요소는 인라인 요소 입니다. 하나 두울 세엣 span 요소는 인라인 요소 입니다. 하나 두울 세엣 span 요소는 인라인 요소 입니다. 기본 스타일을 가지고 있는 인라인 요소 천리길도 한걸음 부터 천리길도 한걸음 ..

[HTML] div / p / h1~h6 HTML에서 blockElement를 사용해보자. div, p, h가 있다. div는 주로 문단, 영역을 나타낼 때 사용하고 다른 요소를 포함 시키는 용도로 사용한다. p는 하나의 단락을 나타낸다. h는 주로 제목을 나타낼 때 사용하고 h1~h6까지 크기가 다양하다. Step03_blockElement.html div 요소는 주로 문단을 나타낼 때 사용합니다. div 요소는 주로 다른 요소를 포함 시키는 용도로 사용합니다. 문단3 문단4문단5문단6 단락 1 입니다. 단락 2 입니다. 단락 3 입니다. Step03_blockElement2.html 안녕하세요! 오늘부터 본격적으로 시작이군요 열심히 재미있게 공부해 봅시다. 안녕하세요! 오늘부터 본격적으로 시작이군요 열심히 재미있게 공부해 봅시다. Step0..

[HTML] <img src="" alt=""> 사용하여 이미지 삽입하기 HTML에서 이미지 삽입하기 img를 사용하여 이미지를 삽입한다. alt에는 사진의 설명을 적어준다. alt는 해당 경로에 이미지가 없거나 엑박이 뜰 때 이미지 대신 보여지는 텍스트이다. Step02_image.html 이미지 출력해 보기

[HTML/CSS/JavaScript] 주석 주석 HTML CSS /*여기는 css 영역에서의 주석 입니다. */ JavaScript /*여기는 JavaScript 영역에서의 주석 입니다. */ //여기는 JavaScript 영역에서의 주석 입니다. 자바스크립트에서 //은 한줄만 주석 처리를 할 수 있다. Step01_Hello.html 대제목 입니다. 단락입니다.

[HTML/CSS/JavaScript] 기본 hello.html 나의 첫번째 웹페이지 !를 적고 tab을 누르면 기본으로 만들어진다. 이 양식으로 개발하면 된다. hello2.html 나의 두번째 웹페이지 html, css, javascript를 사용할 수 있다. HTML - 웹 브라우저에서 문서 및 웹페이지가 표시되는 방법을 규정하는 언어. 어떠한 웹사이트에서든 블록을 구성하는데 사용되는 언어이기도 하다. HTML을 이용하면 웹 사이트의 구조를 만들 수 있다. CSS - HTML로 만들어진 문서의 스타일을 지정하는 방식을 규정하는 스타일 시트 언어이다. JavaScript - 웹사이트가 로딩된 이후에 HTML과 CSS 구성요소들을 변경할 수 있게 해주며, 이를 통해서 웹 사이트를 interactive하게 만들고 사용자의 참여율도 높일 수 있다. ..

티스토리툴바