본문 바로가기

분류 전체보기235

JavaScrip html 내부 스크립트 적용위치 구글콘솔확인 자바 스크립트를 html 에 적용할때! 자바스크립트 html 적용위치 태그위치는 맨밑 body 종료 태그 위가 좋다. -내용이 많은것은 파일로 따로 생성 - 간단한 기능 구현시 스크립트 태그는 맨 밑에다가 작성 작성법 자바스크립트의 변수를 입력할땐 카멜표기법(중간대문자)을 사용한다. var 변수 userName 변수 이름 카멜표기법 = '홑따음표사용' var userName = 'ossa'; 홑따음표 안에 홑따음표 불가 / 쌍따음표 가능함 따음표 예제 : var userName = '' 변수작성시 객체가 자동으로 나옴 console (콘솔) method (메서드)에 log(로그) 객체를 부른다 문장끝에는 세미클론 ; 키워드 (예약어) var 문장 끝에는 세미콜론(;)을 적어서 문장의 끝을 알림 예약어 자.. 2022. 10. 11.
자바스크립트 용어정리 - 디버깅 콘솔 로그 디버깅 (debugging) (영어로 프로그램의 잘못을 찾아내어 수정한다는 뜻) 자바스크립트에서 쓰이는 콘솔이란 무었인가.. 먼저 콘솔은 디버깅을 위해 쓰인다. 그럼 디버깅은 또 뭐냐고 .. 디버깅이란 코딩작업을 하는 중이나 끝난 후, 버그(오류)를 찾아내는 작업이다. 이때 눈에 쉽게 잡아낼수 있도록 하는것이 콘솔 콘솔 console (영어로 제어반,계기반) 콘솔은 객체라는 뜻, 확 실시간으로 자바 스크립트를 실행하고, 에러 메세지 등을 출력해주는 기능이다. 콘솔객체를 이용하면 자바스크립트의 코드의 객체, 변수 값을 콘솔창에 출력하거나, 필요 메시지를 표시할수 있음 콘솔객체는 여러가지 메서드를 제공하고 콘솔창에 다양한 형태로 메세지를 출력할 수 있다. 내가불러온 함수와 객체를 브라우저로 불러와서 확인할때.. 2022. 10. 11.
자바스크립트란? 개요 1. html 마크업 랭귀지 (언어) 2. css 스타일 시트 3. 자바스크립트 동작을 구현하는 프로그래밍 언어 언어 읽기 쓰기 단어 3-4천개 응용필요..(css 15-20배) 그중에 웹 ui 개발에 필요한것 익히기 프론드엔드용 4. 자바 백엔드용 완전히 다름 ES란? 자바스크립트의 초창기 이름 - 에크마 스트립트 (ES) > 현재 자바이름으로 통용 자바는 대부분 제작가능, 브라우저 기반으로 구현된다. 멀티플래폼 맥,os,모바일 등등 인터넷을 통해 모든 환경에 다 쓰일 수 있다. ES5(2009년) - 레거시(예전사이트 5-6년전) 프로젝트에서 대부분 사용 - 일반사이트, 관공서, 대기업에서 여전히 사용 (우리나라는 익스 맞추는것이 기본이였기 때문에 ES6 를 사용을 잘 안함, 현재까지 ES5 사용) .. 2022. 10. 11.
css form input type="file" 첨부파일올리기 문의하기에서 첨부파일을 올릴수있도록 폼을 만들어보자 기존에 text 요소에 공통 클래스로 지정되어있는 디자인을 file 영역에만 해당하지않도록 :not 부정선택자를 준 모습 .inquiry_page .inquiry_area input[type=text]:not(.input_file) { width: 100%; height: 45px; background: #f8f8f8; border: none; padding: 0 15px; } 1. html 테이블안에 코드 작성 첨부파일 파일선택 ※ 등록 가능 확장자 : pdf,docx,pptx,xlsx,jpg,jpeg,gif,png / 최대 5MB 텍스트 문단 p와 떨어뜨려 주기 위해서 div file_wrap을 감는다. 기본 input 으로 file 만 지정했을떄 .. 2022. 10. 10.
css :not 가상클래스 부정선택자 :not() 선택자 정의 한요소에만 적용 css 스타일을 특정 선택자만 제외하고 싶을때 사용 예시 /* input type text 중 .input_file은 제외 */ .inquiry_page .inquiry_area input[type=text]:not(.input_file) { width: 100%; height: 45px; background: #f8f8f8; border: none; padding: 0 15px; } 문의작성표에 input 타입 text 에 공통 클래스로 디자인을 주었다. /* input type text 중 .input_file은 제외 */ .inquiry_page .inquiry_area input[type=text]:not(.input_file) { width: 100%; .. 2022. 10. 10.
css text area 고정내용입력 (placeholder 줄바꿈태그 
 ) 내용입력 부분 미리 텍스트가 들어가있고 줄바꿈이 되도록 해보자! html 멀티라인 일반 텍스트 편집 컨트롤 사용자가 textarea 태그의 박스크기, 사이즈를 수정하지못하도록 resize속성값 지정 textarea는 속성은 한줄로 작성해야함 rows textarea 의 속성 / 최초입력 가능 줄수 지정 placeholder textarea 의 속성 입력필드에 사용자의 이해를 돕도록 짦은 도움말을 사전명시 사용자 입력시 사라짐 내용입력시 한줄로 작성하되 줄바꿈시 사용 resize /* textarea 리사이즈기능 빼기 */ textarea {resize: none} 1.html 작성 rows 속성은 최초 입력가능 줄수로 1로 입력시 이렇게 좁게 나온다. rows 속성 10줄지정시 2 . css로 꾸미기 글.. 2022. 10. 10.
css 이메일 select option박스 만들기 아래 문의하기의 이메일 부분을 만들어보자 초기화코드로 form 디자인 없애기 /* legend,caption,메뉴제목,섹션제목 블라인드 */ legend, caption, .blind { position: absolute; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; width: 1px; height: 1px } /* 칸의 선을 합치기, 칸의 간격없애기, 가로를 늘려줌 */ table {border-collapse: collapse; border-spacing: 0; width: 100%; table-layout: fixed;} 초기화 코드가 사용된 백지상태에선 폼요소들이 이렇게 나온다. 문의작성하기 문의하기테이블 이메일 @ 직접 입력 naver.com .. 2022. 10. 10.
css form input type="text" readonly 문의하기 만들기 초기화코드로 form 디자인 없애기 /* legend,caption,메뉴제목,섹션제목 블라인드 */ legend, caption, .blind { position: absolute; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; width: 1px; height: 1px } /* 칸의 선을 합치기, 칸의 간격없애기, 가로를 늘려줌 */ table {border-collapse: collapse; border-spacing: 0; width: 100%; table-layout: fixed;} 예제코드 문의작성하기 문의하기테이블 이름 연락처 readonly 이름 부분이 먼저 들어가있고 사용자가 쓸수 없도록 미리 지정해준다 (title 미적용시 웹 접근성 경고).. 2022. 10. 10.
html/css <i>태그로 아이콘 포인트주기 태그를 선호 하는 이유 ? span보다 가독성 우수 짧은 단어 추후 수정시 태그만 선택 변환가능 아래 문의 작성하기 폼에서 중요한 텍스트에 아이콘포인트를 줘보자! 1. html 에 태그 코드작성 필수입력사항 p태그로 글자를 넣은후 앞과 뒤 위치를 고려해 태그 삽입 2. 개별 css시트 작성 저 별 포인트는 홈페이지 전체에 적용되는 공통클래스가 아닌, 문의하기 페이지에서만 쓰이므로 공통 common 클래스가 아닌 layout css 에 작성해준다. .inquiry_page .inquiry_area .ess { color: #999999; text-align: right; } .inquiry_page .inquiry_area .star { display: inline-block; width: 7px; hei.. 2022. 10. 10.
css radio 만들기 폼요소의 input 타입 radio 를 만들어 보자 checkbox는 중복 선택이 가능하며 radio 버튼은 단일 선택만 가능! 1. html 작성 가로로 배치할수 있도록 div wrap을 사용해 그룹으로 감아준다. 시각장애인용 웹 접근성을 위해 class명 bilnd 글자를 선택해도 체크 될수 있도록 label for 지정 같은 그룹의 name은 같게 id명은 순서대로 label과 꼭 일치하게 만든다. 딸기 사과 메론 2. 공통클래스 기존 디자인 초기화 해주기 /* 폼요소의 높이가 다를때 요소끼리 세로정렬시킴, ios 둥근모서리, 기본스타일 제거 */ /* border-radius:0 -> iOS에서 테두리가 둥글게 나오므로 빼줌 */ /* -webkit-appearance: none -> iOS에서 .. 2022. 10. 10.
html form , input 요소 정리 폼요소css 문서의 구획 지정 로그인, 회원가입, 글쓰기 등등 웹페이지 내에서 사용자로부터 입력을 받을 떄 사용한다. 서버로 데이터를 전달에 처리할수 있도록 기능 폼 입력양식 2022. 10. 10.
html mate 태그 description 태그란? 태그는 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용 태그란? 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용 인코딩 방식 파일의 형식 호환관련 모든 장치에서 웹 사이트가 잘 보이도록 뷰포트 설정 웹페이지에대한 설명 정의 검색결과 오픈 그래프 2022. 10. 10.

티스토리툴바