[TIL] HTML 핵심 개념과 JS 왕기초

오늘의 나는 무엇을 잘했을까?

1. 첫 날에 HTML의 시맨틱 태그에 대해 정리한 것이 많은 도움이 되었다. 또한 HTML5의 역사에 대해서도 알고 있다 보니 오늘 강의를 더 빠르게 들을 수 있었던 것 같다!

2. 또한 전날 질문했던 세로 정렬에 대해 display의 flex 속성이 있다는 것을 알게 되어 정리해보는 계기가 되었다.

3. 오전에 멘토링을 하면서 FE 개발자로 커리어를 찾아가는 방향, 신입 개발자의 마인드, 공부 방향성(특히 html과 css 관련) 등을 러프하게 여쭤볼 수 있었다. 진로에 고민이 많은 시기인데 첫 멘토링이었지만 값진 시간이었다! 다음번에는 이력서 정도를 들고 가서 더 세부적으로 프로젝트 정리 + 깊이에 대한 고민? 을 여쭤보고자 한다.

오늘의 나는 무엇을 배웠을까?

[1] 전날 img 세로 정렬에 대한 답변! (feat. CSS)

vertical-align : middle 를 적용하거나 부모에 display :flex + 본 요소에 align-item:center 두개를 적용하니 세로 정렬이 되었다. time에 display: flex와 flight-icon에 align-item: center를 줬더니 마진도 적용되고 중앙정렬도 되었다!

display에 대해 찾아보면서 이해해봐야겠다.

display : flex 어떤 방향이든 위치할 수 있고 동적으로 변경 가능한 순서를 지정할 수도 있고, 가용한 공간 내에서 크기와 위치를 자동으로 조정하기도 한다.

[2] HTML의 개념

서로 링크로 연결된 문서 (Hypertext)를 만들 때 쓴다. 내용 뿐만 아니라 추가적인 정보 표시(Markup)할 때 쓰는 언어(Language)이다.

• True or False를 속성 값으로 가지는 속성은 이름만 적는다. 이름을 적을 경우 속성 값은 참이 되어 적용 된다. 안적으면 기본은 false
  • ex) <video src = "codeit.mp4" **autoplay**>

다 외우려고 하지마라..😅
https://ofcourse.kr 여기나 구글링 하면서 찾아보면서 그때그때 사용 것

링크

href 사용해서 링크를 걸고 이동한다.

링크의 상대 주소

• index.html은 / 만 붙여도 이동 가능하다. why??
• .../의 경우 이름처럼 취급한다. ./는 현재 폴더, ../는 상위 폴더이지만 3개는 의미가 없다. 따라서 이름으로 취급된다.
• /는 최상위 폴더를 의미한다. 따라서 a/b/c폴더의 index.html에서 a 폴더의 about.html로 이동할 때, href = '/about.html'이라고 작성하면 된다.

url fragment

****특정 content의 위치를 가르키기 위한 값 - 목차만들때 쓰면 좋음.

• 태그의 id 속성에 넣으면 된다.
• 사용할 때는 href = "#아이디값"으로 사용 가능
• #id값으로 이동

창 다루기

• 속성 target으로 창 다루기
  • "_blank" 새창으로 열기
  • "_self" 현재창으로 열기(기본값)
  • "내가정한이름" 을 적었을 때 같은 이름을 가진 링크를 누르면 해당 창으로 열

URL Scheme

페이지 연결 외 다른 동작을 하는 것

• 이메일 보내기 : href = "**mailto**:이메일주소" 사용
• 전화 걸기 tel:<전화번호>

MarkUp

• 강조 - <strong> : 굵게 / <em> 억양 표현. 기울이기
• <s> 취소선
• 인용: <blockquote>(긴글- 들여쓰기) or <q> (짧은글-“”가 생김)
• 첨자 : 아래 <sub> or 위 <sup>
• html 코드 그대로 보여주기 : <pre>

리스트

• <ul>, <ol>
  • ol의 경우type 속성으로 기호 변경 가능
  • css 속성의 list-style: none 등을 사용해서 기호 삭제 or 변경 가능
• <li>

테이블

• <table>로 전체 감싸기, <tr> 행 <td> 열
• <thead>/<th>/<tbody>/<tfoot>
• css - border-collaps:collaps : border-간격 없애기
  • border-spacing: ??px : 테두리 간 간격 직접 조정하
  • <table>, <th>, <td> 에 적용 가능. 즉 테이블 전체 혹은 각 셀마다 테두리를 정할 수 있다.

멀티미디어s..

• 비디오의 경우 autoplay를 넣게 되면 사파리에서는 동작하지만 크롬에서는 안한다. 크롬에서 하고 싶으면 음소거 기능인 muted와 함께 사용해야한다.
• controls는 재생바 등을 보여주게 된다.
• 오디오의 경우에는 autoplay를 크롬에서 적용되게 하는 방법이 없다.
• <iframe>은 다른 HTML 문서를 문서 안에 접어넣을 때 사용한다. 인라인 프레임이라는 뜻.

<form>

