본문 바로가기

전체 글

 (265)
text-align 속성 text-align : 텍스트를 수평으로 정렬할때 사용 속성값 text-align:left; 왼쪽 정렬 text-align:right; 오른쪽 정렬 text-align:center; 가운데 정렬 text-align:justify; 왼쪽에서 오른쪽에 맞추어 양쪽 정렬 주의사항 1. block 요소에만 text-align 속성 적용 가능 2. block 요소 안에 있는 inline 요소(text, img...)만 정렬되는 것이 가능함.
nodemon설치하기 *자바스크립트를 실행하기위해 node.js를 깔아놓았음 *vs코드 console값을 찍기 위해 터미널에서 node js2.js를 계속 사용시 치기엔 불편해서 나온 플러그인이 "nodemon" 1. vs코드 아래 터미널에 npm install -g nodemon 를 작성하면 설치됨(띄어쓰기 주의) -npm패키지를 통해서 nodmon을 설치하겠다는 뜻인데 g를 붙이면 해당 폴더 뿐만아니라 다른 곳도 다 사용가능 (g안쓰면 해당 폴더에만 사용가능) 2. 터미널에 다시 nodemon js2.js치면 값이 아래에 뜬다. 3. ctrl+s 누를때마다 자동으로 콘솔값이 터미널에 뜬다. 4. 다음번 사용시, 폴더 선택 후 터미널에 nodemon js1.js 라고 쳐주면 사용 가능하다. ▼ 노드몬 설치된 화면 ▼ 노드몬..
form 사용하기 -id -password -file -email -text -radio(1개 선택 박스, 원모양) -checkbox(여러개 체크박스, 네모모양) -수량선택, 분류선택 -submit 제출, reset 취소, button -textarea(여러줄 입력칸) CODE 회원가입정보 아이디 비밀번호 이메일 신청과목 수학 영어 국어 관심분야 영화 음악 독서 게임 선택 수량선택 10개 20개 30개 40개 50개 수학 과학 생물 국어 영어 논술 버튼 실행 화면 ▼
여러개로 구성된 하나의 이미지 중 원하는 영역 배경이미지 사용(spritecow 이미지 좌표 확인 사이트) *참고 사이트 http://www.spritecow.com/ Sprite Cow - Generate CSS for sprite sheets Sorry, it isn't working out between us It's not you, I just can't get along with your browser. Maybe if things change in the future... maybe if you bring Chrome, Firefox, Opera or even IE10 to the party... not promising anything, but give me a call. www.spritecow.com *이용 방법 -사이트에 들어가 'open image'를 누른다. -해당 영역을 클릭하면 아래에..
이미지의 특정영역 누르면 이동하기(maschek.hu 이미지맵 사이트) *이용한 사이트 http://maschek.hu/imagemap/imgmap/ maschek.hu - Online Image Map Editor maschek.hu *기본구성 -이미지를 삽입한다 -사이트에서 이미지파일을 선택하여 업로드 한 후, 특정영역을 누르고 좌표가 뜬 아래의 코드를 복사하고 코드에 붙여넣는다.(불필요한 부분은 삭제하기) CODE 참고 화면
메뉴에 hover시 글자 아래에 밑줄 생기기(transition) *기본 구성 -글자에 position:relative 주기 -a::after{positon:absolute;}을 통해 따라가게 만들고 처음 width를 0으로 설정 -hover됐을시 after에 transition되어 width가 점차 자연스럽게 커지게 만들기 CODE 기관 사업 후원 참여 소식 실행화면
1depth와 2depth 메뉴 만들기 1뎁스와 2뎁스 1depth: 처음 보이는 메뉴 (상위) 2depth: 메뉴 안의 또 다른 메뉴 (하위) *전체적인 구성 ul(전체 메뉴 묶음)>li(1뎁스)>a(1뎁스 메뉴명) >ul(2뎁스 메뉴)>li>a -position:relative(1뎁스) 와 absolute(2뎁스)로 top 위치를 조정해 아래에 배치 1)1뎁스 아래에 부분 2뎁스 구성 1 CODE 회사소개 회사개요 ceo인사말 회사연혁 특허인증현황 찾아오시는 길 제품소개 신제품 선풍기 여름가전 겨울가전 주방가전 생활가전 환경가전 홍보센터 공지사항 언론보도 카탈로그 홍보활동 고객지원 자주묻는질문 온라인문의 서비스센터 제품설명서 메인이미지 1 실행화면 2)1뎁스 아래에 전체 2뎁스 구성 *position:relative를 전체를 구성하는 gn..
자식태그 호출 사용법 nth-child(n), nth-of-type(n) *첫번째 자식, 마지막 자식 호출 -대상요소:last-child -대상요소:first-child *부모의 몇번째 자식 호출 -대상요소:nth-child(n) *부모의 특정한 요소 중 몇번째 자식 호출 -대상요소:nth-of-type(3) *홀수, 짝수의 배수 호출 nth-child(3n) >3의 배수 (3,6,9..) nth-child(3n-1)? >3x0-1=0 3x1-1=2 이런식으로 짝수의 배수 *참고 ex: /* 몇번째자식호출할때 ,근데 사실 확장성때문에 child보다 클래스 쓰는게 대부분이라곤 함(순서바뀌거나 수정할때 힘드니까)*/ /* .free-bbs th.last{border-right:none;} */ .free-bbs th:last-child{border-right:none;}

티스토리툴바