취미부자의 취미 버리기

이제...코딩을 시작하는 단계! 🔎공통요소들 찾기(여기도 아직 기준이 조금 불명확)반복되는 스타일들을 유틸리티 클래스 혹은 mixin에 정의하기주로 라벨, 아이콘, 폰트, 버튼, 인풋 타입/구성, 큰 덩어리/구조적인 스타일 등 🗄️Utility와 Mixin 분리(여기도 아직 기준이 조금 불명확) 아직 어떻게 분리할지 조금 헷갈리지만일단! Utility에 들어갈 스타일은 Mixin을 포함할 수 있다! 🗃️파일작성하기(단위는 되도록 4의 배수 사용) _variables.scss색상, header 높이, footer 높이, 미디어쿼리 break point 등(예. $primary: #123abc; $headerH: 64rem;) _mixin.scss폰트, 카드 스타일, 패딩값, 포지션, 플랙스..

오랜만에.. 퍼블리싱하다가...디자인이랑 퍼블리싱을 거의 동시에 작업하다 보니 css가 아쥬 쓰레기 밭이 되어가쟈나..."완료"된 페이지가 늘어날 수록 나의 J가 맘이 더 불편해지쟈나... 🥲(폰트 크기, 간격, 중복 코드 짱 많아...🙈)다행이 마지막에 조금 정리할 시간이 있어서 폰트 크기는 통일 했지만아직 만족스럽지 않아..!!! 처음부터 이런 문제 없이 깔끔하게 스타일 파일 관리할 수 있게,마지막에 쓰레기 코드를 어떻게 정리했는지 토대로 체크리스트랑 규칙을 작성해 놔야겠다! 체크리스트SCSS를 사용할 때랑 안할때 차이 딱히 없을 것 같긴 하지만, 일단 SCSS를 사용하는걸 기준으로체크리스트를 만들어서 폴더/파일 구조 세팅 해야징!✨SCSS가 특별한 세팅 없이 CSS 덜 꼬이게 해줘서 확실히..

input radio 체크 기능 스크립트 구현하기 상황 input radio 디자인이 안 예뻐서 디자인을 수정하고 싶다. 디자인 구연하고 싶은 스타일 기본 세팅 HTML 사과 바나나 멜론 1. radio는 체크가 1개만 가능한 체크박스로, 체크가 1개만 됐는지 인식하기 위해서 'name'에 동일한 값을 주어서 그룹을 만들어 준다. (예시. 'fruits'라는 'name'을 갖은 그룹 중 1개) 2. input의 id는 label의 for 값과 일치해야 label과 input이 연결되고, label을 클릭하면 해당 input 에 전달이 된다. 3. label에 디자인을 위한 모든 HTML구조를 넣는다. *** input에 checked라는 속성을 넣으면 체크 박스가 체크된 상태 CSS li { width:..

일반적으로 html에 들어가는 코드랑 비교하면서 코드에 대한 설명을 시작하겠어용. (회색 마크는 일반적으로 쓰는 코드입니다!) . . 1 DOCTYPE html 유형을 알려주려고 적는 건데 이거를 토대로 규격검사 등을 하기 때문에 우리가 이메일 코딩에 사용할 XHTML을 잘 명시해야 검사하고 렌더링하는데 도움이 되겠죠? . . 2 HTML 태그 . . 3 HEAD 태그 Head에서는 title, viewport 관련 코드는 다 똑같은데 xhtml로 doctype을 설정해서 content-type을 포함해 주야 한데요. . . 4 Body 태그 어떤 이메일 플랫폼은 를 지워버리니까 태그로 전체 구조를 한 번 감싸줘야지 안전해요. 이메일 플랫폼 해상도가 다 달라서 가로 넓이는 600px ~ 700px정도로 ..

WARNING 정말 번거롭고 번거롭고 번거로움 시작 전 알아야 할 것 일반 웹사이트 코딩을 위한 HTML, CSS를 생각하면 절.대. 안되요...옛날 HTML (XHTML)으로 코딩해야 된다고 합니다. 그래서 안에 들어갈게 많아요! JavaScript는 사용하지 않아서 어떻게 동작할지 모르겠네요.🤔 . . . 그럼 지금부터 설명 시작!!! . . 1 내부 CSS / 인라인 CSS 둘 다 작성해야 됩니다 이메일 플랫폼에 따라서 어떤곳(Gmail)은 인라인 CSS를 또 어떤곳(네이버/다음)은 내부 CSS를 삭제해서 둘 다 작성해야 안전해요! 안그럼 어디선가 깨집니다😭 참고로 내부 CSS는 html 안에서 로 작성하고 인라인 CSS는 이렇게 태그에 같이 작성됩니다. . . 2 어떤 CSS 속성은 적용되지 않아..