Light Dev

목차 HTML과 CSS 중 border 속성을 이용하여 삼각형을 만들 수 있다. 그럼, 여러가지 형태의 삼각형을 만들고, 그 삼각형을 여러 방향으로 만드는 방법을 알아보자. HTML 생성하기 삼각형을 만들려면 우선, HTML 파일에 다음과 같이 내용이 없는 요소를 하나 생성한다. HTML 사각형 만들기 HTML을 생성했다면, 가로와 세로의 크기를 0으로 만든다. 이후 아래쪽과 왼쪽, 오른쪽에 테두리를 추가하면 사각형을 만들 수 있다. CSS .triangle { width: 0px; height: 0px; border-bottom: 360px solid #666666; border-left: 180px solid #666666; border-right: 180px solid #666666; } 삼각형 만..

목차 바로 전 포스팅에서 텍스트에 그라데이션을 적용하는 법에 대해 알아보았다. 그렇다면 이번에는 border에 그라데이션을 적용하는 법에 대해서 포스팅해보겠다. 예제 파일 작성하기 Index.html 수정 index.html의 body 부분 안에 밑의 코드를 작성한다. HTML Style.css 작성. 우선 HTML에 CSS를 다음과 같이 추가하여 박스들을 정 중앙에 위치시킨다. CSS html { display: flex; align-items: center; justify-content: center; height: 100vh; } 이후 .box1 부분에 다음과 같이 CSS를 작성한다. CSS .box1 { width: 200px; height: 200px; border: 5px solid; bord..

목차 웹 개발을 하다보면 가끔식 사용하는 텍스트에 그라데이션 효과를 넣는 것이 헷갈릴 때가 있어서 지금 작성해보고자 한다. 우선 텍스트에 적용되는 그라디언트 속성을 다음과 같다. CSS # 이 속성은 그라데이션을 넣어주는 속성이다. background: linear-gradient(방향, #색상 코드, #색상 코드, #색상 코드,... , #색상 코드); # 이 속성은 요소의 배경이 어디까지 색을 채울지 정하는 속성이다. -webkit-background-clip: text; # 텍스트 문자의 채우기 색을 지정하는 속성으로, 이 속성이 지정되지 않는다면 color의 색상을 따라간다. -webkit-text-fill-color: transparent; 그럼, 이 내용을 바탕으로 텍스트에 그라데이션을 적용하..

목차 tsconfig.json 설정하기 기본적으로 TypeScript 프로젝트에는 tsconfig.json이 존재한다. 이 파일에서는 ts 파일들을 js 파일로 어떻게 변환할 것인지 세부 설정을 할 수 있다. TypeScript { "compilerOptions": { "target": "es5", "module": "commonjs", } } target은 타입스크립트 파일을 어떤 버전의 자바스크립트로 바꿀지를 정하는 부분이다. ES5 이외에도 ES2016, ESNEXT 등 원하는 자바스크립트 버전을 설정할 수 있다. module은 자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 사용할 지를 정하는 부분이다. Commonjs는 require 문법, ES2015, ESNEXT는 import..

목차 CSS는 HTML 태그를 꾸미거나 효과를 넣어 주는 등, 디자인 요소를 추가할 때 사용하는 전처리 과정을 의미한다. 프로젝트의 규모가 커지고 반응형 웹을 구현할 때 CSS는 가독성이 떨어지고 유지보수가 어렵다는 단점이 있다. 하지만 SCSS는 CSS와 달리 코드의 재활용성을 높이고, 가독성을 올려 주기 때문에 유용하다. 특히 변수를 활용하여 코드를 작성할 수 있도록 지원하기 때문에 코드의 가독성을 높여주고 반응형 웹 작성을 더 수월하게 만들 수 있다. 그럼 SCSS를 이용하여 반응형 웹을 개발하는 방법을 알아보자. SCSS를 이용한 반응형 웹 개발. SCSS에서 반응형 사이즈 사용법. 우선 SCSS에서 변수를 설정하고 @mixin을 사용하여 밑과 같이 작성한다. SCSS $pc2000: 2000px..

목차 웹 사이트를 이용하는 유저들은 브라우저를 사용하면서 뒤로가기 버튼을 클릭하여 화면이 새로고침이 되어 버리는 경우, 또는 다른 이유로 화면을 새로고침하는 경우가 있다. 이렇게 되면 Vuex의 store.js에 있거나 상태가 변경된 모든 값들이 초기화 되어버린다. 이러한 상황을 방지하기 위해 JavaScript의 localstoarge 관련 함수를 사용하기도 하지만, Vuex의 자료들을 localstorage로 자동으로 저장시키고 다시 사용할 수 있게끔 도와주는 플러그인이 Vuex-Persistedstate다. 그럼 이번 글에서는 Vuex-Persistedstate의 사용법에 대해 포스팅해보겠다. Vuex-Persistedstate 설치하기 우선 Vuex-Persistedstate를 설치합니다. 명령어..

Tistory 블로그의 CSS를 수정하면서 사용했던 스크롤 CSS 문법을 정리해 보려고 한다. 우선 스크롤바에는 밑의 3가지 CSS 코드를 추가하여 스타일을 적용할 수 있습니다. CSS # 스크롤바 영역에 대한 설정 ::-webkit-scrollbar # 스크롤바 막대에 대한 설정 ::-webkit-scrollbar-thumb # 스크롤바 뒷 배경에 대한 설정 ::-webkit-scrollbar-track 이처럼 영역::코드 ( ex : body::코드 or .container::코드 )로 스크롤 적용 대상을 제한하여 사용할 수 있다. 위의 내용을 바탕으로 스크롤 CSS를 Tistory의 style.css에 추가해 보았다. CSS body::-webkit-scrollbar { width: 12px; /*..

목차 웹 개발을 하다보면, 디자인적인 측면에서 말줄임(...)을 사용해야 하는 경우가 많다. 왜냐하면 이렇게 말줄임표를 사용해야 디자인이 더 깔끔해 보이기 때문이다. 말줄임 CSS 문법은 다음과 같다. CSS overflow: hidden; : 박스에서 넘쳐난 텍스트 숨기기 white-space: nowrap; : 줄바꿈이 없어짐 text-overflow: ellipsis; : ... 말줄임 효과 -webkit-line-clamp : '글자'; : '글자'의 최대 라인수를 결정 -webkit-box-orient: vertical; : 영역 박스의 내의 정렬을 수직으로 만든다. word-break: break-all; : 어절이 유지되지 않고 끊어져서 줄바꿈 됨 말줄임 문법 한줄만 나타내기 결과) Lore..