HTML (7) 썸네일형 리스트형 [HTML] 데이터 속성 사용하기 웹사이트를 만들다가 탭 메뉴를 구현하는데 data- 라는 처음보는 속성을 이용해서 간단하게 작업할 수 있다는 것을 알게 되었다. 처음 사용해 보았는데 매우 유용한 것 같아서 정리해보려 합니다. 먼저 이러한 데이터 속성은 특정한 데이터를 DOM 요소에 저장해두기 위함이 목적입니다. 화면에 보이지 않지만 일정한 정보를 엘리먼트에 담아두기 위해서 사용한다고 이해하면 좋습니다. HTML에서 사용하기 HTML에 아래와 같이 입력하면 데이터가 저장됩니다 JavaScript에서 데이터에 접근하기 아주 간단하게 dataset 속성을 이용해서 가져오면 됩니다 const article = document.querySelector("car") article.dataset.columns // "3" article.datase.. [HTML] ol과 ul의 차이 알아보기 목록 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, 용어를 설명하는 기능 안좋은 예시 [HTML] 표 table 만드는 방법 표 table (1) - 기본 구조 데이터를 담은 표를 만들 때 사용 table 만드는 기본 원리 테이블 헤더 테이블 데이터 Tip! 1. 기타 부분에 쓸말 없어도 는 꼭 써야함 2. 총합 등 최종 결론 부분의 경우 으로 감싸줌 (thead-tbody-tfoot 순으로 감싸주기) 표 table (2) - 심화 rowspan: 세로 합병 colspan: 가로 합병 scope="row/col" - thead 한테만 쓸 수 있음 - 가로줄의 헤더인지 세로줄의 헤더인지 더 명확하게 하기 위해 씀 테이블 만들기 혼자 실습 도전!!! 실습 결과물 월 화 수 목 금 1교시 왕초보 HTML CSS 모각코 왕초보 HTML CSS 모각코 왕초보 HTML CSS 2교시 Javascript스킬업 Javascript스킬업 3교.. [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" 사용법: 이전 1 다음
