티스토리

내맘대로 개발개발

검색하기

블로그 홈

내맘대로 개발개발

youthstory.tistory.com/m

Hello, Im2world!

구독자: 0

방명록 방문하기

728x90

주요 글 목록

REST API, CORS 에러 해결방법 이 글은 AJAX를 다룬 글과 함께 보면 좋을 듯하다. 원래 AJAX를 다루며 한 글에 작성하려했으나, 최근 CORS에러를 직접 겪고 해결방법을 찾아보다가 글을 따로 분리했다. 1. REST API ▪ RESTful API는 두 컴퓨터 시스템이 인터넷을 통해 정보를 안전하게 교환하기 위해 사용하는 인터페이스 ▪ REST(Representational State Transfer)는 API 작동 방식에 대한 조건을 부과하는 소프트웨어 아키텍처 ▪ 작동방식 1) 클라이언트가 서버에 요청 전송 2) 서버가 클라이언트 인증 후 클라이언트에게 해당 요청 수행할 수 있는 권한 있나 확인 3) 서버가 요청 수신 후 내부적으로 처리 4) 서버가 클라이언트에 응답 반환(응답 요청 성공여부, 상태 코드 등 포함) ➢ 응답 .. 공감수 0 댓글수 0 2022. 6. 12.
자바 문자열 분리, 구분: split, StringTokenizer 차이 1. split() ㆍStirng 클래스 메소드 ㆍ지정한 구분자로 문자열을 나눠 배열에 저장 ㆍ구분자로 여러개 사용시 |(파이프) 사용 ㆍ구분자에 정규식도 많이 사용한다. ㆍ예) 공백을 구분자로 문자열을 나눠 배열 arr에 저장 package stringTokenizerTest; public class SplitTest { public static void main(String[] args) { String text = "Happy day"; String arr [] = text.split(" "); //foreach문으로 arr배열 출력 for(String showArr : arr) { System.out.println(showArr); } System.out.println(); String text2.. 공감수 0 댓글수 0 2022. 6. 9.
BufferedReader/ BufferedWriter/ StringBuilder 차이 String 연산 사용시 효율적 메모리 사용과 연산 성능 향상을 위해 Scanner 보다 BufferedReader/ BufferedWriter/ StringBuilder를 사용할 것을 권장한다. BufferedReader/ BufferedWriter/ StringBuilder 를 설명하기에 앞서 알아야할 개념이 hashCode()메소드와 String이 불변 객체라는 것이다. 1. hashCode() ㆍhashCode() 메소드를 호출하면 hashcode가 리턴 ㆍHashcode는 객체를 식별하는 Integer 값 (String값을 int로 리턴) ㆍJava에서 hashCode()는 Object 클래스에 구현되어있음 2. String은 불변객체 ㆍ아래 예시를 보면, 동일 변수 text1이지만, hashC.. 공감수 0 댓글수 0 2022. 6. 9.
JSP를 위한 Eclipse, Visual Studio Code 환경설정 1. Eclipse 환경 설정 기존에는 JSP를 리눅스서버에서 사용해봤던 터라 이클립스는 기본버전으로받아놨었다. 이번에는 Tomcat을 이클립스에서 실행하려고한다. 이를 위해서는 Eclipse IDE for Enterprise Java and Web Developers 를 설치해야한다. 기존에 이클립스 java버전을 받은 사람도 제거 없이 위 버전을 설치하면 된다. 내 경우에는 이클립스에서 jsp를 실행하고, 비주얼스튜디오코드에서 코드를 작성하려한다. 굳이 이렇게 나눠 사용하는 이유는, 코드 작성하기에는 개인적으로 vs code가 편하고, tomcat의 설정은 이클립스가 자동으로 잡아주기 때문이다. 1) Eclipse IDE for Enterprise Java and Web Developers 다운로드 .. 공감수 0 댓글수 0 2022. 6. 8.
AJAX: fetch함수, 동기, 비동기 방식 1. AJAX (Asynchronous Javascript And XML) 정의 ➢ JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML데이터를 주고 받는 기술 ▪ 자바스크립트를 통해서 서버에 데이터를 요청하는 것 ➢ 특정화면만 바꾸고 싶을 때 사용. ▪ EX) 네이버 로그인 할 때 로그인 부분만 변경됨. 페북 댓글 작성시 누가 작성중입니다. 라는 문구가 나온다. ➢ 전체 웹페이지를 로드할 필요없이 일부화면만 갱신해서 웹페이지 속도 향상 ➢ 클라이언트에서 서버로 데이터를 요청하고 결과를 돌려받을 수 있다. 그동안 브라우저가 멈추지 않는다. 2. 클라이언트와 서버 1) 클라이언트 ➢ 서버에서 정보를 가져와 사용자에게 보여줄 수 있는 소프트웨어. ▪ 예) 웹브라우저, App 2) 서버 ➢ .. 공감수 0 댓글수 0 2022. 6. 8.
jQuery selector(선택자), val(), text(), html() 1. jQuery selector ※제이쿼리 객체로 만들기 $사용 => $(this) (1) $("p") ▪ p 태그들 선택 (2) $('input') ▪ input인 태그 전부 가리킴 jQuery.fn.init(7) [input#all, input, input, input, input, input, input, prevObject: jQuery.fn.init(1)] (3) $('input:checkbox‘) ▪ input 태그 중 checkbox 전부 가리킴 jQuery.fn.init(8) [input#all, input, input, input, input, input, input, input#log_button, prevObject: jQuery.fn.init(1)] (4) $('input:chec.. 공감수 0 댓글수 0 2022. 6. 2.
jQuery : jQuery개념, jQuery cdn적용방법, onclick, 메서드 체인, append 1. jQuery란? ▪ 자바스크립트 라이브러리 ▪ Element를 쉽게 찾고 조작가능 ▪ 뛰어난 호환성 ✓ 거의 모든 웹브라우저에 적용가능 ▪ 하락추세라고는 하나, 2020년 기준 점유율 75% ▪ jQuery 시작은 $ → jQuery객체 생성을 위해 $를 사용한다. 2. CDN (Contents Delivery Network) ▪ 자료를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템 ▪ 데이터 저장소를 복사한 복제본이 여러군데에 있는 것 3. jQuery cdn 종류 ▪ uncompressed, minified, slim, slim minified ▪ uncompressed ✓ 코드가 그대로 출력, 개발할 때 편리 ✓ 용량 288kb ▪ slim minifi.. 공감수 0 댓글수 0 2022. 6. 2.
JavaScript Selector, mouse 관련 이벤트 (onmouseover, onmouseleave) 1. Java Script 셀렉터 종류 ➢요소의 ID명 ▪ document.getElementById(“”); ➢요소의 class명 ▪ document.getElementsByClassName(“”); ➢요소의 tag 명 ▪ document.getElementsByTagName(“”); ➢ document.querySelector(‘’); ▪ 맨 처음 발견한 것만 반환 ➢ document.querySelectorAll(‘’); ▪ 일치하는 것 모두 반환 2. CSS 조작 ➢innerTEXT ▪ 태그도 문자자체로 인식 ▪ 문자그대로 로 입력 ➢innerHTML ▪ 태그를 변경할 때사용 ▪ 입력하면 줄바꿈 ➢ CSS조작 예시 ▪ addEventListener ✓ 특정 행동시 함수 발동 ✓ 예시에서는 butt.. 공감수 0 댓글수 0 2022. 5. 31.
JavaScript관련 기본개념 : DOM, 함수선언 및 실행(alert, confirm, prompt )등 JavaScript관련 기본개념 컴파일 소스코드를 기계가 이해할 수 있도록 기계어로 번역하는 과정 모든 언어는 컴파일 과정을 거치게 되어 있다. 인터프리터 언어 (interpreter) 실시간으로 실행되는 언어 → 컴파일 언어보다 빠름. 단순하기 때문 (컴파일 언어는 해석하는 컴파일러 과정필요) 예) Javascript , PHP , ASP , Python 반대: 컴파일 언어 등등.. 예) C, C++ , Java , Go DOM Document Object Model 문서 객체 모델 화면의 엘리먼트를 나타내는 것. log 프로그램 흐름 확인위해 남기는 기록 함수 function method, procedure등으로도 불림. 특정 동작을 수행하는 코드 native Java Script 네이티브 자바스크립.. 공감수 0 댓글수 0 2022. 5. 31.
for each문 for each 문을 쓰면 for 문을 쓸 때 보다 코드가 훨씬 간단해진다. for(타입 값받아줄 변수명 : 출력하고 싶은 자료구조(=배열)) for each문의 장점은 바로, 인덱스를 표기할 필요가없다는 것이다. for each문이 알아서 해당 배열의 처음부터 끝까지 모든 인덱스 값을 다 출력해준다. for each문이라고 부르지만, 표기할 때는 for 만 작성한다. for문으로 출력 시 예제 foreach로 출력 시 예제 int[] arr = {10,11,12,13,14}; for(int i = 0; i < arr.length; i++) { int value = arr[i]; //arr[0]~[4] System.out.println(value); } int[] arr = {10,11,12,13,14}.. 공감수 0 댓글수 0 2022. 4. 20.
Eclipse 이클립스 폰트 변경 Eclipse D2 Coding D2 Coding 폰트는 네이버에서 개발자의 코딩을 위해 만든 글꼴이다. 네이버 나눔바른고딕을 바탕으로 개발됐고, 가독성이 굉장히 좋다. 또한, 한글에 최적화된 글꼴이다. 이클립스 기본 폰트 쓰다가 D2 Coding을 적용하면 개안한 것 같다. 기본폰트로 한글 출력하면 한글이 쭈글쭈글하게 나오는데, D2 Coding으로 글꼴을 설정하면 한글도, 영어도, 숫자도, 기호도 아주 예쁘게 나온다. 이클립스 폰트변경, D2 Coding적용방법 1. Naver github 에서 zip파일 다운로드 Naver github 공식홈페이지 : https://github.com/naver/d2codingfont 2. zip파일 압축해제 후 폰트파일 더블 클릭해서 설치 마우스로 파일 블록 잡고.. 공감수 1 댓글수 0 2022. 4. 14.
풀스택 개발자(Full stack developer) 의미와 필요한 기술 1. 풀스택 개발자 풀스택 개발자는 프론트엔드(Front-end)와 백엔드(back-end)를 모두 다룰 수 있는 개발자를 말한다. 최근에는 프론트엔드, 백엔드 뿐만 아니라 데이터베이스, 모바일, DevOps(소프트웨어 개발과 IT운영담당자가 연계해 협력하는 개발 방법)를 할 수 있어야한다. 1) 프론트엔드 개발자는 웹 프로그래밍의 한 분야로 백엔드의 반대말로 사용되기도한다. 벡엔드 API에서 가져온 데이터 출력, 입력을 통해 비즈니스 로직을 구성하고 사용자가 직접 사용하며 접하게되는 사용자 인터페이스 부분을 작업하는 개발자다. 2) 백엔드 개발자는 프론트에서 요구하는 데이터의 포맷이나 데이터베이스 입출력 및 다양한 비즈니스 프로세스를 코드로 구현하고 이를 위한 DB를 설계하고 백엔드 프레임워크를 이용하.. 공감수 0 댓글수 0 2022. 4. 9.
가위바위보(Rock-Paper-Scissors Game) 문제조건 1. 0은 주먹, 1은 보, 2는 가위 2. 컴퓨터는 무작위로 숫자를 선택하고, 사용자에게는 숫자를 입력받는다. 3. 가위바위보게임은 무한 반복한다. 알고리즘 1. Math.random함수로 컴퓨터가 낼 패를 랜덤으로 정한다. 2. 사용자의 패는 0,1,2로 지정한다. 3. while문으로 가위바위보를 무한 반복한다. 4. 사용자의 선택에 따라 게임을 종료할 수 있게 추가했다. 5. 사용자가 잘못된 숫자를 입력할 경우에는 경고문구를 출력하고 숫자를 다시 입력을 받는다. public class iam_im2 { public static void main(String[] args) { RockPaperScissor(); } public static void RockPaperScissor() { Sc.. 공감수 0 댓글수 0 2022. 4. 7.
숫자를 입력 받는 Timer 문제조건 1. 현재 시간을 출력 2. 추가할 초를 입력받는다. 3. 2번 단계에 소요된 시간이 2번에서 추가하겠다고 입력한 초보다 길면, 바로 Time is over 출력 4. 2번 단계에 소요된 시간이 2번에서 추가하겠다고 입력한 초보다 짧으면(=숫자를 빨리입력후 엔터눌렀으면) 입력된 숫자만큼 초가 경과한 후에 Time is over 출력 ※그냥 시간을 멈추면 되는게 아니라서 되게 까다로운 타이머다.. 알고리즘 초를 어떻게 계산해야하나 엄청 고민했다. 원하는 형태로 출력되지않아서 이틀동안 고민해서 풀었다. 덕분에 currentTimeMillis() 함수를 열심히 다뤘다. public class iam_im2 { public static void main(String[] args) { calTime();.. 공감수 0 댓글수 0 2022. 4. 7.
currentTimeMillis() 함수: 소요시간 계산 currentTimeMillis() 함수 currentTimeMillis() 함수는 1970년 1월 1일 0시를 기준으로 현재까지 경과한 시간을 1000분의 1초(밀리초)로 반환한다. 예를 들어, long start = System.currentTimeMillis(); 라고 가정하자. 1000분의 1초를 반환하기 때문에, 1970년 1월 1일 0시로부터 1000초가 지나면 long start = System.currentTimeMillis(); 의 출력결과는 1이다. 즉, long start = System.currentTimeMillis(); 값을 1000.0으로 나누면 1970/1/1 로부터 현재까지 경과한 시간을 1초 단위로 받는다. 경과한 시간을 분 단위로 받으려면, 1분이 60초니까(1000*6.. 공감수 0 댓글수 0 2022. 4. 7.
Arrays.sort 로 배열 정렬하기 Arrays.sort Arrays.sort method를 이용하면 손쉽게 데이터를 정렬할 수 있다. 기본 정렬 순서는 오름차순(a to z)이다. import java.util.Arrays; import java.util.Collections; public class ArraysSort { public static void main(String[] args) { String[] text = {"alpha","charlie","bravo","beta","echo"}; Arrays.sort(text); for (int i = 0; i < text.length; i++) { System.out.println(text[i]); } System.out.println("---------------------"); .. 공감수 0 댓글수 0 2022. 4. 6.
ArrayList remove 특정 값 삭제 ArrayList 특정 값 삭제 .remove(Integer.valueOf()) 인덱스가 아닌, ArrayList에 있는 특정 값 삭제 import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class ArrayList { public static void main(String[] args) { List list = new ArrayList(Arrays.asList(5, 4, 3, 2, 1, 0)); // value가 1인 element 삭제 list.remove(Integer.valueOf(5)); System.out.println(list); // [4, 3, 2, 1, 0] } } 위 코드를 보면 리스트명... 공감수 0 댓글수 0 2022. 4. 6.
CodeUp C언어 기초 100제 풀이 : 1055, 1026, 1027 1055_[기초-논리연산] 하나라도 참이면 참 출력하기 #include int main() { int year, month, day; scanf("%d.%d.%d", &year, &month, &day); printf("%02d-%02d-%04d", day, month, year); return 0; } 1026_[기초-입출력] 시분초 입력받아 분만 출력하기 #include int main() { int h,m,s; scanf("%d:%d:%d",&h,&m,&s); printf("%d",m); return 0; } 1027_[기초-입출력] 년월일 입력 받아 형식 바꿔 출력하기 #include int main() { int year, month, day; scanf("%d.%d.%d", &year, &mo.. 공감수 0 댓글수 0 2022. 3. 18.
chown, chgrp, chmod(리눅스 권한변경 절대모드, 상대모드) 이번에는 리눅스 권한과 관련된 글이다. 점하나 띄어쓰기 하나에도 의미가 달라지니 항상 주의해야한다. 1. chown 명령어 1) 형식 : chown [OPTIONS] USER[:GROUP] FILE(s) ▪ 파일, 디렉토리의 소유자를 변경한다. ▪ chown명령은 root권한으로 실행해야한다. ▪ chown USER:GROUP FILE 명령어는 해당 사용자와 그룹으로 파일 또는 디렉토리의 사용자와 그룹을 한 번에 바꿀 수 있다. 1-2) 예시 chown s1111111 aa 파일 aa의 소유자를 s111111로 변경했다. 2) 형식: chown :[변경할 그룹명][파일명 /디렉토리명] ▪ chown명령어의 기본 형식에서 유저명을 생략하면 해당 파일또는 디렉토리의 소유그룹을 변경할 수 있다. 2-2) 예시.. 공감수 0 댓글수 0 2022. 3. 17.
CodeUp C언어 기초 100제 풀이 : 1021, 1022, 1024 1021_[기초-입출력] 단어 1개 입력받아 그대로 출력하기 #include int main() { char data[51]=""; //크기가 51인 배열 scanf("%s",data); printf(data); return 0; } 1022_[기초-입출력] 문장 1개 입력받아 그대로 출력하기 #include int main() { char data[2001]; //크기가 2001인 배열 fgets (data, 2000, stdin); //data는 공백포함 2000자 이하, 입력은 stdin(standard input, 키보드입력)으로 받음. printf("%s", data); return 0; } 1024_[기초-입출력] 단어 1개 입력받아 나누어 출력하기 #include int main() { ch.. 공감수 0 댓글수 0 2022. 3. 17.
CodeUp C언어 기초 100제 풀이 : 1020, 1066, 1078 1020 : [기초-입출력] 주민번호 입력받아 형태 바꿔 출력하기 #include int main() { int id; int idBack; scanf("%d - %d", &id, &idBack); printf("%06d%07d",id,idBack); return 0; } 1066 : [기초-조건/선택실행구조] 정수 3개 입력받아 짝/홀 출력하기(설명) #include int main() { int a, b, c; scanf("%d %d %d", &a, &b, &c); if(a%2==0){ printf("%s\n","even"); } else{ printf("%s\n","odd"); } if(b%2==0){ printf("%s\n","even"); } else{ printf("%s\n","odd"); }.. 공감수 0 댓글수 0 2022. 3. 16.
사용자와 그룹 관리 관련 명령어 1. 사용자와 그룹 ㆍ사용자를 추가하면 해당 사용자 이름과 같은 이름의 그룹이 추가된다. 사용자 Im2world추가 시 그룹 Im2world도 생성 ㆍ그룹을 삭제하면 해당 그룹만 삭제되고 그룹 안의 사용자는 삭제되지 않는다. ㆍ사용자는 여러 그룹에 속할 수 있다. ㆍPrimary Group : 기본그룹인 Primary Group은 1계정 당 1개만 존재한다. 2. 사용자와 그룹 관리 관련 명령어 ㆍadduser : 사용자를 추가한다. adduser 유저이름 adduser Im2world ㆍaddgroup 1) 그룹을 추가한다. addgroup 사용자이름 addgroup korea 2) 사용자를 그룹에 추가한다. addgroup 사용자이름 추가할 그룹 addgroup Im2world korea 참고자료 구.. 공감수 0 댓글수 0 2022. 3. 13.
리눅스 실습01: VirtualBox / Ubuntu/ PuTTY 환경설정 1. 목차 1. VirtualBox 다운로드 2. Ubuntu 다운로드 3. VirtualBox 설정 4. PuTTY 다운로드 5. PuTTY 설정 2. 실습 1. VirtualBox 다운로드 2. Ubuntu 다운로드 3. VirtualBox 설정 만약 리눅스 - 우분투 버전으로 생성하고 싶다면, 위 이미지처럼 종류와 버전을 변경하면 된다. 이후 작업과정은 동일! 4. PuTTY 다운로드 5. PuTTY 설정 단, 다른 PC에서도 해당 네트워크에 접속가능하게 하기위해서는 이더넷 어댑터 이더넷의 IPv4주소를 사용해야한다. 출처 본인작성. 와.., 리눅스 관련글은 작성하는데 시간이 굉장히 오래걸린다. 포스팅하면서 다시 리눅스 설치하는 기분이랄까😉 공감수 0 댓글수 0 2022. 3. 13.
파일탐색 주요명령어 : pwd, cd, ls 1. pwd 명령어 현재 작업 디렉토리가 어디인지 출력 pwd 옵션 -P : 심볼릭 링크 무시하고 실제 디렉토리 경로 출력 -L : 심볼릭 포함하고 있더라고 pwd환경 변수를 사용한다. root 계정에서 Im2world라는 유저를 추가하고, su - 명령어를 사용해 Im2world로 사용자를 전환했다. Im2world에서 pwd 명령어 실행 결과는 아래와 같다. 노트북에 설치한 리눅스에서는 password : too short같은 메시지가 안나오는데, JSLinux에서는 비밀번호 보안관련 메시지가 출력된다. JSLinux에서 작업하는 것들은 예시용으로 만드는 거라 비밀번호를 아주짧은 숫자로 사용한다. 2. cd 명령어 소제목현재의 작업 디렉토리를 바꿈 : cd [이동하려는 디렉토리 경로] 홈 디렉토리로 .. 공감수 0 댓글수 0 2022. 3. 13.
리눅스 권한 획득 명령어 1. su, su – 사용자 -Substitute User의 약자, 다른 계정에 접속하기 위한 명령어. -형식 : su [options] [username] -su 사용자 / su - 사용자 : 사용자를 생략하는 경우 root 사용자로 로그인한다. 예) su - su : 현재 사용자는 로그인 된 상태에서 다른 사용자 계정으로 전환 su - : 현재 사용자는 완전히 로그아웃하고, 새롭게 전환할 사용자로 로그인, 환경설정을 불러온다. ※띄어쓰기 주의 ※ su□- : □는 한 칸 띄어쓰기를 뜻한다. 2. sudo - 최초 생성 계정에 한하여 사용가능한 명령어 - root의 비밀번호 재설정, 사용자 등록, 삭제 등 root의 권한을 임시로 사용가능하다. - 나중 생성한 사용자에게 sudo 권한 부여: 사용자를 .. 공감수 0 댓글수 0 2022. 3. 13.
리눅스 패스워드 설정방법 1. 계정 종류에 따른 패스워드 설정 방법 su – 명령어로 root계정에 접속한 다음 아래 명령어입력 후 새 비밀번호를 설정한다. passwd 사용자계정 예) passwd Im2world ① 최초 생성한 계정으로 로그인 후 sudo passwd root 입력 ② sudo passwd root는 root의 password를 초기화하는 명령이다. ③ [sudo] password for 일반계정 이 출력되면 현재 로그인된 계정의 비밀번호 입력 ④ root에 지정할 New password를 입력하면 root 패스워드 변경이 완료된다. ※passwd 스펠링 주의할 것. 2) 패스워드 설정 권한 root는 모든 계정의 패스워드를 변경할 수 있다. 일반 사용자의 경우 최초 생성한 사용자에 한해서만 sudo 명령어를.. 공감수 0 댓글수 0 2022. 3. 13.
관리자(root), 일반사용자 관리자(root) 관리자는 1개만 존재하는 계정으로 root라고 부른다. apt 명령어를 사용할 수 있으며 사용자 추가, 그룹 추가 등 시스템의 핵심부에 대한 고유권한이 있다. 일반사용자 ㆍ일반사용자는 관리자 외 계정을 의미한다. 일반 사용자 계정은 여러개 존재할 수 있고 sudo 명령어를 통해 root의 권한을 임시로 사용할 수도 있다. ㆍ사용자를 추가하면 해당 사용자 이름과 같은 이름의 그룹이 추가된다. 사용자 Im2world 추가 시 그룹 Im2world도 생성 ㆍ그룹을 삭제하면 해당 그룹만 삭제되고 그룹 안의 사용자는 삭제되지 않는다. ㆍ사용자는 여러 그룹에 속할 수 있다. 참고자료 구글, 네이버, 나무위키 검색 공감수 0 댓글수 0 2022. 3. 13.
CSS 내용, footer 수직정렬 1. 목표 ‘To-Do List 웹사이트’의 footer contents 수직 정렬. 2. 방법 footer 수직정렬 준비물 : div 2개 그리고 display:flex; + α 수직정렬 방법이 여러 가지 있지만 가장 쉬운방법은 flex를 이용하는 것이다. 이 방법은 footer에 한정된 방법이 아니라 css의 다른 콘텐츠에서도 활용할 수 있다. 내 경우에는 footer를 대상으로 하기에 footer영역에서만 사용했다. div를 두 개 생성하고 첫 번째 div(바깥쪽 div) 안의 두 번째 div(안쪽 div)를 중앙정렬 하고, 안쪽에 있는 div를 또 중앙정렬하면 파워 중앙정렬이 된다. 1) display:flex 와 안쪽 div에 margin:auto; 즉, 겉에 있는 첫 번째 div에 flex를 .. 공감수 0 댓글수 0 2022. 1. 30.
웹페이지 길이와 관계없이 footer 하단에 고정하기 1. 목표 ‘To-Do List 웹사이트’의 footer를 contents 길이와 관계없이 가장 하단에 고정하기 2. 방법 1) footer가 div class=“wrapper” 안에 포함되었을 때 : position:fixed; 이용 ㆍposition:fixed; 는 contents 내용이 길든 짧든 무조건 footer를 하단에 위치하게 한다. ㆍ문제점: contents 길이가 짧을 때는 footer가 하단에 고정되어있는 것처럼 보이지만, 내용이 길어져 스크롤이 생기면 footer가 contents 위로 올라오며 contents보다 footer가 강조된다. See the Pen footer- position:fixed; by hi-iamim2 (@hi-iamim2) on CodePen. contents.. 공감수 0 댓글수 0 2022. 1. 29.
티스토리 기본스킨 Odyssey 글 제목 잘릴 때 영역 길이 늘리기 현재 내 티스토리 스킨은 기본 스킨인 Odyssey다. 기본 스킨 중에 그나마 이게 마음에 들어서 사용중이다. 티스토리 운영하면서 군데군데 고쳐갈 예정이다. 1. 문제현상 Odyssey 스킨은 글 본문 영역을 너무 좁게 설정해놔서 글 제목이 길면 글씨가 잘린다. 이 글은 티스토리 기본 스킨인 Odyssey 에서 글 제목이 잘리는 현상을 해결하기 위한 설정법을 적어놨다. 되게 간단하다. 스킨 편집에서 CSS 부분의 값만 바꿔주면 된다. .article-header .box-meta { position: absolute; bottom: 56px; width: 100%; max-width: 780px; z-index: 2; } .article-header .box-meta p { margin: 0; } .ar.. 공감수 0 댓글수 0 2021. 10. 28.

728x90

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.