영최의 개발켈로그

HTML을 Sementic하게 작성해야하는 이유는? ● HTML을 Sementic하게 작성한다는 것의 의미는? : 웹 페이지를 이루는 요소에 '의미와 맞는 태그'를 사용한다는 뜻 ● Sementic tag의 예시? - : 로고, 메뉴아이템 등 - : 다른 곳으로 이동 가능한 링크들 - : 하단 영역 - : 콘텐츠와 직접적인 연관이 없는 옆에 있는 부분 예를 들면 광고 - : 콘텐츠 영역임을 표시. 한 HTML 페이지 당 한번 사용 - : 하나의 의미있는 요소, 예를 들면 기사 리스트 중 기사 한개 - ~ : 제목 - : article을 포함-그룹화 목적 ● Sementic 해야하는 이유? 1) 검색 최적화 (Search Engine Optimization, SEO): - 검색엔진은 HTML 코드를 분석해..

구분 음료 가격 이미지 커피류 아메리카노 4500 원 돌체라떼 4500 원 주스류 자바칩 푸라푸치노 5000 원 녹차 프라푸치노 여기서 보완해야할 부분은 내가 th를 사용하지 않고 td를 사용했다는 것이다. 또한 이부분에서 어려웠던 점은 음료 이름을 클릭했을 때 설명하는 페이지와 연동할 수 있게 만드는 부분이었는데, 이부분은 a태그를 생각해냈지만 어떻게 넣어야할지 고민하다가 td 안에 구현을 할 수 있었다. 직접 표를 완성해보니 뿌듯했다.

1 2 3 center 4 처음 실습문제를 받았을 때 당황했는데 그이유는 어디가 어떤 행,열인지 모르겠어서 당황했었다. 그러나 차근차근 행을 먼저 보고 열이 시작되는 부분에서 rowspan, colspan을 사용하니까 완성이 되었다. 또한 table의 속성인 border, cellspacing, cellpadding도 쓸 줄 알아야 표를 완성할 수 있었다.

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

실습2, 설문조사 폼 작성 -태그로 설문조사 제목 -각 설문의 소제목인 '나이'와 '원하는 강의'는 태그를 이용 - 나이는 여러개의 선택지 중 하나만 선택 - 강의는 여러개 선택 가능 설문조사 이름l 이메일 나이 10대 20대 30대 40대 50대 60대 이상 원하는 강의(복수응답가능합니다.) html javascript css 여기서 잘못된 점은 id 와 for 속성에서 한글과 숫자를 시작으로 사용했다는 점을 알 수 있었다. 다음부터는 영어로 작성하고 class 속성도 영어로 작성해야하겠다. 또한 class 와 달리 id 속성은 한 html당 한개를 사용하기로 한다.

사용자 입력 Form 태그 ● 사용자 입력 Form 태그- 1. 입력 값 받기! - type: button, text, password, checkbox, radio, date, color, range, file ● 사용자 입력 Form 태그- 2. 버튼, type=“button” - 버튼을 생성 - 주로 특정 기능을 수행시킬 때 사용 ● 사용자 입력 Form 태그- 3. 텍스트, type=“text” - 텍스트 입력값을 받는 폼을 생성 - 우리가 입력하는 ID의 입력 부분 - 텍스트 값을 입력 받아 전달하는 기능 ● 사용자 입력 Form 태그- 4. 패스워드, type=“password” - 비밀번호 값을 받는 폼을 생성 - 입력 값을 자동으로 안보이게 처리 - 중요하거나 비밀 텍스트 값을 전달하는 기..

실습 1, 카페 음료 문서 작성 - 카페 이름은 - 메뉴 이름은 - 카페 전체 음료 리스트는 태그, 음료 최소 3개 - 의 자식 요소 요소를 넣고 가격을 표시 - 태그 아래에 수평 줄을 추가하고 그 아래에 각각 음료에 대한 설명은 태그를 사용하여 표시 - 문자 꾸미기 태그도 사용 맛있는 카페 아메리카노 R: 3000 L: 3500 아인슈페너 R: 4000 L: 4500 아이스티 R: 3000 L: 3500 딸기라뗴 R: 3500 L: 4000 음료 설명 물+에스프레소 맛있음 물+에스프레소+크림 맛있음 립톤 맛있음 딸기 맛있음 실습하면서 h1 태그의 경우에는 줄바꿈 태그인 br을 안써줘도 된다는 것을 알 수 있었다. 제목태그여서 띄어쓰기를 안해도 되는 거였다. 또한 sementic 태그를 사용해봤는데 아직..

tag의 종류 ● tag의 종류- 1. 제목 태그, - 제목을 뜻하는 Heading의 약자, h 사용! - 자동 줄바꿈! - 하나의 HTML문서에는 한개의 h1 태그를 권장 - 웹 검색 엔진이 제일 먼저 검색하는 태그! ● tag의 종류- 2. 본문 태그, - 본문을 뜻하는 paragraph의 약자,사용 - 본문을 적기 위한 태그 ● tag의 종류- 3. 줄 바꿈 태그, - 줄바꿔줌 ● tag의 종류- 4. 목록, or - 순서 없는 목록 - 순서 있는 목록 - 은 속성 사용 가능 - : 말머리 기호 변경(1,A, a, I, i) - : 시작 값 변경 - : 역순으로 시작 ● tag의 종류- 5. 수평 줄, - 수평으로 된 줄을 그어줌 ● tag의 종류- 6. 문자 꾸미기 태그들 - : 두껍게 - :두껍..