!1주차 코드리뷰!
-
Indent (들여쓰기)
-> =tab 가독성을 위해서 사용
윈도우는 Ctrl + , -
Img의 alt attribute
Q. alt를 왜 쓰는 것일까??
A. 접근성을 좋게 하기 위해 사용한다!
→ 화면에 뭐라고 읽어야 할 지 정해준다. 페이지를 불러오다가 중간에 인터넷이 끊겨서 이미지 파일을 다 불러오지 못할 상황에 사진 대신 보여주는 글자가 필요한데 이때 alt속성에 있는 글자를 보여준다.
- attribute는 무조건 string
<img width=350> => <img width="350">둘 다 정상적으로 작동하지만 공백이 있는 속성을 부여하기 위해
공백이 없는 단일 속성에도 코드의 통일성과 가독성을 높이기 위해 ""를 붙이는 것이 좋음
-
Input 과 button 태그
→ 최근에는 Input태그로 버튼을 만들지 않고 단독으로 button태그를 사용한다. 버튼 태그를 썼을 때 "아 이 태그는 버튼 형태로 그려 지겠구나" 라는 것을 명시적으로 바로 느낄 수 있게 하기 위해서이다. 버튼 형태는 버튼 태그로 처리하는 것을 권장! -
빈 줄 처리
→ 빈 줄은 연속되게 두 줄 이상 오지 않게 하는 것이 html의 문화이다. 하지만 가독성 등의 이유로 빈 줄을 작성하고 싶다면 한 줄만! 작성하는 것이 문화이다.
1. CSS
스타일 태그 안에 태그와 속성을 쓴다!
스타일 태그 안의 스타일 속성들이 CSS이다!
<style>
a{
//세미콜론을 넣어 한 줄로 쎃도 구분 가능하도록
color: black;
text-decoration: none;
}
</style>선택자의 우선순위
class의 이름이 saw와 saw active이면 saw를 먼저 쓰고 active를 써야 각각 적용이 가능하다.
반대로 쓰면 saw에 대해서만 적용된다.
이를 방지하기 위해 id 선택자를 사용한다. id 선택자가가 제일 강한 선택자이다!
id > class > tag 순으로 강한 선택자이다.
fr
화면 전체가 3fr일 때 2fr, 1fr이면 두 개가 각각 화면이 작아져도 2fr, 1fr씩 나눠서 사용한다.
전체를 모든 fr을 합친 걸로 생각하고 각각의 fr은 전체의 비율적인 느낌으로 생각하면 쉬울 것 같다.
caniuse라는 사이트 참고 !
flex
main axis : 가로축 => justify-content
cross axis : 세로축 => align-items
- flex-direction
→ default = row
flex-direction이 column이 되면 가로축이 align-items가 담당. 세로축을 justify-content가 담당.
/flex-direction=row 기준/
justify-content: flex-end
*/좌우정렬-start가 왼쪽,end가 오른쪽,center가 중앙/*
align-items: flex-end;
/*상하정렬-start가 위, end가 아래 (=> div자체의 높이가 짧아 아래로 이동x)*/- vh
=view height : 보이는 뷰의 몇 퍼센트인지
100vh는 보이는 화면 전체를 의미한다
