본문 바로가기

전체 글

 (67)
[JS] 자바스크립트 첫 시작! const, let과 boolean ​const와 let (1) 차이 const: 변하지 않는 값 지정할 때 사용 (재선언 금지, 재할당 금지) let: 업데이트될 수 있는 값 지정할 때 사용 (재선언 금지, 재할당 가능) //재선언 금지 let a=2; let a=3; (X) ​ //재할당 가능 let a=2; a=3; ​ (2) 장점 : 코드만 보고도 의도를 알 수 있음 ​ (3) 사용법 기본적으로 const 사용 가끔 업데이트 필요할 때 let 사용 (var은 사용X) ​ boolean true / false : 따옴표 붙이지 않음 (사용자가 로그인했는가? 등의 답이 필요힐 때 사용) ​
[HTML] Form 태그 사용하기 2 Form(3) - Label ​ Lable: 폼 양식에 이름을 붙여주는 태그 ​ ★문법 주의★ 라벨 ※id값 앞에 # 쓰지 않는 것 주의 Form(4) - Radio&Checkbox ​ radio: 한 가지만 선택 가능할 때 checkbox: 여러 가지 선택 가능할 때 ​ ★두 개의 input에 같은 name을 붙여줘야지 둘 중 하나만 선택되는 상황 발생 ★value: 어떤 항목이 선택되었는지 서버가 구분할 수 있도록 꼭 넣어야 함 ​ Form(5) - select&option ​ ※ select에 multiple 추가하고 ctrl키 누르면 여러개 선택 가능 ​ Form(6) - Textarea input은 짧은 글, textarea는 긴 글 받을 때 사용 Form(7) - Buttons 제출하기 ★ty..
[HTML] Form 태그 사용하기 form의 목적 : 사용자로부터 인풋을 받기 위한 태그 문법 -닫는 태그는 따로 없음! -API 주소는 백핸드 개발자가 알려주는 것! -중요한 정보나 정보의 양이 너무 많을 때는 POST 쓰고 웬만하면 GET씀 Form과 관련된 태그 배우기 Input input은 입력창이라고 생각하면 됩니다 input 태그 사용 방법 // type : text, email, password, number, tel, file,,, //placeholder: input 안에 들어갈 기본 text, 주로 안내 멘트(복사 불가능) value: input 안에 들어갈 기본값(복사 가능) //maxlength, minlegnth //required: 꼭 입력하고 넘어가야 할 경우 사용 dissabled: 사용자가 사용하지 못하도록..
[HTML] 주요 태그 살펴보기 2 목록 ol(ordered list): 순서가 중요한 목록 ul(unordered list): 순서가 중요하지 않은 목록 ★ul과 ol의 자식요소는 무조건 li만 가능!!!★ 항목1 항목2 정의 리스트 (Description list) 1. 용어를 정의할 때 2. key-value로 정보를 제공할 때 【key-value】: 무언가를 정의 내릴 때 사용 태그 dl : descrtiption list, 선언하는 기능 dt : description term, 용어(key값)를 마크업하는 기능 dd : description data, 용어를 설명하는 기능 ★문법 주의★ Good Ex 1. 2. 3. 5. 6. Bad Ex 1. 2. 3. 인용quotations 1. blockquote p보다 훨씬 더 많이 사용,..
[HTML] 주요 태그 살펴보기 제목 제목 문단 문단 강조 강조 강조 줄바꿈 -> '/' 가 뒤에 붙는 것 주의, 남용X(뒤 강의에서 설명) 링크 Anchor 링크 href 주소값 표기 방법 1. 웹 URL 2. 페이지 내 이동 id 이름이 있는 세션으로 이동 메일쓰기 김버그에게 메일 쓰기 전화걸기 김버그에게 전화 걸기 이미지 태그 src: source alt: alternative text --> 앞을 보시지 못하시는 분들이나 네트워크 상태가 좋지 않아서 이미지를 못보시는 분들을 위한 대체 텍스트 이미지 가져오는 두 가지 방법 1. 이미지의 경로를 # 위치에 붙여넣기 2. 이미지를 다운 받아서 경로 적어주기 ※내가 원래 있던 페이지는 그대로 있고 새창으로 열고 싶을 때 target="_blank" 사용법:
[CSS] 미디어 쿼리 소개 반응형 만들기 미디어 쿼리로 800px 이상일 때 사라지는 반응형 만들 경우 : @media(min-width:800px) ('sreen width > 800px'와 같은 의미이지만 이건 쓰이지 않음)
[CSS] 그리드 소개 grid 적용하는 방법 1. 에서 부모 로 자식 묶기 2. 부모 에 id값 주기 (id="oo") 3. 안에서 id 값에 명령 내리기 -display:grid; -grid-template-columns ; 150px 1fr; → 안에 값들이 양옆으로 나열됨 (*fr은 크기 비율을 나타냄) ※최신 기술 사용시 사용 가능 여부 확인할 수 있는 사이트 Caniuse.com
[CSS] 박스 모델 block vs inline h1으로 묶여 있는 부분은 block level element : 화면 전체를 쓰는 태그 a 태그로 묶여 있는 부분은 inline element : 자기 자신의 콘텐츠 크기 만큼을 쓰는 태그 block : width와 height 지정할 수 있음 , , , , , inline : width와 height 지정할 수 없음 , , ※ display라는 속성을 이용하여 block을 inline으로, inline을 block으로 바꿀 수 있습니다 padding vs margin padding: 콘텐츠와 테두리 사이 간격 margin: 테두리와 테두리 사이 간격

티스토리툴바