A-develop

애니매이션 효과 @keyframes rotate { 100%{ //애니메이션 총시간 시간대비 퍼센트 transform: rotate(360deg); //회전(몇도) } .클래스명 { width: 100%; height: auto; animation: rotate 1.1s infinite linear; //infinite 계속돈다, linear 가속도붙지 않고 일정한 속도로 돈다. } 모달창 마우스 스크롤 해도 따라오도록 하기 #modal { position: fixed; top: 0; left: 0; } 박스 그림자 box-shadow : offset-x, offset-y, blur-radius, spread-radius, color(0 0 0 색상정도) box-shadow : 2px 2px 2px 1p..

: 최대한 불필요한 태그, 스타일 없애기 협업으로 웹페이지 만드는 법 디자이너 : 디자인(포토샾, 피그마 등)해서 파일(파일+이미지리소스)을 넘긴다. -> 웹디자이너, 퍼블리셔, 프론트엔드 개발자 : 전체 골격을 확인하고 블록 구분 후 블록마다 클래스명 설계 등을 논의한다. 마크업 : html의 뼈대를 잡아주는 html을 작성하는 일 : html5 이전에는 div태그로 문서의 구조를 표현했다. 하지만 html5는 id(태그 내 하나) > class(태그 내 여러개) > 태그 (+ div style로 적용안되던 걸 a style로 바꾸니까 적용됐다.) 요소 inline 요소 : 문자 등 직선적인 html 요소 block 요소 : 이미지 등 부피가 있는 요소 form태그 : 정보 전송 input 태그 : 입..

! + enter : html파일 기본양식 자동생성 태그명 : 해당 태그 도움말 생성 태그명.클래스명 : 해당 태그와 클래스명 생성 (div는 클래스명 생략 가능) input#입력내용 : input태그와 id 생성 ctrl+enter : 현재 줄 아래에 빈줄 생성 ctrl + shift + enter : 현재 줄 위에 빈줄 생성 ctrl + / : (현재 줄) 주석 shift + alt+f : 자동정렬 글 사이에 span 태그 사용하기 : 글자 양쪽 띄우고 span적어야 도움말 클릭 가능(or tab 사용 가능)

상황 쇼핑몰 프로젝트 작업 중 상품목록 페이지에 스크롤바가 두개 생겼다. 상품목록을 테이블로 만들었는데, 테이블이 중간에 끊겨서 끝번호 상품까지 보이지 않았다. 대신 테이블 안에 스크롤바가 하나 더 생겨서 그 스크롤바를 내리면 끝까지 볼 수 있었다. 해결 해당 부분 의 높이가 상품리스트 전체를 보여주기에 충분하지 않기 때문에 스크롤이 하나 더 생기는 것이다. 의 높이 값을 100%로 설정하니 리스트가 전부 다 보이고 이중 스크롤바도 사라졌다. ex) style="height: 100%;"

태그 사용 시 "파일 선택" 표기 임의로 바꾸기 내 맘대로 바꾸기 영문도 자동 줄 바꿈하기 style = "WORD-BREAK:break-all;" style = "WORD-BREAK:keep-all;" //단어 단위로 줄바꿈 테이블 1) 테이블 만들기 ex) 2X5 테이블 만들기 1 2 3 4 5 11 22 33 44 55 ex) 2x5 테이블 만들어서 가로2번째 줄 1칸으로 합치기 (cf.:두꺼운 폰트, :얇은 폰트) 1 2 3 4 5 12345 ex) 테이블 거꾸로 만들기 (5x2) 1 11 2 22 3 33 4 44 5 55 2) 테두리 가로줄만 보이기 ,태그 style="border-bottom:1px solid;" (solid는 실선을 의미한다) 버튼 1) 버튼 두개 일렬로 정렬 A영역 B영역..