sy의 코딩 개발일지

레이아웃 각각의 요소를 목적에 맞게 배치 와이어프레임 레이아웃의 뼈대를 그리는 단계 목적 : 화면의 영역 구분 목업 실물 크기의 모형 실제 작동 모습과 동일하게 html문서 작성 *하드코딩 : html문서에 하나하나 입력 Atomic CSS 방법론 클래스 이름과 구현을 1:1로 일치 시킴 , 아주 작은 단위로 css를 작성하는 기법 .so{ height:50%; } 레이아웃 리셋 *{ box-sizing:border-box; } body{ margin : 0; padding: 0; } display:flex 부모요소에 적용 부모요소에 적용해야하는 flexbox 속성들 flex-direction : 정렬 축 정하기 아무것도 설정 X : 기본적으로 자식요소들을 가로 정렬 row(기본값) : 가로 정렬 col..

css은 사용자 경험을 제공하는 도구 사용자 인터페이스(UI): 일반사용자가 쉽게 사용할수 있도록 인터페이스 사용자 경혐(UX) :사용자 경험 CLI :개발자들이 애플리케이션과 소통하기 위해 키보드로 작성한 암호눌러서 동작시킴 프론트엔드 개발자 역할 : 애플리케이션과 소통에 필요한 UI이 제작 컴포넌트 기능별로 묶어서 제작 레이아웃 디자인 타이포그래피와 색상 적용 셀렉터 body { color: green; 선언 속성명 : 속성값 ; 선언구분자 } 선언블록 css 연결 -> link요소 : hrml파일과 다른 파일을 연결하는 목적으로 사용 rel속성 : 파일의 특징 href 속성: 파일의 위치 css 스타일 적용 1.인라인 스타일 2.내부 스타일 시트 3. 외부 스타일 시트 기본적인 셀렉터 id로 이름 ..

html기초 html: 프로그래밍 언어 X , 웹 페이지의 뼈대를 구성하는 마크업 언어 트리구조 자주 사용하는 html 요소 div 태그는 한줄 차지 span 컨텐츠 크기만큼 차지 img 이미지 삽입 닫는 테그 없음 a :링크 삽입 ul,li :리스트 input ,textarea : 다양한 폼 input type에서 radio 다수개중 하나 -> A B A B checkbox는 여러개 선택 textarea :줄바꿈이되는 입력폼 로그인 로그인 시맨틱 요소란? 의미를 가진 요소를 사용하는 방식 , 의미적 가치 X 의미적 가치O 1. 검색 엔지이 시맨틱 요소를 중요한 키워드로 고려 2. 여러개발자가 의미있는 코드 찾는게 더 유용 시맨틱 종류 : 독립적인 콘텐츠 : 중요하지 않은 부분 설명 : 아랫부분 위치 :..

1 코드 기초 StackBliz로 코드 실행 1. terminal에서 node index.js 입력 2. node 입력하면 REPL사용 종료할려면 .exit 입력 용어정리 *REPL : 컴파일 과정 없이 즉석에서 코드를 입력해 결과를 바로 알수 있는 방식 2 타입 number타입 :숫자로 정수와 실수 모두 표현 Math 내장 객체 Math.floor() : 괄호 안의 숫자를 내림하여 반환 Math.ceil() : 괄호 안의 숫자를 내림하여 반환 Math.round() : 괄호 안의 숫자를 반올림하여 반환 Math.abs() : 괄호 안에 숫자를 절대값을 반환 Math.sqrt() : 괄호 안에 숫자의 루트값을 반환 Math.pow() : 괄호 안에 첫번째 숫자를 밑,두번째 숫자를 지수인 숫자로 반환 st..

서버실행 cd /mamp/bin/mysql/bin mysql -uroot -proot -u 유저명 입력하기 전에 사용하는 명령문 -p mysql에 접속하는 유저의 비밀번호 입력 php시작 출력문 echo 명령문 출력 . 텍스트와 텍스트 연결 변수 큰따옴표 출력할려면 큰따옴표 앞에 역 슬래시를 사용한다. $을 출력할려면 $앞에 역 슬래시를 사용한다. 연산자 배열 배열_숫자인덱스 배열_문자인덱스 array_push 사용 인덱스 2개 사용 데이터형 보여주기(gettype) ,형변환 반복문 4월이 기본 선택 for문을 이용하여 고객의 이름만 출력 함수 trim()함수 사용 strtolower() 소문자로 출력 strtoupper() 대문자로 출력 strlen() 길이 str_replace('치환할문자','대체할..

mysql시작 명령 프롬프트 cd/mamp/bin/mysql/bin 데이터베이스 만들기 create database 데이터베이스 이름; 데이터베이스 보기 show database 테이블 생성하기 필드의 추가 , 수정 , 삭제 필드 추가 alter table 테이블명 add 추가할 필드명 옵션 코멘트 위치 alter table testtable add gender enum('m','w','x') default 'x' comment '고객성별 - m은 남성 w는 여성 x는 선택안함' after birthday 필드 수정 alter table 테이블명 modify 변경할 필드명 옵션 코멘트 위치 필드 삭제 alter table 테이블명 drop 필드명; 테이블 삭제하기 drop table 테이블명 테이블에 데..

jQuery전체 소스 설렉터 사용 $(' ') 클릭시 이벤트 발생 엘리먼트 보이기와 숨기기 엘리먼트 보이기 $(' ').show 엘리먼트 숨기기 $(' ').hide $(function(){ $('.btnshow').click(function(){ $('.btn').show(); }); $('.btnhide').click(function(){ $('.btn').hide(); }); }); 마우스 온오버시 이벤트 발생 마우스 포인터가 대상체를 올리면 $('.class_name').mouseenter(); 마우스 포인터가 대상체를 떠날때 $('.class_name').mouseleave(); hover() $('.class_Name').hover(function(){ $('.class_Name').css('..

폰트 변경하기 선택자{font - famiily:1순위 폰트,2순위 폰트 ,3순위 폰트} 글자와 글자 사이 간격 조정하기 선택자{letter-spacing:숫자 px 또는 em 등} 줄 간격 조정하기 선택자{line-height:값 단위} HTML 엘리먼트의 위치 변경하기 static position값이 static이면 top,left,right,bottom 속성이 적용되지 않는다. absolute 부모 엘리먼트의 position 속성값이 absolute , fixed, relative인 엘리먼트 안에서 자신이 원하는 곳에 해당 박스를 위치 시킬수 있다. relative 자신의 위치를 기준으로 이동 fixed 스크롤하여 페이지의 어디에 위치하든 관계없이 해당 엘리먼트가 화면 위치에 고정 배경 꾸미기 배경..