Processing math: 100%
728x90
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title>signupPro</title>
	</head>
<body>
<%
   request.setCharacterEncoding("UTF-8");
   
   String id = request.getParameter("id");
   String pw = request.getParameter("pw");
   String name = request.getParameter("name");
   String email = request.getParameter("email");
   String gender = request.getParameter("gender");
   
   String[] hobb = request.getParameterValues("hobbies");
   
   String job = request.getParameter("job");
   String bio = request.getParameter("bio");

   System.out.println(id);
   System.out.println(pw);
   System.out.println(name);
   System.out.println(email);
   System.out.println(gender);
   System.out.print(hobb);
   if(hobb != null){
      for(String s : hobb){
         System.out.println(s);
      }
   }
   System.out.println(job);
   System.out.println(bio);


%>


   <h3> sinupPro page</h3>

         <table>
         <tr>
            <td>ID *</td>
            <td><%= id %></td>
         </tr>
         <tr>
            <td>PW *</td>
            <td><%= pw %></td>
         </tr>
         <tr>
            <td>Name *</td>
            <td><%= name %></td>
         </tr>
         <tr>
            <td>Email</td>
            <td><%= email %></td>
         </tr>
         <tr>
            <td>Gender</td>
            <td><input type="radio" name="gender" value="male" checked/></td>
            <td><input type="radio" name="gender" value="female" /></td>
         </tr>
         <tr>
            <td>Hobbies</td>
            <td>
               <% if(hobb != null){
                     for(int i = 0; i < hobb.length; i++){ %>
                        <%= hobb[i] %>
               <%      }
               }
               %>
            </td>
            
         </tr>
         <tr>
            <td>Job</td>
            <td>
               <%= job %>
            </td>
         </tr>         
         <tr>
            <td>Bio</td>
            <td>
               <textarea row="5" cols="22" name="bio"> <%= bio %></textarea>
            </td>
         </tr>         
   
      </table>

</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>회원가입</title>
</head>
<body>
   
   <form action="signupPro.jsp" method="post">
      <table>
         <tr>
            <td>ID *</td>
            <td><input type="text" name="id" /></td>
         </tr>
         <tr>
            <td>Password *</td>
            <td><input type="password" name="pw" /></td>
         </tr>
         <tr>
            <td>Name *</td>
            <td><input type="text" name="name" /></td>
         </tr>
         <tr>
            <td>Email</td>
            <td><input type="text" name="email" /></td>
         </tr>
         <tr>
            <td>Gender</td>
            <td>
               <input type="radio" name="gender" value="male" checked /><input type="radio" name="gender" value="female" /></td>
         </tr>
         <tr>
            <td>Hobbies</td>
            <td>
               <input type="checkbox" name="hobbies"  value="music" /> Music
               <input type="checkbox" name="hobbies"  value="sports" /> Sports
               <input type="checkbox" name="hobbies"  value="travel" /> Travel
               <input type="checkbox" name="hobbies"  value="movies" /> Movies
            </td>
         </tr>
         <tr>
            <td>Job</td>
            <td>
               <select name="job">
                  <option value="employer">Employer</option>
                  <option value="employee">Employee</option>
                  <option value="teacher">Teacher</option>
                  <option value="student">Student</option>
                  <option value="freelancer">Freelancer</option>
                  <option value="etc">Etc</option>
               </select>
            </td>
         </tr>
         <tr>
            <td>Bio</td>
            <td>
               <textarea rows="5" cols="22" name="bio"></textarea>
            </td>
         </tr>
         <tr>
            <td colspan="2">
               <input type="submit" value="가입" /> 
               <input type="reset" value="재작성" /> 
            </td>
         </tr>
      </table>
   </form>

</body>
</html>

 

 

 

728x90
728x90

6. 에러 페이지 세팅
웹 어플리케이션 실행 도중에 발생할 수 있는 오류에 대비한
예외 처리 코드를 작성하여 비정상적인 종료를 막기 위한 세팅

1) 웹 에러
개발자의 실수로 일어날 수 있는 웹 에러 두 가지
404 : Not Found Error : 요청경로 오류, 잘못된 url로 요청/
500 : Internal Server Error : 요청 페이지의 로직 오류 (자바 문법 오류)

그 외 HTTP 상태코드
[2xx] Success 성공 관련 코드
200 : 성공 : 서바가 요청한 페이지를 잘 처리 제공했다.
201 : created : 서버에 요청한대로 데이터가 생성되어 제공되었다.

 

[3xx] Redirection 이동관련 코드

 

[4xx] Client Error 관련 코드
400 : Bad Request : 요청이 이상함. 
405 : Method Not Allowed : 요청해 실행되어야할 메서드가 안된다. 허용되지않는다.

 

[5xx] Server Error 관련 코드
503 : Service Unavailable : 서비스 지원불가(웹은 살아있는데 서버가 죽었을때)

2) 예외 처리 방법
- try/catch/finally 를 이용 : 자바 언어에서 예외처리 구문 이용
- page 디렉티브태그 이용한 예외처리 : errorPage="erorr.jsp" isErrorPage="true"
- web.xml에 예외처리 : <error-page>태그와 하위태그 이용

* 동시 적용시 예외처리 우선순위
1. try/catch/finally
2. page 디렉티브 태그
3. web.xml
4. 위 항목에 해당안되면 웹서버에서 제공하는 기본 오류페이지 출력

3) web.xml에 예외처리

<error-page>
<error-code>...</error-code> 또는 <exception-type>...</exception-type>
<location>...</location>
</error-page>

error-code : 오류 코드 설정
exception - type : 자바예외 유형의 클래스 이름 설정
location : 에러페이지에 URL 설정

 

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">

	
	<!-- 에러페이지 세팅 -->
	<!-- <error-page>
		<error-code>500</error-code>
		<location>/jsp02/errorXml.jsp</location>
	
	</error-page> -->
<!-- 	<error-page>
		<exception-type>java.lang.Exception</exception-type>
		<location>/jsp02/errorXml.jsp</location>
	
	</error-page> -->
</web-app>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>errorXml</title>
</head>
<body>
	<h1>공사중입니다</h1>
</body>
</html>
728x90
728x90

3. response 내장 객체
: request와 반대기능. 사용자의 요청을 처리한 결과를 웹브라우저로 전달하는 정보 저장.

1) 기능
리다이렉트 하기 (페이지 강제 이동)
헤더 정보 입력

2) 리다이렉트 
다른 페이지로 강제 이동하도록 reponse 객체의 리다이렉션 메서드 제공

**void sendRedirect(String url);

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>   <!-- 3번설명 -->
	<h1> B page</h1>
	
	
	<%
	System.out.println("bbbbbb");
	response.sendRedirect("c.jsp"); // 코드로 c.jsp로 이동
	%>
</body>
</html>




4. out 내장 객체
: 웹 브라우저에 데이터를 전송하는 출력 스트림 객체
<%=  > 스크립트 출력문으로 브라우저에 출력하는것과 같은 기능
void print(String str)
void println(String str)  브라우저라 줄내림안됨 print와 같게나옴
void newLine()  줄내림
쓸일없다... 태그로하는게 더 나으니깐

5. application 내장 객체
: 어플리케이션과 관련된 기본 객체
특정 웹 어플리케이션에 포함된 모든 JSP페이지는 
하나의 application 내부객체를 공유한다.
초기 설정 정보 읽기, 서버 정보 읽기, 웹 어플리케이션이 제공하는 자원 읽기...

1) 웹 어플리케이션 초기화 파라미터 읽기

웹 어플리케이션 전체에 사용할 수 있는 초기화 파라미터는 WEB-INF/web.xml 파일에
<context-param> 태그를 사용하여 추가한다.

* web.xml
웹 어플리케이션을 위한 설정 정보를 담고 있는 파일.
WEB-INF 폴더 안에 위치해야함.

web.xml에 초기화 파라미터를 추가하면,
JSP에서는 application 내부 객체의 메서드를 통해
초기화 파라미터를 꺼내서 사용할 수 있다.

* 초기화 파라미터 읽는 메서드
String getInitParameter(String name) 
: 이름이 name인 초기화 파라미터의 값을 문자열로 리턴
해당 값이 없으면 null 리턴
Enumeration<String> getInitParameterNames()
: 초기화 파라미터 이름 목록 리턴 


언제사용?
이름 그대로 웹어플리케이션 초기화에 필요한 설정정보를 저장하려고 사용

 

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">

 	 초기화 파라미터 설정 
	<context-param>
		<description>로딩 여부</description>
		<param-name>logEnabled</param-name>
		<param-value>true</param-value>
	</context-param>
	<context-param>
		<description>디버깅 레벨</description>
		<param-name>debugLevel</param-name>
		<param-value>5</param-value>
	</context-param>

</web-app>
728x90

'WEB Creator > [JSP]' 카테고리의 다른 글

[JSP] 4. 회원가입 폼  (0) 2022.06.13
[JSP] 3. 에러 페이지 세팅  (0) 2022.06.13
[JSP] 2 - 내장 객체(Implicit Object) (1) Request  (0) 2022.06.13
[JSP] 1 - JSP 페이지 구성 요소(Directive, Script)  (0) 2022.06.10
[JSP] 설정  (0) 2022.06.10
728x90


내장 객체 (Implicit Object)
: JSP페이지에서 사용할 수 있도록 JSP 컨테이너에 미리 정의된 객체.
import문 없이, 객체 생성없이 바로 사용가능하다.
내부객체는 _jspService()메서드 내부에 있다.


