자동으로 줄바꿈이 되지 않는 특수문자 / 띄어쓰기 없는 영단어 강제 줄바꿈 하는 방법word-break: break-all;실제 코드(tailwind) ${reply.body}

코드 댓글이 없슴다! 실행화면

다크모드 명시 라이트모드 명시 코드 test

정의 MVC 구조란 Model / View / Controller로 구성된 구조이다. - 프로젝트를 구성할 때 구성요소를 세가지의 역할로 구분한 패턴 사용이유 공장에서 하나의 역할만 담당해서 집중도를 올리듯이 3가지의 구성으로 하나의 프로젝트를 만들면 각자 맡은 바에만 집중을 하여 효율이 증가한다. Model의 조건 1. 사용자가 편집하길 원하는 모든 데이터를 갖고 있어야 한다. 2. view나 controller에 대한 정보를 모르고 있어야 한다. 3. 변경이 일어나면 변경 통지에 대한 처리방법을 구현해야 한다. View의 조건 1. Model의 정보를 저장하면 안 된다. 2. Model이나 Controller에 대한 정보를 모르고 있어야 한다. 3. 변경이 일어나면 변경 통지에 대한 처리방법을 구현해..

정의페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의할때 사용기본 문법 One Two Three Four Five Six.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: minmax(100px, auto);}.one { grid-column: 1 / 3; grid-row: 1;}.two { grid-column: 2 / 4; grid-row: 1 / 3;}.three { grid-column: 1; grid-row: 2 / 5;}.four { grid-column: 3..

정의 CSS Flexible Box Layout은 사용자 인터페이스 디자인과 단방향 레이아웃에 최적화된 CSS 모듈이다. css 속성 1. flex - 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다. flex는 flex-grow, flex-shrink, flex-basis의 단축 속성 2. flex-direction - 플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정 3. flex-shrink - flex-item 요소의 flex-shrink 값을 설정하는 속성, flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink 속성을 사용, 설정된 숫자값에..

정의 media query는 화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS의 기능이다. 기본 문법 @media (조건) { 스타일 ~~~ } 예시 넓은 화면에서 배경을 red로 @media (min-width: 800px) { .wide-bg-red { /* 화면이 800px 이상이면 배경색이 red로 */ background-color: red; } } 적용 이미지

UI란 사람(사용자)과 사물 또는 시스템, 특히 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체를 뜻한다. UI의 소통 수단 - 입력: 사용자가 시스템을 조작할 수 있게 한다. - 출력: 시스템이 사용자가 이용한 것에 대한 결과를 표시한다. - 삭제: 시스템이 사용자가 잘못한것을 삭제한다. UI 종류 - 그래픽 사용자 인터페이스(GUI): 체계의 요소에 해당하는 그래픽과 텍스트로 이루어져 있다. 여기에는 적어도 두 개의 서로 다른 정책, 곧 객체지향 인터페이스와 응용 프로그램 지향 인터페이스가 공존하고 있다. - 웹 기반 인터페이스(웹 사용자 인터페이스, WUI): 인터넷과 웹 브라우저를 통해 웹 페이지를 열람하고 조작하는..