목차
1. HTML/CSS
2. IR 기법

1. HTML / CSS

1. label 은 inline 요소이며, input태그의 웹접근성을 향상시켜준다.

   <input id="identity" class="iden" type="text" placeholder="아이디">
   <label class="a11y-hidden" for="identity">아이디</label>

2. 가상요소는 inline 요소이며, 속성에 content:가 없으면 보이지 않기 때문에 쓸 내용이 없더라도 content:""로 써야한다.
   또한 가상요소는 text의 baseline에 배치 되기때문에 가상요소의 위치를 변경하고 싶으면 vertical-align:을 사용하여 조절해야한다.

   .label-hold::before {
               content: "";
               display: inline-block;
               width: 22px;
               height: 22px;
               margin-right: 10px;
               vertical-align: -5px;
               border: 1px solid black;
           }

3. elements와 elements사이에 간격을 주고 싶을때는 margin을 사용하는 것이 바람직하다. padding으로 간격을 주는 경우 전체적인 틀이 틀어질 수 있기 때문이다.
   또한 가장 밖의 컨테이너 끼리 주는 것이 제일 바람직하다.

   header {
   	margin: 20px;
   }
   main {
   	margin-bottom: 20px
   }

4. position: absolute;는 position: static;이 아닌 가장 가까운 부모요소를 기준으로 삼는다.
   또한 가운데 정렬을 하고 싶은경우 다음과 같이 작성한다.

   .label-hold::after {
               position: absolute;
               top: 0;
               left: 0;
               transform: translate(-50%, -50%);
    }

5. 선택자 + 선택자 : a가 동작하면 형제인 b가 동작하게하는 선택자

   .inp-hold:focus-visible+.label-hold::before {
               outline: 2px solid #000;    
               outline-offset: 5px;
           }

6. :focus-visible : 키보드의 입력이 일어났을때만 동작이 일어나게 하는 가상클래스로, :focus 와는 다르게 접근성 구현에 아주 효과적이다.(ex. 키보드 사용자)
   포트폴리오 작성에 디테일 첨가

7. 한 블록내에서 위치를 변경하고 싶으면 padding을 사용하는 것이 바람직하다.

8. input의 placeholder: : input안의 default값

   <input id="identity" class="iden" type="text" placeholder="아이디">

9. input의 type: radio : 여러 선택지 중 하나를 고르게 해주는 타입으로 주로 하나만 고를 수 있다.

<input id="keep" type="radio">

10. 인라인-블록의 특징: 한줄에 표시되면서, 자신의 컨텐츠 크기를 가지면서 크기 조절을 할 수있다. 주로 인라인 요소를 마음대로 꾸미고 싶을때 사용한다
    만약, 좌우 넓이를 채우는 요소를 쓰고 싶은경우에는 블록요소를 사용한다.

11. form : 제출을 해야하는 문서를 작성해야하는 경우에 사용하며, 바로 밑에 type이 submit인 버튼을 함께 동반한다.

    			<form class="write">
                    <input id="identity" class="iden" type="text" placeholder="아이디">
                    <label class="a11y-hidden" for="identity">아이디</label>
                    <p class="warnning">아이디를 입력해주세요</p>
                    <input id="password"  type="password" placeholder="비밀번호">
                    <label class="a11y-hidden" for="password">비밀번호</label>
                    <input id="keep" type="radio">
                    <label for="keep">로그인 상태 유지</label>
                </form>
                    <button class="enter" type="submit">로그인</button>

12. ul li : 같은 요소가 연속으로 3개이상 나오는 경우에 주로 사용되는 태그로 reset을 시키고 사용하는 것이 좋다.

    ul,
    li {
    	list-style: none;
    }

13. button의 inital type은 submit이다!!

14. 앵커에 다른 페이지가 없으면 현재 페이지를 반복한다. 이 경우, 화면이 계속 깜빡이기에 편의성을 저해한다.
    #none(페이지 내에 id=none으로) 또는 javascript:void(0)을 사용하는 것이 바람직하다.

15. fieldset : 폼안에서 구획을 나누고 싶을때 사용하는 태그

    <fieldset class="module-inp module-inp-id error">
                <label for="inpId" class="txt-hide">아이디</label>
                <input type="text" class="inp-login" id="inpId" placeholder="아이디">
                <strong class="inp-error">아이디를 입력해주세요.</strong>
            </fieldset>
            <fieldset class="module-inp error">
                <input type="password" id="inpPw" class="inp-login" placeholder="비밀번호">
                <label for="inpPw" class="txt-hide">비밀번호</label>
                <strong class="inp-error">아이디 혹은 비밀번호와 일치하지 않습니다.</strong>
            </fieldset>

16. 작업시 반드시 유의해야 할것

• 리셋 부터 적용하고 시작할 것
• 제목 확실하게 정하게
• 클래스 네이밍도 중요하다!! (login-utill)
• title 늘것
• 단축속성을 익히고 쓰는것이 코드 실행능력을 더욱 향상시킨다.
• 복잡한 구조가 아닐경우, flex를 너무 남발하면 구조 자체가 불안정해지기에 지양함
• alt 값에는 보다 구체적으로 설명해주는 것이 좋음
• 접근성 사이트 : https://www.youtube.com/@AOA11Y
• text-indent : 텍스트 들여쓰기
• section요소나 article 요소를 사용할때, 거의 반드시 헤딩 요소(h1)이 들어가야 웹접근성이 향상됨

2. IR 기법

• IR 기법 : 디자인적으로는 보이지 않지만 스크린리더나 브라우저를 위해 정보를 전달하는 텍스트를 숨기는 기법으로 회사마다 저마다의 컨벤션이 있다.
• 모바일, pc가 조금씩 다름
• clip: rect(0 0 0 0); 이미지를 자르는 속성 / 반드시 포지션 엡솔루트를 사용해야함 -> clip-path 라는 속성으로 대체가 됨 , 엡솔루트 필요없음