1) 종류
*request : HTTP 요청 정보 저장 : javax.sevlet.http.HttpServletRequest
*response : HTTP 응답 정보 저장 : javax.sevlet.http.HttpServletReponse
*session : 웹브라우저 정보 유지를 위한 세션 정보 저장
: javax.sevlet.http.HttpSession
out : 출력할 내용을 담고 있는 출력 스트림 : javax.sevlet.jsp.jsp.jspWriter
application : 웹 어플리케이션 컨텍스트 정보 저장
pageContext : JSP 페이지 정보 저장 : javax.sevlet.jsp.PageContext
page : JSP 페이지로 구현한 자바 클래스로 JSP페이지 자체를 나타냄
: java.lang.Object
config : JSP 페이지 설정 정보 저장 :  javax.sevlet.jsp.ServletConfig
conception : JSP 페이지 예외 발생 처리 : java.lang.Throwable


2. request 객체
: 웹브라우저에서 서버의 JSP페이지로 전달하는 정보를 저장. (요청관련)

1) 기본기능
       클라이언트(사용자브라우저)와 관련된 정보 읽기 기능
       서버와 관련된 정보 읽기 기능
       클라이언트가 전송한 요청 파라미터 읽기 기능
       클라이언트가 전송한 요청 헤더 읽기 기능
       클라이언트가 전송한 쿠키 읽기 기능
       속성 처리 기능

2) 요청 파라미터 처리
: 요청 파라미터의 형태는
파라미터명 = 값
*form 태그라면 name 속성값 = 입력데이터
위와 같은 형태로 전송되며,
전송된 값을 꺼낼때는 파라미터명을 키값으로 request 객체를 이용해 
데이터를 꺼낼 수 있다.

# 메서드

입력폼에 입력한 사용자의 답을 얻어내는 요청 메서드

***String getParameter(String name)***
파라미터명이 name인 값을 리턴해줌. 없으면 null 리턴
String[] getParmeterValues(String name)* 파라미터명이 name인 값들을 배열로 리턴해줌.
(파라미터 이름이 같은 여러개의 데이터가 넘어왔을경우 : 
해당 파라미터 이름을 주고, 값을 배열로 한번에 가져오기)
ava.util.Enumeration getParameterNames() 파라미터명들 목록을 java.util.Enumeration 타입으로 리턴

 

웹 서버 브라우저 정보를 가저오는 메서드
request.getRemoteAddr() 클라이언트 IP
request.getContextPath() 컨텍스트 경로
request.getRequestURI() 요청 URI
request.getContentType() 요청정보 컨텐츠 타입
request.getCharacterEncoding() 요청정보 인코딩
request.getProtocol() 요청정보 프로토콜
request.getMethod() 요청정보 전송방식 (get, post)
request.getContentLength()  요청정보 길이
request.getServerName()  서버이름
request.getServerPort() 서버포트


*

3) 전송방식 : GET/POST
웹 브라우저에서 많이 사용하는 파라미터 전송방식 두가지
GET : URL 경로뒤에 물음표와 함께 파라미터를 붙혀 전송한다.
이를 쿼리스트링이라고한다.
각 파라미터는 파라미터명 = 값의 형태로 전송되고
파라미터가 여러개일 경우는 &(엠퍼샌드)를 구분자로 연결하여 전송한다.
브라우저에 따라 한글 get방식으로 전송시
주소창에 %...% 이런 형태의 문자로 표현될 경우가 있다.
*URL 퀘리 스트링으로 파라미터를 전송하기 때문에
폼을 사용하지 않아도 파라미터 전송
브라우저나 웹서버 또는 웹 컨테이너에 따라 
전송할 수 있는 파라미터의 길이 제한이 있을 수 있다.


POST : URL 경로뒤에 파라미터가 보이지 않는다.
데이터 영역을 이용하여 파라미터를 전송하여,
전송할 파라미터의 길이 제한이 없다.
(파일데이터는 post)

4) 요청 파라미터 인코딩

웹 브라우저는 웹서버에 파라미터를 전송할때
알맞은 캐리터 셋을 이용해서 파라미터값을 인코딩한다.
웹 서버는 알맞은 캐릭터 셋을 이용하여 그것을 디코딩한다.
-> 인코딩 / 디코딩 캐릭터셋이 일치하지 않으면 웹서버는 잘못된 파라미터값을 사용함.

[캐릭터 셋 세팅]

# Client <------ server : <%@ page 인코딩 UTF-8 (브라우저에 utf-8로 뿌린다...)
# Client ------> server : 다른곳에서 처리



 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>  
<body>  <!-- 메모장 2번설명 pro.jsp로 받은 id/pw값 전달 -->
	<form action="pro.jsp"method="post">  <!-- post 방식으로 해야 주소창에 안뜸 get방식은 뜸 -->
		id : <input type="text" name = "id"/><br/>
		pw : <input type="password" name = "pw"/><br/>
 		좋아하는 동물 :
 			<input type="checkbox" name="pet" value="dog" /> 강아지
 			<input type="checkbox" name="pet" value="cat" /> 고양이
 			<input type="checkbox" name="pet" value="tiger" /> 호랑이
 		
 		<input type="submit" value="로그인" />	
	</form>

</body>
</html>


 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
	<!-- 	request 객체에서 넘어온 데이터 꺼내기 -->
	
<%
//post 방식 인코딩 처리 : post 방식으로 요청되어 넘어오는 파라미터값이 한글일경우
//						인코딩 처리가 필요함. 파라미터를 꺼내기전에 
request.setCharacterEncoding("UTF-8");
//localhost:8080/web/jsp02/pro.jsp?id=sdd&pw=1234 -->
	//request.getPramater(name)

	String id = request.getParameter("id");
	String pw = request.getParameter("pw");
	
	// 같은 이름의 파라미터명인 값 여러게 넘어왔을경우
	String[] pets = request.getParameterValues("pet");
	
	//화면에 출력
	//out.println("id : " +id + "<br />");
	//out.println("pw : " +pw + "<br />");  
	for(int i = 0; i <pets.length; i++){
		out.println("pet : " + pets[i] + "\n");
	}

%>
<body>
		<h1> pro page</h1>
		<h2> id : <%= id %></h2>
		<h3> pw : <%= pw %></h3>
		 
		 	<% for(int i = 0; i <pets.length; i++){%>
			<h3> pet : <%= pets[i] %> </h3>
			<%}%>
		
		
</body>
</html>
728x90
728x90

[jsp01 day25]

 

1. 세팅

1) 준비물 : JDK11, 톰캣 9, 이클립스, DBMS, 구글 크롬

-jdk 환경변수 꼭 설정

 

2) 톰캣 다운 / 설치

https://tomcat.apache.org/download-90.cgi

tomcat 9 > core > zip 다운받기

작업폴더로 옮기고 그곳에서 압출해제

 

3) 이클립스 ( 자바수업내용과 겹치지 않게 새로 압축해제해서 사용)

jsp 작업 폴더 안에 새로 압축해제

#1. 실행 : workspace 폴더 경로 잡아서 런치

#2. 모드 Java EE (실행하면 default 세팅이라 건들필요 x

#3 인코딩 세팅 : UTF- 8

window > preference > 검색 : encoding 

> 검색된 모든메뉴 UTF-8로 변경

 

* 인코딩 : encoding,charset 문자 체계

UTF-8 : 유니코드

IOS-8859-1

KSC5607

MS949(default) / CP949 : MS사

EUC-KR : ANSI를 한국에서 확장한 버전

ANSI : ASCII. 아스키코드 (1바이트)

 

4) 이크립스에 톰캣 세팅

하단에 Servers 탭 > 파란색 링크 혹은 비곤에 마우스 우클릭 > new> server >

>Apache 폴더 > 톱캣 9.0 선택 > browse눌러서 톱캣 압축해제한곳 경로선택 >

> bin 폴더 보일때까지만 들어가기 

 

* servers 탭안에 Tomcat... 생기고, 왼쪽 Project Explorer에 Servers 폴더 생기면 됨.

 

5) 이클립스에 웹 프로젝트 생성

File > New > Dynamic Web Project

>Project Name : 프로젝트명 작성 Next! > Next!

> 체크박스 체크하고 Finish!

 

6) 웹프로젝트의 구조

웹 서버가 준비된 상태에서 아래와 같은 폴더 구조를 갖춰야한다.

 

[폴더명] : 프로젝트명(Context path, 루트 컨텍스트)

-[ WEB - INF ]

- [ lib] : 외부 라이브러리 배치

- [ classes] : 자바 컴파일된 클래스 파일 (이클립스에선 안보임)

- web.xml : 웹 전반적인 설정 파일

-[ META - INF] : 자바 패키징 기술인 jar의 일부, 설정관련

- jsp/html/css/이미지...

 

2. 웹과 jsp

1) 인터넷과 웹

인터넷 : 컴퓨터가 서로 연결되어 TCP/IP라는 통신 프로토콜을 이용하여

정보를 주고받는 전세계의 컴퓨터 네트워크

 

웹 : 인터넷의 서비스 중 하나로, 인터넷에 연결된 컴퓨터들을 통해 정보 공유하는 공간.

world wide web 줄인말

 

2) 웹 동작원리

클라이언트/ 서버 방식으로 동작

클라이언트 : 사용자 (요청자), 웹 브라우저

웹 서버 : 서비스 제공자 

 

동작 방식 : 

클라이언트 ---- 웹 페이지 요청(request)----> 웹 서버

(브라우저)<------결과물로 응답(reponse)-----(ex. tomcat)

 

3) 정적웹페이지 / 동적 웹페이지

정적 웹페이지 : static : 저장된 텍스트 파일 그대로 보는것

html 같은 웹 언어로 작성

사용자가 web 브라우저에 url 입력요청

-> 이미 준비된 문서 그대로 보내줌

초기 웹페이지, 변화 적응 x, 추가/수정/삭제 수동으로

 

 

