프론트엔드 개발/HTML CSS
tailwind 레이어가 뭔데? postcss.config 는 뭐지?
tailwind 빌드 시점에 HTML 파일에서 tailwind css 클래스를 찾아서 이를 바탕으로 ccs 정적 파일을 구성합니다. 브라우저 렌더링 과정에 직접 개입하지 않으므로, 런타임에 비용이 들지 않습니다. 전통적인 인라인 스타일과의 차이가 있다면, 미디어 쿼리를 사용할 수가 있게 되고 사전 정의된 디자인 시스템에서 스타일을 선택할 수 있다는 것, 마우스오버, 포커스 등의 상태에도 대응 가능하다는 점입니다. 숫자로 보기: Atomic CSS를 사용한 1년 반 - John Polacek 아니요, 유틸리티 클래스는 인라인 스타일과 동일하지 않습니다( Algolia의 Sarah Dayan 작성). GitHub의 유틸리티 클래스 사용에 대한 Diana Mounter의 팟캐스트 인터뷰 레이어 @tailwin..
SCSS - CSS를 프로그래밍 언어처럼 작성하자
SCSS scss는 css를 좀 더 프로그래밍 언어처럼 다룰 수있게 해준다. (변수, 함수 등) 편리하게 scss파일을 작성한 것을 컴파일하여 css로 변환하여 사용해야한다. 이 변환하는 방법에 몇 가지 방법이 있는데 VS Code extension sass, live sass compiler 등이 있다. gulp VS Code가 아닌 환경인 경우 gulp를 사용할 수 있다. gulp 모듈 - Node.js기반 프로세스 자동화 도구 gulp 설명 : gulp는 Node.js 기반의 프로세스 자동화 도구이다.A 파일을 변경할 때마다 B파일을 엎어쳐야하는 등의 지루하고 반복적인 작업을 자동화 시킬 수 있다. 우리는 gulp를 이용하여 scss 파일을 11001.tistory.com scss 파일을 여러 파일..
깃허브 페이지 - Publishing on Github Pages
깃허브 사이트에서 Static Website (백앤드 빼고 프론트앤드 부분 HTML/CSS/JS로만 이루어진 페이지) 무료 호스팅을 해준다 !! 즉, 내 페이지를 퍼블리싱할 수 있다. wow github page 생성 방법 (github Desktop 기준) public 레포지토리 를 생성한다. 레포지토리/index.html 파일을 생성한다. 이 파일이 기본적으로 보여지는 페이지이다. 만약 index.html 파일이 없으면 README.md를 기본으로 보여진다. 레포지토리에서 gh-pages 라는 이름의 브랜치를 만든다. Publish branch를 누른다. (누르면 아래와 같이 바뀜) 해당 Github Repository 사이트에 접속한다. (View on Github 를 누르면 바로 접속 가능) Gi..
CSS : box-sizing: border-box;
box-sizing: border-box; 200px 박스에 50px Padding 값을 준다고 하였을때 최종적으로 50+200 = 250px 의 박스가 생성된다. 200px의 박스를 50px만큼 밀어버린 것이다. 그런데 우리가 원한 것은 250px 박스가 아니라 200px의 박스다. 이럴때 사용하는것이 box-sizing이다. box-sizing: border-box;
CSS : reset CSS (브라우저 기본 스타일 제거)
reset CSS (브라우저 기본 스타일 제거) 기본적으로 적용되는 브라우저 기본 스타일을 제거하고 싶을때 사용 Reset CSS 파일을 만들어줘야 한다. 아래 사이트에서 코드 복사하거나 내가 올려둔 코드를 복사하여 css 파일에 import 하면 적용된다. @import "reset.css"; CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was ..
CSS Hack : 정확히 중앙에 위치 시키기 (space-between 대신)
CSS Hack ABC가 있을때 A를 화면 좌측끝 B를 화면 중앙 C를 화면 우측끝에 위치시키고 싶을때 flexbox의 justify-content: space-between 를 보통 사용한다. 그러나 B가 화면의 정중앙에 들어가지 않을 경우가 있음. 이럴 때 CSS Hack 사용한다. 레시피 같이 어디든 쓸 수 있다. 이상하지만 작동함. 상위 박스 .status-bar justify-content: center; 내부 박스들 .status-bar__column width: 33%; 중앙에 위치할 박스 .status-bar__column:nth-child(2) display: flex; justify-content: center; 오른쪽에 정렬할 박스 .status-bar__column:last-chil..
VSC(Visual Studio Code) HTML 단축키 모음
※ 반드시 HTML로 되어있어야 작동함. (가끔 Django HTML로 되어있을때 있음) ! 입력 후 Enter link:css 입력 후 Enter nav>ul>li*4 입력 후 Enter nav>ul>li*4>a 입력 후 Enter 요소안에서 .클래스이름*2 입력 후 Enter .user-component__column*2
HTML/CSS 유용한 사이트 / 크롬 확장도구 모음
사이트 이름 용도 사이트 주소 mdn 웹 개발 메뉴얼 https://developer.mozilla.org/ko/ validator.w3.org HTML 문법 검증기 https://validator.w3.org/#validate_by_input css-tricks CSS 가이드 https://css-tricks.com/guides/ material.io CSS 색상 고르기 https://material.io/resources/color/#!/?view.left=0&view.right=0 herocoin CSS SVG Icon 이미지 (Free) https://heroicons.com/ fontawesome CSS Icon 이미지 (Free) https://fontawesome.com/v5.15/icons..
BEM (Blocks, Elements and Modifier)
block component .btn {} block 안에 속한 자식 block .btn__price {} block 자체의 스타일을 변경시키는 Modifier .btn--orange {} .btn--big {} BEM을 사용하면 HTML 요소에 어떤 스타일들이 적용되었는지 쉽게 알 수 있다. 클래스가 서로 어떤 관계를 가지는지 쉽게 알 수 있다.
CSS - inline, block, inline-block
inline, block block : 한 줄을 다 차지하는 box margin : box의 border(경계)의 바깥에 있는 공간 padding: box의 border(경계)의 안쪽에 있는 공간 inline : 한 줄에 여러 요소가 올 수 있음. 높이/너비 존재하지 않음. margin은 좌/우만 가질 수 있음 padding은 상하좌우 다 가질 수 있음. inline-block : flex와 유사하게 block 요소들이 inline 성질을 가짐. 그러나 정해진 형식이 없으며 반응형 디자인을 지원하지않는다.