Atelier BiCute

VS Code를 이용해 코드를 작성하다보면 더미 텍스트를 입력하는 경우가 많은데 이때 Lorem ipsum을 emmet(단축키)을 이용해 많이 사용하게 됩니다. #1 lorem 가장 기본적인 사용방법입니다. lorem 입력후 엔터나 tap을 누르면 자동으로 문장이 작성되는데, 이 방법을 사용하게 되면 1줄에 약 200열 정도의 글자가 작성됩니다. 내용과 글의 양은 Emmet에서 미리 볼 수 있다 이렇게 작성하게되면 한줄로 길게 작성되는데, 우선 텍스트의 양을 원하는 만큼 잘라 내기도 해야 하고, 보기 좋게 하기위해선 하나하나 원하는 지점을 찾아 엔터를 쳐서 글을 끊어주기도 합니다. #2 lorem * (반복횟수) 추가로 로렘의 길이가 짧다고 생각할 경우 다음과 같이 *n 을 입력하는 것으로 내용을 더욱 ..

개인적으로 처음에는 절대적으로 기피했던 프레임워크에 대한 사용 빈도가 갈수록 높아지고 있다. 그러던 와중에 부트스트랩은 이제 좀 질려서 이번기회에 테일윈드CSS를 사용해보기로 했는데, 너무나 마음에 들어서 이런 글도 한번 적어보게 되었다. (이젠 테일윈드 없이는 코드를 짤수없는 몸이 되버렸다) CSS 프레임워크를 사용하는 이유는? 한줄로 요약하면 코드를 쉽고 간편하게 사용하기 위해서이다. 그게 정형화된 코드로 인하여 유지 보수가 편리할수도 있고, 협업할때 좋을수도 있으며, 재사용성이 높을수도 있다. 이유는 다양하지만 결국 쉽고 간편하게 쓰고싶기 때문에 사용하게 된다. #1 Bootstrap 장점도 많고 단점도 많은 가장 유명한 프레임워크. 일단 다른 장단점들 다 제쳐놓고 사용 방법이 가장 쉽다. 압도적..

#1 설치 다양한 설치 방법과 컴파일러가 존재하지만 VSCode를 사용하고 있다면, 확장 마켓플레이스에서 'Live Sass Compiler'를 검색하여 설치만 하면 모든 준비 과정은 끝입니다. * 각종 블로그에서 node.js설치부터 시작해서 이것저것 너무 건들여대는 설명이 많아서 이 글 적어봄. #2 사용방법 (1) CSS 파일을 사용하는것과 큰 차이는 없습니다. (2) 새로운 파일의 확장자를 *.scss로 생성하여 코드를 작성. (3) 웹 브라우저는 html, css, js만 읽을수 있기 때문에 scss로 작성된 파일은 웹 브라우저가 읽을수 있도록 변환(Compile)해줄 필요가 있습니다. (4) 컴파일을 하는 방법은 화면 하단의 Watch Sass 버튼을 클릭하면 끝. *만일 하단 바가 안보이면 ..

웹 개발을 하다 보면 이미지 소스가 필요한 경우가 상당히 많습니다. 매번 사이즈를 확인하고 작업 중인 폴더로 이미지를 옮기는 과정도 귀찮아지기 시작하는데... Unsplash에서 제공해주는 API를 이용하면 이러한 고민이 쉽게 해결됩니다. #1 Unsplash Developers 사이트 주소는 다음과 같습니다. https://unsplash.com/developers 개발자로 등록(Register as a developer)한 후 다양하게 사용하는 방법도 있지만, 웹 개발용 샘플 이미지만 사용할 거라면 등록은 물론이고 특별히 거쳐야 할 과정도 없어 매우 편리합니다. 예전에는 샘플 이미지와 함께 복붙만 하세요 처럼 샘플 이미지와 함께 디테일한 설명이 있었던 거 같은데, 다 사라진 거 같아서 정리할 겸 글을..

enterkeyhint는 모바일 가상키보드의 enter키에 표시되는 내용을 사용자에게 더욱 도움이 되는 형태로 지정해 줄 수 있습니다. #1 Enter (엔터) enterkeyhint="enter" 기본적으론 다음 줄로 행을 이동합니다 ios의 영문 키보드에선 return으로 표기됩니다. (*흔히 말하는 엔터가 ios에선 return이라 불립니다) #2 Done (완료) enterkeyhint="done" 일반적으로 더 이상 입력할 것이 없을때 사용. IME(입력기)가 닫힙니다. #3 Go (이동) enterkeyhint="go" 일반적으로 사용자가 입력한 텍스트의 대상으로 사용자를 데려가는 이동 작업에 사용 #4 Next (다음) enterkeyhint="next" 일반적으로 텍스트를 수락할 다음 필드..

