오열매의 코딩 공간

간단하게 예제를 통해 핵심만 설명한다. 첫 번째 사진의 코드를 적용시킨 결과가 두 번째 사진이다. html의 body 태그쪽을 보자. 첫 번째 태그는 너비와 높이를 설정하지 않은 block, 두 번째 태그는 너비와 높이를 설정한 block, 세 번째 태그는 너비와 높이를 설정한 inline, 네 번째 태그는 너비와 높이를 설정한 inline에 display:block; 특성까지 설정했다. 결론만 말하자면, inline은 너비와 높이를 가지지 않는다. 아무리 설정해줘도 변경할 수 없다. 너비와 높이는 오직 block만의 특권이다. 따라서, 너비와 높이를 이용하기 위해서는 display:block 이 기본이 되어야 한다. 다행히도 inline 태그는 몇 종류 없다. 아래의 주요 태그들만 알아놓고 나머지는 다..

fCSS-Hack에 관한 코드다. 정석적인 방법은 아니라, 사용자들이 브라우저의 오류를 해결하기 위해 연구해서 공유된 내용임을 미리 알린다. 실제 예시 코드를 이용하여 알아본다. 하나의 컨테이너에 3개의 칼럼이 있는 상황. 원래는 컨테이너에 justify-content: space-between 을 부여하여 배치하려 하는데, 가운데 요소가 화면의 정중앙에서 약간 벗어나는 상황이다. 그래서 아래와 같은 css 코드를 사용한다. 참고로 SCSS를 사용했다. CSS로 사용하려면 상위 태그로부터 따로 분리해내어 독립적으로 선언하고, &의 뜻은 해당 태그라는 뜻이다. 예를 들면, div{ &:hover { ~ } } 는 div:hover{ ~ } 와 같은 뜻이다. 위 코드를 실행하면, 처음에 의도한 space-b..

box-sizing 특성의 실용적인 측면만 포스팅 한다. 간단하게 원래의 특성에 대해 말하자면, box-sizing은 'Box의 크기를 어떤 것을 기준으로 계산할지'에 대한 것이다. content-box : 콘텐트 영역을 기준으로 크기를 정함 border-box : 테두리를 기준으로 크기를 정함 initial : 기본값으로 설정 inherit : 부모 요소의 속성값을 상속 defalut는 content-box 이다. 하지만 content-box의 문제점이 있다. 기존의 특정 Box에 Padding 값을 부여한 상태에서 해당 Box 안의 요소에 특정 너비값을 준 경우가 그 예시에 속한다. 실제 실습 예시이다. 원래는 아이콘 4개가 보여야 하는데, 하나가 화면 밖으로 사라졌다. 이미 Padding으로 50p..

말 그대로, 클래스 명명법을 통해 html 태그를 구성하는 방식이다. 빠르게 실제 예시를 통해 살펴본다. 위 사진은 html 태그를 생성할 때, 특정 태그에 속하는 모든 자식 태그들을 상위 태그의 클래스명을 포함하여 명명한 사진이다. (간단하게 이러한 방식을 BEM 이라고 생각하면 된다.) 실용적인 측면만 살펴보자면, 이처럼 클래스명으로 구분하는 것이 나중에 해당 요소에 대한 유지보수가 용이하다. CSS 코드로 보면 직관적으로 어떤 부분에 대한 코드인지도 한 번에 알 수 있다. 참고로, 위 코드는 SCSS를 적용했을 때의 코드 형태이다. 단점은 클래스명을 센스있게 짓기가 까다롭다는 점이다. 이는 코딩 실력과는 무관한 다른 영역인 것 같다. 하다보면 노하우가 생길 것이다. BEM 방식을 SCSS와 결합하여..