동적 웹페이지 : dynamic : 저장된 내용을 가공처리해서 보는것

PHP, ASP, JSP 같은 웹 언어로 작성

사용자가 web브라우저에 URL입력 요청

-> 분석,처리 -> 가공된 HTML 파일 생성 보내줌

현재 우리가 보는 페이지 대부분, 데이터 저장 DB

 

 

4) 웹 주소

URL : http://서버ip:port/File경로~~(uri)

 

내가 제공하는 웹사이트를 내가 요청하겠다.

http://  192.168.1.85:8080/ 파일경로

http:// 127.0.0.1:8080/ 파일경로  

http://localhost:8080 ( 우리가 사용할 버전)

 

IP : IP Address 네트워크상 PC 고유 주소

 

port : IP 주소로는 컴퓨터 구분을 할 수 있지만, 어떤 서비스 프로그램을 실행할지 알 수 없어서,

클라이언트가 연결할때 다른 서버 프로그램과 구분할 수 있도록 port 번호를 사용함.

내 pc에서 현재 사용중인 port 번호 확인

: cmd > netstat -a

톰캣 기본세팅 포트 번호 : 8080

 

도메인 cmd > nslookup naver.com

https://naver.com/main/read.nhn?a=10

DNS : Domain Name Service

-> DNS에 IP주소 요청 -> 응답받은 ip주소로 웹서버에 서비스 요청

-> 서버가 요청 주소 분석/처리해 요청한 내용을 응답 -> 브라우저

 

5) 웹 프로그래밍과 JSP

웹 프로그래밍 : 웹 서버가 웹 브라우저에 응답으로 전송할 데이터를 

생성해주는 프로그램을 작성하는 것

웹 프로그래밍 언어 : 클라이언트 측 실행 언어와 서버측 실행언어로 구분 

JSP(JavaServer Pages) : 자바를 기반으로 하는 서버측 웹 프로그래밍 언어.

HTML코드에 자바를 삽입 할 수 있도록 개발된 기술

(이전에는 Servlet이라는 기술로 사용하였으나 어렵고 불편)

실제로 웹 어플리케이션 서버에서 서비스 될때는 서블릿으로 변환됨

 

-JSP는 서블릿 기술의 확장

-JSP는 유지 관리 용이

-빠른 개발 가능

 

6) 웹 서버, 웹 컨테이너, 웹 어플리케이션 서버

#1. 웹 서버

HTTP 프로토콜을 이용하여 클라이언트 요청을 받아

HTML이나 오브젝트를 전송.

웹 서버만 구축된 서버는 웹페이지, 이미지등 "정적페이지"생성

아파치, IIS등 서버

 

#2. 웹 컨테이너 

JSP와 서블릿을 실행할 수 있는 프로그램으로

서블릿 컨테이너라고도 함.

웹 서버에서 JSP를 요청하면 컨테이너가 JSP파일을

서블릿으로 변환하여 컴파일을 수행, 서블릿 수행 결과를 웹 서버에 다시 전달.

 

 

#3. 웹 어플리케이션 서버 (Web Application Server : WAS)

웹 서버와 웹 컨테이너를 결합한 서버

JSP 컨테이너가 탑재된 WAS는 JSP페이지를 컴파일하여 "동적페이지" 생성함.

톰캣, BEA의 웹 로직 등..

 

3. JSP 페이지 구성 요소

디렉티브 (Directive)

스크립트 

표현언어 (EL Expression Language

내장객체 (Implicit Object)

정적인 데이터 (일반 텍스트)

표준 액션 태그 (Action tag)

커스텀 태그 (Custom tag)와 표준 태그 라이브러리(JSTL)

 

 

4.  디렉티브 태그

page : JSP 페이지에 대한 정보 설정

include : JSP 페이지의 특정 영역에 다른 문서를 포함

taglib : JSP 페이지에서 사용할 태그 라이브러리 설정

 

<%@ 디렉티브태그명 속성명 = "값" 속성명 = "값" ...%>

 

1) page

JSP 페이지 설정 정보 지정

문서 타입, 출력버퍼 크기, 에러페이지등 지정

페이지 최 상단에 선언 권장

 

[ 속성들 ]

language

contentType

pageEncoding : UTF-8 

import : 자바 임포트랑 같은 %>안에 넣어주면됨

session : true (default이므로 생략가능)/fault 로그인처리할때 

buffer : 버퍼사이즈 (8kb가 default)

autoFlush : true 디폴트  / 버퍼가 꽉차면 화면으로 알아서 뿌려줌, 

false로 하면 화면꽉찰때 에러남

isThreadSafe : true 여러사람이 와도 되는가?

info : 페이지 설명글 메모할것 (쓸일 거의없음)

errorPage : 에러페이지 errorpage = "error.jsp" (error라는 페이지를 띄움)

isErrorPage : false 디폴트 / 이 페이지가 에러전용 페이지냐 ?

isELignored : false 디폴트 / 

defrerredSyntaxAllowedAsLiteral  : false 디폴트 

 

2) include 태그

외부 파일의 내용을 포함 : 복붙 개념. 붙혀와서 서블릿으로 한번에 번역. 

헤더,푸터등 공통된 부분을 별도의 jsp파일로 만들어 모듈화 할때 유용한 태그

-> 코드 유지보스, 재사용 가능성 향상

<%@ include 속성 = "값"...%>

file="파일경로"

같은 폴더안에 있으면 파일명만, 그렇지 않으면 전체 URL 설정

주의!!! 현재파일과 include 하는 파일의 인코딩 설정이 동일해야함!!

 

3) taglib 태그

표현언어, JSTL, 사용자정의 태그등 외부 태그 라이브러리를 설정하는 태그

 

<%@ taglib prefix="태그식별자" uri="태그라이브러리경로" %>

 

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head> 
	<meta charset="UTF-8">
	<title>Insert title here</title>
</head>
<body> <!-- 4. 디렉티브 설명 -->
	<h1> test01</h1>
	서버 : <%= application.getServerInfo() %> <br />
	서벌릿 : <%= application.getMajorVersion() %>.<%= application.getMinorVersion()	%> <br/>
	JSP : <%=JspFactory.getDefaultFactory() .getEngineInfo(). getSpecificationVersion() %>	

</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
    <%@ include file="test03.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test02</title>
</head>
<body> <!-- 4. 디렉티브 설명 -->

		<h2>==================================================	</h2>
		<h1>	Test02 page</h1>
		<h2>==================================================	</h2>
		 <%@ include file="test03.jsp" %>
		 <%@ include file="test03.jsp" %>
</body>

</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test03</title>
</head>
<body> <!-- 4. 디렉티브 설명 -->
<h2>**********************************	</h2>
<h1>Test03 page</h1>
<h2>**********************************	</h2>
</body>
</html>

 

 

5. 스크립트

: HTML 코드에 자바코드를 넣어 프로그램이 수행하는 기능 구현

서블릿 클래스로 변환할때, JSP 컨테이너가 자바 코드가 삽입되어 있는

스크립트 태그로 처리하고 나머지는 HTML코드나 일반 텍스트로 간주함.

 

선언부 : <%!   %> : 클래스 영역 : 사용 거의 안함

스크립트릿 : <% %> : 메서드 영역 : 가장 많이 사용. 변수선언 -> 지역변수 자바 실행 코드

출력문 : <%= %> : 값을 출력   : HTML코드와 섞어서 사용가능

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

 <!-- 6 스크립스설명 -->
<h1> test04 page </h1>
<%-- #1. 선언부 --%>
<%! 
	//선언부 : 클래스영역
	//클래스변수, 인스턴스 변수, 메서드
	static int num = 10;
	int num2 = 200;
	public int mul(int a, int b){
		return a * b;
	}
	
%>
<%-- #2. 출력문 : 세미콜론 안적음. 변수명, 리턴있는 메서드 호출하면 값화면에 출력 --%>
<%= num %> <br/>
<%= num2 %><br/>
10*20 = <%= mul(10,20) %>

<!-- 스크립트릿 -->
<% // 스크립트릿 : 메서드 영역
	for(int i = 0; i < num ; i++){
		out.print("java server pages" + i + "<br/>");
	}
	String col = "yellow";
	

%>
<body bgcolor="<%=col%>">
</body>

<ul>
<% for(int i = 0 ; i < 10; i++){ %>  


<li>hello jsp</li>
<%} %>
</ul>

 

 

 

728x90
728x90

======= 셋팅 순서 ========

1) 이클립스 UTF-8로 셋팅
window -> preferences -> encoding 검색 -> 좌측 UTF-8로 변경

-----------------------------------------

2) 톰캣 셋팅
 이클립스 하단 Servers 탭 빈곳 마우스 우클릭 > new -> server > Apache 폴더 
> Tomcat 9.0선택 후 Next!  
> Browsw 눌러서 톰캣 압축해제한 경로 선택 후 Next!
(※ 이때 눈으로 bin 폴더등이 보일때까지만 들어가기)
 ★ Servers탭 안에 Tomcat....생기고, 
왼쪽 Project Explorer에 Servers 폴더 생기면 됨.

-----------------------------------------

3) 웹프로젝트 세팅
 좌측 상단탭 File > New 
> Dynamic Web Project
> Project Name : 프로젝트명작성 후 Next!
> Next! > 체크박스 체크하고 Finish

-----------------------------------------

4) 웹 프로젝트 JDK 세팅
web폴더 만든 후 폴더 위 우클릭
> properties 
> 좌측탭 Project Facets
> Java 오른쪽 Version 11로 변경
> 좌측탭 Java Build Path
> JRE System Library 더블클릭
> JavaSE-11(jre)로 변경

 

 

필자는 NAS로 연동

