개발 공부일기

[개인필기] *input 1.항상 form으로 묶어주고 fieldset legend 필수 2.성격이 inline-block에 가까움 3.수평으로 배치는 되는데 높이값이 각각 다른 특징 4.띄어쓰기 하나만 해도 떨어져서 배치 5.작성 전에 영역에 텍스트 적는 속성 6.보여지는 내용은 value 값을 안적으면 안나옴 이거 type=button 이거랑 button태그 button type="button">버튼입니다이랑 다른 점 그리고 버튼태그는 기본이 submit기능이고 reset button 있는데 자바스크립트에 기능넣을땐 button이라고 입력해줘야됨 안그럼 기본 submit값이 먹힌다. *vertical-align은 input이랑 img태그에만 먹힘 ㄴ초기화요소에 input{border: 0; verti..

* float left로 수평배치 후 중앙에 배치하려면 각각의 크기를 알아야함 float을 안주고 inline-block으로 하면 text-align으로 중앙배치 할 수 있음 *단어, 음절별로 끊기게 해주는 속성 word-break: keep-all; *제이쿼리로 슬라이드하면 li에 다른거 할거없이 img width 100% *slick-slider 자체가 position relative = inner를 줬어도 ul에 일정 크기를 주면 그만큼 보여짐 *slick-arrow 모양을 화살표로 만드는 방법 =border를 두개 없애고 rotate해서 만들수있음 #info .slick-arrow{font-size: 0; border-top: 3px solid #000; border-left: 3px solid ..

*제이쿼리 plug in - 만들어진 소스를 활용하는 방식 *연결 순서 1. 라이브러리 2. 슬라이드 배너 플러그인 3. common.js (2차메뉴 + 슬라이드 동작 시킬 간단한 구문=method) ex) -라이브러리 -플러그인 method ex) *기본 사용방법 1. 플러그인 사이트 활용 ex)slick, slider 검색하면 나옴 2. 플러그인 소스 파일 다운로드 (slick.min.js / slick.css) 3. js에 demo에 있는 제이쿼리 구문 복사해서 선택자명 바꿔서 기입 ★ 기본 이미지 슬라이드 ul class를 mb라고 줬다고하면 $('.mb').slick(); 이때 ul을 준 부모요소 section id에 높이값이 있어야 한다 *자동으로 넘어가게 하는법 - autoplay : tru..

당연히 단축기 쓰면 편하고 익스텐션 여러개 쓰면 좋지 생각은 하다가 공부한다고 이런 유용한 팁들은 살짝 제쳐두고 있었는데 공휴일 맞이 유튜브에서 관련 영상을 보다가 이 내용이 추천으로 떴는데.... 나 이때까지 왜 어렵게 했나싶다 물론 이 단축기들도 손에 익어야겠지 1. command palette ctrl+shift+p or just f1 -단축기 검색 2. quick open ctrl+p -원하는 파일로 이동가능 3. kite라는 프로그램 ai기반 자동완성code faster 4. 맨 윗줄로 커서 이동 ctrl+home / end는 맨 하단 5. 오른쪽 왼쪽 이동 home end 6. 마우스로 클릭 안하고 단어 이동하는방법 ctrl+ 화살표 좌우 7. select word 단어 누르고 ctrl+shi..

