20230626 _[17일차]_02. HTML_게시판 만들기

[ 프로그래밍 언어활용 ] _ 정처기

 

https://simuing.tistory.com/entry/2021-%EC%A0%95%EB%B3%B4%EC%B2%98%EB%A6%AC%EA%B8%B0%EC%82%AC-%ED%95%84%EA%B8%B0%EC%9A%94%EC%95%BD-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-%EC%96%B8%EC%96%B4-%ED%99%9C%EC%9A%A9

2021 #정보처리기사 필기요약 #4-2. 프로그래밍 언어 활용

 

[ 정처기문제 ] _ C++

 

(C언어 출력연습)

---

[ index.jsp ] 생성

 

(html로 브라우저에 출력)

*  <h1> – <h6> 태그 

 

(html에서 java코드입력)

* p태그

* br태그 _ 줄바꿈(엔터역할)

 

 

JSP ( Java Server Page ) : 자카르타 서버페이지 (자바 서버페이지)_서버에서 먼저 컴파일 후 결과를 사용자에게 보여줌.

웹 브라우저 = 클라이언트화면
원본페이지 = 서버_내가 만드는거

 

( java영역 vs HTML영역 확인 ) _

 

<%
// 여기는 자바
for(int i = 0; i < 10; i++){
System.out.println(i);           ->  요기가 java코드라 사용자는 안보임
}
%>

=> console창에는 10~0까지 출력.

* java 코드는 웹 브라우저에서는 안보임! 결과만 출력.

 

---

( 테이블 출력 )

 

* a태그

<a href = "http://www.naver.com">네이버</a>    => 네이버 링크 삽입가능
* <hr>  => 선긋기

( 구구단출력 )_ for문

( 구구단출력2 )_ for문

( 반복출력 ) _ for문

( 반복출력2 ) _ for문

 

[ index.jsp ] 생성
<a href = "./main.jsp">메인으로</a>

[ mian.jsp ] 생성
<a href = "./index.jsp">index로 가기</a>

 

=> 서로 왔다갔다 할 수 있는 기능 a태그로 만들어줌

 

 

( mian.jsp에 반복문으로 테이블출력 )

( 테이블에 border 걷어내고 style지정 ) _width, heigh, background-color

 

width(넒이)를  %(퍼센트)로 지정하면 화면 크기에 맞춰서 변경됨.
<table style = "width: 100%; height: 500px; background-color: gray;">
                       => 브라우저 화면에 꽉차게

<table style = "width: 50%; height: 500px; background-color: gray;">
                    => 브라우저 넓이의 절반만 차지, 창 크기가 변경되어도 절반만 차지하게 자동 변경됨

 

<style type = "text/css">
/* 스타일 영역입니다. */
선택자 {
속성 : 값;
}
</style>

 

 

( id로 스타일지정)

 

#title {
text-align : left;    => (id로 설정한 제목만)왼쪽정렬
}

 

* text-align: center (가운데정렬)

* text-align: left (왼쪽정렬)

 

border : 3px solid blue;     => table에 넣어주면 전체 선 생김.
border-bottom : 1px red solid;     => td에 넣어주면 아래선만 생김

( solid 실선하나, dotted 점선 )

 

 

( 표 사이에 공간이 생김 ) _ 이어지게 만들자 => td사이의 공백 없애기

 

border-collapse : collapse;

 

 

( 호버 )

 

tr:hover {
     background-color : silver;
     color : red;
}

=> 마우스 올리면 배경색은 silver, 글자색은 red로 변함

<td id= "title" title = "마우스 올리면 나올 글"> 열번째 글 </td>
=> 마우스 올리면 뜨는 팝업같은거

캡쳐가없..