2022.06.14 - [NAS] - [NAS] synology NAS로 Tomcat 구동 하는 방법 (docker, jsp)

728x90
728x90
/* CSS 파일 */
* {
    box-sizing: border-box;   /* width = 컨텐츠 + padding + border두께 */
}
body {
    /* 상하 여백 0, 좌우 auto는 중앙배치 (width지정해야 적용됨) */
    margin: 0 auto;   
    color: #3d3d3c;   /* 전체 글씨 색 */
    font-family: 'Spoqa Han Sans Neo', 'sans-serif';
}
/* 중앙배치를 위한 css */
.inner {
    width: 100%; 
    height: 100%; 
    margin: 0 auto; 
    padding: 0 2rem;
}

header {
/*    background-color: orange;*/
    width: 100%; 
    height: 60px;
    top: 0; 
    left: 0; 
    position: fixed; /* 위치 고정 */
    z-index: 1000;
}
.header-container {
    width: 100%; 
    height: 100%; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-logo {
    font-weight: bold; 
    font-size: 1.2rem
}
.header-text {
    font-weight: bold; 
    font-size: 0.9rem;
}

/*section 태그 모두에게 달기 */
section {
/*    background-color: aqua; */
    width: 100%; 
    position: relative;
}
/* section에 클래스 속성 main이라고 달아둔것 */
.main {
    height: 360px; 
    background-image: url(images.jpg); 
    
}
.title-container {
    padding-top: 100px;
    padding-bottom: 100px;
}
.title {
    font-size: 2rem; 
    font-weight: bold;
    margin-bottom: 1rem;
}
.message {
    font-size: 1.4rem;
    font-weight: normal; 
}

footer {
    background-color: magenta;
}


@media screen and (min-width: 1200px) {
    .inner {
        max-width: 1200px; 
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 폰트 라이브러리 경로 -->
    <link href='//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css' rel='stylesheet' type='text/css'>
    <!-- 외부 스타일 시트에 작성하고 여기 적용시키기  --> 
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <header>
        <div class="inner">
            <div class="header-container">
                <div class="header-logo">Test </div>
                <div class="header-text">실습용 사이트 예시 </div>
            </div>
        </div>
    </header>
    <section class="main">
        <div class="inner">
            <div class="title-container">
                <div class="title">테스트</div>
                <div class="message">
                    안녕하세요 <br />
                    테스트용 사이트 입니다. <br />
                    css는 어려워요 
                </div>
                
            </div>
        </div>
    </section>
    <footer>
        © Chance
        -----@gmail.com
    </footer>
    
    
</body>
</html>
728x90

'WEB Creator > [CSS]' 카테고리의 다른 글

[CSS] 9 - Flexbox  (0) 2022.06.07
[CSS] 8 - media query 미디어쿼리  (0) 2022.06.07
[CSS] 7 - 포지셔닝  (0) 2022.06.07
[CSS] 3 - 적용 스타일과 박스 모델  (0) 2022.05.31
[CSS] 2 - 선택자  (0) 2022.05.31
728x90

9. CSS Flexbox
https://flexboxfroggy.com/
https://codepen.io/enxaneta/full/adLPwv

flexbox는 상위요소인 flex container와 하위 자식요소인 flex item들로 구성됨
즉, item이 수평정렬할 요소들이면, 
해당 요소를 감싸고 있는 부모요소로 flex container가 필수적임.

1) flexbox container 속성
display : flex container 정의
flex-direction : item들의 주축 (방향)을 설정
flex-wrap : item들을 1행 또는 복수행으로 배치하는 설정
flex-flow : flex-direction과 flex-wrap을 한번에 설정하는 단축속성
flex-flow : direction과 wrap값

justify-content : 가로기준 배치 방법
align-content : 수직정렬 방법 (각 행 마다 적용)
align-items : 수직정렬 방법 (복수행이면 하나의 그룹처럼 적용)

2) flexbox item 속성
order : 배치순서 설정 
flow-grow : item 너비 증가 비율 설정
flex-shrink : item 너비 축소 비율
flex-basis : item 기본 너비 설정
flex : 위의 3개를 한번에 설정
align-self : 요소하나하나 정렬

 

<!DOCTYPE html> flexxx박스
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            border: 1px solid red;
            /* display: flex;  가로로 펴침 */ 
            /* flex-direction: column; */
        }
        .item{
            border: 1px solid blue;
            width: 100px;
            height: 100px;
        }
          /*  .item1{
            order: 3 순서바꾸기 */
        }
    
    </style>
</head>
<body>    
   <div class="container">
            <div class="item1 item"> </div> 
            <div class="item2 item"> </div>
            <div class="item3 item"> </div>   
   
   </div>
    
</body>
</html>
728x90

'WEB Creator > [CSS]' 카테고리의 다른 글

[CSS + HTML] 간단 사이트  (0) 2022.06.07
[CSS] 8 - media query 미디어쿼리  (0) 2022.06.07
[CSS] 7 - 포지셔닝  (0) 2022.06.07
[CSS] 3 - 적용 스타일과 박스 모델  (0) 2022.05.31
[CSS] 2 - 선택자  (0) 2022.05.31
728x90

8. media query 미디어 쿼리 : 반응형 레이아웃
(모바일, pc등에 따라 사이즈를 다르게 보여줌)

반응형 웹 : 동일한 페이지를 보여주되, 화면 사이즈에 따라 다르게 보여줌.
화면 사이즈에 따라 배치 달라짐 (주소는 동일)

적응형 웹 : 모바일인지 pc인지에 따라 다른 페이지를 보여줌.
m.naver.com  / www.naver.com (주소가 다름)

pixel/ viewport
pixel : 화소
viewport : 화면상 표시 영역.
meta viewport : 원하는 너비를 넣으면 해당 너비에 맞게 브라우저가 표시함.
<meta name="viewport" content="width=320">

-> 다양한 디스플레이에 맞는 웹페이지 구현
1) html <meta name="viewport" content="width=device-width">
2) css : 미디어쿼리 : 반응형 레이아웃 구현하기 위한 기술
* 기본 문법
@media media-type and (media-feature-rule){
//CSS코드
}

* media-type (미디어 유형)
all
print 프린트화면
screen 브라우저화면
speeach 음성

* media-feature-rule (미디어 조건)
width viewport의 너비, *min-width, *max width 많이 사용
height viewport의 높이
device-width 디바이스의 물리적 너비
device-height 디바이스의 물리적 높이
*orientation 디바이스의 방향 (가로 = landscape, 세로 = portrait)
apspect-ratio viewport의 가로세로 비율

@media (max-width : 1024px){ccs코드}  
->화면 너비가 1024px 이하인 경우까지 해당css적용

@media screen and (max-width:1200px{css코드}
-> 화면너비가 1200px 이하이고, 브라우저 화면이면 해당 css적용

@media screen and (min-width:1200px) and (orientation: landscape){css코드}
-> 화면너비가 1200px 이상이고, 브라우저 화면이면서 가로방향일때만 css적용

 

<!DOCTYPE html> 미디어쿼리설명
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- media query적용하기 위해 --> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <style>
        header {
            background-color: aqua; 
        }
        nav {
            background-color: orange; 
        }
        section {
            background-color: red;
        }
        article {
            background-color: blue; 
        }
        aside {
            float: right;
            background-color: brown; 
        }
        footer {
            background-color: gray; 
        }
        @media screen and (max-width:750px){  <!-- 폭이 750 이상이어야 aside가 생김 -->
            aside{
                display: none;   
            }
        }
    </style>
    
</head>
<body>
   <header>header</header>
   <nav>nav</nav>
   <aside> aside  <br /><br /> </aside>
   <section>
       section
       <article> artice </article>
   </section>
   <footer> footer </footer>
   
</body>
</html>

728x90

'WEB Creator > [CSS]' 카테고리의 다른 글

[CSS + HTML] 간단 사이트  (0) 2022.06.07
[CSS] 9 - Flexbox  (0) 2022.06.07
[CSS] 7 - 포지셔닝  (0) 2022.06.07
[CSS] 3 - 적용 스타일과 박스 모델  (0) 2022.05.31
[CSS] 2 - 선택자  (0) 2022.05.31
728x90

7. 포지셔닝
1) box-sizing :박스 너비 정하기
width, height, margin, padding, border 지정

박스모델의 너비 = 컨텐츠 크기 + 좌우 padding 
+ 좌우 border 두께 + 좌우 margin => 전체요소 너비

box-sizing 속성값
content-box : width로 지정하는 범위가 컨텐츠 영역의 너비로 사용(dafault)
border-box : width로 지정하는 너비가 테두리까지 포함한 너비로 사용

 

<!DOCTYPE html>
// 박스 포지션 설명
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>selector</title>
    <style>
        .box1{
            box-sizing: content-box;
            background-color: yellow;
            width: 300px;
            height: 150px;
            margin: 10px;
            padding: 30px;
            border: 2px solid red;
        }
        .box2{
            box-sizing: border-box;
            background-color: lightblue;
            width: 300px;
            height: 150px;
            margin: 10px;
            padding: 30px;
            border: 2px solid red; 
        }        
    </style>
</head>
<body>
    <div class="box1"> content-box </div>
    <div class="box2"> border-box </div>
</body>
</html>




2) float 속성
:요소를 문서위에 떠있게 만들어 왼쪽/ 오른쪽으로 배치

left : 왼쪽배치
right : 오른쪽배치
non: 좌우 어느쪽도 배치 x

float 속성해제 : clear 속성
:float 속성을 요소에 사용하면 다음에 오는 다른 요소들도 
속성이 전달되어, 배치가 원하는 방식으로 이루어지지 않을 수 있다.
float 속성이 더이상 유용하지 않다고 알려주는 속성이 필요한데 
그것이 clear이다.