구글에서 제공하는 무료 폰트와 아이콘을 이용할 수 있는 사이트를 찾았다. 1) Google Fonts https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 위 링크로 접속해서 원하는 폰트를 찾는다. 폰트를 선택하고 들어가서 아래를 살펴보면 Styles 라는 부분이 나온다. 굵기별로 구분되어 있다. 원하는 굵기를 우측의 + 버튼을 눌러서 추가한다. 추가하면 우측에 내가 추가한 내용들에 대한 팁들이 생긴다. 아래의 Use on the web 에서 @import를 누른다. (link를 이용하는 방식보다 깔끔하다.) 태그 안의 내용들과, 아..

브라우저에는 기본적인 CSS 요소가 있다. 위 사진처럼, body 태그에는 테두리에 8px 이 기본적으로 설정되어 있다. 이 외에도 다수 있는데, 이러한 것들에 영향을 받지 않고 온전히 나의 코드로만 사이트를 꾸미기 위해서는 기본 설정들을 초기화 하는 코드가 필요하다. 이를 Reset.css 라고 한다. /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code..

WSL로 프로젝트를 생성하고 이용하면 확실히 빠르고 좋다. 하지만 터미널로만 봐야 하는 불편함이 있다. 탐색기를 통해서 접근했으면 할 때, 아래의 코드를 입력하면 된다. explorer.exe . 탐색기가 열리면서, 나의 프로젝트를 window 탐색기로 볼 수 있다. 명령어만으로 파일 및 폴더를 생성하거나 삭제하지 않아도 된다. 파일 이동도 편리하다!

git branch -a 터미널에 위의 코드를 입력하면, 현재 나의 데스크탑에 있는 로컬 Branch와 Github 등의 사이트에 연결되어 있는 원격 Branch의 모든 목록들이 나온다. 빨간색 글씨로 나온 것이 원격 Branch이며, 나머지 하얀색과 초록색이 로컬 Branch이다. 현재 위치한 Branch는 별 기호와 함께 초록색으로 나타난다 1) 로컬 Branch 삭제 git branch -d 로컬 Branch는 간단하다. 위 코드를 입력하면 되며, 직관적으로도 이해가 된다. 삭제 후 다시 git branch -a 를 입력해보면 (또는 git branch -l) 삭제된 것을 볼 수 있다. 2) 원격 Branch 삭제 원격 Branch의 삭제 코드는 아래와 같다. git push origin --del..

Windows Terminal을 이용할 때, 시작 디렉터리가 원하는 위치에서 시작하지 않아서 매번 change directory를 통해 나의 프로젝트에 접근해야 하는 경우가 많아서 찾아봤다. 위 이미지의 번호 순서대로 설명을 참고하면 된다. 1) 새 탭 버튼 옆의 버튼을 누른다. 2) 설정을 누른다. 3) WSL을 누른다. 4) '시작 디렉터리' 라고 되어 있는 부분의 우측 버튼을 누른다. 5) 원하는 디렉터리를 입력한다. (★Point★) //wsl$/Ubuntu-//// ~~~ 뭔가 난잡해보이겠지만, 추가 예시로 설명하자면 나의 Ubuntu 버전은 18.04.05 LTS 이고 home/OhFruits/linux 라는 폴더에서 시작하고 싶다면 >> //wsl$/Ubuntu-18.04/home/OhFru..

Sass란 Syntactically Awesome Style Sheets의 약자이다. CSS pre-processor(전처리기)로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성 및 가독성을 높여주어 유지보수를 쉽게 해준다. scss는 sass의 3버전에서 등장한 언어이다. 퍼블리셔에게 익숙한 css와 비슷한 구문을 가지고 있으며, css와 완전히 호환되도록 새로운 구문을 도입한 css의 상위 호환 스타일시트이다. sass기능을 지원하되, css와 거의 같은 문법으로 사용된다는 점에서, 퍼블리셔들에게 각광받는 언어이다. 설치 과정) 1. git 설치: https://git-scm.com/ Git git-scm.com 2. NodeJS LTS 설치: https://nodejs.org/en/ N..