목록FrontEnd (106)
투케이2K
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [요약 설명] 태그는 사용자가 직접 조작하여 보거나 숨길 수 있는 세부사항을 명시할 때 사용합니다 태그는 태그에 의해 생성되는 내용을 대표하기 위해 기본적으로 보이는 제목을 정의합니다 [소스 코드] 지역 구분 서울 경북 전북 [결과 출력]
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] [결과 출력] [참고 파일]
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [원인] >> 아이폰, 안드로이드 모바일에서 카카오톡 링크 접속 시 인앱 브라우저 실행 >> 주소 표시줄, 네이게이션 바 자동 숨김 현상으로 UI 화면이 망가지는 경우 [해결 방법] 공통 : - 가상 키보드 밀림 현상을 방지하기 위해서 각 컨테이너 position 속성을 fixed 로 지정한다 아이폰 추가 설정 : - 자바스크립트 onresize 함수에서 >> 각 컨테이너 height , top 비율을 다시 설정 (변경된 body 해상도 확인 후 다시 비율 설정 : 자연스럽게 full screen 만들기) - 자바스크립트 onready 함수에서 카카오 인앱 브라우저 접속 확인 >> 아이폰인..
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스코드] [요약 설명]
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스코드] [text-shadow: 1px 1px 1px #000;] text-shadow 를 사용해서 텍스트 글자에 그림자 표과 적용 실시 [text-shadow: 2px 2px 2px #000;] text-shadow 를 사용해서 텍스트 글자에 그림자 표과 적용 실시 [text-shadow: 2px 2px 5px #000;] text-shadow 를 사용해서 텍스트 글자에 그림자 표과 적용 실시 [결과 출력] [요약 설명]
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스코드] [p 태그 : letter-spacing: 10px;] letter-spacing : 텍스트 자간 (가로 간격) 사이즈를 설정할 수 있습니다 [p 태그 : letter-spacing: 5px;] letter-spacing : 텍스트 자간 (가로 간격) 사이즈를 설정할 수 있습니다 [p 태그 : letter-spacing: 0px;] letter-spacing : 텍스트 자간 (가로 간격) 사이즈를 설정할 수 있습니다 [p 태그 : letter-spacing: -1px;] letter-spacing : 텍스트 자간 (가로 간격) 사이즈를 설정할 수 있습니다 [결과 출력] [요약 설명] ..
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스코드] [div : height:10%; display: block; overflow: auto;] [p : display: table-cell;] 부모 div 스타일 height 지정 및 display block 설정, overflow 길이 초과 auto 처리 실시 자식 p 태그 스타일 display: table-cell; 처리 실시 [결과 출력] [요약 설명]
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스코드] [div : height:3%; display:table; table-layout:fixed;] [p : overflow: hidden; text-overflow: ellipsis; white-space: nowrap;] 부모 div 스타일 height 지정 및 텍스트 영역 초과시 히든 처리 실시 [div : display:table; table-layout:fixed;] [p : 텍스트 영역 초과 시 히든 처리 않함] 부모 div 스타일 height 지정 없음. p 태그 텍스트 글자 수에 맞춰서 자동으로 div height 영역 높이 조절 [결과 출력] [요약 설명]
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스코드] [vertical-align: top] [text-align: center] p 태그 텍스트 vertical-align: top; 속성 값은 수직 (세로) 방향 기준으로 위쪽에 정렬을 실시합니다. p 태그 text-align: center; 속성 값은 수평 (가로) 방향 기준으로 텍스트 중앙 정렬을 실시합니다 [vertical-align: middle] [text-align: center] p 태그 텍스트 vertical-align: middle; 속성 값은 수직 (세로) 방향 기준으로 중앙에 정렬을 실시합니다. p 태그 text-align: center; 속성 값은 수평 (가로) 방향 ..
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스코드] [text-align: left] [line-height: 20px] p 태그 텍스트 text-align: left 속성 값은 수평 방향 기준으로 왼쪽으로 정렬을 실시합니다. p 태그 line-height: 20px; 속성 값은 수직 방향 기준으로 줄 간격 높이를 설정 합니다 [text-align: left] [line-height: 40px] p 태그 텍스트 text-align: left 속성 값은 수평 방향 기준으로 왼쪽으로 정렬을 실시합니다. p 태그 line-height: 40px; 속성 값은 수직 방향 기준으로 줄 간격 높이를 설정 합니다 [text-align: left] [pa..
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스코드] [결과 출력] [요약 설명]
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스코드] [text-align: left] p 태그 텍스트 text-align: left 속성 값은 수평 방향 기준으로 왼쪽으로 정렬을 실시합니다. p 태그 vertical-align: middle; 속성 값은 수직 방향 기준으로 중앙 정렬을 실시합니다. 텍스트를 히든 처리 안하고 그냥 표시할 경우는 table-layout: fixed 설정을 하면 안됩니다. [text-align: right] p 태그 텍스트 text-align: right 속성 값은 수평 방향 기준으로 오른쪽으로 정렬을 실시합니다. p 태그 vertical-align: middle; 속성 값은 수직 방향 기준으로 중앙 정렬을 실..
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스코드] TEST 20px; TEST 10px; TEST 8px; [결과 출력] [요약 설명]
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스코드] [결과 출력] [요약 설명]
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스코드] hello hello hello [결과 출력] [요약 설명]
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [요약 스크립트 소스코드] /* [페이지 생성 부분] */ var pageName_Array = new Array(); // 생성된 페이지 이름 저장 배열 function createContentLayOut() { console.log(""); console.log("[createContentLayOut] : [start]"); console.log(""); // [for 반복문을 수행하면서 div 생성 실시] for(var i=1; i
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] [결과 출력] [이미지 파일 첨부]
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] 1 2 3 4 5 [결과 출력]
[개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [style 소스 코드] [body 소스 코드] ALL FONT BOLD FONT Italic FONT [폰트 저장 경로] [결과 출력] [요약 설명] [font-face 및 font-family 추가 설명] 1. font-face : 폰트 설정 2. src : 사용할 폰트 경로를 지정할 때 사용 3. format : 폰트 확장자명 타입 지정 시 사용 (.ttf : truetype / .ttf .otf : opentype) (.svg : svg / .woff : woff) 4. font-family 글꼴 유형 (sans-serif : 삐침 없고 굵기가 일정 고딕계열) (serif :..