첫 날에 HTML의 시맨틱 태그에 대해 정리한 것이 많은 도움이 되었다. 또한 HTML5의 역사에 대해서도 알고 있다 보니 오늘 강의를 더 빠르게 들을 수 있었던 것 같다!
또한 전날 질문했던 세로 정렬에 대해 display의 flex 속성이 있다는 것을 알게 되어 정리해보는 계기가 되었다.
오전에 멘토링을 하면서 FE 개발자로 커리어를 찾아가는 방향, 신입 개발자의 마인드, 공부 방향성(특히 html과 css 관련) 등을 러프하게 여쭤볼 수 있었다. 진로에 고민이 많은 시기인데 첫 멘토링이었지만 값진 시간이었다! 다음번에는 이력서 정도를 들고 가서 더 세부적으로 프로젝트 정리 + 깊이에 대한 고민? 을 여쭤보고자 한다.
vertical-align : middle
를 적용하거나 부모에 display :flex
+ 본 요소에 align-item:center
두개를 적용하니 세로 정렬이 되었다. time에 display: flex
와 flight-icon에 align-item: center
를 줬더니 마진도 적용되고 중앙정렬도 되었다!
display에 대해 찾아보면서 이해해봐야겠다.
display : flex
어떤 방향이든 위치할 수 있고 동적으로 변경 가능한 순서를 지정할 수도 있고, 가용한 공간 내에서 크기와 위치를 자동으로 조정하기도 한다.
서로 링크로 연결된 문서 (Hypertext)를 만들 때 쓴다. 내용 뿐만 아니라 추가적인 정보 표시(Markup)할 때 쓰는 언어(Language)이다.
<video src = "codeit.mp4" **autoplay**>
다 외우려고 하지마라..😅
https://ofcourse.kr 여기나 구글링 하면서 찾아보면서 그때그때 사용 것
href
사용해서 링크를 걸고 이동한다.
/
만 붙여도 이동 가능하다. why??.../
의 경우 이름처럼 취급한다. ./
는 현재 폴더, ../
는 상위 폴더이지만 3개는 의미가 없다. 따라서 이름으로 취급된다./
는 최상위 폴더를 의미한다. 따라서 a/b/c폴더의 index.html에서 a 폴더의 about.html로 이동할 때, href = '/about.html'
이라고 작성하면 된다.****특정 content의 위치를 가르키기 위한 값 - 목차만들때 쓰면 좋음.
href = "#아이디값"
으로 사용 가능#id
값으로 이동target
으로 창 다루기"_blank"
새창으로 열기"_self"
현재창으로 열기(기본값)"내가정한이름"
을 적었을 때 같은 이름을 가진 링크를 누르면 해당 창으로 열페이지 연결 외 다른 동작을 하는 것
href = "**mailto**:이메일주소"
사용tel:<전화번호>
<strong>
: 굵게 / <em>
억양 표현. 기울이기<s>
취소선<blockquote>
(긴글- 들여쓰기) or <q>
(짧은글-“”가 생김)<sub>
or 위 <sup>
<pre>
<ul>
, <ol>
ol
의 경우type
속성으로 기호 변경 가능list-style: none
등을 사용해서 기호 삭제 or 변경 가능<li>
<table>
로 전체 감싸기, <tr>
행 <td>
열<thead>
/<th>
/<tbody>
/<tfoot>
border-collaps:collaps
: border-간격 없애기border-spacing: ??px
: 테두리 간 간격 직접 조정하<table>
, <th>
, <td>
에 적용 가능. 즉 테이블 전체 혹은 각 셀마다 테두리를 정할 수 있다.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"
등으로 유형 지정 가능_<button>
은 form안에 있으면 기본적으로 눌렀을 때 전송함?name=입력값&name2=입력값2....
을 붙여서 보냄 → GET 방식<form action="데이터를 보내고자 하는 현재주소가 아닌 다른 주소">
가능
<Requst>
를 보낸다.<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>
로 쓰이는데 이는 가져와 대체되는 것이 아니고, 이 경우 페이지 파싱이 멈추지 않습니다.
<meta ~>
property = og:~~
- 미리보기를 보여줄 때 주로 사함a
-z
, A
-Z
)', '밑줄(_
)' 혹은 달러 기호($
)'로 시작해야한다.어려운 점이 딱히 없었다! 이미 알고 있던 내용을 정리하는 느낌이라 재미 있었다~
코테에 대한 미련이 있는데.. 하루에 한 문제 정도라도 풀어봐야겠다.
아, 고민이 있는데 FE로 커리어를 쌓고 싶은 만큼, 지금까지 python으로 풀었던 알고리즘을 js로 푸는 법을 연습 or 완전 전향? 해야할 지 고민이다. 물론 vanilla js를 모르는 만큼.. 더 고생하겠지만..? 배우면서 서서히 주사용 언어를 바꿀지.. 고민이다. 다음 멘토링때 물어볼 것!