left : float: left적용한것 해제
right : float:rigt 적용한것 해제
both :  좌우상관없이 기본상태로 되돌릴때 사용 

<!DOCTYPE html>
//float 설명
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            background-color: yellow;
            width: 200px;
            height: 150px;
            margin: 10px;
            padding: 30px;
            float: left;
        }
        
        .box2{
            background-color: lightblue;
            width: 200px;
            height: 150px;
            margin: 10px;
            padding: 30px;
            float: left;
        }
         .box3{
            background-color: orange;
            width: 200px;
            height: 150px;
            margin: 10px;
            padding: 30px;
             clear: both        
        }
         .box4{
            background-color: turquoise;
            width: 200px;
            height: 150px;
            margin: 10px;
            padding: 30px;
            clear: both
        }
    
    </style>
</head>
<body>
   <div class="box1"> box1 </div>
   <div class="box2"> box2 </div>
   <div class="box3"> box3 </div>
   <div class="box4"> box4 </div>
</body>
</html>

 


3) position 속성
-static (default)
다른 태그와의 관계에 의해 자동으로 배치
- relative 
원래 배치되어야하는 위치를 기준으로, 좌표로 지정
- absolute
가장 가까운 위치에 있는 position 속성이 relative인 부모 요소를 기준으로,
left, right, top, bottom 값으로 요소 위치 지정
position 속성이 relative인 부모가 없으면 body를 기준으로 위치
- fixed (고정 위치)
화면에 보여지는 영역을 기준으로 특정 위치에 배치 
(스크롤 해도 고정- 따라다님)


728x90

'WEB Creator > [CSS]' 카테고리의 다른 글

[CSS] 9 - Flexbox  (0) 2022.06.07
[CSS] 8 - media query 미디어쿼리  (0) 2022.06.07
[CSS] 3 - 적용 스타일과 박스 모델  (0) 2022.05.31
[CSS] 2 - 선택자  (0) 2022.05.31
[CSS] 1 - 개념과 적용 방법  (0) 2022.05.31
728x90

저번 시간에 이어서 남은 몇 가지 태그를 이어가자.

 

<Form 태그>

@ form

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <!-- 폼 관련 태그 
   사용자가 웹사이트로 정보를 보낼 수 있는 요소들을 폼이라고 한다.
   
   - form 태그
        <form 속성 ="값"...> 여러 폼 요소 태그... </form>
   - form 태그 속성
       action : 사용자가 입력한 내용을 서버쪽으로 보내 처리해줄때
               서버에서 사용할 경로
       method : 사용자가 입력한 내용들을 서버쪽으로 어떻게 넘겨줄지 전송 방식 지정
              get : 브라우저 주소창에 사용자가 입력한 내용이 그대로 드러남
              post : 입력내용이 주소창에 드러나지 않고 내부에 담아 전송. 길이제한
               
       name   : 폼태그에 이름 붙혀주는 속성. form 태그 여러개면 구분하기 위해.
       target : action에 지정한 경로를 현재 창이 아닌 다른 위치에 열도록 지정
       autocomplete : 자동완성기능 
       
       
    - input 태그
            : 홑태그로 폼태그 안에서 사용자가 입력하는 부분을 만들때 주로 사용   
            한줄 글자, 체크박스, 로그인 버튼등 여러 타입이 존재
            
            * type 속성의 속성값
            text : 한줄짜리 텍스트 입력할 수 있는 텍스트 상자
            hidden : 화면상에는 보이지 않지만, 서버로 전송할때 함께 숨겨서 전송하고 싶을때 사용
            value속성으로 넘길 값도 작성해주어야함!!
            
            password : 비밀번호 입력함. 작성한 내용이 *. 으로 표시됨
            radio : name 속성으로 묶어서 한개의 항목만 선택하게 할때 사용
            Checkbox : 두개 이상의 여러가지 선택 가능
            color : 색상 선택 상자
            date, month, week : 날짜(년,월,일), 월 년, 주 년 선택
            reset : 입력된 모든 정보 초기화. value에 지정한 값이 버튼에 표시됨.
            submit : 사용자가 입력한 정보를 서버로 전송시키는 버튼. value에 지정한것이 버튼에 표기.
            image : 이미지 버튼. submit과 같은 기능 src 속성 기입
            file : 파일 첨부시 (웹에서 자세히)
            
     *input의 다른 속성
        autofocous : 입력 커서 자동으로 표시되게
        placeholder : 입력박스에 기입할 내용 힌트로 표시
        readonly : 읽기전용
        required : 필수 기입 요소로 지정
        
        min, max, step : 최대값, 최소값, 간격 (숫자 조건)
        size, minlength, maxlengrg : 길이, 최소길이, 최대길이 (텍스트 관련 조건)           
   --> 
    
       <form action="html08_action.html" method="get"> 
				<!-- action에 지정한 폴더로 정보가 감   -->
       <input type="text" name="txt" value="haha" /> <br />
       <input type="hidden" name="hiddenVal" value="10" /> <br />
       <input type="password" name="pw" /> <br />
       <input type="radio" name="subject" checked/> java <br />
       <input type="radio" name="subject" /> jsp <br />
       <input type="radio" name="subject" /> SPRING <br />
       <input type="checkbox" name="css" checked value="css" /> css <br/>
       <input type="checkbox" name="js" value="js" /> js <br/>
       <input type="color" name="col" />
       <input type="date" name="date" />
       <input type="month" name="mon" />
       <input type="week" name="wk" />
       <input type="time" name="time" />
       <input type="datetime-local" name="local" />
       <input type="reset" value="reset" />
       <input type="image" src="img/tayo.jpg" width="30%"/>
       <input type="button" value="새창열기" onclick="window.open()" /> <br />
       <input type="file" name="upload" />
       
       <input type="submit" value="검색" />
   
   
    </form>
   
    
</body>
</html>

 

내용이 긴데 코드를 사진으로 보자면 

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <form>
       <input type="text" name="txt" autofocus/> <br />
       <input type="text" name="txt2" placeholder="yyyy-mm-dd" /> <br />
       <input type="text" name="txt3" readonly value="읽기전용"/>  <br />
       <input type="text" name="txt4" required /> <br />
       <input type="submit" value="submit" />
       
   </form>
   
   