▶ event(마우스 액션에 관해) 1. click 2. mouseenter (mouseover) : 마우스 진입했을때 3. mouseleave (mouseout) : 마우스 벗어났을때 4. hover : mouseenter와 mouseleave를 동시에 ★this 란 내가 마우스 작용을 한 요소만 지칭 ※ mouseenter와 mouseover의 차이: 자식노드까지 감지하느냐 안하느냐 / mouseover는 감지 O = 중복작용이 될수있어 mouseenter와 mouseleave를 쓰는게좋음 click 예시 $('p').click(function(){ $(this).hide(); }); p태그에 마우스 올렸을때 hello라는 메세지창이 나타남 $(document).ready(function(){ $('..

1.기본문법 함수와 변수를 알아야함 2.슬라이드배너 - 플러그인 활용하여 만드는 방식 event-mouse click 등등 effect-fade in , slide down 등등 css-추가,삭제 traversing-노드를 찾는거 구조적관계(ul li a 트리구조 부모자식 )에서 누구를 찾아라 *제이쿼리란 자바스크립트 라이브러리 중 하나로 파일이 필수로 필요한데 1.압축본 jquery.min.js (minimum.javascript) 2.비압축본 jquery.js 으로 구분한다. 비압축본은 내가 구문을 건드릴줄 알아야함 우린 압축본 사용할거 코드길이가 차이가 남. 용량도 작음 - 파일 로딩 속도 관련 *제이쿼리파일을 다운받아서 연결 {or cdn 링크를 복붙 - 이 방식은 잘 안씀, 테스트용이나 급할때}..

*padding / translate / position / float 패딩으로 길이 잡으면 되는데 가로세로 길이 값 줄 필요없고 어떤 곳에 어떤 속성이 맞는지 여러가지 생각 해보고 기입 *박스섀도우 효과 li에 보더선이 방사형 처럼 퍼지는 효과는 보더선이 아니라 box-shadow로 주는데 before after 주고 position주고 퍼지는 느낌은 width 100% height 100%를 호버시로 하는거 - before after에는 0으로 기입 여기에 트랜지션까지 줌 해당 태그- #link .quick_link li:before{content: ''; boxshadow: inset 8px 8px 0 #000; position: absolute; left: 0; top: 0; width: 0; h..

animation (키프레임) 시작(0%) - 끝(100%) 2가지 작성(css에서 작성) 1. 모션에 관한 내용 @keyframes 애니메이션명ex)test { 0% {} 괄호안에는 어떤 애니메이션이 들어가는지 } @keyframes ani{ 0% { transform: translate (0,0);} 100% { transform: translate (100px,100px);} } 2. 모션을 동작시키는 내용 p { animation: test 1s; } 필수 기입 2가지 - 애니메이션명과 동작시간 h1 { animation: test 3s; } 이렇게 무제한으로 기입할수있음 div { animation: ani 5s; } *반복횟수 속성 { animation: ani 5s infinite;}- 무한..

서브html명: 기획자가 정의 메인html명: index.html, default.html -웹서버 자체가 메인으로 인식 네트워크관리자가 main.html로 정해놓으면 이렇게 따름 웹프로그램을 입히게되면 index.jsp, index.do(보안이유) 이런식으로 변경됨 *gnb밑 슬라이드 들어가는 메인 부분 명 main visual : 기업의 슬로건, 기업의 이념 main banner : 공지사항, 이벤트, 광고 *그림자 효과 box-shadow: x y blur(번지는 정도px) color; box-shadow: inset (박스 안쪽으로 그림자가 들어감) 5px 10px (마이너스 값을 주면 반대로 위로 올라감) 0(선명하게 나옴=10px로 주면 퍼져보임) rgba(0,0,0,0.1); *white-s..

*파일 디렉토리 분류- css는 css폴더안에, js는 js폴더안에 각각 분류하고 메인인덱스만 남겨놓음 - css연결시 css/파일명 해줘야함 그럼 css에서 이미지넣을때도 그냥 images가아니라 ../images 상위요소 파일 선택해줘야함 ★초기화요소 추가 .inner를(크기랑 마진) 초기화요소에 추가함- 중복작성x #wrap{overflow-x: hidden; min-width: 1920px;}-가로 스크롤바가 안생기게하기위함 전체 body를 div id="wrap"묶음 .clearfix:after{content: ''; display: block; clear: both;} ㄴclear속성 들어갈 html 클래스 뒤에 한칸띄우고 clearfix기입 이렇게 클래스명을 추가해주면 중복할 필요없이 원하는..