공부/Digital Twin Bootcamp

TIL_201216_Frontend

2021. 12. 16. 17:51

유념사항

혼자 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
'공부/Digital Twin Bootcamp' 카테고리의 다른 글
  • TIL_211220_Frontend
  • TIL_211217_Frontend
  • TIL_211215_BACKEND
  • TIL_211214_BACKEND
Ail_
Ail_
Ail_
log
Ail_
  • 분류 전체보기 (182)
    • 사설 (11)
      • 강연 (5)
      • * (3)
      • 회고 (3)
    • 공부 (161)
      • Just do it (3)
      • TIL (66)
      • Game Bootcamp (31)
      • Digital Twin Bootcamp (39)
    • 노션 (3)
    • 프로젝트 (23)
      • Game Bootcamp (1)
      • Digital Twin Bootcamp (21)
      • 경기청년 갭이어 (1)

인기 글

최근 글

태그

  • 한입 크기로 잘라 먹는 타입스크립트
  • SQL 첫걸음
  • 노션
  • 회고
  • 오블완
  • SQL첫걸음
  • 템플릿
  • 개발일지
  • Chat
  • Do it! 자료구조와 함께 배우는 알고리즘 입문 : 파이썬 편
  • 공격
  • 티스토리챌린지
  • 유니티
  • 부트캠프
  • notion
  • unity
  • TypeScript
  • 인터랙티브 웹 UX·UI
  • mysql 설치
  • C#
  • 데이터베이스
  • 유니티 게임 개발
  • 이펙트
  • 배포
  • 플레이어
  • 대시
  • 멋쟁이사자처럼
  • node.js
  • 피격
  • 개발회고

최근 댓글

전체
오늘
어제
hELLO · Designed By 정상우.
Ail_
TIL_201216_Frontend
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.