유념사항
혼자 vi 편집기 공부
Docker 공부
WSL 사용 X(의미 없음)
개발 공부 정리 시 markdown 유용(stackedit으로 html 파일로 작성 가능)
오늘은 html을 배웠다. html은 오류를 띄우지 않고 그냥 안하거나 제멋대로 작동하니 주의해야한다.
구성요소
- 태그(tag) 모든 태그는 "시작태그", "종료태그"로 구성된다.(예외:hr, br 등)
- 요소(element) 실제 화면에 출력되는 텍스트 부분, 태그 사이에 있다.
- 속성(attribute) 태그의 속성을 부여한다. (형태, 색 등) 여러 속성이 존재할 수 있다. 띄어쓰기로 구분한다.
- 값(value) 속성에 할당되는 값을 나타낸다. 문자는 따옴표""로 감싸서 표시, 숫자는 그냥 표시한다. 숫자도 써도 되는데 차이가 있다. 그냥 num=5는 더하면 연산값이 나오지만 nun="5"는 문자열이 붙어버린다(""가 붙어서 문자열이 되었기 때문)
- <!DOCTYPE html> : 타입 선언
- <html></html> : html 문서의 시작과 끝을 알림
- <head></head> : 해당 문서의 메타 정보
- <tiltle></title> : 해당 문서의 타이틀 정보
- <body></body> : 실제 내용이 들어가는 부분(실제로 보임)
- <meta>: 메타 정보를 저장한다(브라우저에 특정 정보를 전달하거나 검색 엔진에 해당 컨텐츠 안내)
(검색 엔진에 수집되는 content의 경우 기획자 담당이지만 만약에 기획자가 빼먹으면 물어보는게 좋다...)
- refresh 기능으로 자동 이동(ex 몇초후 이동) 가능하지만 요즘엔 그냥 프록시 쓴다.
- style은 안에 속성을 이어서 쓸 수 있다.
- <h> (주로 제목) 1-6까지 있고 속성을 통해 색, 크기 변경 가능
- <p> (문단) <br(실사용안함)><hr><pre> 등등...
- 주석처리comment <!-- 내용안보임 --> 중요한 내용 노출 금지 = 남기지 않는 게 좋다
- Link : <a>a태그, anker태그 /속성이 반드시 있어야한다
중요! 절대경로 : 언제 어디서든 통하는 경로(full주소)
상대경로 : 내 서버에서만 통하는 주소
상위 경로
- . 현재
- .. 상위
- / dir구분
- | window dir 구분
=> ../ (상위로 간다) ../../(상위의 상위로 간다)
==> 해킹할 때 이걸 이용해서 root까지 찾을 수 있음. 따라서 처리를 해줄 필요가 있다
- img : <img src="image 주소"> alt, width, height 설정 가능
- List : <ul> 번호 없는 리스트 unorderd list
<ol> 번호 있는 리스트 ordered list
여기서부터 중요!
- Table(=표)
<table></table> : 표를 나타내는 태그
<tr></tr> : 가로줄을 나타내는 태그(row)
<th></th> : 각 항목의 제목head을 나타내는 태그
<td></td> : 각 항목을 나타내는 태그(data)
제일 중요한 건 tr과 td로 구성되어 있다
border : 속성 - 테두리 => 많이씀
table 안에 table 넣기 가능
- div(중요한 개념)
: 컨테이너로써 가로길이의 모두를 감싼다.
영역 나눌 때 엄청 많이 쓴다.
어디까지 감싸졌는지 테스트할 때 style 많이 써야한다(<div style="border: 1px solid 색상">
div 안에 div 넣는 거 가능하다! 그래서 어디까진지 잘 파악하는 게 중요하다.
(중요!) 차곡차곡 쌓인다. 옆으로 나열하는 건 불가능(...하지만 부트스트랩은 해준다)
- span
: 인라인 컨테이너, 구문 컨텐츠의 스타일을 적용하는 용도 -> 스타일을 주고 싶을 때 span으로 감싸면 됨
- style : 종류가 많아서 그때그때 필요한 거 검색해서 사용
많이 쓰는 두 가지
margin : margin을 준다
padding : 안쪽에 margin을 준다
- Color name
: 색의 이름을 그대로 사용할 수 있다.
- RGB(아주 익숙하다)
: 빛의 삼원색(xxx.xxx.xxx)
- CMYK(더더욱 익숙하다)
: 색의 삼원색
- HEX(16진수)
: 0~9 + A~F
RGB를 16진수로 표현했다. 한마디로 디자인 할때 쓰던 컬러코드다.
RGB보다 이걸 더 많이 쓴다.
- size
: 보통 가로width와 세로height 크기를 제어할 수 있다.
- style
: 태그별로 스타일을 정의할 수 있다.
하지만 보통 태그에 잘 안주고 클래스에 준다. 전역으로 적용되어 제어가 힘들기 때문
- class
: 스타일을 class로 내 마음대로 만들 수 있다.
class는 .으로 표시한다.
<span class="style명">
이름이 겹치면 안된다!
- style 우선순위 주기 !important
: !important를 사용하면 해당 스타일을 우선적으로 적용하게 되어 있다.
!important를 전부 사용하면 없는 것과 동일한 효과가 발생 한다.(떡칠 주의)
쓸 때 결과 확인 필수
!중요 html을 배운 이유
- Form(Input Form)
: 사용자가 입력한 값을 서버로 전송할 때 사용되는 입력폼 형태이다.
name과 value값을 서버에서 받는다.
- text
: 가장 일반적인 형태의 입력폼으로 text를 입력받을 수 있다.
<input> 태그는 닫는 태그가 없다.
이름: <input type="text" name="userid">
- password
: 입력 값이 ****형태로 보인다.
비밀번호: <input name="password" type="password">
- radio
: 하나만 선택해야 하는 상황에서 사용
checked로 기본값 세팅 가능
name 값이 동일한 것끼리 묶인다.
value 값이 선택한 값이 된다.
- checkbox
: 여러가지 선택 사항이 있는 경우 사용
checked로 기본값 세팅 가능
- select
: 드롭다운 버튼의 선택 사항인 경우 사용한다.
기본적으로 한개만 선택하도록 되어있지만 다중 선택도 가능하다.
selected로 디폴트값 가능
- textarea
: 입력받을 내용이 한줄이 아닌 경우 멀티 라인의 입력을 지원한다.
input과 다르게 닫는 태그가 있다.
-button
: 버튼은 보통 onClick 이벤트와 함께 사용한다.
<input type="button" onclick="alert("빵!")" value="button">
- iframe
: 웹페이지 화면에 작은 창을 내어서 다른 페이지나 다른 사이트의 내용을 볼 수 있다.
요즘 잘 안쓴다. 최후의 수단 느낌
style="border = 0px solid black"으로 border를 없앨 수 있다
DB 지식
Oracle - 겁나 비쌈 "sun" 회사 인수 => MySQL이 오라클꺼 => MySQL 제작자가 나와서 MariaDB 만듦 => 오픈소스임
Ms-SQL - ms가 db업체 샀음
PostgreSQL - 잘 안쓰임(특이한 이중구조 Schemas)=> DB할 때 배웠음!
MariaDB - 오픈소스, 첨엔 MySQL이랑 똑같이 가다가 독자노선을 걷기 시작
- 데이터베이스 공부할 때 중요한 건 '어떤 제품이 있는가' -> 제품마다 성격도 코드도 내장함수도 다름 그러나 하나 할 줄 알면 다른 것도 결국 기능은 비슷하기 때문에 비교적 쉽게 배울 수 있음
코드를 복붙할까 칠까
- 일할 때 변수는 보통 복붙하는 걸 추천(오타나면 안되니까)
하지만 공부하며 직접 쳐봐야함!
어디에 무슨 태그를?
- 보통 특별한 태그가 head로 들어가고 나머지 태그는 body에 들어감
느낀 점
백엔드 할 땐 정말 네트워크 빼고(겉핥기식으로만 알고 있었지만) 낯선 것들의 연속이었는데...오늘 배운 html은 초등학생 때 방과후 수업으로 메모장으로 홈페이지 만들었던 기억도 나면서 반가웠다.
왜 db부터 배우고 백엔드, 프론트엔드 순서로 배웠는 지 알 것 같다...
상위 경로로 들어가 해킹하는 게 흥미롭다. 지금은 어렵지만 예전엔 얼마나 무법천지였을지...
버튼 누르는 거 재밌다
'공부 > Digital Twin Bootcamp' 카테고리의 다른 글
| TIL_211221_Frontend (0) | 2021.12.21 |
|---|---|
| TIL_211220_Frontend (0) | 2021.12.20 |
| TIL_211217_Frontend (0) | 2021.12.17 |
| TIL_211215_BACKEND (0) | 2021.12.15 |
| TIL_211214_BACKEND (0) | 2021.12.14 |
