[개발 강의] D3/ HTML 완료 , 개념 정리
오늘자 HTML 강의가 끝났. 인상 깊었던 건
파일 첨부가 제법 그럴 듯 했다는 거 ㅋㅋ
6개월 간의 개발 강의중에 제일 쉬운부분(??)인 HTML 부분이 오늘 끝났다. 자바 들어가기 전에 일단은 쉬운 프론트엔드 단 부터 공부하나보다. 강의는 전체적으로 많이 어렵진 않았고 나름 재밌었다.
TMI. 생각보다 놓치는 부분도 많고, 타자 한번 절면 따라 잡느라 고생함. 전에 10시간이나 잤는데도 불구하고 잠옴... 진짜 왜 잠이 오냐고!!! 말이 되냐고 ㅋㅋ ㅠㅡㅠㅡ 짜증
여하튼 간에 개발자 블로그를 하고 싶기도 하고 나름의 공부 흔적으로 남겨놔야 나중에 기억도 나고 누군가에게 말해줄 때도 도움이 될 듯하여 처음 강의를 기록하고자 한다. 아마 3일이나 많으면 일주일 간격으로 올라갈거 같기도 하며 한 1달 이라도 지속됐으면 좋겟네 ㅋㅋ
이제 본론으로 돌아와서 HTML의 사용법, 중요한 점, 오늘의 퀴즈 , 마무리 정리를 해보고자 한다.
1. 사용법
HTML의 코드들은은 문법이라기 보다 그냥 직관적인 모습을 나타내기 위한 그림에 가깝다. 보여주고 싶은 부분을 직접적으로 보여주기 위해 코드를 적으면 바로 나타내준다.
이러한 태그들을 넣어줘서 나타내고자 하는 것들을 입력해주면 된다. 이중에서 meta는 <meta charset = "UTF-8"> 으로 이 용 되는 듯 하고 <div>는 배웠긴 한데 뭔지 잘 모르겠다. 현재.. ㅋㅋㅋ css에서 나오는 듯 하고 어떤 지정이었던거 같기도 하다. <a>는 문단을 뜻하고,<span>은 <colspan> <rawspan> 등에 쓰이는건가 싶다. ㅋㅋㅋ 참고로 <colspan> 은 표에서 자리를 넓혀가는 걸로 사용된다. col = 기둥이라는 뜻 이고 span은 늘리는거!
# 틈새 오늘자 메모
| 오늘 배운거 간단 메모 | 모르는거 | 오늘자 질문 |
| 1.h 우선순위(1순위)에 따라 커짐 1->2->3 2. 단일태크는 닫아줌!! <hr/> -> 가로줄을 그어 줌 = 경계선 : 태그는 열/닫 태그가 있고, 단일 태그가 있다. 3.하나의 문단을 나누고 싶을때 p 태그를 사용한다. 단순하게 줄을 나누고 싶을 경우 br 태그를 사용. 4. <hr/> , <br/> 차이 !!! -> hr은 가로선 그어주는거고 br은 은 'enter'랑 같음 5. <del>, <ins> -> 이게 뭐구? 6. 싱글쿼터 = ' , 더블쿼터 = ", 아스타리카=* ? ㅋㅋㅋ 불리는 이름이 다르다고 한다. 8. 파이프라인 = | = 버티컬 바?? maybe 9. ctrl + / => 주석 달기!!!!! 10. ./ = 현재 ../ = 위에 있는 폴더로 |
1. meta 이거 먼지?? 정보의 정보? 2. range는 input 넣는데 meter 랑 progress 는 안넣는 이유? - 그냥 뭐 안넣겠지.. 움직이는 요소가 아니라서 그런가 3. input 는 받는 역활 4. form 들어가는거!!! 필요?? 과 submit 폼에 있어야 서버로 보내짐 5. style을 왜 넣는다고 했지ㅏ?? # 나중에 다시 보면 해결 되겠지? |
1. html 약자 2. ifame 3. input는 어떤 태그인지 4. input 3가지 5. input 3가지 설명 6. form 설명 7. 액션, 메소드(겟, 포스트) 8. a target에 옵션값? -> 패런트 확실히 설명 9. colspan, rawspan |
2. 중요한 거 + 오늘자 질문
1. 프론트엔드(Front end)는 : 사용자의 요청을 위한 화면 또는 결과를 보여주는 화면 구성,
서버사이드(Server side)는 : 요청에 대한 '실제 처리'를 담당
데이터베이스(Data Base)는 : 필요한 데이터를 저장 하거나 가져오는거
2. HTML은 Hyper Text Markup language 의 약자이다. 하이퍼가 앞에 보이는 텍스트를 마크업으로 찍어내는 언어라는 뜻임.
3. I- Frame TAG 는
1) 다른 페이지를 불러오는 기능을 함
2) 해당 사이트가 허가해야 불러와짐
4. Input TAG
사용 이유: 서버에 보낼 내용을 입력 받을 때 사용 한다.
사용법 :
<input>은 하나의 단일코드로 되어있으며 저렇게 어떤 기능을 선택할 수 있는 'type' 그리고 값의 이름인 'name' 그리고 값이라고 할 수 있는 ' value로 보통 이루어져 있다. 'name'과 'value'는 필수이고 나머지는 선택적으로 넣으면 된다. 'placeholer' 태그는 저기 비밀번호를 입력하세요와 같이 회색갈 글씨 나타낼 때 쓴다.
결국 정리하자면
type : 이 부분이 변경되며 모양과 속성들이 변경함
name : 서버로 보낼 때 값(value) 에 대한 이름을 의미한다고 함.
value : 서버로 보내지거나 사용자에게 보여질 값 (내가 이해 했을 때 큰 집합과 같은 의미라고 생각했음 예를 들면 큰 A 집합에 딸린 a,b,c 들과 같은?)
5. Form TAG는 서버에 정보를 보낼 때 '필수'로 필요한 아이이다. 그리고 submit 이 있어야 전송이 가능하다고 한다. form에는 action과 method 라는 속성이 있다.
action : 데이터를 전달할 서버의 이름
method : get과 post로 나눠지며 get은 url에 정보가 다 보여지며, post는 정보가 보여지지 않는다.
6. 표에서 <colspan> 과 <rowspan>의 차이
표 = <table>태그에서 표 만들기는 어렵지 않다. 기본 <tr> <td>를 사용해서 층(줄, 기둥) = row = <tr>과, 칸 = col = <td> 를 이용해서 표를 만들어 주면 된다. (* col 은 column의 약자로 기둥 = 줄이라 생각하면 편하다.)
하지만, 표합치기와 같이 표 중에서도 두 칸 세 칸 이상을 사용하는 표의 모습도 있을 것이다. 그럴 때 필요한 것이 <colspan> 과 <rawspan>인데 사용법은 다음과 같다.
1. 합칠 칸이나 층에서 필요없는 부분은 지워주거나 주석 처리 한다.
2. 넓혀줄 부분 = (없애준 부분) 에 맞춰서 <tr colspan = '3'> 의 값을 주어주면 표 합치기가 완료된다.
* 주의할 점은 col 인지 raw가 기준이 익숙치 않아서 헷갈린다는 점!!! <colspan>은 그 기둥을 합쳐줄거 같지만 그것과 반대로 기둥들을 합쳐줘서 가로로 넓혀 준다는 것을 정말 정말 잘 기억해 주자!! (사실 이때까지 잘 못 알고 있어서 강조하는 거 ㅋㅋ)
마무리로 오늘은 너무 잠이와서 여기까지만 해야겟움
시간이 남으면 다음에 또 하기로 하겠음
그럼 드가자~
홀홀