데이터를 웹사이트로 전송 할 때 사용하는 것.

ex) 회원가입 페이지 내 내용을 적을 수 있는 공간

인풋, 라벨, 버튼 등으로 구성되어 입력을 받을 수 있음

<form>
   <label><!- 첫번째 ->
      <input> 
   </label>
   <label for="signup-email">이메일</label><!-	두번째 ->
   <input id="signup-email">
</form>

form 안에 다른 입력 태그들을 넣을 수 있음

첫번째 쪽 라벨처럼 인풋을 감싸서 라벨 클릭 시 인풋박스에 커서가 생기도록도 할 수 있고,

두번째 쪽 처럼 인풋박스의 id와 라벨의 for안을 동일하게 하면 첫번째와 같은 결과를 낼 수 있다.

<input type="" name="" id="">

name 

- 인풋의 데이터에 이름을 부여해주는 것

- 인풋박스에 네임을 준 뒤 값을 입력 후 엔터를 하면 주소에 값이 넘어가는 걸 볼 수 있음

ex ) "테스트" 입력 후 엔터. -> 주소창 주소 ?뒤에 "name값=테스트" 값으로 넘어감

type

password : 작성시 *** 과 같이 보여짐

email :  폼 전송을 누를 때, 이메일 형식이 다른 경우 안내 문구를 보여줌

radio : name을 동일하게 해야 하나로 묶여서 동작(하나만 선택)된다. 

(첫번째. 남성만 라디오 버튼 /두번째, 둘 다 라디오. 네임 동일 / 세번째, 둘 다 라디오. 네임 다름)

placeholder : 값이 없을 떄 보여주는 텍스트

- placeholder 의 디자인을 바꾸려면 CSS 선택자로 ::placeholder 사용

required : 반드시 입력해야 하는 값. 비어있다면 전송되지 않음.

autocomplete : 예전 입력값 보여주는 인풋. 브라우저에 저장된 값을 불러와줌.

- autocomplete="on"  을 해야 동작. email을 채워넣게 해주고 싶으면, autocomplete="email" 전화번호를 넣게 해주고 싶으면 tel로 값을 넣어서 사용.

그 외 다양한 속성값 알아보기-MDN문서 이동

submit : 폼 안의 데이터 전송

reset : 폼 안의 내용 초기화

<form action="주소" method="post">

action  : 폼에서 현재 페이지에 쿼리문자열을 붙여서 보내는데, 다른 주소를 사용하고 싶을 때 사용.

method : 데이터 전송 시 리퀘스트 속성. post 또는 get

  - post : 데이터를 보낼 때 사용

  - get : 데이터를 받을 때 사용.

단, 사진 파일 업로드 같이 파일 크기가 큰 경우 post로 보내기도 함

🌱 이미지

<img src="이미지경로.jpg" alt="이미지 정보 텍스트" width="300" height="400">

src : 이미지 주소를 정해줌

alt : 사진에 대한 정보를 텍스트로 적을 수 있음

1. 코드만 보고도 어떤 사진인지 알 수 있음

2. 시각장애인을 위해 해당내용에 있는 내용을 읽어줌

3. 이미지 로딩 실패시 화면에 어떤 사진이었는지 유추할 수 있음

width, height 를 통해 이미지 사이즈 조절이 가능(단위 없이 써도 px로 인식).

css를 통해서도 변경 가능

🌱 비디오

<video scr="" autoplay muted controls  width="300" height="400"/>

autoplay : 자동재생

- 크롬에선 동작x, 사파리에서는 자동 재생

- 사용자에게 불쾌감을 줄 수 있으므로 꼭 muted와 함께 사용. 

muted : 음소거

- 크롬에서 autoplay옵션을 넣고 싶을때는 꼭 함께 사용해야 함. 

controls : 프로그래스 및 재생버튼들 노출

width, height 를 통해 이미지 사이즈 조절이 가능(단위 없이 써도 px로 인식).

css를 통해서도 변경 가능

🌱 오디오

<audio src="" controls autoplay muted ></audio>

autoplay : 자동재생

크롬에선 동작x, 사파리에서는 자동 재생

muted : 음소거

크롬에서 autoplay옵션을 넣고 싶을때는 꼭 함께 사용해야 함. 

controls : 프로그래스 및 재생버튼들 노출

🌱  ifeame

<iframe src=""  width="300" height="400">

인라인 프레임. html문서에서 다른 html문서를 보여주는 태그

- 그래서 적용 시 해당 태그 안에 html, body태그등까지 그대로 존재한다.

- 지도, 결제창 등을 띄울때도 사용. 

최근 다시 깃허브를 사용할 일이 생겼다.

코드잇 스프린트에 참여하게 되면서 사용할 깃헙 아이디를 제출해야 했는데,

뭔가 사용하다만듯한 깃헙을 제출하기가 애매했다. 

그간 회사 업무는 회사 깃을 사용하고, 

공부한 것들도 예제 위주라 커밋이 애매했고..

무엇보다 2023년은 정신없이 보내다보니 개인프로젝트를 위해

깃허브를 사용할 일이 딱히 없었다.

이론적인 부분도 노션이나 블로그 등에 기록하니 따로 깃헙을 쓸 일이 없었달까.

잔디 심을때 하나씩 채워지는 쾌감은 있지만, 

주말에 못하거나 해서 나는 구멍은 또 스트레스로 다가오더라 ㅠㅠ

내 스케쥴은 나만의 것이 아니기에..

그러다보니 이렇게..!

