본문 바로가기

전체 글

SASS 사용법 📒 SASS ✔ 왜? (사용 이유) ◼ CSS 대용 언어로, CSS의 반복 코드 문제 등을 해결하기 위해서 탄생했다. ◼ CSS에 추가적인 문법(조건문, 반복문, 변수, 함수)을 제공한다. 즉, 프로그래밍스럽게 코드를 짤 수 있게 도와준다. ✔ SASS 사용하기 ◼ Live Sass Compiler를 설치한다. ◼ main.scss 파일을 생성해서 개발한다. ◼ 웹브라우저는 .css 파일만 읽을 수 있고, .scss를 읽을 수 없다. 따라서, scss 파일을 css 파일로 변환해서 사용해야 한다. ◼ Live Sass Compiler가 설치되어 있으면 VS Code 하단의 Watch Sass를 클릭하면 동일 폴더에 .main.css 파일이 생성된다. ◼ Html 파일에 .main.css 파일을 첨부해서 .. 더보기
Html&CSS 유용한 방법들 📒 웹 폰트 첨부 방법 ✔ 폰트 넣는 방법 body { font-family: "gulim", 'dotum'; } ◼ body 태그 안에 있는 모든 글자를 굴림체로 적용한다. 굴림체 적용 시 에러가 발생하면 돋음체가 적용된다. ◼ 클라이언트 컴퓨터에 해당 폰트가 설치되어 있어야 적용된다. ◼ font-family는 inherit 된다. -> 자동 상속 ✔ 커스텀 폰트 넣는 방법 @font-face { font-family: '폰트 이름'; src: url(폰트 경로); } ◼ @font-face: 내가 준비한 폰트 파일을 CSS에서 사용 가능하게 등록한다. ◼ 클라이언트 컴퓨터에 등록한 폰트가 없을 시, url로 지정한 곳에서 다운 받아 사용된다. ◼ 한글 폰트의 사이즈는 매우 크기 때문에, 1~2개만 .. 더보기
DDD(Domain Driven Design)란? 📒 DDD(Domain Driven Design) ✔ 도메인을 중심으로 나누어 설계하는 디자인 방법론이다. ◼ 도메인의 모델과 로직에 집중한다. ◼ 단일화된, 보편화된(통일화된) 언어를 사용한다. ◼ 분석 모델과 설계, 개발 모델의 개념이 일치한다. 💥 DDD의 탄생 배경 ◼ DDD가 나오게 된 이유는 설계자와 개발자 둘 사이의 언어 장벽을 해결하기 위함으로, 설계자와 개발자 모두 도메인 관점에서 문제를 바라보게 하기 위해서이다. ◼ 복잡한 도메인 문제를 해결하고 유지보수 가능한 소프트웨어를 만들기 위해서 고안되었다. 💥 Domain이란? 사전적으로 '영역', '집합'을 의미하고, 실질적으로는 우리가 소프트웨어로 해결하고자 하는 문제의 영역을 의미한다. 예를 들어, 온라인 음식 주문이라는 문제를 소프트웨.. 더보기
반응형 레이아웃 📒 CSS 단위 알아보기 ✔ vw 현재 브라우저 폭에 비례해서 설정할 수 있는 단위 .test { width: 100vw; height: 100vw; background-color: grey; } ✔ vh 현재 브라우저 높이에 비례해서 설정할 수 있는 단위 .test { width: 100vw; height: 50vh; background-color: grey; } ✔ rem html 태그(16px) 폰트 사이즈에 비례해서 설정할 수 있는 단위 .test { width: 100rem; // 1600px height: 50vh; background-color: grey; } ✔ em 내 폰트 사이즈에 비례해서 설정할 수 있는 단위 .test { font-size: 15px; width: 100rem; //.. 더보기
Html&CSS 사용하기 📒 HTML&CSS 학습 전 브라우저 렌더링이란? ✔ 브라우저는 텍스트로 이루어진 HTML, CSS, JavaScript 파일을 읽고 웹 페이지를 그려낸다. ✔ 웹 페이지를 그려내는 과정을 "파싱", "렌더링" 작업으로 이루어진다. ❕ 파싱 작업은 HTML, CSS, JavaScript 등의 문서를 읽고 이를 조작할 수 있는 자료구조로 변환하는 과정 ❕ 렌더링 작업은 파싱 작업으로 생성된 자료구조의 일종인 렌더 트리를 기반으로 브라우저 화면에 그 내용을 시각적으로 출력하는 과정 📒 파싱과 렌더링 과정 ✔ HTML, CSS 문서는 텍스트로 이루어져 있어, 브라우저가 해당 자료를 사용해 사용자가 시각적으로 인지할 수 있는 내용으로 렌더링하려면, 우선 전달된 문서를 파싱하고, 이를 사용할 수 있도록 메모리에 .. 더보기
[Kotlin] 범위 지정 함수 ✔ 범위 지정 함수 범위 지정 함수는 특정 객체에 대한 작업을 블록 내에서 실행할 수 있도록 하는 함수이다. 블록은 특정 객체에 대한 작업의 범위를 나타낸다. 특정 객체에 대한 작업을 블록에 작성하면 가독성이 증가하고 유지 보수가 쉬워진다. 수신 객체 지정 람다(함수)라고도 하며, 블록 내에서는 수신 객체를 명시하지 않거나, it을 호출하는 것만으로 수신 객체가 호출된다. Kotlin에서는 apply, run, let, also, with 5가지를 지원한다. ❗❗ apply ◼ apply는 수신 객체 내부 프로퍼티를 변경한 다음, 수신 객체 자체를 반환하기 위해 사용되는 함수이다. ◼ 객체 생성 시, 다양한 프로퍼티를 설정해야 하는 경우 사용한다. ◼ apply에서는 수신 객체로 apply의 수신 객체(.. 더보기
[Effective] equals & hashCode 이번 글에서는 equals와 hashCode에 대해서 다뤄볼 예정이다. ❗ equals 메서드란? 두 인스턴스의 주소 값을 비교하여 같은 인스턴스인지를 확인하고, 같다면 true 다르다면 false를 반환한다. public class EX { public static void main(String[] args) { Person test1 = new Person("Test1"); Person test2 = new Person("Test1"); System.out.println(test1.equals(test1)); // true System.out.println(test2.equals(test1)); // false } public static class Person { private String name.. 더보기
[Effective] try-with-resources BufferedReader in = new BufferedReader(new InputStreamReader(System.in)); String str = in.readLine(); 다음과 같이 BufferedReader를 통해 입력을 받으려고 할 때, 고려 사항 IOException이 발생할 수 있다. close()를 통해 직접 닫아줘야 하는 자원이다. 그래서, try-finally 문법을 사용해 해당 코드를 수정한다면 다음과 같이 수정할 수 있다. public String Input() throws IOException { BufferedReader in = new BufferedReader(new InputStreamReader(System.in)); try { return in.readLine().. 더보기

티스토리툴바