-JS 데이터입출력-

innerText, innerHTML 을 이용한 요소 내용 입출력

 

1) innerText : 요소에 작성된 내용을 읽거나 변경할 때 innerText 속성을 사용한다

 

2) innerHTML : innerText와 다르게 요소에 작성된 내용 + 태그 + 속성을 모두 읽어 사용한다

 

<button onclick="check1();">innerText 확인하기</button>
<button onclick="check2();">innerHTML 확인하기</button>

<script>
	function check1(){
    	const area1 = document.getElementById("area1");
        
        const input = prompt("내용을 입력해주세요");
        area1.innerText = input;
    {
    finction check2(){
    	const area1 = document.getElementById("area1");
        
        area1.innerHTML = "<input type='text' size = '20'> innerHTML로 태그넣기";
      }
 </script>

-JS에서 HTML 요소를 접근하는 방법

1. id로 요소 접근하기 : document.getElementById("id 속성값")

--> id가 일치하는 요소 하나만 얻어옴

2. class로 요소 접근하기 : document.getElementByClassName("class 속성값")

-->class가 일치하는 모든 요소 얻어와 배열로 반환

3. tag로 요소 접근하기 : document.getElementByTagName("태그명")

-->tag가 일치하는 요소를 모두 얻어와 배열로 반환

4. name으로 요소 접근하기 : document.getElementByname("name 속성값")

-->name이 일치하는 모든 요소 얻어와 배열로 반환

5. CSS선택자를 이용하여 요소 접근하기 : 

-->1) document.querySelector("css 선택자") : 여러 요소가 선택된 경우 첫 번째 요소만을 얻어옴

-->2) document.querySeletorAll("css 선택자") : 선택된 요소 전부를 얻어옴

 

1. 스크립트 언어란?

-응용 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 제어하는 용도의 언어

-별도로 소스코드의 컴파일을 진행하지 않고 인터프리터를 이용하여 소스토드를 한 줄씩 읽어 바로실행

 

2. 자바스크립트(JS) 란?

-웹 브라우저에서 많이 사용하는 인터프리터 방식의 객체지향 프로그래밍 언어

-ECMA Script 표준을 따르는 대표적인 웹 기술

-JS는 우리가 알고있는 프로그래밍 언어 기본규칙과 다른경우가 많다

(자료형, 전역변수, 명령어등)

 

3. JS 작성방식

-1. inline 방식 : 태그에 직접 간단한 코드를 작성하여 실행하는 방법

 <button onclick="alert('알림창');">경고창(알림창) 출력! </button>

-2. internal 방식 : HTML 문서 내부에 script 태그를 선언하여 JS코드를 작성하는 방식

                       head, body 태그에 작성할 수 있다.

*함수 -> 선언 정의 호출 3가지로 만듦

function 함수명(매개변수) { }

<button onclick="add(10,20);">더하기 버튼</button>
<script>
	function add(num1, num2){
    	alert("두 수의 합: " + (num1+num2));
    }
</script>

-3. external(외부) 방식 : 외부에 별도로 자바스크립트 코드만을 작성하는 파일을 연결

<script src="js파일 위치"><script>

 

문자열 속성 선택자 : 속성 값의 문자열을 확인하여 스타일을 적용하는 선택자

 

1) 선택자[속성 ~= "값"] : 띄어쓰기로 구분되어 있는 여러 속성 값이 작성된 속성 중

                                  특정 값을 포함하고 있는 태그 선택

 

2) 선택자[속성 |= "값"] : -로 구분되는 단어를 포함하는 태그를 선택한다

                               -로 구분되는 단어 중 맨 앞에 있어야 선택할 수 있다

 

3) 선택자[속성 ^="값"] : 특정 값으로 시작하는 태그 선택

 

4) 선택자[속성 $="값"] : 속성 값이 특정 값으로 끝나는 태그 선택

 

5) 선택자[속성 *="값"] : 값을 포함하는 태그 선택

 

일반 구조 선택자 : 단순 위치를 기준으로 판단하며 선택자와 다른 태그들이 존재 시 위치에 포함되는 문제가 있음

 

