4DAY_Thur
💡 Figma 사용법
1) multiplayer cursor hide: cmd+opt \
2) Frmae / group속 개별 object choice: cmd + click
3) object-object distance (pixel) : object click+opt+hover
4) Export: svg file export는 vector 만 가능
1. Remind
Responsive web page _ use MediaQuery
What is Media Query?
👉 specific condition (단말기 유형, 화면 해상도, view port width) 에서 specific style 부여
- ex) screen : all device to have monitor or screen
- ex) print: 자주 사용되지는 않지만
<title>media</title>
<style>
@media print {
abbr::after {
/* attr() : css 속성 함수. */
content: ' ('attr(title)')'
}
}
</style>
</head>
<body>
<abbr title="world wide web consortium">w3c</abbr>
</body>device - pixel- ratio: 2란?
→ 1 pixel 2 화소- device pixel ratio 알아낼 수 있는 방법
: 개발자 도구에서 console → window.DevicePixelRatio
💡 레니타 대응 원리를 위한 사전 지식
1) pixel: 화면 구성 가장 기본 단위
2) ppi: pixel per inch
3) dp || dip : dencity-independent pixel: 기기의 물리적 display 해상도에 영향없이 독립적으로 크기 지정 가능하게 하는 가상적 pixel 단위
4) physical pixel: 디바이스가 실제 처리 가능한 화소 기본단위
5) logical pixel: CSS에서 표현하는 화소 기본단위
Media Query 사용한 1만시간 Page
Code Review
1) input 앞뒤로 정보가 다 붙어있을 경우에는 label 사용하지 않아도 됨
2) <button> 에는 꼭 type 작성! (default 값이 submit 이므로)
3) display: block; rather than <br>
4) alt 값 관련
a. 의미없는 배경 사진에 alt값이 부여
b. 글씨로 된 img 의 alt값에 'title' 이라고만 부여
이를 a의 경우 alt 값을 비워두는 게 좋고
b의 경우 img에 써있는 글씨를 alt값에 그대로 작성해 주는게 좋다는 feedback
<section class="title-wrap">
<!-- 의미없는 사진은 alt값 비워두는게 좋음 -->
<img src="./img/clock.png" alt="clock-transparent" class="img-clock" />
<!-- alt값에 1만시간의법칙 글 작성해야함-->
<img src="./img/title.png" alt="title" class="img-title" />
</section>💡alt naming 이 어렵다고 느껴지는데, 단순하게 생각해서
내가 눈을 감고 들었을 때 자연스럽게 들리는가? 를 논리적으로 생각하면 답이 쉽게 나오는 듯 하다.
5) 중요하지 않은 이미지는 가상요소로
가상요소로 처리하는 법
.btnCount::after {
background-image: url("\../img/click.png");
position: absolute;
left: 250px;
top: 40px;
}6) 여러 device 에 맞추고 싶을 경우 가장 큰 max-width값을 기준으로 설정
< Another Code Review>
- 기존의
inputsample 은texttype 이었는데,
inputtype을 number로 주어서 숫자가 올라가도록 하는 idea가 있었다. - text만 있는 경우에는 굳이 감싸줄 필요 없다.
input2 개 들어간 것을form으로 크게 감싸주어야 좋다.
My Code Issue
A. 가상요소로 추가한 이미지가 자리도 확보가 안된채 나오지 않았다.
.cont-inp .btn-exc::after{
display: block;
content: '';
width:64px;
height:72px;
background-image: url("../img/click.png");
}B. position 위치 추가 feedback 을 받아서 실행했으나 여전히 보이지 않음
position: absolute;
top: 15px;
right: -65px;
C. 결국의 Solution
background-size가 지정되어 있지 않았던 것이다. 사이즈를 추가한 최종 code
.cont-inp .btn-exc::after{
display: block;
content: '';
width:64px;
height:72px;
position: absolute;
right: 45px;
background-image: url("../img/click.png");
background-size: 72px;
}Validation
After Markup..
W3C markup validation, CSS검사 → device responsive validation
- 기기테스트를 반드시 하고 포토폴리오 올릴 것!
- 휴대폰으로 확인해보는 방법
(1) computer network → IP address
(IP address 192.168.100.17:5500/file_name.html)
💡 **web에서 size 변경으로 확인한들 반드시 device와 일치하는 것이 아니다!
실제 device에서 validation 해야함!**
Code Review summary
- class 남발말고 부모에
ul class="list"→.list li로
자식 요소 찾는 방식을 선택!
- 가상요소에 이미지를 넣었을 때 이미지가 짤릴 경우에는
background-imagesize를 width, height에 맞추면 됨
- margin-collapsing 현상이 발생할 때
→ elements & elements 사이의 간격을 줄때는 가장 바깥 부모 요소에 간격을 줘서 빈 공간을 가질 것 (부모나 자식 중 하나만 inline-block)
- 개발자 도구에서 미리 css 짜보고 코드 가져오는 것도 도움이 많이 된다.
- z-index 는 position 값이 꼭 있어야 함 (z-index는 유지보수를 위해 10 단위로!)
- 중앙정렬margin: 0 auto는 width 값이 정해져있을 때 가능
- refactoring 작업필요 (효율적 코드, 쓸모없는 코드 모으기)
- reset css에
img: display:blockwidth:100%해두는 것도 유용하다.
- layout에 직접적 영향을주는 요소들은 css 작성 시 맨 위로 뺀다 (margin, padding ..)
- heading tag 숨김 방법blind { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; }
