양동민초보의 프로그래머 캡숑고수 머작전~!

예제는 '자유게시판'을 테이블로 만들어보는 것이다. 자유게시판 번호 제목 작성자 작성일 조회수 3 3등! 펭수 2020-12-01 10 2 2등! 펭수 2020-12-01 25 1 1등이다! 펭수 2020-11-30 20 우선 첫 번째, 제목 '자유 게시판'은 헤드라인크기로 태그를 사용하여 넣어준다. 그 후 table태그를 만들고 그안에 thead태그를 이용하여 tr로 줄을 만들고 th로 칸을 만들어 차례대로 입력을 해준다. th태그로 번호, 제목, 작성자, 작성일, 조회수를 만들고 thead태그를 닫고 tbody태그를 하여 tr태그로 줄을 만들고 역시나 차례대로 3등부터해서 th태그로 3, 3등!, 펭수, 2020-12-01, 10을 입력. 그 외 아래 두 줄도 같이 반복해서 넣어준다. 그리고 이렇게 ..

table 태그는 표를 만들기 위한 태그이다. 앞에서 봐왔던 게시글을 보면 태그는 보통 단독으로 쓰이는 경우도 있지만, 복잡한 것들은 다른 태그들을 동반하여 사용하여야 한다. table태그도 마찬가지다. 표는 구성요소들이 복잡하기 때문에 연계되는 태그가 많다. 만약, 이러한 표가 있다고 하자. 이름 점수 피카츄 70 라이츄 80 여기서 이름과 점수는 table header이다. 그외 나머지 피카츄,라이츄,70,80은 table body이다. table footer라는 것도 있지만, 이것들은 thead, tbody, tfoot과 같이 태그로 사용한다. thead는 table header로 제목영역을 나타낸다. tbody는 table body로 본문영역을 나타낸다. tfoot은 table footer로 하단..

리스트란 어떤 여러개의 항목이 있을때 차례차례 보여주기 위한 형태를 말한다. ul : unorder list -> 순서가 없는 리스트 ol : order list -> 순서가 있는 리스트 + li : list item -> 리스트 내의 항목 ul은 순서가 없으며, 그 태그 사이에 li태그를 넣음으로써 항목이 생긴다. 자바 파이썬 이라고 해본다면 미리보기창에 항목식으로 출력된 것을 볼 수 있다. 자바 파이썬 만약 ol로 하여 순서가 있는 태그를 한다면, 항목이 1.자바 2.파이썬 이런식으로 들어가 있는것을 볼 수 있다. 반드시 글자는 혼자 돌아다니면 안된다. 하나의 태그안에 들어가는 형태를 갖추어야한다. [예제] list로 학습순서를 구현한다. 학습순서 자바 -변수 -조건문 -반복문 데이터베이스 -계정 -..

div 태그는 영역을 설정하는 태그이다. 기초공사와 같이 말이다. Java GUI에서 JPanel과 동일한 역할이다. 디자인에서 매우 중요한 역할을 수행한다. 정렬을 사용할 수 있다. 한 줄에 하나씩 나온다. 와 같이 사용하면된다. 옵션으로 align을 먼저 보자면, div태그 샘플 div태그 샘플 div태그 샘플 라고하면 div태그 샘플 div태그 샘플 div태그 샘플 이런식으로 미리보기창에 출력이 되는 것을 볼 수 있다. 만약 어떤 하이퍼링크 이미지 5개를 나열할때, 하면 가운데로 정렬된다. 하나의 브라우저엔 여러 레이아웃으로 나뉜다. 하지만 대부분 사이트는 레이아웃이 비슷하다. 홈페이지 상단엔 로고가 있고, 검색창이 있으며, 가운데는 메뉴가 있다. 메일, 뉴스, 지도, 등등 그 후 아래에는 뉴스나 ..

A태그는 하이퍼링크(hyperlink)를 만드는 태그이다. 하이퍼링크는 어떤 버튼이나 무언가를 눌렀을때 링크를 따라 다른 페이지와 연결되어 들어가게 되는 것이다. 다른 페이지와 연결외어있고 누르면 이동이 가능하다. 와 같이 사용하며, 범위가 있는이유는 태그 사이에 글자가 한 개, 두 개, 몇 개가 들어갈지 모르기 때문이다. 자주 사용하는 옵션, 속성(attribute)으로는 href 이다. 누르면 이동할 주소를 작성하는 것이다. img태그 학습 페이지 와 같이 사용하면 출력창에는 "img태그 학습 페이지"글자가 있고, 그 글자를 누르면 원하는 주소로 이동하게 되어있다. 그 외에는 title이있다. title은 마우스를 올리면 표시될 글자이다. img태그 학습 페이지 하면 주소에 커서를 가져다가 대면 "안..

img태그는 이미지를 표현할 수 있는 태그이다. 범위는 없으며 매우 다양한 옵션이 있다. 그리고 꼭 부여해야할 옵션이 두 가지 있는데, alt와 src옵션이다. alt : 이미지가 없을 때 나올 설명 [리더기에 읽히는 글씨]인터넷사용이 불편하신분, 장애인분들이 도움받을 수 있음 src : 이미지의 경로 (내 컴퓨터에 있는건 불가능, C:/, D:/ 이런거 안됌 보안상이유로) width : 너비(px, %) height : 높이(px, %) 그래서 만약 사용한다면 사이에 하면 넓이 200 높이 250의 찾은 이미지를 넣을 수 있다. +)동적인 것은 dynamic, 정적인 것은 static인데 무언가 창을 열고 창의 크기를 넓히고 줄였을때 그대로이면 정적인것이고, 움직이면 동적인 것이다. 동적인 것은 %로 ..