#1 스타일 시트 종류 설명 브라우저 기본 스타일 웹 브라우저에 웹 문서를 표시할 때 브라우저에서 기본으로 사용하는 스타일 인라인 스타일 style 속성을 사용해 필요한 요소에 스타일을 직접 지정 내부 스타일 시트 문서 앞부분에 문서에서 사용하는 스타일을 모아서 함께 정의하고 관리 외부 스타일 시트 문서에서 사용하는 스타일을 모아서 따로 파일로 저장한 후 연결해서 사용 #2 CSS 기본 선택자 종류 설명 작성 예시 전체 선택자 문서의 모든 요소에 스타일을 적용 * { margin: 0; } 타입 선택자 특정 태그를 사용한 모든 요소에 스타일 적용 p { font-style: italic; } 클래스 선택자 특정 부분만 선택해서 문서 안에 여러 번 적용 마침표(.)를 붙여 사용 .bg { backgroun..

#1 텍스트 관련 태그 종류 설명 제목. ~까지 사용할 수 있으며 숫자가 커질수록 글자 크기는 작아짐 텍스트 단락. 내용이 길면 웹브라우저 창의 너비에 맞게 자동으로 줄 바꿈 줄 바꿈. 텍스트 단락 중 원하는 위치에서 줄 바꿈 내용 인용. 다른 내용보다 들여 쓰고 단락으로 표시 중요한 텍스트를 굵게 표시. 화면 낭독기에서 강조해서 읽어 줌 중요하지는 않지만 굵게 표시 중요한 텍스트를 기울게 표시(문장), 화면 낭독기에서 강조해서 읽어 줌 중요하지는 않지만 기울게 표시(마음속의 생각이나 용어) 내용을 편집할 때 추가한 내용을 표사 내용을 편집할 때 삭제한 내용을 표시 위 첨자 아래 첨자 #2 목록 관련 태그 종류 설명 순서 있는 목록의 시작과 끝 순서 없는 목록의 시작과 끝 순서 있는 목록이나 순서 없는 ..

마진 겹침(amrgin collapsing) CSS로 스타일을 주다 보면 주로 섹션별로 구분이 되는 부분처럼 위아래 항목에 margin이 공통으로 들어가는 경우가 종종 발생합니다. 예를들어 위쪽 블록에서 마진 40px을 주고 아래쪽에서 마진 40px을 주면 예상대로라면 중간에 80px의 공간이 생겨야 하는데 서로 겹치는 40px의 공간만 남게 됩니다. 또 다른 예로 위쪽 블럭에서 마진 80px을 주고 아래쪽에서 마진을 40px을 주게 되어도 합쳐지며 80px의 공간만이 생겨납니다. 이런 증상을 해결하는 방법입니다. 아래는간략한 샘플입니다. 1) 박스 생성 2개의 박스를 만들어 보았습니다. 구분하기 쉬워보이게 배경색도 넣어봅니다. 이렇게 만들면 당연하게도 2개는 연속되게 나타납니다. 2) 패딩(paddin..

"폰트는 한글은 Noto Sans KR로, 영어는 Roboto로, 숫자는 Spoqa Han Sans Neo로 부탁드려요." 이런 요청을 받으면, 매번 해당 언어마다 폰트를 지정해 줄 수도 없는 노릇인데, 이럴 때 @font-face를 사용하면 쉽게 해결할 수 있습니다. #1 웹 폰트 웹 폰트는 사용자가 현재 사용하는 기기에 서체를 설치하지 않았더라도 @font-face 명령을 통해서 웹 브라우저에서 폰트를 다운로드하여 사용자에게 보여줍니다. 웹 폰트를 사용하기 위해서는 @font-face로 해당 폰트를 다운로드할 위치를 지정해주고, font-family 속성을 사용하여 적용 할 수 있습니다. 사용 예) @font-face { font-family: 'Gugi-Regular'; font-style: nor..

부모 요소에 사용하는 속성들 grid GridBox란것을 정의 (이것만으로는 특별한 반응은 없음) display: grid; grid-template-columns 몇 열(columns)로 할 것인지, 박스들의 사이즈는 어떻게 할 것인지 지정. grid-template-columns: 4fr 6fr; /* 4대 6으로 나눔 */ grid-template-columns: 40% 60%; /* %로도 사용은 가능 */ grid-template-columns: repeat(3, 1fr); /* 사이즈가 반복될 경우 repeat 방식으로도 가능 */ grid-template-columns: 1fr 1fr 1fr; /*위 repeat과 같다 */ grid-template-rows 몇 줄(rows)로 할 것인지, ..