1) first-child / last-child : 형제 관계 태그 중 처음, 마지막

2) nth-child(수열)  : 수열에 존재하는 태그 모두 선택

3) nth-last-child(수열) : 수열 번째 존재하는 요소를 뒤에서부터

 

형태 구조 선택자 : 같은 위치의 태그들을 기준으로 판단하여 태그 선택

 

1) first-of-type : 형제 관계의 같은 태그 중 첫 번째 태그 선택

2) last-of-type : 형제 관계의 같은 태그 중 마지막 태그 선택

3) nth-of-type(수열) : 형제 관계의 같은 태그 중 수열에 맞는 태그 선택

4) nth-last-of-type(수열) : 형제 관계의 같은 태그 중 뒤에서 수열에 맞는 태그를 모두 선택

 

부정 선택자 : 해당 선택자를 제외한 태그를 선택

 

 :not(선택자) 

 

기타 선택자 :

 

only-child : 특정 요소의 자식이 하나 밖에 없을 때

only-of-type : 특정 요소의 자식 중 같은 유형의 형제 요소가 없을 때 

empty : 자식이 없는 요소를 선택

띄어쓰기 : 여러 선택자 고르기

 

<선택자의 우선순위>

1. !important

2. inline-style

3. id

4. class

5. tag

 

 

 

'개발자로 업그레이드 되자 > HTML,CSS' 카테고리의 다른 글

CSS (1) 정의, 선택자  (0) 2021.10.24
HTML의 tag들  (0) 2021.10.05

스트림을 이용하여 다양한 매체에 존재하는 데이터들을 사용한다.

모든 스트림은 단방향이며 각 장치마다 연결할 수 있는 스트림이 존재한다

즉 입출력을 하려면 2개의 스트림이 필요

 

IO => Byte 단위 / Char단위

 

1)Byte단위

->InputStream

->OutputStream

 

2)Char단위

->Reader

->Writer

 

이 4가지 추상메서드를 상속받아 IO 객체들이 만들어짐

File~~ //파일을 읽고 씀

Byte~~ Char~~  // 바이트 단위, 문자 단위

Data~~ Buffered~~ //모아서 한번에 전달

 

--CSS? ->Cascading Style Sheets

마크업 언어가 실제로 화면에 표시되는 방법(모양, 색, 스타일)을 기술하는 언어.

(HTML 코드가 화면에 어떤 모양, 색으로 보여질지 지정하는 언어)

W3C 표준으로 지정됨

 

--선택자? ->현재 HTML 문서 내에 특정 요소를 선택하는 문자

                 선택된 요소에 원하는 스타일을 적용할 수 있다.

(1)태그 선택자(이름) : 현재 html 문서 내에 같은 기본 태그들을 선택하는 선택자

