전체 글

[SCSS] HTML에 SCSS 적용하는 법

CSS를 사용하다보면 각종 클래스 혹은 태그들을 나열하느라 시간이 오래 걸리고 반복적으로 클래스와 태그들을 적어줘야 하기 때문에 작업을 하다보면 굉장히 비효율적이란 느낌이 든다. 또한 오타가 발생했을 때 오타를 찾기도 쉽지가 않다. 이러한 이유들로 SCSS를 사용한다. SCSS를 사용하면 CSS 코드가 훨씬 간결해진다. HTML에 SCSS 적용하는 방법 툴에 프로젝트를 생성한다. 해당 프로젝트 안에 'index.html'파일을 만들어 준다. 해당 프로젝트 안에 'css'라는 폴더를 생성해 준다. css 폴더 안에 style.css와 style.scss 파일을 생성한다. index.html에 css코드를 불러온다. → scss에 작성한 내용이 자동으로 작성되도록 설정하면 scss는 따로 불러오지 않아도 된..

MVC 패턴

MVC 패턴이란? MVC란 Model-View-Controller의 약자로 애플리케이션을 세 가지 역할로 구분한 개발 방법론이다. 사용자가 Controller를 조작하면 Controller는 Model을 통해 데이터를 가져오고 그 데이터를 바탕으로 View를 통해 시각적 표현을 제어하여 사용자에게 전달하게 된다. 이러한 패턴을 성공적으로 사용하면 사용자 인터페이스로부터 비즈니스 로직을 분리하여 애플리케이션의 시작적 요소나 그 이면에서 실행되는 비즈니스 로직을 서로 영향 없이 쉽게 고칠 수 있는 애플리케이션을 만들 수 있게 된다. 위 개념을 WEB에 적용 시 사용자가 웹사이트에 접속 Controller는 사용자가 요청한 웹페이지를 서비스하기 위해서 모델을 호출 Model은 데이터베이스나 파일과 같은 데이터..

[Web] google material-icons 적용하기(Outlined, Fill, Rounded, Sharp, Two tone)

폰트 아이콘 보통 홈페이지에서 아이콘은 이미지로도 사용하지만, 모바일도 지원해야 할 경우에 이미지의 크기를 조정해야 한다. 이미지의 크기를 2배 이상으로 넣어야 하고, 크기를 마음대로 늘리고 줄일 경우 깨짐 현상이 발생할 수도 있다. 이런 경우에 사용할 수 있는 것이 폰트 아이콘이다. 폰트 아이콘은 말 그대로 폰트 스타일 내부에 아이콘을 삽입해 제공함으로써 벡터 이미지의 형태를 띠게 된다. 폰트이기 때문에 사이즈나 컬러도 마음대로 조정할 수 있다. 또한 깨지지도 않는다. google material icons 적용하기 google material icons는 사용성 높은 폰트 아이콘 중의 하나이며 한 아이콘에도 여러 가지 스타일을 제공한다. 사용법 상단에 링크를 import한다. 홈페이지에 들어간 후 원..

체크 표시 특수 문자(✓, ✔, ☑)

✓, ✔, ☑

[Spring] AOP(Aspect Oriented Programming), 스프링 AOP

AOP (Aspect Oriented Programming) AOP는 Aspect Oriented Programming의 약자로 관점 지향 프로그래밍이라고 불린다. 관점 지향은 어떤 로직을 기준으로 핵심적인 관점, 부가적인 관점으로 나누어서 보고 그 관점을 기준으로 모듈화 하겠다는 것이다. 예를 들어 핵심적인 관점은 비즈니스 로직이 될 수 있고, 부가적인 관점은 핵심 로직을 실행하기 위해 행해지는 데이터베이스 연결, 로깅, 파일 입출력 등이 될 수 있다. AOP는 흩어진 관심사(Crosscutting Concerns)를 모듈화 할 수 있는 프로그래밍 기법이다 위와 같이 클래스 A, B, C에서 공통적으로 나타나는 색깔 블록은 중복되는 메서드, 필드, 코드 등이다. 이때 예를 들어 클래스 A의 주황색 블록..

쇼핑몰 만들기

보호되어 있는 글입니다.