1DAY
CSS 실무 Techniques
1. IR (Image Replacement) tech
: 디자인적으로 보이지 않지만, screen reader나 브라우저를 위해 정보 전달 text를 곳곳에 숨겨두는 방법!
1-1. clip: rect(0 0 0 0); 을 사용해서 이미지를 잘라보자!
➡️ 이렇게 하면 아무것도 안보임 (더이상 사용하지 않는 속성입니다만..)
img {
position: absolute;
top: 0;
left: 0;
clip: rect(0 500px 557px 0)
}1-2. ir_pm
.ir_pm {
display: block;
overflow: hidden;
font-size: 1px;
line-heigh: 0;
text-indent: -9999px;
/* mobile용은 color: transparent; */
}🔥 토론의 장이 벌어졌다 🔥
도대체 왜 NAVER는 margin -1px값을 줬을까?
.blind {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}여러가지 의견이 있었지만, 명확한 답은 찾지 못했다.
그리고
💡 수업이 종료되고 난 후의 해설이 우리에게 돌아왔다. 💡
- 일단 부모 밖으로 내보내기 위한 의도로 보이고, 한 곳이 아닌 여러 페이지에서 혹시 모를 여백에 대비하는 의도로 보인다는 의견.
- 여기서 혹시모를 여백이라 함은 프로젝트중 특수 경우,
예를 들어 모바일에서 left: -9999em 와 같은 방법으로 텍스트 날림을 했을 경우 애러 발생이 되었던 적이 있었는데, 이러한 애러를 미연에 방지한다는 의도로 보임.
(text indent나 left 마이너스값은 위치 파악을 못할경우에 screen reader가 skip 하는 issue, form요소에 focus 될때의 issue) - 내부 상속 룰 때문일 수도 있다.
2. CSS image sprite
: 여러 이미지를 하나의 판(?) 으로 모은다.
(사용 목적)→ HTTP 요청 수가 줄기 때문에 메모리와 네트워크 사용량 측면에서 효율적이기 때문
toptal cite⬇️
https://www.toptal.com/developers/css/sprite-generator/
css sprite generator 를 이용해서 image를 grouping한다.
background-imag : url ("css_sprite.png")
background-position: 위의 위치 코드 입력 !⭐️ 다만, 용량이 너무 큰 이미지 또는 자주 변경해야 하는 이미지에는 사용하지 않는 것이 좋다!
3. Retina display 대응법
- 레티나는 1px 2화소이므로 가로 2배 세로2 배 되는 이미지를 가져온다.
(Figma에서 배수 추출 가능!) - 위치, size 1/2로 줄여서 삽입
- device-pixel-ratio:2 일때 사용하는 것으로
@media screen and (-webkit-min-device-pixel-ratio :2) {
~~ 해당 이미지 삽입
} Bootstrap
(💡 검색 시 한글로 검색하면 낮은 version이 나옴, 필히 영어 사이트로 검색하여 높은 version 사용할 것! )
1. table 만들기
<body>
<div class="container">
<div class="row">
<div class="col-md-4 b">hello world</div>
<div class="col-md-4 b">hello world</div>
<div class="col-md-4 b">hello world</div>
<div class="col-md-4 b">hello world</div>
<div class="col-md-4 b">hello world</div>
<div class="col-md-4 b">hello world</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
2. Table design이 바뀔 때 코드 구성
<body>
<div class="container">
<div class="row">
<div class="col-md-4 b">hello world</div>
<div class="col-md-4 b">hello world</div>
<div class="col-md-4 b">hello world</div>
</div>
<div class="row">
<div class="col-md-3 b">hello world</div>
<div class="col-md-3 b">hello world</div>
<div class="col-md-3 b">hello world</div>
<div class="col-md-3 b">hello world</div>
</div>
</div>
Bootstrap template 사용하기
🔥
스택은 부트스트랩 + php + mysql
부트스트랩 + 워드프레스
부트스트랩 + Django
부트스트랩 + Node
워드프레스는 DIVI 테마와 Pods 플러그인
Toast UI editor 사용하기
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summernote with Bootstrap 4</title>
<!-- Toast Editor 2.0.0과 의존성 -->
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
</head>
<body>
<div id="editor"></div>
<script>
const Editor = toastui.Editor;
const editor = new Editor({
el: document.querySelector('#editor'),
height: '600px',
initialEditType: 'markdown',
previewStyle: 'vertical'
});
// editor.getHTML()
// editor.getMarkdown()
</script>
</body>
</html>MEMOIR
🔥 왜? 에 대한 심도있는 토론을 나눈 시간, 소중하다
🔥 전해져 내려오는 찐-한 legacy를 참 잘 받아들이는 편이다. 본인이 왜? 에 집착을 하기 시작하면 끔찍하게 집착하기 때문...
오늘의 토론이 그 집착의 씨앗에 불씨를 붙였다.
🔥 단 하나의 질의응답도 그냥 넘어가는 법이 없는 강사님이다. 참된 스승이다.
때문에 올려주는 모든 글을 다 읽으려고 한다. 다 담아두려 한다.
우리의 첫 시작을 바른길로 인도(?) 해주려는 개발자님들의 노고를 잊지말고 바르고 참된 길로 가자!
🔥 Bootstrap..
정말 용하다 용해. 턱턱 갖다 붙일 수 있는 것이, 묘하다.
Figma를 사용해서 턱턱 복붙할 때도 알 수 없는 죄책감을 느꼈는데. 그 sense of guilty는 딱히 필요하지 않은 것이었다.
내가 해야하는 일과 쓸데없는 일을 구분할 줄 알아야 겠다.
🔥 모듈화가 여전히 어렵다.
여전히 머릿속으로는 탁 그려져도 바로 코드를 치지 못하는 것은 연습의 문제이겠지.