(2)ID 선택자(#이름) : 현재 html 문서 내에 id 속성값이 일치하는 요소를 선택하는 선택자

           **id 속성값은 페이지 내에서 유일해야 한다(중복x)

(3)클래스 선택자(.이름) : HTML 문서 내에 같은 class 속성 값을 가지는 태그를 모두 선택하는 선택자

(4)모든 요소 선택자(*) : 단독 또는 다른 선택자와 함께 사용 가능한 선택자

                     --단독 : 현재 html 문서 내 모든 요소 선택

                     --같이 사용 : 해당 선택자 내부, 형제, 부모 등을 모두 선택

(5)기본 속성 선택자(선택자[속성 = "속성명"]) : 태그에 작성된 특정 속성을 선택하는 선택자

(6)자손, 후손 선택자(> , + ) : 지정된 요소의 하위 요소 선택

                       자손 선택자 >: 지정된 요소의 바로 하위 존재 요소 선택(바로 붙어있는 요소만 가능)

                       후손 선택자 +: 지정된 요소의 모든 하위 요소 선택

(7)반응 선택자 : 사용자의 움직임에 따라 달라지는 선택자

                      --사용자가 요소를 클릭하고 있는 경우(:active)

                      --사용자가 요소에 마우스를 올려두는 경우(:hover)

(8)상태선택자 : 입력 양식의 상태에 따라 선택되는 선택자

                      --입력 양식의 상태에 따라 선택되는 선택자

                      --체크 유무 상태에 따른 :checked

                      --선택 또는 입력이 가능 불가능 유무에 따른 :enable, :disabled

(9)동위 선택자 :  동일 위치 뒤에 위치한 요소를 선택하는 선택자

                      --A 바로 뒤에 있는 B 요소 하나 선택 (A + B)

                      --A 뒤에 있는 모든 B요소 선택 (A ~ B)

'개발자로 업그레이드 되자 > HTML,CSS' 카테고리의 다른 글

CSS 선택자 정리(2)  (0) 2021.10.28
HTML의 tag들  (0) 2021.10.05

JDBC에서 연결, 자원반환같은 공통 메서드들을

 

미리 템플릿으로 만들어 놓으면 편하게 사용이 가능하다.

 

1. Connection 객체 생성+DB연결  메서드를 템플릿으로 

2. 만들어진 객체의 close 구문 (CONNECTION , STATEMENT , RESULTSET)

3. Connection 객체로 수행할 rollback,  commit 구문

을 만들어 추출한다 (PreparedStatement 는 다형성으로 Statement 에 들어간다)

 

import java.io.FileInputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Properties;

public class JDBCTemplate {
	// DB 연결, JDBC 자원 반환 같은 JDBC 공통내용 추출 클래스
	
	/*
	 * 1. Connection 객체 생성해서 반환
	 * 2. 전달 받은 JDBC 객체 자원 반환 (close)
	 * 3. 트랜잭션 제어구문(commit ,rollback)
	 * */
	
	private static Connection conn = null;
	//객체 생성을 하지 않아도 되는 변수
	//단 , 외부로부터 직접 접근은 차단
	//DB 연결 정보를 담고있는 Connection 객체 반환용 메서드
	
	public static Connection getConnection() {
		
		//이전에 생성된 Connection이 있고, close() 되지 않았을 경우
		// 이전 Connection을 재활용하고
		// 이전 생선된 Connection이 없거나 close 되었으면
		// 새로운 Connection을 반환
		// why?
		/* => 우리는 한 프로그램에 여러명이 접속하는 형태를 만들 예정
		 * 그러므로 객체가 계속해서 생성되면 과부하가 걸림
		 * =>접속한 사람 당 커넥션을 1개씩만 만들 수 있게 함
		 * */
		

		//DB연결 정보는 변경될 가능성이 있는데 그 때마다 컴파일 하는 것은 시간 낭비 심함
		//값 변해도 컴파일 다시 안해도 되도록 파일을 읽는 방식으로 수정
		//= 파일 내용만 변경하도록
		//XML 형식(DB연결 정보를 xml 파일에 별도로 작성해서 읽어오는 식)
		//---->확장 가능한 마크업 랭귀지 
		//== 프로그래밍 언어와 상관 없이 데이터를 저장, 전달 가능한 파일
		//요즘은 jason
		//XML에 작성된 DB 연결 정보를 Properties라는 객체를 이용해 얻어올 예정
		//Properties : 컬렉션 중 Map<K,V> 후손 클래스
		// K, V가 모두 String으로 제한된 Map
		// 장점: 파일입출력에 특화되어있음
		
		try {//isClosed : 커넥션 객체가 close() 된적 있으면 true;
			
//			xml 읽어와 저장할 Properties
			Properties prop = new Properties();
			//driver.xml 읽어오기
			prop.loadFromXML(new FileInputStream("driver.xml"));//try 안에 쓰기
			
			
			if(conn ==null || conn.isClosed()) {
				Class.forName(prop.getProperty("driver"));
				
				conn = DriverManager.getConnection(prop.getProperty("url"), prop.getProperty("dbId"), prop.getProperty("dbPw"));
				conn.setAutoCommit(false);
				//자동 커밋 기능 off
				//(주의사항) conn.close()가 수행되는 경우 자동으로
				//commit() 이 수행된다.
				//->conn.close() 호출 전에 트랜잭션 제어 구문을 작성해야 된다
				//그러므로 conn.close 호철 전에 트랜잭션 제어 구문을 작성해야 한다.
			}
		}catch(Exception e) {
			e.printStackTrace();
		}
		return conn;
	}
	//Statement 객체 반환 메서드
	public static void close(Statement stmt) {
		
		try {
			if(stmt!=null && !stmt.isClosed()) {
			stmt.close();}
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
	public static void close(ResultSet rs) {
		
		try {
			if(rs!=null && !rs.isClosed()) {
			rs.close();}
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
	public static void close(Connection conn) {
		
		try {
			
			if(conn!=null && !conn.isClosed()) {
			conn.close();}
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
	
//	commit 메서드
	public static void commit(Connection conn) {
		
		try {
			
			if(conn!=null && !conn.isClosed()) {
			conn.commit();}
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
	public static void rollback(Connection conn) {
		
		try {
			
			if(conn!=null && !conn.isClosed()) {
			conn.rollback();}
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
	
}

 

 

'개발자로 업그레이드 되자 > JDBC' 카테고리의 다른 글

JDBC 정리 (1) UPDATE  (0) 2021.10.09
JDBC 정리 (0) 연결, SELECT  (0) 2021.10.08

*Java에서 INSERT, UPDATE , DELETE 등 DML을 구현한다

*SELECT 할때 와 다르게 PrepareStatement 객체를 사용한다.

 

*PrepareStatement :

1. SQL이 담기면 바로 전송하는 것이 아닌 준비가 완료된 후 전달해 결과를 받아옴

2. SQL 구문에 ?로 빈칸을 만들어 추후 메서드로 채워넣고 전송하는 방식

3. SQL 구문에 자바 변수를 합칠 수 있어 간단하게 작성이 가능해진다.

4. 다만 Statement보다 코드 길이가 길어지는 단점이 있다.

5. PrepareStatement 를 사용하면 결과가 int로 쿼리로 반영된 갯수 반환이 생긴다.

Connection conn = null;
PrepareStatement pstmt = null;
int result = 0;
String sql = " SQL구문 작성 + ? ? ? " ;
try{
	Driver.forName("oracle.jdbc.driver.OracleDriver");
    conn = DriverManager.getConnection( url, 아이디, 비밀번호);
    //url : "jdbc:oracle:thin:@주소:버젼"
    pstmt = conn.prepareStatement( sql );
    pstmt.setString(1, 값1); //첫번째 ?자리에 값1 대입
    pstmt.setInt(2, 값2); // .....
    pstmt.setInt(3, 값3);
    
    result = pstmt.executeUpdate(); // 값 전부 대입된 후 execute로 실행
    //처리된 갯수가 반환됨
    
    }
catch(ClassNotFoundException e){
	e.printStackTrace();
   }
catch(SQLException e){
	e.printStackTrack;
    }
finally{
	try{
    	if(pstmt!=null) {pstmt.close();}
    	if(conn!=null) {pstmt.close();}
    	}
    	catch(SQLException e){
    	e.printStackTrace();
    	}
	}
    
    return result;

'개발자로 업그레이드 되자 > JDBC' 카테고리의 다른 글

JDBC 정리 (2) JDBC 템플릿  (0) 2021.10.14
JDBC 정리 (0) 연결, SELECT  (0) 2021.10.08

먼저 Java 와 DBMS를 연결시키기 위해선 프로젝트에 중간 통로인 JDBC를 쓸 수 있게 설정을 해놓아야 한다.

 

이클립스 - Project - Properties - Java Build Path 에 JDBC 라이브러리,드라이버 모음 위치를 등록한다.

(드라이버는 DBMS종류에 따라 달라진다)

 

***(Java 와 오라클 연결)***

 

JDBC란? 

->Java에서 DB에 접근할 수  있게 해주는 java 프로그래밍 API

OJDBC란?

->오라클에서 제공하는 오라클 DB와 자바를 연결하기 위한 라이브러리+드라이버

DriverManager?

->데이터 원본에 JDBC드라이버를 통하여 커넥션을 만드는 역할

Class.forName() 메소드를 통해 생성되며 반드시 예외처리 필요

직접 객체 생성이 불가는하고 getConnection() 메소드를 사용하여 객체 생성

 

*Java에서 SELECT문 가져오기

 

1. Oracle JDBC Driver 메모리에 로드

2. Connection (JDBC 객체) 선언 

3. Statement (Connection 객체를 통해 SQL구문을 실행하고 결과를 받아오는 객체) 선언

4. ResultSet (Statement 객체를 통해 가져온 결과(DB의 RESULTSET)를 저장하는 객체)

 ->출력해낼 때 한줄씩 가져오므로 객체명.next() 를 통해 커서이동을 통해 움직인다

 

5. 메모리에 올려놓은 것들을 닫고 자원을 반환하기 위해 반드시 close() 해준다.

Connection  conn = null;
Statement stmt = null;
ResultSet rs = null;
List<TableB> result=null
String url = "jdbc:oracle:thin:@주소:버젼";

try{
	Class.forName("oracle.jdbc.driver.OracleDriver");
    conn = DriverManagergetConnection(url,ID,PW);
    /*
    	url = "jdbc:oracle:thin:@주소:포트번호:버젼:"
    */
    stmt = conn.createStatement();
    rs = stmt.executeQuery(sql);
    //sql = SQL SELECT 구문 ;빼고
    
    result = new ArrayList<TableB>();
    
    while(rs.next()){
    	int a =rs.getInt("A");
        .....
        
        TableB tb = new TableB(a, ....);
        result.add(tb);
    }//rs마지막까지 ArrayList에 추가
    }catch (Exception e) {//예외처리
			e.printStackTrace();
	}finally { //예외가 발생하든 말든 사용한 자원 반환
			try {
				if(rs!=null) {rs.close();}
				if(stmt!=null) {stmt.close();}
				if(conn!=null) {conn.close();}
			}catch (SQLException e) {
				e.printStackTrace();
			}
}

 

 

 

 

 

 

 

 

 

 

'개발자로 업그레이드 되자 > JDBC' 카테고리의 다른 글

JDBC 정리 (2) JDBC 템플릿  (0) 2021.10.14
JDBC 정리 (1) UPDATE  (0) 2021.10.09

*컬렉션이란? : 자바에서 자료구조를 담당하는 프레임워크

   ->java.util 패키지에 포함되며 인터페이스를 통해 추가, 삭제, 정렬 기능들이 간단히 해결됨

 

* 배열 vs 컬렉션

배열 컬렉션
한 번 크기 정하면 변경 불가 저장 크기 제약 없다
중간 위치 추가 삭제 불편 추가, 삭제, 정렬 용이
한 타입 데이터만 저장 가능 여러 타입 가능

*컬렉션의 주요 인터페이스

  • List : 순서를 유지, 중복 저장 가능
  • Set : 순서가 없고 중복 저장 불가
  • Map : 키와 값의 쌍으로 이루어지며 키는 중복 저장이 안된다.

* List : 순차적 자료구조로 인덱스로 관리됨

   ex) ArrayList, LinkedList, Vector

    <주요 메서드>

  • add : 객체 추가
  • addAll : 컬렉션 타입 객체를 리스트에 추가
  • set : 해당 인덱스의 객체를 바꿈
  • contains : 해당 객체 저장 여부
  • get : 해당 인덱스 객체 리턴
  • isEmpty : 컬렉션이 비어있는지 조사
  • clear : 모든 객체 삭제
  • size : 객체 수 리턴
  • remove : 해당 객체 삭제

*ArrayList :

-초기 용량은 10으로 설정되며 따로 지정 가능

-저장 용량을 초과한 객체들이 들어오면 자동으로 늘어나며 고정도 가능

-동기화를 제공하지 않음

 

*LinkedList :

-앞뒤 링크를 동해 체인처럼 관리됨

-객체 삽입과 삭제가 빈번하면 ArrayList보다 성능이 좋음

 

*Set : 저장 순서가 유지되지 않고 중복을 허용하지 않음(null도 중복 x)

  ex) HashSet,TreeSet , LinkedHashSet

   <주요 메서드>

  • add
  • addAll
  • contains
  • itereator : 저장된 객체를 한번씩 가져오는 반복자 리턴(List, Set 만 가능)
    • Set은 인덱스가 없으므로 호출시 iterator 사용으로 가능하다
    • 향상된 for문으로도 가능하다
    • Map의 경우 Set/List화 시켜 iterator 사용
  • size
  • clear
  • remove

*HashSet :

->Set에 객체를 저장할 떄 hash함수를 사용하여 처리 속도가 빠름

 

*Map : 키와  값으로 구성되어 

    키: 중복저장 허용하지 않는 Set 방식(중복되면 값을 덮어씌운다)

    값: 중복저장 허용

 ex) HashMap, HashTable, LinkedHashMap, Properties , TreeMap

  <주요 메서드>

  • put : 주어진 키와 값을 추가, 저장이 되면 값을 리턴
  • entrySet : 모든 키와 값의 쌍을 Set에 담아 출력
  • get : 주어진 키의 값을 리턴
  • isEmpty : 비어있는지 여부
  • keySet : 모든 키를 Set 객체에 담아 리턴
  • size
  • values : 모든 값을 컬렉션에 담아 리턴
  • clear
  • remove
  • containsKey : 키 존재 여부
  • containsValue : 값 존재 여부

* Hash 와 hashCode

-> 해쉬 저장 방식은 객체 저장을 해쉬값으로 하고 해쉬값을 통해 진짜 주소로 빠르게 가는 방식

-> 그러므로 equals() 메서드를 오버라이딩 하는 경우

-> 값이 동일할 때 hash 또한 동일해 지도록 재정의 해야 한다.

-> 미정의시 값은 동일하게 판단하는데 주소는 다르게 판단되어 중복이 허용되는 문제가 발생한다.

 

 

!DOCTYPE : 현재 문서의 형식 지정
html 태그 : html 문서 내용을 정의하는 태그
lang 속성 : 현재 페이지가 어떤 언어로 되어있는지 표시.
                 검색엔진 이용 시 참고 용도.
head태그 : HTML 문서의 제목, 스크립트, 스타일시트의 링크 또는
            문서의 일반적인 정보(메타데이터)를 정의하는 태그
            <title>, <meta>, <link>, <style>, <script> 등이 있다.  

<meta charset="UTF-8">  :현재 문서의 문자 인코딩 정보

title 태그 : 브라우저의 제목을 지정하는 태그 

body 태그 : html 문서의 내용(Content)을 정의하는 태그 (화면에 출력되는 내용 작성)

h1 ~ h6 태그 : 제목을 입력할 때 사용하는 태그

hr 태그 : 화면에 수평선을 출력하고 줄을 바꾸는 태그

&nbsp; : 띄어쓰기 한 칸을 의미하는 특수 기호 

 

[문단을 구분하는 태그]

p 태그 : 글을 작성하는 태그

pre 태그 : 글을 작성하는 태그 + HTML 문서에 작성된 모양 그대로가 화면에 출력

b 태그 : 단순히 글자를 굵게 표시하는 태그strong 태그 : 글자를 강조하는 태그(웹 접근성을 위함)i 태그 : 단순히 글자를 기울이는 태그em 태그 : 글자를 강조하는 태그(웹 접근성을 위함mark 태그 : 형광펜 효과를 나타내는 태그u 태그 : 밑줄s 태그 : 취소선sup 태그 : 제곱표시sub 태그 : 로그 표시abbr 태그 : 마우스 오버 시 툴팁 형싱으로 설명 출력하는 태그

 

[목록관련 태그]

 

ul 태그 :

순서가 없는 목록

ol 태그 :

순서가 있는 목록

li 태그 : ul, ol 태그 내부에 사용되는 목록 내용 태그

<ol 태그의 속성>

start 속성 : 시작점 지정reverse 속성 : 역순으로 지정type 속성 : 순서 표시 형식 ( a A i I )

 

[표 관련 태그]

table 태그 : 웹 문서에서 자료 정리를 위해 주로 사용하는 태그

                행과 열로 이루어져 있으며, 행과 열이 교차하는 지점을 셀이라고 함

tr 태그 : 테이블의 한 행을 나타내는 태그

td 태그 : 한 셀을 나타내는 태그(한 영역)

th 태그 : 행이나 컬럼의 제목을 나타내는 태그

captopm 태그 : 테이블의 제목이나 설명을 추가하는 태그

 

table 사용 가능 속성

-border : table, td, th 에 테두리 추가

 

td, th 사용 가능 속성

-rowspan : 행 병합 == 위 아래 합침

-colspan : 열 병합 ==좌,우 합침

-width :폭을 지정하는 속성

-height : 높이를 지정하는 속성

 

table의 구조 설정 태그

-thead 태그 : 테이블의 상단 부분(컬럼명)

-tbody 태그 : 테이블의 중단 부분 영역(실제값,내용)

-tfoot 태그 : 테이블의 하단 부분 영역(합계)

 

[영역 관련 태그]

-block 형식 : 공간을 수직 분할하는 영역

(수직으로 되어있는 공간을 수평으로 자르는 것 == 수직선 상에 영역들이 존재함)

-width, height 지정 가능

-ex) h1~h6 , p, pre , hr , div ...

 

-inline 형식 : 공간을 수평 분할하는 영역

(수평으로 되어있는 공간을 수직으로 자르는 것 == 수평선 상에 영역들이 존재함)

-width, height 지정 불가능

-ex) b, strong, i ,em, mark, span

 

[이미지 관련 태그]

img 태그 : HTML문서에 사진, 그림을 삽입할 때 사용하는 태그

<img 태그 속성>

1)src : 삽입할 이미지 경로를 지정하는 속성

2)width : 이미지의 너비 지정

3)height : 이미지의 높이 지정

4) alt : 이미지를 설명하는 속성, 이미지가 출력되지 않는 경우 화면에 표시됨

 

[하이퍼링크 관련 태그]

<a 태그의 속성>

1) href 속성 : 이동할 페이지를 작성하는 속성

2) title 속성 : 링크에 마우스 오버를 하는 경우 설명을 나타내는 속성

3) target 속성 : a태그 클릭 시 페이지가 열리는 방법을 지정 ( _self  /  _blank / _parent  / _top )

 