• <input id="아이디값">
  • <label for="아이디값"> 으로 하거나 label로 input을 감싸면 연결됨
    • 인풋 설명
  • <input name="photos" type="file" mutliple accept=".png,.jpg"> 여러 개 선택, 허용할 확장자들 지정 가능하다.
    <input name="avatar" type="file"> 한 개만 선택
  • <input type="number" min="100" max="1000" step="100"> min과 max를 벗어난 숫자 입력 후 버튼 클릭 시, 전송되지 않고 경고(안내문?)
  • type=”range”를 넣고 min max를 정해주면 범위 내에서 좌우로 움직이는 바가 생긴다!
  • <select>, <option> 태그는 선택 토글
  • 긴 글 인풋은 <textarea> 태그로
  • placeholder 값이 비어있을 때 설명
  • required 반드시 입력해야할
  • autocomplete 자동완성 (="on"/"email"/"tel" 등으로 유형 지정 가능_
• name 속성으로 데이터를 전송할때 사용할 이름을 명시할 수 있음
• <button> 은 form안에 있으면 기본적으로 눌렀을 때 전송함
  • type으로 button(아무동작X), submit(전송), reset 등으로 동작을 바꿀 수 있음
• form은 데이터를 전송할 때 주소 끝에 ?name=입력값&name2=입력값2.... 을 붙여서 보냄 → GET 방식

action

<form action="데이터를 보내고자 하는 현재주소가 아닌 다른 주소"> 가능

method 속성

• 데이터를 전송할 때 <Requst>를 보낸다.
• GET(데이터를 받을 때 사용)과 POST(데이터를 보낼 때 사용) 등등..
  • GET : response로 데이터를 받기 위해 request를 보내는데 url에 붙여서 보냄
  • POST : 데이터를 보내고 response로는 성공, 실패를 받음

link, script

<link rel="stylesheet" href="style.css">

<script src="like.js"></script>

→ 어제 href와 src의 차이점에 대해 팀 미션으로 찾아보고 공유했다.

src는 어떤 외부 자료(이미지,오디오,비디오)를 해당 웹페이지에 가져오는 것입니다. 해당 파일을 실행하겠다는 의미입니다. href의 경우 가져오는 굿이 아니라 특정한 문서를 참조하겠다는 의미입니다. 따라서 src는 <img>, <script> 등과 함께 쓰여 리소스를 가져와 replace 되는 용도로 쓰입니다. href의 경우 <a> 태그 등과 쓰여 외부 링크를 연결해줍니다. 따라서 href가 사용된 경우 그 소스를 연결하기 위해 페이지파싱이 멈추지 않지만 src를 사용한 경우엔 브라우저가 파일을 가져오고 컴파일하고 실행할 때까지 페이지의 로드 및 처리가 일시 중지됩니다. css 파일의 경우 <link href> 로 쓰이는데 이는 가져와 대체되는 것이 아니고, 이 경우 페이지 파싱이 멈추지 않습니다.

[3] 의미있는 HTML

메타데이터 <meta ~>

• 데이터를 위한 데이터
• openGraph : property = og:~~ - 미리보기를 보여줄 때 주로 사함

시맨틱 태그를 사용하는 이유

1. 검색 엔진 최적화(SEO)
2. 웹 접근성 (Web Accessibility = A11y)
3. 클린 코드 - 개발자의 생산성을 높이는데 도움이 됨!

[4] JS 왕기초

추상화란?

• 복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 개념 또는 기능을 간추려 내는 것
• 즉 복잡한 것들을 목적에 맞게 단순화 하는 것

JavaScript 변수 작명 가이드

• 필수
  1. 식별자는 '문자(a-z, A-Z)', '밑줄(_)' 혹은 달러 기호($)'로 시작해야한다.
  2. 대문자와 소문자를 구별한다.
  3. 예약어를 사용하면 안된다
     
     
• 권장
  1. 의미 없는 이름을 사용하지 않기
  2. 너무 추상적인 이름 XX (ex. name) → 구체적으로 쓰기
  3. camelCase로 쓰기 → JavaScript 컨벤션을 찾아볼 것

오늘의 나는 어떤 어려움이 있었을까?

• 어려운 점이 딱히 없었다! 이미 알고 있던 내용을 정리하는 느낌이라 재미 있었다~

• 코테에 대한 미련이 있는데.. 하루에 한 문제 정도라도 풀어봐야겠다.

• 아, 고민이 있는데 FE로 커리어를 쌓고 싶은 만큼, 지금까지 python으로 풀었던 알고리즘을 js로 푸는 법을 연습 or 완전 전향? 해야할 지 고민이다. 물론 vanilla js를 모르는 만큼.. 더 고생하겠지만..? 배우면서 서서히 주사용 언어를 바꿀지.. 고민이다. 다음 멘토링때 물어볼 것!

내일의 나는 무엇을 해야할까?

• UI에 대해서 배우는 날이다! 한번도 제대로 공부해본 적 없는 데 너무 기대된다ㅎㅎ figma를 자유자재로 사용할 수 있게 되었으면 좋겠다!
• Weekly Mission을 90% 완성 시켜야 하는 날이다. html과 css를 자유자재로 사용하면서 열심히 만들어 볼 예정~