</body>
</html>
```

 

 

 

 


<옵션 선택 태그>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <!-- 옵션중에 선택하는 태그 : selet -->
   <form>
     
      <select name="opt">
          <option value="1" selected>내용1 </option>
          <option value="2"> 내용2</option>
          <option value="3"> 내용3</option>
          <option value="4"> 내용4</option>
          
          
      </select>
      <br />
      <!-- 여러줄 입력하는 텍스트 영역-->
      <textarea cols="20" rows="5" name="txt"> 안녕하세요</textarea>
      <!-- 버튼 태그 -->
      <button type="button" onclick="alert('hello')">전송</button>
      
    </form>
   
   
    
</body>
</html>


 

<앵커 만들기>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <h1> 앵커 만들기 </h1>
   <ul id="menu">
        <li><a href="#content1" >메뉴1</a> </li>
        <li><a href="#content2" >메뉴2</a> </li>
        <li><a href="#content3" >메뉴3</a> </li>
         
   </ul>
   <h2 id="content1">내용1</h2>
   <p>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quam, 
ab omnis accusamus itaque consequuntur iste necessitatibus inventore magnam harum
 molestias veniam nam, dignissimos dolorum sapiente? Et cum veniam quod.Lorem 
ipsum dolor sit amet, consectetur adipisicing elit. Illo, quam, ab omnis accusamus itaque consequuntur iste necessitatibus inventore magnam harum molestias veniam nam, dignissimos dolorum sapiente? Et cum veniam quod.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quam, ab omnis accusamus itaque consequuntur iste necessitatibus inventore magnam harum molestias veniam nam, dignissimos dolorum sapiente? Et cum veniam quod.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quam, ab omnis accusamus itaque consequuntur iste necessitatibus inventore magnam harum molestias veniam nam, dignissimos dolorum sapiente? Et cum veniam quod.
       
       
   </p>
   <a href="#menu">메뉴로 돌아가기</a>
   
   <h2 id="content2">내용2</h2>
    <p>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quam, 
ab omnis accusamus itaque consequuntur iste necessitatibus inventore magnam harum 
molestias veniam nam, dignissimos dolorum sapiente? Et cum veniam quod.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quam, ab omnis accusamus itaque consequuntur iste necessitatibus inventore magnam harum molestias veniam nam, dignissimos dolorum sapiente? Et cum veniam quod.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quam, ab omnis accusamus itaque consequuntur iste necessitatibus inventore magnam harum molestias veniam nam, dignissimos dolorum sapiente? Et cum veniam quod.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quam, ab omnis accusamus itaque consequuntur iste necessitatibus inventore magnam harum molestias veniam nam, dignissimos dolorum sapiente? Et cum veniam quod.Lorem ipsum dolor sit amet, 
consectetur adipisicing elit. Illo, quam, ab omnis accusamus itaque consequuntur 
iste necessitatibus inventore magnam harum molestias veniam nam, dignissimos 
dolorum sapiente? Et cum veniam quod.
       
       
   </p>
   <a href="#menu">메뉴로 돌아가기</a>
   <h2 id="content3">내용3</h2>
    <p>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quam, 
ab omnis accusamus itaque consequuntur iste necessitatibus inventore magnam harum
 molestias veniam nam, dignissimos dolorum sapiente? Et cum veniam quod.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quam, ab omnis accusamus itaque consequuntur iste necessitatibus inventore magnam harum molestias veniam nam, dignissimos dolorum sapiente? Et cum veniam quod.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quam, ab omnis accusamus itaque consequuntur iste necessitatibus inventore magnam harum molestias veniam nam, dignissimos dolorum sapiente? Et cum veniam quod.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quam, ab omnis accusamus itaque consequuntur iste necessitatibus inventore magnam harum molestias veniam nam, dignissimos dolorum sapiente? Et cum veniam quod.Lorem ipsum dolor sit amet, 
consectetur adipisicing elit. Illo, quam, ab omnis accusamus itaque consequuntur
 iste necessitatibus inventore magnam harum molestias veniam nam, dignissimos 
dolorum sapiente? Et cum veniam quod.Lorem ipsum dolor sit amet, consectetur 
adipisicing elit. Illo, quam, ab omnis accusamus itaque consequuntur 
iste necessitatibus inventore magnam harum molestias veniam nam, dignissimos 
dolorum sapiente? Et cum veniam quod.
       
       
   </p>
   <a href="#menu">메뉴로 돌아가기</a>
   
    
</body>
</html>

 

 

 

 

 


 

<head 부분 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>안녕</title>
    <meta name="description" content="문서에 대한 설명" />
    <meta name="keywords" content="검색시 걸리게 해줄 키워드 나열," />
    <meta name="author" content="사이트, html 문서 작성자" />
    <meta name="viewport" content="width=device-width, initial-scale=2.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0 " />
    <!-- 렌더링 설정, 호환성 문제가 주로 발생되는 IE(자체 랜더링엔진 사용하면 결과물이 달라지거나 동작이 안되는 경우가 많음) 때문에 표준모드로 렌더링 되도록 설정 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!-- 외부 데이터나 문서를 가져오기 위한 태그-->
    <link rel="icon" href="img/tayo.jpg"/>
    <link rel="stylesheet" href="css파일의 경로" />
    <style>
    /* css 코드 작성 : html요소에 디자인 적용 */
    </style>
    <script src="javascript 파일경로" type="text/javascript"></script>
    
</head>
<body>
   
   
   
   <script>
       // javascript 작성
    </script>
   
    
</body>
</html>

 

<시멘틱 태그>

  시멘틱 태그 : 웹 페이지의 각 요소에 의미를 부여해서 의미와 관련성을 기반으로     보다 진보된 검색 또는 서비스가 가능하도록 시도
      html5에서는 시멘틱 웹을 위한 태그들이 제공됨.
      안써도 무방하나 웹표준에 맞추려면 쓰는것도
      
     header : 헤더, 상단부, 로고 같은것 
     nav    : 네비게이션 (메뉴 바)
    aside   : 오른쪽 소메뉴 같은 용도
    section : 본문 부분. article 포함
    article : 본문의 주 내용 컨텐츠가 들어가는 부분
    footer  : 하단부. 회사 소개, 회사 정보, 사이트 맵 등
728x90

'WEB Creator > [HTML]' 카테고리의 다른 글

[HTML] 1 - brackets를 활용한 html 기본 + 태그 몇개  (0) 2022.06.01
[HTML] OT  (0) 2022.06.01
728x90

https://brackets.io/ 에서 다운로드

 

1. ! tab 키를 누르면

2. <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

과 같이 변하게 된다.

간단하게 설명을 하자면,
<!DOCTYPE html> <!-- 문서 유형을 지정하는 선언문. html5 문서이다  -->

<!-- 웹 문서의 시작과 끝을 알려주는 태그 : 안에는 크게 head와 body로 나뉜다.  -->
<html lang="en"> 

 <!-- head : 브라우저에게 정보를 주는 태그
         화면에 보이지 않지만 브라우저가 알아야할 정보를 모두 이 안에 태그로 입력
        title, meta, style, link...   -->
<head>
   
   <!--meta : 문자 인코딩 및 문서 키워드, 요약정보  -->
    <meta charset="UTF-8">
    
    <!-- 웹 브라우저 탭에 작성되는 제목 표시줄 지정  -->
    <title>Document</title>
</head>

<!-- body : 실제 브라우저에 표시될 내용들, 안에 작성 -->
<body>
    <h1>
        안녕하세요~~
    </h1>
    
    
</body>
</html>

 


 

태그 알아보기

<텍스트 관련 태그>

@ h태그 (제목 태그)

<body>
    <!-- 텍스트 관련 태그 -->
    <!-- h: 제목태그 -->
    <h1> 제목태그</h1>
    <h2> 제목태그</h2>    
    <h3> 제목태그</h3>
    <h4> 제목태그</h4>
    <h5> 제목태그</h5>

h1 → h5 갈수록 글자가 작아진다.

 

 

@ p태그

 <!-- p : 단락만들기 : 앞뒤 줄바꿈 기능이 있는 텍스트 덩어리 -->
     p태그는 paragraph의 앞글자를 딴 것으로 글자그대로 문단을 뜻합니다
 

  <p>Lorem ipsum dolor sit amet, //Lorem 치고 tab 누르면 글자나옴
   <br /> br은 한줄내리기
   consectetur adipisicing elit. Architecto iusto omnis officiis porro nisi ducimus 
   repellendus minima sapiente tempora, delectus dolor modi temporibus voluptate non 
   et libero ea ex consectetur!</p>
   
   <pre>        pre 입력한 그대로 나옴 띄워쓰기 여러개 표시가능
   </pre>
   
	</p>

 

@ hr / span / strong / u

<hr /> hr 가로줄 테그
 
   <blockquote>
    blockquote 인용문   Lorem ipsum dolor sit amet,
   </blockquote>
   
  <span style="color: red"> span 텍스트를 묶어주는 태그 </span> 
   <strong> strong 굵게나옴 </strong> 
   <u> u는 밑줄을 나오게함 </u>

<태그> </태그> 가 한 쌍이다.


 

 

<목록 태그>

@ ul / ol

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   
   
   <!-- 목록 태그 :
    ul : 순서가 없는 목록 만들기 : unorder list : ul 안에 목록은 li 태그 안에 나열
        각 항목안에 원이나 사각형 같은 불릿(bullet)이 붙는다.
        CSS의 list-style-type 속성으로 수정가능
    ol : 순서가 있는 목록 만들기 : ol안에 목록은 li 태그로 나열
         각 항목앞에 순서를 나타내는 숫자, 문자가 붙는다. 
         트개 속성으로 수정 가능
         type 속성 : 목록앞에 숫자/ 영문/ 로마숫자로 변경가능.
          값: 1= 숫자(default), a = 영문소문자, A = 영문대문자,
             i = 로마숫자 소문자, I= 로마숫자 대문자
             
             
         
         start 속성 : 시작값 지정
        reversed : 항목을 역순으로 표시
       -->
<h2> 웹개발 커리큘럼</h2>
   <h3>ul, li</h3>
   <ul>
     Ul> li*5 tab키 누르면 자동으로 만들어줌  
       <li> java </li>
       <li> html css </li>
       <li> javascript </li>
       <li> jsp </li>
       <li> spring </li>
       
   </ul>
   
   
   <ol typr ="1" reversed>  
       <li> java </li>
       <li> html css </li>
       <li> javascript </li>
       <li> jsp </li>
       <li> spring </li>
       
   </ol>
    
</body>
</html>

 


<표 만들기 태그>

@ table

   tr : 행을 지정 (가로 줄, row). <th></th>  개수로 가로줄이 몇개인지 알 수 있다
   td : 셀 만들기 (세로한칸) <th></th>안에 몇개의 셀이 들어갈것인가 ?
   th : 제목 셀

 

<th></th>를   먼저세우고 td를 넣음

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <!-- 표 만드는 태그
   
   table 은 행(row)과 열(column) 으로 이루어져 있다.
   table : 테이블의 영역을 묶는 태그
   tr : 행을 지정 (가로 줄, row)
   td : 셀 만들기 (세로한칸)
   th : 제목 셀
   
   table 태그 안에 행의 수만큼 <tr> 태그를 넣고
   각 tr태그 안에 열의 수만큼 td 태그를 만든다.
   
   
   행/열 합치기
   : 셀을 합치는 것이므로 td에 적용
       colspan 속성 : 열 합치기 colspan = "합칠 열의 개수"
       rowspan 속성 : 행 합치기 rowspan = "합칠 행의 개수"
   -->
   
   <table border = "1">
       <tr> 가로
           <td rowspan="2"> 1행 1열</td>
           <td> 1행 2열</td>
           <td> 1행 3열</td>
       </tr>
       
       <tr> 
        
           <td colspan="2"> 2행 2열</td>
       </tr>
    
   </table>

      <table border = "1">
       <tr> 가로
           <td rowspan="2"> 1행 1열</td>
           <td> 1행 2열</td>
           <td> 1행 3열</td>
       </tr>
       
       <tr> 
           <td> 2행 1열</td>
           <td colspan="2"> 2행 2열</td>
       </tr>
    
   </table>
    
</body>
</html>

 

 


<a 태그>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <!-- 링크 : a태그 : href속성을 이용하여 다른 페이지로 넘어가게 할 수 있는 태그
        - 속성 
            href   : 링크 주소 
            target : 링크한 내용이 표시될 위치
                        새창 : _blank
                        현재창 : _self(default)
                        
                                        
        - 앵커 
            <태그 id="앵커명"> ... </태그>
            <a href="#앵커명"> 텍스트나 이미지 </a>
    
    
    -->
    <a href="http://naver.com"> 네이버로 이동 </a>
    <a href="http://naver.com" target="_blank"> 네이버 새창 이동 </a>
    
    
    
    
</body>
</html>

<이미지 태그>

@ img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--
      - 이미지 파일
        GIF : 색상수 256가지, 파일크기 작음. 
            아이콘, 불릿, favicon(작은이미지), 움짤
        JPG : 사진. 
        PNG : 투명 배경 가능.
        
        
       - 속성
           src : 이미 경로 값으로 지정(필수 기입 속성)
           alt : 이미지 설명글 저장
    
        - 경로
            상대 경로 : 현재 작업파일을 기준으로 이미지 파일의 위치 작성
            
                    / \ : 한단계 안으로 들어가기
                    .  : 현재위치
                    .. : 한단계 위로 나가기
            절대 경로 : 이미지 파일이 저장된 컴퓨터 내의 위치한 전체 주소
                        C:\html\img\test.jpg
      -->
   
   <h2> img tag</h2>
   <img src="tayo.jpg" width="50%"/>      <!--(같은 경로, 디렉토리)  --> 
   <img src="E:\htmlcss\workspace\html\img\tayo.jpg"/>     <!--절대경로 --> 
   <img src= "img/tayo.jpg" width="200"/>    <!--img/로 한단계 안으로   --> 
   <img src="../mickey%20png.png" width="30%">   <!--../ 을 적어서 한단계 위로  --> 

</body>
</html>

 


 

 

728x90

'WEB Creator > [HTML]' 카테고리의 다른 글

[HTML] 2 - html 폼관련 태그 + 옵션 태그 + 앵커  (0) 2022.06.01
[HTML] OT  (0) 2022.06.01
728x90

[HTML]

1.  HTML
: HyperText Markup Languege : 웹에서 사용하는 웹문서

확장자명 : .html
일반문서 : 예) 엑셀 : 입력프로그램과 내용 확인하는 프로그램이 동일
웹문서   : 장성 프로그램 " 웹 편집기", 문서 보는 프로그램을 "웹 브라우저"로 서로 다름.

웹표준   : 웹 사이트를 만들때 지켜야하는 약속들을 정리한 것.
HTML5

웹 접근성 : 청각장애인, 시각장애인등 환경적 제한이 있는 사용자를 고려하여
웹페이지를 작성하는 기법.
정식인증은 비쌈 자가 진단 테스트 정도 해볼 수 있는 사이트 : 
https://accessibility.kr/

W3C : 웹 창시자 ( 팀 버너스 리) 가 W3C(World wide web Consortium) 단체 설립.
웹 표준을 제정하는 단체
HTML5는 HWATWG(애플, 모질라, 오페라) + W3C가 작성

2. IDE Intergrated Development Environment : 통합 개발 환경
개발할때 사용하는 개발 툴

brackets.io

3. 태그
: 마크업할 때 사용하는 약속된 표기법
- <> 을 이용해 태그로 표시 : <html><head><img>
- 태그는 소문자로 작성 : 대소문자 구분하지 않지만 HTML5 표준명세에서 소문자 권장함.
- 여는 태그와 닫는 태그 정확히
태그 : 쌍으로 이루어짐 <html>....</html>,<h1>....</h1>
홀태그 : 하나의 태그로 이루어짐<img />, <br />
- 들여쓰기
- 태그는 속성과 함께 작성 가능
<태그명 속성명 ="값" 속성명="값".... >....</태그명> (쉽표 x)

4. 유용한 사이트
www.w3schools.com /듀토리얼 싸이트
https://developer.mozilla.org/ko/
https://caniuse.com/

5. HTML 문서 구조
주석 : <!-- html 주석 -->

728x90
728x90

5. 적용 스타일

1) 폰트 변경
font-family : 브라우저 사용자의 시스템에 설치 되어있지 않거나
운영체제에 따라 원하는 결과가 안나올 경우가 있다.
@font-face  : 웹 폰트 사용. 웹 문서 안에 끌꼴 정보도 저장하여, 사용자가 접속하면 
사용자 시스템에 글꼴 다운로드시켜 적용
font-size   : 클자 크기 지정 : px | em | rem | ex | pt 단위로 지정가능
font - weight : 글자 굵기 지정 : normla | bold | border | lighter
 100   200  400 400이 normal
font - style : nomal | italic | oblique 

2) 텍스트 스타일
color : 글자색 지정. 색상명 | rgb(0,256,0) | #00f
text-decoration : 텍스트에 줄 표시 지정. none | underline | overline | line-through

3) 문단 스타일
text-align : 텍스트 정렬 left | right | center | justify..

4) 목록과 링크 스타일
list-style-type : 목록의 불릿과 번호  스타일 지정
none | disc | circle | square 
none | 1 | a | A....
5) 색상과 배경
background-color : 배경색 지정
background-image : 배경이미지, url('이미지파일경로') 로 이미지 지정
background-attachment : 배경이미지 고정. scroll(default) | fixed
* background : 속성값만 나열하여 한번에 적용



* css 크기 단위
px : 화소 단위, 해상도에 따라 상대적인 크기를 가짐
% : 백분율, 기정사이즈를 기반으로 상대적인 비율의 크기를 가짐
em : 배수 단위, 지정 사이즈를 기반으로 배수로 계산된 크기를 가짐.
16px -> 2em (32px)을 말함 : 중첩태그의 경우 바로 상위 태그의 값을 기준으로 
배수가 괴어 주의가 필요함. 
rem : root em 으로, 최상위 요소 사이즈를 기준으로 함. 배수 단위 
16px -> 1rem = 16px, 2rem = 32px, 1.5rem ->24px....

* css 색상표현 단위
1) 색상이름 표기 : https://www.w3schools.com/colors/colors_names.asp
2) 16진수 표기 :#ffffff 같이표기/ #fffff -> #fff 같은값반복이면 생략가능
                   #22FF55 ->#2F5 
# 8A  2B  E2
  빨  녹  파  / 각 두자리가 16진수의 빨녹파 값
3) RGB표기 : rgb(120,43,68)
4) RGBA 표기 : rgba(12,44,67,0.5) RGB+alpha (투명도) 0.0-> 투명
투명도 지정 속석 opacity : CSS제공 속성. 상속함
rgba는 상속안함


6. 박스모델
1) 블록 레벨 : 요소 하나가 혼자 한 줄 다 차지하는 요소. 박스형태
p, h, ul, ol, div, form, table 등
2) 인라인 레벨 : 혼자 한줄 차지하지 않는 요소
img, br, span, input, textarea, button 등
3) display : 화면 배치 방법 결정
none : 화면에 표시 하지 않음
block : 블록 레벨로 지정
inline : 인라인 레벨로 지정. 한 줄로 배치 가능한데, 너비나 높이, 
마진 같은 박스 모델값이 정확히 적용 안될 수 도 있다.
inline-block : 인라인 레벨요소이면서 블록레벨 속성을 갖도록 지정하는 것
4) border : 테두리
border-width, border-color 등 속석이 분리 적용하게 있다.
간단하게는 border : 두께 스타일 색상와 같이 한번에 적용가능.
그 외 border-top/-left/-right/-bottom, border-top-left-radius

5) 여백
margin : 요소의 바깥 여백
값 1개 : 상하좌우, 값 2개 : 상하 좌우, 값 4개 : 상 우 하 좌
padding : 콘텐츠와 테두리 사이 여백, margin과 적용방법 같음

728x90

'WEB Creator > [CSS]' 카테고리의 다른 글

[CSS] 9 - Flexbox  (0) 2022.06.07
[CSS] 8 - media query 미디어쿼리  (0) 2022.06.07
[CSS] 7 - 포지셔닝  (0) 2022.06.07
[CSS] 2 - 선택자  (0) 2022.05.31
[CSS] 1 - 개념과 적용 방법  (0) 2022.05.31
728x90

4. **선택자 Selector** (웹 크롤링할때 필요함)

--- HTML 네이밍 해줄 수 있는 속성---
태그명
name 속성 : form안에 input태그에 기술해서 데이터 넘길때 많이 사용.
이름 붙히는 느낌 (css에서 다른 속성을 더 많이 사용)
class 속성 : 다른 태그들과 값이 같아도 된다 -> 그루핑 역할 해줄때 사용
id 속성 : 문서내에서 유일한 값을 가져야함. 태그에 아이디 부여(사람= 주민번호)

1) 전체 선택자 : * 
     모든 요소에 스타일 적용
    * { 속성명 : 값;...} 

 

2) 태그 선택자 : 태그명
       해당 태그에 모두 적용
       태그명 { 속성명 : 값;...}


3) *class 선택자*  : .class속성값 
         특정 부분에 스타일 적용. class 속성값이 동일한 태그들에 적용 
         그룹처럼 지정해서 적용할때 사용. 
         <h1 class="hello">...
         .hello { 속성명: 값; ...}  


4) id 선택자 : #아이디속성값
        특정 태그에(요소)에 스타일 적용.
        id 값은 문서내에서 유일해야하므로 유일한 특정 한개의 요소에만 적용 할 때 사용.
        <h2 id="test">...
         #test { 속성명 : 값;....}

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>    
       * {margin: 10; padding: 0}     /* 1) 전체선택자 */
        h1 {color: red;}	/* 2) 태그 선택자 */
        p{color: blue}
        .lorem{color: grey; font-size: 30px} /* 3) 클래스 선택자 */
        #container{			 /* 4) ID 선택자 */
            background-color: turquoise;
            width: 300px;
            height : 200px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
   <h1> Hello HTML   </h1>
    <h1> Hello CSS </h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum cupiditate eum reiciendis possimus? Voluptates similique repellat, dolore architecto veniam, vel placeat tenetur! Repellat facere aperiam porro quod saepe accusamus qui?
    </p>
    <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum cupiditate eum reiciendis possimus? Voluptates similique repellat, dolore architecto veniam, vel placeat tenetur! Repellat facere aperiam porro quod saepe accusamus qui?
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum cupiditate eum reiciendis possimus? Voluptates similique repellat, dolore architecto veniam, vel placeat tenetur! Repellat facere aperiam porro quod saepe accusamus qui?
    </p>
    <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum cupiditate eum reiciendis possimus? Voluptates similique repellat, dolore architecto veniam, vel placeat tenetur! Repellat facere aperiam porro quod saepe accusamus qui?
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum cupiditate eum reiciendis possimus? Voluptates similique repellat, dolore architecto veniam, vel placeat tenetur! Repellat facere aperiam porro quod saepe accusamus qui?
    </p>
</body>
</html>


5) 여러 선택자 동시 적용
: 쉼표를 구분자로 나열하여 적용

선택자, 선택자 {...}

6) 스타일 적용 우선순위
          1) 인라인 스타일 > id스타일 > class 스타일> 태그 스타일
          2) 코드 순서 : 나중에 기술한것이 적용
         *스타일 상속 : 부모 태그에 적용된것은 자식 태그도 적용됨.
          ex) body 태그에 폰트적용하면 그 안에 있는 태그들도 모두 적용

7) 연결 선택자
      - 하위 선택자 : 띄어쓰기 구분자로 선택자 나열
        상위 선택자 하위선택자 {...}

- 자식 선택자 : >를 구분자로 하위 요소 전체가 아니라 바로 아래 자식요소만 적용
부모선택자 > 자식선택자 {...}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Selector</title>
    <style>
       #container > ul{border: 1px solid red;}  /*  > 를 사용하여 바로 아래자식인 ui에게 만 사용 */
    </style>
        
</head>
<body>
   <div id="container">
       <h1>Hello CSS in container</h1>
       <ul>						<!-- 여기에만 적용됨 -->
           <li> list1
               <ul>					<!-- 여기는 적용 안됨 -->
                   <li>list1-1</li>
                   <li>list1-2</li>    
                   
               </ul>
           </li>
           <li>      list2
               <ul>					<!-- 여기도 적용 안됨 -->
                   <li>list2-1</li>
                   <li>list2-2</li>
                   <li>list2-3</li>
                   <li>list2-4</li>

               </ul>
           </li>
       </ul>
       
   </div>
</body>
</html>


- 인접 형제 선택자 : +를 구분자로 기술. 가장 가까운 형제 요소. 
선택자 + 선택자 {...}
(형)  (아랫동생)
- 형제 선택자 : ~을 구분자로 기술. 인접과 달리 형 다음에 붙은 모든 형제 요소에 적용.
선택자 ~ 선택자 {...}
(형) ~   (동생들) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Selector</title>
    <style>
      h1+ul{color: blue; font-weight: bold;}    /*  + 를 사용하여 h1 과 가장가까운 형제에게만 적용 */ 
    </style>
        
</head>
<body>
  <ul>
    <li>list1-1</li>
    <li>list1-2</li>
</ul>
<h1>Hello CSS</h1>                         <!--h1이 여기 있으니 그 바로 밑 형제들만 적용됨 -->
    <li>list2-1</li>
    <li>list2-2</li>
    
</ul>
<ul>
    <li>list3-1</li>
    <li>list3-2</li>
    <li>list3-2</li>
    
    
</ul>
</body>
</html>

h1이 2-1 위에 있을때
h1이 1-1 위에 있을때
선택자 ~ 를 사용했을때 h1~ul



8) 속성 선택자
- 속성명 : 지정한 속성을 가진 요소 찾아 적용
선택자[속성]{...}
p[class]
- 속성값 : 속성명에서 나가아 속성의 값이 일치하는 요소를 찾아 적용
선택자[속성 = 값]{...}
p[class=hello]
- 속성^=값 : 특정 값으로 시작하는 속성을 가진 요소
선택자[속성^=값]{...}
p[class^=A]
- 속성=:[=값]{...}
- 속성*=값 : 특정값을 포함하는 속성을 가진 요소
선택자[속성*=값{...}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Selector</title>
    <style>
 
        ul{list-style: none;}
        li{display: inline; margin: 10px;}
        a{text-decoration: none; font-size: 30px; }
        a[href] {background-color: yellow;}
        a[target= "_blank"]{background-color: turquoise;}   /* target = _blank 인 */   
        a[class^="j"]{background-color: yellow;}			/* j로 시작하는 */
        a[class$="a"]{background-color: yellow;}			/* a로 끝나는 */
        a[class*="s"]{background-color: yellow;}			/* s가 포함된 */
    
    </style>
</head>
<body>
<ul>
    <li> Main menu :</li>
    <li><a href="http://naver.com" class="java">naver</a></li> 
    <li><a href="http://google.com"class="jsp">google</a></li>
    <li><a href="http://daum.net" class="spring">daum</a></li>
</ul>


</body>
</html>



9) 가상클래스 선택자
: 사용자 동작에 반응하는 스타일 적용시 사용
a 태그에서 많이 볼 수 있다.

a:link  : 기본. 방문전 링크 스타일에 적용
a:visited   : 방문한 링크 스타일에 적용
a:hover : 요소가 마우스 커서를 올려놓을때 스타일
a:acitve : 요소가 활성화 했을때 스타일 적용 (a-> 누르고 있을때)
a:foucs : 요소가 초점이 맞추어 져있을때 스타일 적용)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Selector</title>
    <style>
 
        a:link{color: black;}
        a:visited{color: turquoise;}
        a:hover{background-color: yellow;}
        a:active{color: magenta;}
        a:focus{background-color: lightblue;}
    </style>
</head>
<body>
<ul>
    <li> Main menu :</li>
    <li><a href="http://naver.com" class="java">naver</a></li> 
    <li><a href="http://google.com"class="jsp">google</a></li>
    <li><a href="http://daum.net" class="spring">daum</a></li>
</ul>


</body>
</html>


10) UI 요소 상태에 따른 가상 클래스 선택자
: 웹 요소 상태에 따라 스타일 지정

: enable  : 사용가능상태의 요소 (텍스트 필드)
: disable : 사용불가상태 요소
: checked : 체크된 상태의 요소 (라디오, 체크박스)

11) 구조 가상 클래스 선택자
: 웹 문서 구조를 기준으로 특정 위치에 있는 요소 찾아 스타일 적용

: root : HTML
: nth-child(n)      : 앞에서부터 n번째 자식요소
: nth-last-child(n)  : 뒤에서부터 n번째 자식요소
: nth-child(odd)  : 홀수번째 자식요소
: nth-child(even) : 짝수번째 자식요소
: first-child  : 첫번째 자식
: last-child : 마지막 자식
: not(선택자) : 괄호안에 있는 요소를 제외한 나머지

12) 가상 요소 선택자
가상 클래사 = 여러 태그중 원하는 태그를 선택하기 위한 선택자
가상 요소  = 태그안 내용의 일부분만 선택해 스타일 적용

::first-line : 첫번째 줄
::first-letter : 첫번째 글자
::befor : 내용 맨 앞
::after : 내용 맨 뒤

728x90

'WEB Creator > [CSS]' 카테고리의 다른 글

[CSS] 9 - Flexbox  (0) 2022.06.07
[CSS] 8 - media query 미디어쿼리  (0) 2022.06.07
[CSS] 7 - 포지셔닝  (0) 2022.06.07
[CSS] 3 - 적용 스타일과 박스 모델  (0) 2022.05.31
[CSS] 1 - 개념과 적용 방법  (0) 2022.05.31
728x90

[CSS]

1. CSS (Cascading Style Sheets)
HTML과 함께 웹 표준의 기본 개념.
HTML : 웹 사이트 내용 나열
CSS : 디자인 구성
독립적 사용불가. HTML에 도움을 주는 언어.

2. 스타일 형식 
*선택자* {속성명 : 속성값; 속성명 : 속성값; ....}
선택자  : Selector라 하며, 스타일을 어디에 적용할 것인지 선택하는 방법 (중요)
{}  : 스타일 적용 코드 영역
:   : 속성명과 값의 구분자
;   : CSS 속성 : 값 지정후 명령어의 종료를 나타내기위해 기입.

주석  : /* 내용... */

3. CSS 적용 방법 3가지
스타일 규칙들을 한데 묶어 놓은것을 '스타일 시트'라 함.

 

1) *외부 스타일 시트* : CSS 파일(.css)을 별도로 작업하여 연결
     <link href="css 파일 경로" rel="stylesheet" /> type="text/css (//MIME TYPE)" />

     href : css 파일 경로 지정
     rel : 링크 걸린 파일과의 관계에 대한 기술
     type : 파일의 형식 기술 : text로 기술된 css 타입의 파일이다 (MIME Type)

2) 내부 스타일 시트 : HTML 파일에 <style> 태그로 작업
3) 인라인 스타일 시트 : 태그에 속성으로 작업

 

/* stylr.css 파일 */
h1 {background-color: aqua;}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Styletype</title>
    <!-- 외부 스타일 시트 -->
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style>
        /* 내부 스타일 시트 : 이 태그 사이에 CSS 문법으로 스타일 코드 작성  */
        h2{background-color: lightblue;}
    
    
    </style>
</head>
<body>
     <h1> 외부스타일 시트 </h1>
     <h2> 내부스타일 시트 </h2>
     <h3 style="background-color: magenta"> 인라인 스타일 시트 </h3>
    
    
    
</body>
</html>

 

728x90

'WEB Creator > [CSS]' 카테고리의 다른 글

[CSS] 9 - Flexbox  (0) 2022.06.07
[CSS] 8 - media query 미디어쿼리  (0) 2022.06.07
[CSS] 7 - 포지셔닝  (0) 2022.06.07
[CSS] 3 - 적용 스타일과 박스 모델  (0) 2022.05.31
[CSS] 2 - 선택자  (0) 2022.05.31

+ Recent posts