[폼 관련 태그]

form 태그 : 내부에 작성된 input 태그의 값을 서버로 넘기는 역할을 하는 태그

<form 태그의 속성>

1) action 속성 : form 태그 내부에 입력된 input 태그 값을 전달할 서버 또는 페이지 url을 작성하는 속성

2) method 속성 : 데이터 전송 방식을 지정하는 속성( get / post )

3) target 속성 : action으로 지정된 경로를 현재/ 새 페이지 중 어디서 열지 선택 ( _self  /  _blank / _parent  / _top )

4) name 속성 : form 태그에 이름을 지정하는 속성

 

input 태그 : 웹 문서에서 사용자가 입력할 수 있는 양식을 제공하는 태그

<input 태그의 속성>

1)type 속성 : input 태그의 형식을 지정하는 속성

2)name 속성: 제출될 때 값의 이름을 지정하는 속성

3)size 속성 : input 태그에 크기를 지정하는 속성

4)maxlength 속성 : 최대 글자 수 제한

5)placeholder : 입력 상자에 입력해야되는 내용을 설명하는 속성

 

input + type =>

(형식 관련 type ) = text, search , url , email , tel  , number , range ,  

(날짜 시간 관련 type) = date, month , week, time, datetime-local

(제출 관련 type) = radio , checkbox , color , file , hidden 

 

button 태그 : (input 태그에 type을 submit reset button 한것과 같다)

(기본 형식은 submit)

 

select, option 태그 : 여러개의 option 중에서 하나를 select 하는 상자

 

textarea 태그 : 여러 줄의 문자열을 입력할 수 있는 태그

fieldset, legend 태그 : 폼 요소를 묶고 묶은 그룹에 이름을 붙히는 태그

 

 

 

'개발자로 업그레이드 되자 > HTML,CSS' 카테고리의 다른 글

CSS 선택자 정리(2)  (0) 2021.10.28
CSS (1) 정의, 선택자  (0) 2021.10.24

+ Recent posts