주변 환경을 개발 관련된 것을 늘리자
- 커뮤니티, 대기업의 기술 블로그D2 - 책 대중이 어렵다는 책(생활 속 밀접하게 하자)
- 충분히 앞에 것을 소화하고 진행하자 멀리 바라보자
- 번아웃이 되지 않게 꾸준히 하는 습관을 기르자
태그 관련한 것들
-
br, span을 사용하는 것..
-- 개행이 디자인 목적이면 span
br을 절대적인 금지는 아니지만 사용하지 않는 편이 좋다. -
form 이 있을때는 전역변수가 개발자 도구에서 보이지 않게 숨겨야 한다.
-
지원을 안해주는 낮은 브라우저를 사용자가 이용할 경우 '다른 브라우저로 사용하세요' 처럼
명시를 해줘야한다 -
th, button 태생적으로 가운데 정렬이 있다
버튼 텍스트 조정하고 싶으면 패딩으로 조절하면 된다 -
미디어쿼리는 회사 컨벤션에 따라 작업을 한다
-
요소 높이를 고정하지 말고 유연하게 하자!
요소의 높이는 되도록 설정하지 말자 요소의 모양을 잡아야할때 말고는 하지 말자
- 요소의 안에 있는 콘텐츠가 수정이 될 수 있다는 생각을 하고 구조를 잡자
-
input과 label은 한쌍이다 꼭 같이 사용하자
웹접근성,포커싱 문제
<style>
img {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<a href="">
<img src="../image-grid/1.jpg" alt="">
</a>
</body>-문제점
1. a에 img 넣을때 position: absolute; a에서 빠져나와서 다른 곳에 가고
a의 크기는 위에 이미지와 같이 크기가 0 x 0 이 된다
2. 포커싱에도 문제가 된다 tap키로 포커싱이 될때 엉뚱한 곳에 가게 되어 문제가 된다
- 해결방법
위치를 옮길거면 img에 position을 넣지 말고 부모인 a에 넣어서 사용하면 해결된다.
a는 인라인 요소지만 flat, position을 넣으면 디스플레이 속성이 블록이 된다
마크업 p, strong, em, q, span 언제 써야될까??
p -> 글이 문단이거나 한문장이 맞춤표로 끝난다면 가능
strong -> 단어를 강조하고 싶을때
em -> 덜 중요하면 단어일때
q -> 짧은 인용문
blockquote -> 긴 인용문
span -> 의미없거나 디자인을 위해 필요할 때
회고 🔨🔨🔨
로그인 모달창을 만드는 실습을 하면서 마크업 공부도 정말 많다는 생각이 들었다.
아직 헷갈리는 부분을 오늘 조금 더 잡을 수 있는 시간이였다. 구조를 짤때 스크린리더기로
읽을 것을 생각하며 논리적 흐름으로 잘 잡을 수 있도록 연습하고 잘 짜여진 사이트를
보는 것이 도움이 많이 될 거 같다. 버튼의 위치나 마크업상에 위치에 대해서도
배울 수 있는 시간이였다📑
