position속성

default = static : 따로 설정하지 않아도 원래 있어야 하는 곳에 있음.

relative :  기본 위치에서 상대적위치로 변경. 단, 원래 있던 공간은 그대로 차지한 채 배치

 -> margin이랑 다른 점. 마진은 해당 기준에 맞춰 주변 요소들도 이동이 되는데, relative는 해당 속성에 해당 되는 부분만 이동 된다는 것

absolute : 가장 가까운 조상의 포지셔닝(static이 아닌 경우)을 기준으로 배치. 원래 자리는 차지하지 않은채 배치.

fixed : 브라우저 화면 기준으로 고정. 원래 자리는 차지 하지 않은 채 배치. 

-> 네비게이션을 만들 거나 할 때 사용하고, 고정이 됨으로 인해 겹치는 부분은 마진을 주어 보이도록 배치해줘야 함

sticy : 원래 자리에 배치. 정해진 위치에 스크롤 되면 그때부터 고정됨. 

-> 부모요소에 소속됨. 부모요소가 사라지면 사라지기 때문에 스크롤을 하며 떠있다가 부모요소를 지나치면서 사라지게 할 수 있음. 

z-index : 앞뒤 순서를 정함. 기본값은 0이며, 값이 높을 수록 앞쪽에 보여지게 되고, 동일한 뎁스일 경우 나중에 쓰인 게 앞으로 보여짐. (예를들어 같은 부모의 자식일 경우 그 자식들끼리 값을 비교.

쌓임 맥락에 따라 달라지는데, 맥락의 조건은 다양하기 때문에 MDN문서의 쌓임 맥락 페이지를 참고 하는 것도 좋음. 만약 원하는 대로 동작이 어렵다면, 부모요소를 하나 더 만들어서 옮기는 편이 좋음. 

position의 위치 지정

top, right, bottom, left  : 해당위치의 값만큼 이동

-> 예를들어 top에 30px을 준 경우 top에서부터 30px에 위치하도록 이동

inset : top~left 네 방향의 값이 동일할때 사용. inset : 30px과 같이 값 하나로 모두 설정 할 수 있음

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

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으로 바뀐걸 볼 수 있다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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