본문 바로가기

학원/웹

(27)
♧9/30 [css] 마진,센터,인라인,블럭,글머리기호 /폰트사이트 아이콘 리스트 심볼로설정 ㅇ. margin margin: 0 auto; 화면이 커져도 센터 유지 text-align: center; 글자 센터 설정 --영역의 배치 종류 inline 속성과 blockline 속성 1. display: inline block; 으로 가로, 세로 배치 none : 숨기기 2. display: inline-block; 가로방향이면 영역도 변경됨. 3.visibility: hidden; 영역 유지 display:none; 영역도 사라짐 --목록 관련 속성 (글머리 기호) ㄱ. list-style-type .best h1{ display: inline; } .menu { list-style: none; } 리스트 점 없어짐 My Blog 소개 스킬 포트폴리오 Content 내용들 위의 display:no..
♧위드스/헤이트/보더/오버플로우/패딩마진/상하좌우테두리/박스와글씨/테두리종류/인라인블록/클래스꿀팁/도큐먼트란/배경색버튼/js필수요소/이미지숨기기 😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊 ㄱ. width : 픽셀 (포토샵- 고정값) 1. %비율 (부모요소가 얼마냐에 따라 바뀔 수 있다.) ex) - 부모요소= 100px => 50% 지정 : 500px 부모요소 1200px => 50% 지정 : 600px - 자식 - 손자 (50%) = 250px ㄴ. height : 픽셀 ㄷ. min-width : 최소값 = 화면이 작아지다가 지정픽셀 까지 내려가면 더이상 작아지지 않는다. ㄹ. max-width : 최대값 ㅁ. overflow: scroll; (상자 벗어나면 스크롤) overflow: auto; (상자 벗어나지 않으면 스크롤 없고 벗어나면 스크롤 보여줌.) over flow: visible; (상자 벗어나면 끝) - 기본값 ㅂ. bor..
♧9/28 주변태그여러개/폰트-사이즈,굵기,대소문자,밑줄,행간격,글자간격,정렬,수직정렬,들여쓰기 [j script] 소개/코드위치 h1+p+p+ {} - ㄱ. 폰트의 기본 크기는 16픽셀이다. - ㄴ. font-sive: 크기 1. px =고정값. 포토샵에 정한 고정값 2. % = 비율 200% 50% 절반 3. em = (16px = 1em) . (ex.18px=1.3em 23px=1.5em) 단점 : 복잡 -ㄷ. font-weight : 폰트 굵기 bold (700) -ㄹ. style : 기울림
♧웹 [css] (css선택자종류, 컬러변경스타일태그, 부모자식손자등등종류, 폰트바꾸기, 폰트사이트코드에서 폰트코드 가져와 폰트 사용하기) - *{} = 페이지 내의 모든 요소를 대상으로 한다. - 태그(타입) 선택자 = h1, h2, h3 (등) {} = 요소를 대상으로 한다. - 아이디 선택자 = #happy {} - 클래스 선택자 = .happy {} - 태그 안 직속 태그 = 자식태그 부모태그 :부모태그 > 자식태그 {} - 태그 안 무조건 아래 있는 태그 = 자손태그 조상태그 :조상태그 자손태그 {} -같은 레벨의 태그 중, 자신의 다음 태그 = 인접형제 : 기준태그 + 인접형제태그 {} -같은 레벨의 모든 태그들 = 일반형제 : 기준태그 ~ 일반형제태그 {} 타이틀1 타이틀2 타이틀3 결과 코드 결과 결과 ㄱ. color : 색상값 (4가지) 1. 색상명 = red, yellow 2. rgb = (0, 0, 0) 3. 헥사코드 =..
♧9/26 웹 [css] (라벨과 폼컨트롤연결, 직원정보작성폼, css, 스타일폴더, 포폴만들때참고사항, 메뉴구조도) 라벨과 폼컨트롤 연결 비밀번호 : 네모칸 뿐만 아니라 비밀번호 : 를 눌러도 타자를 칠 수 있음 - 요기랑 라벨과 폼컨트롤 연결 비밀번호 : 요기 이러면 사진을 눌러도 체크박스 체크가 된다. - 라벨과 폼컨트롤 연결 비밀번호 : 결과 첫번째새 누르면 첫번째 체크박스. 두번째 누르면 두번째 체크박스 표시된다. = 라벨이름 - 새로운 직원정보 전송 필수입력정보 *이름 *아이디 *계좌번호 선택입력정보 성별 남 여 사진첨부 결과 상세정보: 이름: 이메일: 리뷰: 다시 방문하시겠습니까? 예 아니요 잘 모르겠음 의견: 사진첨부 이메일 업데이트에 가입 결과 *{ border: 1px solid green; } 별(*) 넣으면 모든 요소의 간격을 알 수 있따. - copywriter 2020 www.css.com sp..
♧9/23웹[html]폼태그/폼컨트롤의종류-아이디비번,로그인,가입인사,다중택일버튼/선택박스벨류/체크,셀렉트박스/날짜선택/달력/파일첨부/정보/토글 폼 태그 : - 폼컨트롤 -폼컨트롤 의 종류 • 텍스트 입력 • 패스워드 입력 • 텍스트 영역(여러줄) • 라디오버튼 • 체크박스 • 드롭다운 박스 • 전송 버튼 • 이미지 버튼 • 파일 올리기 폼컨트롤 종류 이름: 이름창에 뭘 치면 주소보면 서버 에이치티엠엘로 넘어감. - 이름: -> 텍스트 컨트롤에 [aaaa] 입력하면 텍스트 컨트롤name="username" -예시 하나더 아이디: 비밀번호: 가입인사 국내인or외국인 국내인 외국인 여기서 name"" 이걸 같은걸 적어줘야 체크박스 한개만 선택할 수 있음! 만약 name 을 안 적는다면? -> 이렇게 돼버린다. -선택박스에 밸류 넣기 국내인or외국인 국내인 외국인 외계인 -> 사이트에 변화는 없음. 등산 수영 댄스 생년월일 1991년 1992년 199..
♧9/22 웹 [html] 동일페이지내연결(맨위로 맨아래로)/스크롤부드럽게/테이블태그-행,셀,합치기,색깔넣기/이미지-삽입,옳은저장,설명 href="#아이디" 맨 아래로 가기 신문사이트 목록 한국일보 부산일보 조선일보 광주일보 쇼핑몰사이트 목록 지마켓 나이키 쇼핑몰 쿠팡 아디다스 회사소개 회사소개 찾아오는길 연혁 인사말 제품소개 전구 모니터 동일페이지링크연습 공지사항 로그인페이지 새창에 타사이트링크 연습 영화샘플1 게임샘플1 맨 위로 가기 결과 글자 크게 해놓고 맨위 맨아래 버튼 누르면 저절로 이동된다 + 부드럽게저절로 내려가는 스타일코드 #테이블 생성 태그, 테이블의 행 태그. 테이블의 셀 태그 2단 3단 4단 2x1=2 3x1=3 4x1=4 2 3 4 달력모양 테이블 2022년 9월 달력 (행6 x 열7) 일 월 화 수 목 금 토 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23..
♧9/21 웹[html] (리스트태그, 리스트정의태그, a태그(링크걸기), 동일폴더와 부모자식폴더, 새창에서링크열기, 디자인기획팁, 과제) -리스트 태그 (순서 상관 X) 타코야키 팬 타코야키 분말 250g 우유 750ml 달걀 1개 양배추 5장 -순서 자동으로 삽입됨 타코야키 분말에 물,우유, 달걀을 섞고 거품기로 저어 반죽물을 만든다. 문어를 준비하고 쪽파, 대파, 양배추를 잘게 다져놓는다. 달궈진 팬에 기름을 두르고 반죽물을 반 정도 부어준 뒤, 문어와 잘게 잘라둔 쪽파, 대파, 양배추를 올린 후 그 위에 반죽물을 팬에 가득 차게 두른다. 불은 중약불에서 바닥면이 어느정도 모양이 잡혀 익으면 꼬치나 젓가락으로 가장자리 반죽을 모아 뒤집어준다. 타코야키가 원형모양이 되도록 꺼진 부분엔 반죽물을 더 부어주고 살살 돌리며 원형모양으로 만들어준다. 노릇노릇 잘 익었으면 접시에 꺼내 타코야키 소스, 마요네즈, 파래김, 가쓰오부시를 올리면 완성!..