첫 주는 정말 생존과 적응의 시간이었음
일단 컴퓨터와 정말 정말 안 친했던 나...는 (차라리 스마트폰이 더 편한 세대임)
갑자기 외계어 투성이의 코딩세계에 냅다 던져진 기분이었음
그래도 양성과정이니까 비전공자이 꽤 있겠지? 하고 위안을 삼았었는데
그마저도 와장창 꺠졌음
26명 중 5명? 빼고 다 컴공임 ㅠㅠ
그리고 비전공자들도 그냥 쌩 비전공이 아니라
어느 정도 관련있는 전공을 하신 분들도 계셨고, 아님 다른 부트캠프 수료 후 오신 분들도 계셨음
이게 아니더라도 최소 이과계열이었는데
나만 독보적인 쌩 문과 무관전공 ★유아교육과★ (따란)
일단 거기서부터 주눅이 들었고...
강사님이 수준을 알아보겠다고 뭘 만들어보라는데...
하 나만 한글파일로 표 만들고 있었어요.^^
단축키도 모르겠고 일단 기본적인 것도 모르겠으니까 멘붕의 시간이었다.
그치만... '엄마 아빠 머리 닮았으면 잘 할 거야'라던 컴공출신 현업 개발자 부모님 말씀 하나만 믿고 정면돌파 하는 중
일단 해보는 거지 뭐! 내가 못할게 뭐가 있어! 가보자고
배운 내용
Java에 대해 본격적으로 배우기 전,
HTML,CSS,DBMS에 대해 배워보기로 함
HTML의 역사 및 HTML문서의 특징을 알아본 후,
HTML의 기본태그와 기본 문서구조를 살펴보는 시간을 가졌음
기본적인 HTML을 배운 후, css로 넘어와 HTML문서의 미적기능을 보완해보는 기술도 경험해보았음
마지막으로는 DBMS인 MySQl을 설치해보고, 간단한 database 예제를 불러내보았음
HTML
HTML= HyperText Markup Language
프로그래밍 언어가 아니라 '마크업' 언어임
마크업 - 문서의 구조(제목, 본문, 목록 등)를 "태그"로 표시
- 태그의 특징
- 쌍으로 존재 (
<br>,<hr>등은 예외) - 중첩가능 : 태그 안에 태그 포함 가능 (부모태그-자식태그)
- 대소문자 구분x : 소문자 표기가 웹 표준
- 태그 속성 : 태그는 속성을 통해 추가적인 정보보유 및 능력확장 가능
ex) <img src="이미지경로" width="100">
src, width 같은 게 속성
속성="값" 형태- 기본 태그
특정테스트 제목으로 : <h1> to <h6>
줄바꿈 : <br>
텍스트 두껍게 : <b>
링크 표현 : <a href="">
수평선 표현 : <hr>
특정 텍스트 영역 문단으로 묶기 : <p>
이미지 삽입 : <img src="">
//이미지를 넣는 경로는 1)로컬pc 2) 인터넷상의 링크
순서 있는 목록 표현 : <ol>
<ol>
<li>apple</li>
<li>banana</li>
<li>peach</li>
<li>orange</li>
</ol>
순서 없는 목록 표현 : <ul>
<ul>
<li>apple</li>
<li>banana</li>
<li>peach</li>
<li>orange</li>
</ul>
버튼 표현 : <button>
체크박스 표현 : <input type="checkbox">
입력 텍스트 박스 표현 : <input type="text">
<input type="text" placeholder="아이디를 넣으세요">
<input type="text" placeholder="비밀번호를 넣으세요">
<input type="text" placeholder="이름을 넣으세요">
// placeholder: HTML에서 input이나 textarea 안에
아직 아무것도 입력 안 했을 때 연하게 보여주는 안내문구
선택 상자(옵션) 표현 : <select>
텍스트를 두껍게하고 동시에 이탤릭체 표현: <b><i>텍스트</i></b>고전적인 html 버튼vsHTML5버튼
<input type="button" value="고전적인 버튼의 로그인">
<button>요즘스타일 버튼</button><font>태그 - 고전적 방식이라 요즘 안씀
<font color="red" size="5" face="Arial">안녕하세요!</font>
color: 글자 색 바꾸기
size: 글자 크기 조절 (1~7까지, 숫자로)
face: 글꼴 변경 (ex. Arial, Verdana)<font> 태그는 "옛날 방식"이라 지금은 거의 안 써.
→ HTML5에서 <font>는 공식적으로 "폐지(deprecated)"
지금은 CSS로 스타일을 설정하는 게 표준
shift + !문서템플릿 부르는 단축키
<!--
!DOCTYPE 선언은 이 html, 최신의 html5 버전임
스마트폰, 태블릿 등 최신의 기기에 최적화 되어있음
-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- UTF-8 : 이 페이지는 다국어를 지원하므로, 영문,한국어, 중국어 등을
넣어도 깨지지 않도록 인코딩 함 -->
<meta charset="UTF-8">
<!-- 반응형 웹페이지를 위한 viewport 설정
이 웹페이지를 스마트폰, 태블릿, pc브라우저 등 다양한 기기로
접속을 하게되면, 각 기기에 맞도록 크기가 자동 조정될 예정 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나의 제목</title>
</head>
<body>
내용을 넣기
</body>
</html>그럼 이게 등장함
HTML표 만들기
건물 <table>
각 층 <tr> (천장,바닥)
각 층의 호수는 <td> (벽)
border=두께, width=너비
colum 행, colspan 행 병합
row 열, rowspan 열 병합 *위에서 아래로만 합칠 수 있음
<table border="2px">
<tr>
<td>501</td>
<td colspan="2">502</td>
</tr>
<tr>
<td>401</td>
<td>402</td>
<td>403</td>
</tr>
<tr>
<td colspan="2">301</td>
<td>303</td>
</tr>
<tr>
<td>201</td>
<td>202</td>
<td rowspan="2">203</td>
</tr>
<tr>
<td>101</td>
<td>102</td>
</tr>
</table>
CSS
-
HTML문서의 미적기능을 보완하기 위한 기술
-
인라인CSS : 개별적용, 가장 우선순위
-
내부CSS :
<style>태그 안에 css코드 작성 가장 보편적인 적용방법 (일괄적용 가능) -
외부CSS : 스타일의 재사용성을 높이기 위해, 여러 문서에 걸쳐서 사용되는 css는 공통의 파일로 저장해 놓고 '링크'시킴
css폴더에 style.css파일을 저장했을 때,
<link rel="stylesheet" href="./css/style.css">
<!-- '.'은 나와 같은 디렉토리를 말함 -->회원가입 폼 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입 폼</title>
<style>
td{
font-size: 9px;
color: purple;
}
input{
background-color: rgb(250, 225, 229);
} <!-- 내부 css -->
</style>
</head>
<body>
<table width="500px" border="1px" align="center" > <!-- align : 정렬 -->
<tr>
<td colspan="2" align="center">회원가입</td>
</tr>
<tr>
<!-- 인라인 css (개별적용) (우선순위) -->
<td style="font-size: 9px">ID</td>
<td><input type="text" placeholder="아이디를 입력하세요"></td>
</tr>
<tr>
<td style="font-size: 9px">Password</td>
<td><input type="password" placeholder="비밀번호를 입력하세요" maxlength="8"></td>
<!-- input type="password" 쓰면 비밀번호 가려짐
maxlength 최대입력치 제한 -->
</tr>
<tr>
<td style="font-size: 9px">이름</td>
<td><input type="text" placeholder="이름을 입력하세요"></td>
</tr>
<tr>
<td style="font-size: 9px">이메일</td>
<td>
<input type="text" placeholder="메일 아이디 입력">
@
<select>
<option value="google.com">google.com</option>
<option value="naver.com">naver.com</option>
<option value="daum.net">daum.net</option>
</select>
<!-- 양자택일 라디오박스 name="" 똑같은 그룹으로 묶어줘야함 -->
</td>
</tr>
<tr>
<td style="font-size: 9px">메일 수신 여부</td>
<td>
예<input type="radio" name="receive">
아니오<input type="radio" name="receive">
</td>
</tr>
<tr>
<td style="font-size: 9px">보유기술</td>
<td>
Java <input type="checkbox">
MySQL <input type="checkbox">
Spring <input type="checkbox">
Linux <input type="checkbox">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<!-- colspan 가로(열) 방향으로 칸 합치기 -->
<button>회원가입</button>
</td>
</tr>
</table>
</body>
</html>
CSS 선택자
기본 선택자
-
전체 선택자: *{ ... } -
태그 선택자: img{ ... }, div{ ... } 등 -
클래스 선택자: .클래스명{ ... }
같은 클래스명인 여러 요소에 사용 가능
미래에 재사용 가능성이 높은 스타일에 대해 정의할 때
(참고: 폼 관련 태그에 주로 쓰이는 name은 중복 가능하지만, css 선택자 불가) -
아이디 선택자: #아이디명{ ... }
한 문서에 하나만 사용 가능
<style>
div{ /* 태그 선택자 */
background-color: red;
width: 50px;
height: 50px;
}
.box1{ /* 클래스 선택자 */
background-color: orange;
}
#box2{ /* 아이디 선택자 */
background-color: yellow;
}
</style>
<body>
<div>박스1</div>
<div class="box1">박스2</div>
<div id="box2">박스3</div>
</body>그룹 및 조합 선택자
-
그룹 선택자: h1,p,span{ ... } 처럼,로 여러요소에 스타일 적용 -
자식 선택자: #box > h1{ ... } (#box요소의 직계자식인 h1에만 스타일 적용) -
후손 선택자: #box div{ ... } (#box요소 안에 있는 모든 div태그에 스타일 적용) -
형제 선택자: h2 + p{ ... } (h2의 바로 다음 형제=인접 형제 p선택) -
일반 형제 선택자: h2 ~ p{ ... } (h2의 뒤에 나오는 모든 형제 p들 선택)
속성 선택자
-
[속성]{ ... } : 해당 속성이 있으면 다 선택
-
[속성="값"]{ ... } : 지정된 속성값과 일치하는 요소 선택
-
[속성^="값"] { ... } : 지정된 속성값으로 '시작'하는 요소선택 (속성값에 눈썹 하나^_-)
[href^="https"] {color: green;}
href가 https로 시작하는 링크만 초록색- [속성$="값"] { ... } : 지정된 속성값으로 끝나는 요소 선택
[src$=".png"] {border: 1px solid black;}
이미지 중 파일명이 .png로 끝나면 테두리- [속성*="값"] { ... } : 지정된 속성값을 포함한 요소 선택
[class*="btn"]{border-radius: 5px;}
클래스의 값 중에 btn이 포함되어 있으면 모서리 둥글둥글가상 클래스 선택자
특정 상태나 상황에 있는 요소를 선택
:hover마우스를 요소에 올렸을 때
button:hover { background: yellow; }:active요소를 클릭하고 있을 때
a:active { color: red; }:focus요소에 포커스가 갔을 때 (입력창 클릭 등)
input:focus { border-color: blue; }:first-child형제 요소들 중 첫 번째 요소일 때
p:first-child { font-weight: bold; }:last-child형제 요소들 중 마지막 요소일 때
p:last-child { font-style: italic; }:nth-child(n)형제 요소 중 n번째 요소를 선택
li:nth-child(2) { color: red; }:not()특정 조건 제외할 때
button:not(#main) {ackground-color: tomato;}가상요소 선택자
CSS로 '있는 척' 해서 꾸며줌
-
::before: 앞에 붙이기 -
::after: 뒤에 붙이기 -
::first-letter: 첫 글자 스타일 -
::first-line: 첫 줄 스타일 -
::placeholder: input 박스의 placeholder 텍스트 스타일 (입력창 회색글씨)
CSS 박스모델, inline, block
박스모델: 모든 HTML개념을 박스로 취급하는 CSS의 개념
inline과 block
모든 태그는 인라인 방식 or 블럭 방식
inline 형: 같은 수평선 상에 공존할 수 있는 속성
너비, 높이 - 적용불가
마진, 패딩 - 일부만 적용
→ 화면분할에 사용할 수 없다
block 형: 블럭 속성은 같은 수평선상의 다른 요소와 공존이 불가능
즉, '배척'하기 때문에 줄바꿈이 발생
너비, 높이, 마진, 패딩 완벽적용됨
→ 웹페이지의 레이아웃에 사용
<style>
#wrapper{
width: 800px;
height: 600px;
margin: auto;
text-align: center;
}
#header{
width: 100%;
height: 50px;
background-color: lightseagreen;
text-align: center;
}
#nav{
width: 200px;
height: 400px;
background-color: lightcoral;
float: left;
}
#content{
background-color: lightyellow;
width: 600px;
height: 400px;
float: left;
}
#footer{
background-color: lightblue;
width: 100%;
height: 50px;
clear: both;
text-align: center;
}
</style><body>
<div id="wrapper">
<div id="header"><h1>Header</h1></div>
<div id="nav">
<h2>Navigator</h2>
<p>Link1</p>
<p>Link2</p>
<p>Link3</p>
<p>Link4</p>
</div>
<div id="content">
<h2>Main Content</h2>
<p>This is the main content area.</p>
</div>
<div id="footer">
<p>Footer content</p>
</div>
</div>
</body>MySQL DML-데이터 조작어
DML : Manipulation 조작어
테이블에 데이터를 넣거나, 수정 및 삭제할 때 사용
테이블 복사하기
create table emp2 as select *from emp;
1) 부서 정보에 다음의 데이터를 넣어보기 (insert)
부서번호 : 50
부서명 : SECRET
부서위치 : SEOUL
insert into dept2(deptno,dname,loc) values(50,'SECRET','SEOUL');
//순서 맞춰서 쓰기
2) 레코드 1건 삭제 (delete)
delete from emp2;
//모든 걸 다 지움, where문 넣어야함
급여가 800인 사원 지워보기
delete from emp2 where sal=800;
10번 부서 사원들 모두 삭제
delete from emp2 where deptno=10;
3)레코드 수정 (update)
7788사원의 업무를 한국어 '분석'으로 수정
update emp2 set job='분석' where empno=7788;
update emp2 set ename='회장',sal=9000, comm=5000 where empno=7839;
여러가지 수정은 , 콤마 사용
set은 한 번만 씀느낀 점
공부기록 밀리니까 답이 없다... 밀리지 않게 주의
저걸 배울 당시에는 진짜 답답하기도 하고(초면인 말들 투성이라서) 그야말로 멘붕이었는데 그래도 며칠 해봤다고 회고하는 지금은 당시에 잘못 기록했던 것들도 스스로 수정하고, 예시도 내가 만들어서 써보기도 한다.
역시 새로 배운 것들은 처음엔 어설프고 낯설지만, 시간이 지나면 점점 농익어서(?) 이해가 깊어지게 되는 것 같다. 이 공부기록은 그걸 도와주고, 느낄 수 있게 해주어 참 좋다. 다만 시간을 생각보다 많이 잡아먹어서 그게 걱정이다...
익숙해지면 정리하는 시간도 줄어들겠지?
