What I Learned Today
오늘은 3주 차 과제 리뷰를 했다.
3주 차 과제는 네이버 로그인 UI 구현하기였는데 시간이 엄청 오래 걸려서 제출했던 기억이 있다.
- 과제 리뷰를 하며 새로 알게 된 기술들
- text-indent : 첫 줄 들여 쓰기 속성이다. (단, block의 성향을 가져야 사용할 수 있다.)
- 선택자:checked + 형제요소 : checkbox나 radio 속성에서만 css를 스타일링할 수 있다.
- 사용자가 요소를 체크했거나 선택한 경우 활성화된다.
- appearnce : none : 에이전트 스타일을 화면에서 보이지 않도록 설정할 수 있다.
- aria-live : 변경 사항을 스크린리더가 읽어준다.
- 선택자:user-invalid : 사용자가 입력한 값이 유효한 값이 아닐 때 스타일을 적용한다. (사용자가 입력한 뒤에 동작한다.)
- aria-errormessage : 주로 input 요소에 선언하여 오류 메시지를 제공하는 요소를 값으로 참조한다.
- aira-invalid 속성이 없거나 false 라면 동작하지 않는다.
이렇게 컴포넌트를 싹 만들어두고 조립을 했다.
- Grid
- 그리드 컨테이너는 행과 열을 거지며 그리드 아이템을 배치할 수 있다. (바둑판식)
- Grid Line
- 그리드의 행/열을 그리는 선을 말하며 각 선은 라인 넘버를 갖는다.
- 그리드 아이템을 배치하는 기준으로 사용된다.
- Grid Track
- 그리드 라인 사이의 행 또는 열 공간을 말한다.
- Grid Cell
- 4개의 그리드 라인이 묶여 그려지는 가장 작은 단위를 말한다.
- Grid Area
- 그리드 유닛이 묶인 영역으로 고유한 식별자를 가지며 식별자를 통해 요소를 배치할 수 있다.
- Grid Gutters
- 행 또는 열 사이의 간격을 말한다. 흔히 Gap이라고 한다.
- Git reset 명령어는 저장소의 상태를 변경하거나 이전 커밋으로 돌아갈 때 사용한다.
- soft reset : 변경 내용은 유지되지만 commit하지 않은 상태로 남는다. 즉 add 된 상태라서 바로 commit이 가능하다.
- 여러개의 commit을 묶어서 다시 commit 하기 위해 사용한다.
- mixed reset : 변경 내용은 유지되지만 다시 add를 해야 commit 할 수 있다.
- 코드를 수정하고 다시 커밋하기 위해 사용한다.
- hard reset : 작업 디렉토리에 있는 모든 변경 사항을 되돌리고 이전 상태로 돌아간다.
- 이전 커밋의 변경된 모든 내용을 싹 날리기 위해 사용한다.
- soft reset : 변경 내용은 유지되지만 commit하지 않은 상태로 남는다. 즉 add 된 상태라서 바로 commit이 가능하다.
The Problem I Faced
What I Tried to Do
How I Solved It
So
Aha Moments
repaint와 reflow가 발생하면 성능이 저하된다.
로그인 페이지를 키보드로 접근할때 순서가 입력창 다음에 로그인 버튼이 아닌 로그인 상태 유지인 것을 알았을 때 많이 놀랐다.
스크린 리더 사용자일 경우 로그인 상태 유지 체크박스가 있다는 것을 알지 못하고 바로 로그인을 하는 상황이 생길 수도 있다.
오늘 디제이
반응형
What I Learned Today
오늘은 3주 차 과제 리뷰를 했다.
3주 차 과제는 네이버 로그인 UI 구현하기였는데 시간이 엄청 오래 걸려서 제출했던 기억이 있다.
- 과제 리뷰를 하며 새로 알게 된 기술들
- text-indent : 첫 줄 들여 쓰기 속성이다. (단, block의 성향을 가져야 사용할 수 있다.)
- 선택자:checked + 형제요소 : checkbox나 radio 속성에서만 css를 스타일링할 수 있다.
- 사용자가 요소를 체크했거나 선택한 경우 활성화된다.
- appearnce : none : 에이전트 스타일을 화면에서 보이지 않도록 설정할 수 있다.
- aria-live : 변경 사항을 스크린리더가 읽어준다.
- 선택자:user-invalid : 사용자가 입력한 값이 유효한 값이 아닐 때 스타일을 적용한다. (사용자가 입력한 뒤에 동작한다.)
- aria-errormessage : 주로 input 요소에 선언하여 오류 메시지를 제공하는 요소를 값으로 참조한다.
- aira-invalid 속성이 없거나 false 라면 동작하지 않는다.
이렇게 컴포넌트를 싹 만들어두고 조립을 했다.
- Grid
- 그리드 컨테이너는 행과 열을 거지며 그리드 아이템을 배치할 수 있다. (바둑판식)
- Grid Line
- 그리드의 행/열을 그리는 선을 말하며 각 선은 라인 넘버를 갖는다.
- 그리드 아이템을 배치하는 기준으로 사용된다.
- Grid Track
- 그리드 라인 사이의 행 또는 열 공간을 말한다.
- Grid Cell
- 4개의 그리드 라인이 묶여 그려지는 가장 작은 단위를 말한다.
- Grid Area
- 그리드 유닛이 묶인 영역으로 고유한 식별자를 가지며 식별자를 통해 요소를 배치할 수 있다.
- Grid Gutters
- 행 또는 열 사이의 간격을 말한다. 흔히 Gap이라고 한다.
- Git reset 명령어는 저장소의 상태를 변경하거나 이전 커밋으로 돌아갈 때 사용한다.
- soft reset : 변경 내용은 유지되지만 commit하지 않은 상태로 남는다. 즉 add 된 상태라서 바로 commit이 가능하다.
- 여러개의 commit을 묶어서 다시 commit 하기 위해 사용한다.
- mixed reset : 변경 내용은 유지되지만 다시 add를 해야 commit 할 수 있다.
- 코드를 수정하고 다시 커밋하기 위해 사용한다.
- hard reset : 작업 디렉토리에 있는 모든 변경 사항을 되돌리고 이전 상태로 돌아간다.
- 이전 커밋의 변경된 모든 내용을 싹 날리기 위해 사용한다.
- soft reset : 변경 내용은 유지되지만 commit하지 않은 상태로 남는다. 즉 add 된 상태라서 바로 commit이 가능하다.
The Problem I Faced
What I Tried to Do
How I Solved It
So
Aha Moments
repaint와 reflow가 발생하면 성능이 저하된다.
로그인 페이지를 키보드로 접근할때 순서가 입력창 다음에 로그인 버튼이 아닌 로그인 상태 유지인 것을 알았을 때 많이 놀랐다.
스크린 리더 사용자일 경우 로그인 상태 유지 체크박스가 있다는 것을 알지 못하고 바로 로그인을 하는 상황이 생길 수도 있다.
오늘 디제이
반응형