2022년도 상반기에 열심히 심다가 차차 드문드문 

2023년은 하나도 없게 되었다.

이렇다할 내용들도 없는것도 맘에 안들었지만, 

2022년까진 굉장히 잡다하게 올렸던 기록도 그렇고,

이젠 프론트엔드만 당분간 올리는 깃허브로 만들고 싶어서 

잔디지우는 법 등을 알아보다가 그냥 깃헙 레파지토리를 비공개 해보자 생각했다. 

크게 중요한 것들은 아니라서 그냥 초기화 할까도 생각해보긴 했는데,

그래도 나름의 추억(?)이니 두고, 다른 사람에게만 2024년부터의 기록을 보여주고 싶었다. 

📌 깃허브 레파지토리 비공개 하기

해당 레파지토리에 들어가서 

설정 - General - 가장 하단 Danger Zone - Change repository visibility

한글로 번역하기를 눌러서 내용을 캡쳐해봤다.

주의사항을 읽어본 뒤 비공개 설정을 완료하면 된다.

저장소 순위나 기타 여러가지 제약이 있을 수 있다는데,

나는 어차피 개인적으로 사용한거라서 그냥 제거-

 📌소소한 팁! 여러가지 레파지토리를 삭제하려면

뒤로가기를 두세번 눌러야 해서 제법 번거롭다...

내 레파지토리 목록들 이왕이면 타입-공개로 바꾸고 뜨는 링크를 복사해서

삭제 후 해당 링크 붙여넣어서 타고 들어가면 번거로움을 조금이나마 줄일 수 있다. 

레파지토리 비공개로 인한 변화

내껄로 봤을때 레파지토리 옆에 자물쇠가 생겨서

잠긴 폴더라는 걸 보여주고, 

레파지토리 리스트에서도 public에서 private으로 바뀐걸 볼 수 있다.

타인에게 어떻게 보이는 지도 궁금해서

시크릿모드로 인터넷창을 하나 띄워서 로그아웃상태로 내 깃헙의 변화를 보았다.

레파지토리의 갯수가 줄어든다. 

📍모두 관리 후 깃의 잔디 변화를 보자!

중간중간 비어있는 휑한 잔디밭들이 보인다. 

모두 제거 및 비공개로 전환하고나니,

최초 가입한 시점만 뿅! 생기고 그 뒤론 말끔히 사라졌다.

아! 물론 내 계정에서는 잔디밭이 그대로 보인다. 

위의 잔디밭 삭제는 나 외 다른이들에게 보이는것이니, 

아예 새로 심고 싶다면 초기화를 알아보는 게 좋을 것 같다. 

가입시점도 삭제 되면 좋으련만 이건 좀 아쉽네 ㅎㅎ

혹시 다른사람들에게 보여지는 걸 위해 깃헙 잔디 삭제를 하고 싶은데, 

내용은 삭제하기 싫은 분들-

다른 사람들에게만 보이는 깃의 초기화를 고민하는 분들께 도움이 되었으면 좋겠다. 

캐스케이드, Cascading 이란?

css에는 캐스케이드 라는 개념이 있다.

Cascade. 작은 폭포, 여러 단으로 된 폭포 라는 뜻이 있다.

그럼 css에서의 캐스케이드는 어떤 의미일까?

원래의 뜻처럼 폭포처럼 규칙에 따라 CSS규칙을 적용하는 것을 뜻한다.

"종속"이라고 번역을 하기도 하며, 우선순위에 따라 속성이 적용된다.

1. 시트별 우선순위

style.css > 브라우저 기본 스타일시트

- 두개에 동시에 동일한 선택자가 존재하면, 우리가 작성한 코드의 우선순위가 높다.

즉, 디폴트로 제공하는 것에 우리가 원하는 대로 추가를 했다고 생각하면 되지 않을까?

2. 코드순서

위쪽 < 아래쪽

- 위에서 아래로 흐르는 느낌으로 동일한 속성값이 있다면 가장 아래쪽의 코드가 반영이된다. 

예를들어 하나의 클래스에 1px을 반영했다가 아래쪽에 동일한 클래스에 2px을 중복으로 반영했다면, 아랫쪽의 2px이 적용되는식이다.

3. 명시도

아이디 개수, 클래스 개수, 태그 개수로 명시도 표시.

- 아이디1 태그1인 경우 1,0,1

- 클래스1, 태그1인 경우 0,1,1

--> 위의 경우 첫번째가 1 0 1로 우선순위가 더 높다.

캐스케이드 우선순위 조회하는 사이트에서도 확인해볼 수 있다.

https://specificity.keegan.st/

4. 상속

부모 태그의 css규칙 중 일부 속성은 자손들에게 상속이 된다.

-  color, font-family, font-size, font-weight, line-height, text-align등

- MDN 사이트 - CSS 속성 페이지 내에 Formal definition이라는 섹션 - inherited에 상속 여부를 볼 수 있다. 

* 현재 웹페이지에서 상속 속성을 보고 싶다면 개발자도구 > Style > Inherited from .. 에서 진하게 표기된 것으로 상속된 속성을 볼 수 있다. (왼쪽 다크모드는 한글버전)

5. 상속 속성 우선순위

조상태그에서 모두 계산된 상태로 우선순위가 적용. 가까운 조상의 속성의 우선도가 높음.

<div><p><a>텍스트</a></p></div>

이 경우 각각의 태그에 모두 글자 색이 지정되어 있다면 텍스트는 가장 가까운 a태그의 색이 반영된다.