Jade_o.o

• Auto Rename Tag • Korean Language Pack for Visual Studio Code • Live Server

HTML 요소는 Semantic하게 작성되어야 한다. “웹 페이지를 이루는 요소에 의미와 맞는 태그를 사용하자!” Semactic tag Semactic tag • • • • ~ • • • • : 헤더 (로고, 메뉴 아이템 등) : 푸터 (하단 영역) : 네비게이션 (다른 곳으로 이동 가능한 링크들) : 콘텐츠 영역임을 표시. 한 html 페이지당 한 번 사용하는 것이 바람직함 (중첩 x) : 콘텐츠와 직접적인 연관이 없는 옆에 있는 부분 (ex. 광고 등) : 하나의 의미있는 요소 (ex. 기사 리스트 중에서 기사 하나) : article을 포함 (그룹화 목적) 왜 Semactic 해야할까? • SEO (Search Engine Optimization, 검색최적화) • 검색엔진은 HTML 코드를 분석해..

테이블을 만들어보자 테이블 • 표를 만들 때 사용하는 태그 • 과거에는 테이블을 사용하여 레이아웃을 구성 하였으나 기능 상의 한계로 인하여 최근에는 공간 분할 태그인 태그를 사용 • 먼저 행을 쓰고 행의 자식 요소로 칸을 넣어주는 것이 기본 • : 표를 감싸는 태그 • : 표 내부의 행 • : 표 내부의 제목 칸 • : 행 내부의 일반 칸 속성 • border : 테두리 두께 • cellspacing : 테두리 간격 사이의 너비 • cellpadding : 셀 내부의 간격 • align : 테이블 정렬 속성 • width 와 height : 테이블의 너비와 높이 • bgcolor 와 bordercolor : 테이블 배경색과, 테두리 색 속성 • colspan : 해당 칸이 점유하는 열의 수 지정 • ro..

사용자 입력 Form 태그 입력 값 받기 • type • button • text • email • password • checkbox • radio • date • color • range • file 버튼, type=“button” • 버튼을 생성 • 주로 특정 기능을 수행 시킬 때 사용 텍스트, type=“text” • 텍스트 입력 값을 받는 폼을 생성 • 우리가 입력하는 ID 입력 부분? • 텍스트 값을 입력 받아 전달하는 기능 패스워드, type=“password” • 비밀번호 값을 받는 폼을 생성 • 입력 값을 자동으로 안보이게 처리 • 중요 or 비밀 텍스트 값을 전달하는 기능 체크 박스, type=“checkbox” • 여러 선택지 중 여러 개를 선택 가능한 체크 박스 생성 • 속성 • N..