전체 글
-
CSS Transition 속성front-end/HTMI CSS 2023. 6. 30. 21:16
1. opacity 속성 HTML 요소의 투명도를 조절하는 속성 0 ~ 1 실수 입력(0.5 반투명 효과) .box { opacity : 0 } 2. transition 속성 transition을 부여하면 CSS가 변할 때 서서히 변경되는 효과가 생김 all 은 모든 스타일, 1s는 1초 동안 변화 .box { opacity : 0; transition : all 1s; } 3. one-way 애니메이션 만드는 TIP 시작 스타일 정하기 최종 스타일 정하기 트리거 주기 정하기 transition으로 서서히 동작 만들기
-
반응형 웹 레이아웃 만들기front-end/HTMI CSS 2023. 6. 26. 22:28
1. 단위 정리 rem은 과거에 웹브라징 폰트를 조절해서 사용하는 사람들이 있어서 사용을 했었습니다. 현재는 ctrl + 마우스 훨로 줌 인 줌 아웃을 쓰는 사람들이 많아져서, 페이지를 가변적으로 반응하는 사이트가 아니면 사용하지 않습니다. 글자 사이즈 단위를 px단위로 기억해서 16px 18px 20px 으로 사용하는 것보다 1rem 1.2rem 이런 씩으로 사용하는것이 편하게 좋습니다. .box { width : 16px; /* 기본 px 단위 */ width : 1.5rem; /* html태그 혹은 기본 폰트사이즈의 1.5배 */ width : 2em; /* 내 폰트사이즈 혹은 상위요소 폰트사이즈의 2배 */ width : 50vw; /* 브라우저(viewport) 화면 폭의 50% */ width..
-
Jsp MVC Model1과 Model2back-end&DB/Java 2023. 6. 25. 22:51
Design Pattern 소프트웨어 설계에 있어 공통된 문제들에 대한 표준적인 해법과 작명법 1. MVC(Model View Controller) 시각적으로 보여지는 부분과 데이터를 처리하는 부분을 분리하여 유연한 구조를 설계 2. MVC의 구성 - Model 실행에 직접적인 관여X 데이터를 담거나, 데이터를 보내거나, 수정, 삭제하는 객체 - Controller 어플리케이션의 행위를 정의 Logic 결과에 따라 적절한 View를 선택하여 응답 - View Model 데이터를 기반 실제 사용자에게 보여지는 페이지 3. Model1 과 Model2의 차이점 - Model1 웹 어플리케이션을 개발할 때 JSP만을 사용하는 설계 방법 클라이언트의 요청 처리 DB연동,세션 관리, 응답 처리 등과 같은 작업을 ..
-
JSP JSTLback-end&DB/Java 2023. 6. 25. 22:27
1. JSTL - JSTL(Jsp Standard Tag Library) JSTL란 Jsp에서 사용 가능한 표준 태그 라이브러리 - 커스텀 태그 Jsp를 작성할 때 자주 사용되는 Java 코드를 web에서 사용할 있는 태그 형태로 만들어 놓은 것 커스텀 태그 설명 core 변수선언, 조건문, 반복문 등가 같은 제어기능, 다른 페이지로 이동 기능 등을 제공 format 숫자, 날짜, 시간을 포매팅하는 기능, 국제화/다국어 지원 기능 xml xml문서를 처리할 때 필요한 기능 functions 문자열을 처리하는 함수 제공 2. 내장객체 JSP page안에서 내장객체를 사할 수 있는 이유는 Web containner가 JSP page를 Servlet calss로 변환시키면서 자동으로 내장 객체를 선언 - OU..
-
HTML head 태그(사이트 제목, open graph 등등)front-end/HTMI CSS 2023. 6. 25. 21:43
1. head 태그에 사용되는 것들 바디 - 각종 css 파일 CSS 파일들을 첨부할 때 링크태그를 넣을 수 있습니다. 1. css/main.css 현재 HTML파일과 같은 경로에 있는 css라는 폴더 내의 main.css 파일을 의미 = 상대 경로 2. /css/main.css 현재 사이트의 메인경로부터 시작해서 메인/css/main.css 파일을 첨부하라는 의미 = 절대 경로 - 스타일 태그 css 파일이 아닌 head 안에서도 style으로 가능합니다. css파일과 유사하게 작동 태그 맨 밑 같은 곳에 두면 사이트 로딩시 스타일이 깨질 수 있다. - 사이트 제목 - 여러가지 meta 태그 사이트의 인코딩 형식을 지정할 때 charset="UTF-8" 이라고 속성을 적을 수 있습니다. 사이트의 검색 ..
-
CSS Flexboxfront-end/HTMI CSS 2023. 6. 25. 19:54
1. Flexbox 란? 박스를 감싸는 부모 요소에게 display : flex를 사용 가로 정렬로 박스들의 배치 익스플로우 11 이상에서만 사용가능 11 미만에서는 에러 발생 See the Pen Flexbox by 이승훈 (@miedsluo-the-typescripter) on CodePen. 2. Flexbox 세부속성 justify-content : center; 좌우정렬 align-items : center; 상하정렬 flex-direction : column; 세로정렬 아래 코드에 입력 시 세로로 정렬되는 박스의 모습을 볼 수 있습니다. flex-wrap : wrap; 폭이 넘치는 요소 wrap 처리 flex-grow : 2; 폭이 상대적으로 몇 배인지 결정 See the Pen Flexbox..
-
HTML CSS 웹폰트 넣는 방법 & 안티앨리어싱front-end/HTMI CSS 2023. 6. 25. 18:15
1. 폰트 패밀리 설정방법 오류 없이 사용할려면 폰트의 영문명을 사용한다. 폰트명에 띄어쓰기가 있을 수 있으므로, 따옴표 안에 담는다. 폰트명을 콤마( , )로 여러개 쓰면 제일 왼쪽에 있는 폰트부터 적용. 실패하면 뒤에 있는 폰트들을 차례로 적용한다. 웹사이트 이용자의 컴퓨터에 설치가 된 폰트들을 적용이 가능하다. body { font-family : 'gulim', 'gothic' } - 사용자의 컴퓨터에 설치되지 않은 폰트를 사이트에서 이용하는 방법 CSS파일 최상단에 @font-face 라는 명령어를 넣고, 그 안에 적용할 폰트의 경로와 이름을 적어두면 된다. font라는 폴더안에 폰트(ttf 혹은 woff)파일이 필요 woff파일은 ttf대비 용량이 적은 폰트 파일로 woff파일을 구할 수 있다..
-
OOCSS, BEM class 작명법front-end/HTMI CSS 2023. 6. 22. 23:59
1. Obiect Oriented CSS 빨간색 버튼과 파란색 버튼이 있습니다. .main-btn-red { font-size : 20px; padding : 15px; border : none; cursor : pointer; background : red; } .main-btn-blue { font-size : 20px; padding : 15px; border : none; cursor : pointer; background : blue; } 아마 두개의 button에 이렇게 넣는 경우 중복된 코드가 4줄이 존재를 합니다. 버튼이 5가지 색이면? 10가지 색이면? CSS 파일에 용량이 커지면 웹사이트 로딩 속도를 저하시키는 원인이 됩니다. .main-btn { font-size : 20px; pad..