뭘 배웠지?

안전한 이메일 템플릿 만들며 배운 점 이메일 UI를 바꾸기 위해 자주 사용하는 태그와 CSS 스타일을 사용해서 변경 했는데, 스타일이 전부 깨져서 나오는 것을 확인했습니다. 이 글은 수 많은 이메일 클라이언트에서 깨지지 않는 ‘안전한 이메일 템플릿’을 만들기 위해 작성했습니다. 시작 전 인상 깊었던 말 여러 러페런스를 찾아보다가 인상 깊은 문단이 있었습니다. "웹 개발에 익숙하다면, 알고 있는 것을 전부 잊어라. 가장 큰 장애물은 '보통' 웹 개발처럼 작동한다고 예상하는 것이다." If you are already familiar with web development, forget everything you know about it. The single biggest obstacle to you is ..

트위터에서 Laura 라는 친구가 공유한 방법 (원문: https://twitter.com/lauracharvey/status/1309524321812054018?s=20) 보자마자 Vscode를 키고 시험해보고 깜짝 놀랐다. 백그라운드 이미지 투명도를 조정할 때 지금까지는 :after와 같이 이미지를 덮어씌우는 방법을 써왔다. 이제부터는 linear-gradient를 사용하려고 한다. background-image: linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8) ), url("backgroundImg.jpg"); 코딩하는분들 모두 화이팅 😁

앞에서부터 원하는 폰트를 지정해서 적어둔다. 링크 https://www.w3schools.com/cssref/css_websafe_fonts.asp

반응형웹을 위한 플렉스(Flex) 플렉스(flex)는 크기가 다른 스크린에서도 왠만하면 정돈되서 보여준다. 반응형 웹을 만들기위해 기본이 되는 요소인것 같다. 사용법 display: flex; flex-direction 정렬 방향을 정하자 - row (기본값): 높이가 꽉차고 옆으로 정렬된다 - row-reverse: 마찬가지로 높이가 꽉차고, 반대 순서로 정렬된다. - column: 양옆넓이가 꽉차고 위에서 위아래로 정렬된다. - column-reverse: column에서 반대방향으로 정렬 예) display: flex; flex-direction: row-reverse; justify-content 플렉스 안에 콘텐츠 정렬 방법을 전하자 - flex-start: (기본값) 왼쪽에서(정렬방향이 col..

웹 개발에 유용한 CSS 툴 Shape Divider App 원하는 모양을 선택하고 -> 구름모양(Get Code) 클릭 -> HTML, CSS 복사 후 붙여넣기 https://www.shapedivider.app/ Shape Divider App Create fully responsive shape dividers for your next web project shapedivider.app

외국의 프론트엔트 개발자 Pratham이 추천한 폰트 1. Helvetica 가독성이 좋은 폰트로, body에 사용 2. Ronney 브랜드 이름에 사용 3. Tangerine, Sacramento 핸드라이팅 폰드들로 유저의 관심을 끌 때 사용 4. Futura 캐주얼할 때, 진지할 때 모두 사용 5. Quicksand 작은 스크린에 사용 Pratham의 트위터에서 발췌 It is most important to choose the right FONT for you website. 1️⃣ Helvetica (Use this for body it has high readability). 2️⃣ Ronney (Use this for brand name). 3️⃣ Tangerine, Sacramento (Ha..

border 기본 width 는 3 이다 border-width 지정을 안해주면 기본 3px로 적용되었다 크기 정할 때 참고

CSS Grid 는 복잡한 웹사이트를 만들도록 도와준다. HTML 엘리먼트들을 행(rows), 열(columns)이 있는 grid container로 바꿔준다. dispaly: gird; 열(columns) 추가하기 grid-template-columns: 100px 100px 100px; 한 행에 폭(width)이 100px 열 세 개를 만들겠다는 의미 간단하게 grid-template-columns: repeat(3, 100px); 행(rows) 추가하기 뒤만 다르고 열과 같다 grid-template-row: 50px 40px; 위에서 부터 50px, 40px 높이로 만든다. 크기 폭, 높이를 정할 때 px, em 을 써도 되고 밑에것 써도 된다. fr : 남는 공간을 비율로 정해서 ie. 1fr,..