1) 폼테그 테이블 사용해서 정리
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* table {
border-collapse: collapse;
margin: auto;
}
td,th {
border: 1px solid blue;
text-align: center;
vertical-align: middle;
} */
table,td {
border: 1px solid gray;
}
label {
text-align: left;
}
input {
text-align: right;
}
.button{
text-align: center;
}
</style>
</head>
<body>
<div>
<form>
<table>
<tr>
<th colspan="2">
<h1>회원 등록</h1>
</th>
</tr>
<tr>
<td><label>로그인 아이디 </label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>비밀번호 </label></td>
<td><input type="password" name="same"></td>
</tr>
<tr>
<td><label>비밀번호 확인 </label></td>
<td><input type="password" name="same"></td>
</tr>
<tr>
<td><label>생년월일 </label></td>
<td><input type="date"></td>
</tr>
<tr>
<td><label>성별 </label></td>
<td><input type="radio" name="gender">남성<input type="radio" name="gender">여성</td>
</tr>
<tr>
<td><label>거주 지역 </label></td>
<td><select size="7">
<option>강서구</option>
<option>강동구</option>
<option>강남구</option>
<option>서초구</option>
<option>양천구</option>
<option>마포구</option>
<option>영등포구</option>
</select></td>
</tr>
<tr>
<td colspan="2" class="button">
<input type="submit" >
<input type="reset">
</td>
</tr>
</table> // 챗 gpt 이용해서 css 추가
</form>
</div>
</body>
</html>
2) 애니메이션 예제
<style>
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
article {
width: 400px;
height: 400px;
background: blue;
margin: 100px auto;
animation-name: rotation;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: 2;
animation-delay: 0s;
}
</style>
3)미디어 쿼리 예제
<style>
article{
width: 200px; height: 200px; background: pink; margin: 100px auto;
}
@media screen and (max-width:900px){
article{
background: orange;
}
}
</style>
// 반응형 웹에 사용. 프젝할때 쓸 수 있으면 좋겠다.
4.flex방식 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin:0px;
padding:0px;
}
main {
width:100%;
height:100vh;
background:lightcyan;
}
section {
width:100%;
height:100%;
border:10px solid blue;
box-sizing:border-box;
display:flex;
flex-flow: row wrap;
/* flex-flow: column wrap; 기본축을 세로로 변경 */
justify-content: space-evenly;
/* justify-content: flex-end; 자식 요소를 오른쪽부터 정렬 */
/* justify-content: center; 자식 요소를 가운데에 정렬 */
/* justify-content: space-between; 자식 요소를 양끝부터 나눠서 정렬 */
/* justify-content: space-around; 자식 요소의 여백을 균일하게 나눠서 정렬 */
/* justify-content: space-evenly; 자식 요소의 여백을 균일하게 나눠서 정렬 */
/* align-items: center; 줄바꿈을 해야하는 자식 요소가 별로 없을때 */
align-content: center;
}
section article {
width:100px;
height:100px;
background:aqua;
border:1px solid #000;
}
</style>
</head>
<body>
<main>
<section>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
</section>
</main>
</body>
</html>
1) jquery, react,vue.js, node,js, spring boot, java 등등 구분
1. 프로그래밍 언어 (Programming Languages)
프로그래밍 언어는 컴퓨터에게 명령을 내리기 위한 언어입니다. 사람은 프로그래밍 언어를 사용하여 컴퓨터가 수행할 작업을 지정합니다. 예를 들어:
- Java: 객체 지향 프로그래밍 언어로, 큰 규모의 애플리케이션에 자주 사용됩니다.
- C: 시스템 프로그래밍, 임베디드 시스템 등에서 사용되는 저수준 언어입니다.
- JavaScript: 웹 개발에서 사용되는 언어로, 클라이언트 사이드에서 주로 실행되며, 최근에는 서버 사이드에서도 사용됩니다 (예: Node.js).
2. 프레임워크 (Frameworks)
프레임워크는 특정 언어나 플랫폼에 대한 구조와 규칙을 제공합니다. 프레임워크를 사용하면 애플리케이션을 만들 때, 기본적인 구조나 기능을 손쉽게 사용할 수 있게 됩니다. 프레임워크는 일반적으로 개발자가 해야 할 일을 간소화하고 가속화하는 역할을 합니다. 예를 들어:
- Spring: Java 기반의 엔터프라이즈 애플리케이션 개발을 돕는 프레임워크입니다. 주로 웹 애플리케이션 개발에 사용됩니다.
- Spring Boot: Spring 프레임워크의 확장 버전으로, 설정을 간소화하고, 독립 실행 가능한 애플리케이션을 쉽게 만들 수 있도록 돕습니다.
- Node.js: 사실 Node.js는 JavaScript 런타임이지만, 프레임워크처럼 서버 측 JavaScript 애플리케이션을 구축하는 데 도움을 줍니다.
3. 라이브러리 (Libraries)
라이브러리는 특정 기능을 구현하기 위한 코드 모음입니다. 라이브러리는 개발자가 원하는 기능을 추가하기 위해 불러와서 사용하며, 일반적으로 더 세부적인 작업을 수행합니다. 프레임워크와의 차이점은, 프레임워크는 애플리케이션의 흐름을 제어하는 반면, 라이브러리는 특정 기능만 수행합니다. 예를 들어:
- jQuery: JavaScript 라이브러리로, HTML 문서 탐색, 이벤트 처리, 애니메이션 등을 더 쉽게 할 수 있도록 돕습니다. 주로 DOM 조작과 관련된 기능을 제공합니다.
- React: 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리입니다. 컴포넌트 기반으로 UI를 구성하고, 상태 관리 등을 제공합니다.