본문 바로가기
728x90
반응형

전체 글185

[프로젝트] 게시판 등록 - input box 숫자 체크 12/28 사례금 직접 입력시에 숫자만 입력받아야 하기 때문에 숫자가 아닌 문자는 입력되지 않게했다. 열심히 검색해서 이 방법 저 방법 다 써봤는데 이 방법이 제일 간단했다... 후..!! input box에 숫자만 입력받기 또, 아무래도 금액을 입력하는 칸이라서 천단위로 ,를 생기게 해주고 싶었다. (1,000 / 100,000 / 1,000,000) 입력받은 값에 콤마 생성하기 function cmaComma(obj) { var firstNum = obj.value.substring(0,1); // 첫글자 확인 변수 var strNum = /^[/,/,0,1,2,3,4,5,6,7,8,9,/]/; // 숫자와 , 만 가능 var str = "" + obj.value.replace(/,/gi,''); /.. 2020. 12. 29.
[프로젝트] 게시판 등록 - radio, select (활성화, 비활성화) 12/28 분실 물품을 선택할 때 한가지 물품만 선택할 수 있고, 기타를 체크했을때 직접입력 할 수 있는 인풋 박스가 활성화 되게 바꾸기. 한가지 물품만 선택할 수 있게 하는 방법은 기존에 사용했던 checkbox 를 radio로 바꿔주니 간단하게 해결됐다. 기존코드 * 분실 물품 핸드폰 지갑 가방 책 화장품 기타 변경코드 * 분실 물품 핸드폰 지갑 가방 책 화장품 기타 변경 후 모습 몇시간을 고민했는데 생각보다 아주 간단했다.ㅠㅠ후 사례금 선택 부분도 무료글일땐 사례금 selectbox가 활성화 되지 않고 비활성화 되어야하니, 위와 같은 방법으로 코드를 변경했다. 기존코드 사례금 무료글등록 사례금등록 선택 10,000원 30,000원 50,000원 100,000원 직접입력 기존 모습 변경코드 사례금 무.. 2020. 12. 28.
[CSS] 선택자 선택자는 html 파일을 만들고 태그에 스타일을 줄 때 사용한다. 선택자의 종류 전체 선택자 * { margin: auto; } - 모든 태그에 대하여 적용. 하지만 이 방법은 테스트 용도로만 사용하길 권장한다고 함. 태그 선택자 h1 { color: green; } - h1 태그에 대하여 적용. 클래스 선택자 .className { width: 50px; } - .클래스이름 으로 사용. 아이디 선택자 #idName { position: fixed; } - #아이디이름 으로 사용. 복합 선택자 하위선택자 section ul { text-shadow: none; } - 선택자 사이를 공백으로 나타내며 앞 요소의 자손인 뒷 요소를 선택. 자식선택자 section > ul { text-shadow: none;.. 2020. 12. 28.
[프로젝트] 게시글 등록 화면 만들기 - 2 12/27 오전부터 다시 시작한 작업. 어제까지 상태.. 더보기 padding 을 통해서 아직 부족하지만 전보다는 조금은 정리가 됐다. 오후 내내 끙끙거리면서 대충 정리가 됐다. 근데 분실위치 항목에 인풋박스 옆에 있어야할 인근이라는 글자는 왜 밑으로 가있는걸까.... 결국 도움을 받아서 성공했다!! 더보기 수직축 방향 정렬 align-items stretch (기본값) 아이템들이 수직축 방향으로 끝까지 쭈욱 늘어납니다. flex-start 아이템들을 시작점으로 정렬합니다. flex-direction이 row(가로 배치)일 때는 위, column(세로 배치)일 때는 왼쪽이에요. flex-end 아이템들을 끝으로 정렬합니다. flex-direction이 row(가로 배치)일 때는 위, column(세로 배.. 2020. 12. 27.
[Javascript] Ajax Ajax(Asynchronos Javascript And XML) - 자바스크립트를 통해서 서버에 데이터를 요청하는 것 - 새로고침을 할 필요없이 부분 부분만 로딩되므로 속도가 빠름 -비동기식 동기식 / 비동기식 차이 동기식은 대표적인 예로 우리가 웹사이트 로그인을 할 때 아이디와 패스워드를 입력하여 서버로 전송하고 서버로 부터 응답을 받은 후 로그인 성공, 실패 웹페이지로 이동하는 것, 서버로 데이터를 요청하고 응답이 오는 시간동안 작업을 멈추고 기다리는 것을 뜻함. 비동기식은 서버로 데이터를 요청하고 응답이 오는 시간동안 웹은 자신의 다른 업무를 진행하고 응답이 오면 그 후에 작업을 하기때문에, 사용자의 입장에서는 화면 갱신이 없어 편리하고 빠르게 작업을 처리하는 것처럼 느껴짐 GET / POST 차.. 2020. 12. 27.
[프로젝트] 게시글 등록 화면 만들기 - 1 12/26 오늘 오후부터 본격적으로 만들기 시작한 게시글 등록 화면.. css 공부를 나름 한다고 하긴 했는데 막상 사용하려니 뭘 써야할지 잘 모르겠다. 이렇게 엉망진창인거 하나 만드는데도 굉장히 많은시간이 걸렸다. 부트스트랩 사용해서 버튼과 input 박스를 변경했는데 위치들이 또 이상해졌다.. 내일은 더 그럴싸하게 수정해보자 더보기 DOCTYPE html> Document .header { background-color: black; height: 150px; } .container { margin-left: 300px; margin-right: 300px; width: 950px; } .item1 { display: flex; justify-content: space-between; border-b.. 2020. 12. 27.
[CSS] Flex 1 2 3 div.container 부모요소/flex container/ flex의 영향을 받는 전체 공간. div.item 자식요소/flex item/설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것. flex container에 display: flex를 적용하는게 시작. 아이템들은 기본적으로 위 그림같이 배치가 된다. (가로방향으로) 그리고 자신이 가진 내용물의 width만큼만 차지하게 된다 (inline요소와 비슷) flex-direction (배치 방향 설정)- 아이템들이 배치되는 축의 방향을 결정하는 속성 row; (기본값) 가로 방향으로 배치 column; 역순으로 가로 배치 row-reverse; 세로 방향으로 배치 column-reverse; 역순으로 세로 배치 flex-wr.. 2020. 12. 26.
[CSS] 크리스마스 트리 만들기 수정 며칠전에 css 공부하다 만든 크리스마스 트리.. 캡쳐해놓고 보면 그럴싸하지만.. 창 크기를 조절하면 지멋대로.. 기존 작성한 코드 ○ ★ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ 기존 코드에서 container의 width를 지정해주지 않아서 발생한 문제였다. width: 900px; 만 추가해주니 이제 창크기에 따라서 지멋대로 움직이지 않는다!!! .container { display: flex; flex-wrap: wrap; text-align: center; width: 900px; } 2020. 12. 26.
[프로젝트] UI 상세설계 및 UI flow chart 12/25 프로젝트 진행을 위한 ui상세설계 및 ui flow chart 인덱스페이지 회원가입 및 로그인, 관리자 페이지 게시물 등록 게시판 목록 조회 페이지 마이페이지 두명이서 나눠서 작업했는데도 8시간이 걸렸다. 이 전에 했던 ui설계를 너무 기본적으로 해놔서 만들면서 후회했다. 진작 이렇게 할껄.. 그래도 더 늦기전에 제대로 작업해서 다행이다. 2020. 12. 26.
[CSS] grid grid는 flex보다 더 복잡적인 레이아웃 표현이 가능 -flex는 한방향 레이아웃 -grid는 두방향 레이아웃 grid 레이아웃을 만들기 위한 기본적인 HTML구조 A B C D E F G H I grid 설정하기 .container { display: grid; } 행배치 : grid-template-rows 열배치 : grid-template-columns 예) grid-template-columns: 200px 200px 500px; column을 200px, 200px, 500px로 만들겠다는 의미. grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; ※ fr(fraction)은 숫자 비율대로 트랙의 크기를 나눔. 1.. 2020. 12. 26.
[HTML] form 이해하기 form태그 속성 action : form이 전송되는 서버 (url 또는 html 링크) name : form의 이름 (서버로 보내질 때 이름의 값으로 데이터 전송) accept-charset : 문자 인코딩 지정 target : action에서 지정한 스크립트 파일을 다른 위치에 열도록 지정 method : 전송 방법 설정 (get, post) form 내부의 태그와 속성 type : 입력 형식 name : 서버로 전송되는 데이터 이름 : text 입력란 : password 입력란 (입력 내용이 안보임) : 버튼 : form에 입력한 데이터를 서버로 보내주는 버튼 : form에 입력한 모든 데이터 삭제 : 단일선택 : 다중선택 : file 업로드 : 눈에 보이지 않는 정보를 서버쪽으로 보낼 때 사 여러.. 2020. 12. 24.
[CSS] inline, block, inline-block display 속성은 HTML요소 (Element)들을 시각적으로 어떤 형식으로 보여줄지 결정하는 속성 dispaly: inline; 텍스트처럼 dispaly: block; 상자처럼 inline 요소들 , , , - 기본적으로 옆으로 쭉 나열 되다가, 공간이 모자라면 다음 줄로 넘어감. block 요소들 , - width, height으로 크기를 설정할수 있고, 옆에 공간이 남아도 다음 줄로 넘어감. inline-block속성은 위 두가지의 특징을 모두 가짐, inline처럼 텍스트 흐름대로 쭉 나열되고, block처럼 박스 형태라 width, height로 크기 설정 가능. .box1 { display: inline-block; width: 300px; } .box2 { display: inline-b.. 2020. 12. 24.
728x90
반응형

티스토리툴바