JJ_blog

Chpater10은 시맨틱 태그를 공부하게 된다. 우리가 웹 사이트를 만들 때 소스코드가 수천 줄이 넘기 때문에 한 줄씩 찾아보면서 헤더, 메뉴, 사이드바 등을 찾는 것이 어렵다. 따라서 만들어진 것이 시맨틱 태그이다. 시맨틱 태그를 보면 그 부분이 어떤 역할을 하고 하는지 쉽게 알 수 있다. 기본적으로 웹사이트를 분석하면 헤더(header) , 본문(contents) , 사이드바(sidebar) , 푸터(footer)로 이루어져 있다. 헤더(header) : 사이트 제목과 로고 , 검색 창 등이 있다. 본문(contents) : 여러 가지 내용들 사이드바(sidebar) : 본문 이외의 내용들을 나타낸다. 푸터(footer) : 저작권 정보와 제작자 정보를 표시한다. 예제 1 ▷머리말 태그들 애완견 종..

Chapter 4를 끝마치고 오늘은 연습문제를 푸는 날이다. QUIZ-1 QUIZ-2 ▷QUIZ-1 (난이도 2/3) 문제 : 예약 페이지의 예약 정보를 만들기 예약 정보 이름 휴대폰 이메일 QUIZ-1도 잠시 헷갈렸지만 무난한 문제였다. ▷QUIZ-2 (난이도 3/3) 문제 : '프런트엔드 개발자 지원서'용 폼을 만들기 프런트엔드 개발자 지원서 HTML, CSS, Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다. 개인정보 이름 연락처 지원 분야 웹 퍼블리싱 웹 애플리케이션 개발 개발 환경 개선 지원 동기 radio가 중복이 되지 않으려면 name이 같아야 하는데 id로 써서 계속 중복이 돼서 한참을 헤맸다.. 이력서나 설문조사 폼을 만들 때는 대부분 과 를 많이 쓰는 것 같다. 이로..

HTML 공부를 시작한 지 일주일이 되는 날이다. 방학이라 그런지 공부에 집중하기가 어려워지는 것 같다. 오늘은 chapter 4의 뒷부분과 연습문제를 풀려고 한다. 어김없이 오늘도 새로운 태그들이 등장한다. 학과 건축공학과 기계공학과 산업공학과 전기전자 공학과 컴퓨터공학과 화학공학과 역사학과 어문학부 철학 = 드롭다운 목록의 시작과 끝을 표시 (size 화면에 표시될 항목 개수 , multiple 드롭다운 메뉴에 있는 ctrl+ 여러 항목을 선택할 수 있다) = 원하는 항목들을 추가 (value를 이용해 서버로 넘겨주기 위한 값을 지정 selected 화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정) = 드롭다운 목록들을 분류하는 태그 (label 분류하는 목록들의 제목) = 텍스트 필드와 함께 ..

HTML을 공부 시작한 지 6일 차가 되는 날이다. 옵션들 hidden = 사용자가 입력을 마치고 폼을 서버로 전송할 때 같이 전송되는 요소(사용자 화면에 표시되지 않는다) text = (name = 텍스트 필드를 구분할 수 있도록 이름을 붙인다 , size = 넥스트 필드의 길이를 조절 , value = 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 표시될 내용 , maxlength = 텍스트 필드에 입력할 수 있는 최대 문자 개수를 지정) password = 화면에 표시될 때 주로 *, · 로 표시된다. search = 검색 상자 만드는 요소 url = url입력란 만드는 요소 (http:// 로 시작하는 사이트 주소를 입력해야 한다) email = HTML5에서는 email입력 시 ema..

장마가 시작되는 첫 날이다. 어제까지는 날씨가 엄청 덥다가 장마기간이 되니까 선선해져서 매우 좋다.ㅎㅎ 아이디 아이디 비밀번호 폼을 만드는 기본적인 태그 , (method = 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정 , get = 주소 표시줄에 사용자가 입력한 내용이 그대로 드러난다 , 속성 {post = 입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 드러나지 않는다 대부분 post를 주로 쓴다.) , name = 폼의 이름을 지정 , action = form태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정 , target = 스트립트 파일을 현재 창이 아닌 다른 위치에 띄울지 지정 , autocomplete = '자동완성기능' 기본적으로 on으로 되어 있..

7월이 되면서 날씨가 점점 더 더워지는 것 같다. 심지어 미세먼지 수치가 나쁨이라 창문을 열 수도 없다. ㅠㅠ 그래도! 힘내서 공부!! 오늘은 Chapter 1~3 부분의 연습문제를 풀 예정이다. QUIZ-1 QUIZ-2 QUIZ-3 ▷QUIZ-1 (난이도 1/3) 문제 : images폴더에 있는 umbrella.jpg 이미지 320 * 210 크기로 줄여서 삽입하기 이미지 삽입하기 ↑before ↓after 이미지 삽입하기 QUIZ-1은 너무 쉬웠다.ㅎㅎ ▷QUIZ-2(난이도 2/3) 문제 : 국내 포털 사이트 Daum이미지주소 찾아서 이미지 삽입하기 포털 사이트 Daum으로 연결하기 ↑before ↓after 포털 사이트 Daum으로 연결하기 QUIZ-2도 QUIZ-1과 마찬가지로 이미지를 삽입하는 ..

HTML공부 3일 차! Chpater 3는 이미지와 하이퍼링크를 사용하는 방법을 알려준다. 환상적인 이미지 환상적인 이미지 이미지를 첨부하는 태그 , src = 이미지의 주소 , alt = 화면낭독기로 읽을 경우 읽는 텍스트 width = 이미지의 가로길이 조절 , height = 이미지의 세로 길이 조절 Chapter 2에서 표의 설명글 붙이는 태그로 쓰이지만 이미지의 설명글을 붙일 때도 쓰인다 텍스트 링크 한국산업기술대학교 메뉴1 메뉴2 내용1 메뉴로 내용2 메뉴로 링크를 만들 수 있는 태그 , href = 링크 주소 , 텍스트 링크 제목 or 이미지 , target = 새창에서 띄우는 옵션 페이지가 길 경우 목차를 만들어 링크를 걸 수 있다. ex) 메뉴 1 하나의 이미지에 두 개의 링크를 걸어주는..

주어진 문제 문제 난이도 3/3 문제 조건 - 태그를 사용할 것 - 표의 제목 셀은 태그를 사용하고 그 외의 셀은 태그를 사용 주요 SNS 서비스별 이용률(%) 페이스북 카카오스토리 밴드 인스타그램 트위터 2015년 77.1 58.3 32.4 16.7 22.1 2016년 73.8 51.0 40.1 28.1 14.7 HTML을 이용하여 표를 직접 만들어 보니 신기하고 재미가 있는 것 같다.

[Chapter 2-1]에 이어서 태그 목록들을 적어보려 한다. 올레 1코스 코스 : 시흥초등학교 옆 거리 : 14.6km 난이도 : 중 설명하는 내용 .. 목록을 만든다. 제목 설정 설명을 표시한다. HTML에서 주석을 입력하는 방법이다. 정보 입력된 정보는 1년동안 보관됩니다. 이름 연락처 주소 자기소개 표 자리를 생성한다. border = "n"을 통해 표를 그린다.(n이 커질수록 테두리가 굵어진다) 행 생성 각행마다 열을 생성 각행마다 열을 생성하고 굵은 글씨로 변경 (colspan, rowspan 을 통해 셀 병합이 가능하다) 표 위쪽 중앙에 입력된 내용이 표시되는 태그 제목! 이름 연락처 주소 자기소개 표 왼쪽 위에 입력된 내용이 표시되는 태그 태그로 표를 감싼다. 이름 연락처 주소 자기소개 ..

시간이란.. 내일 죽을것 처럼 오늘살고 영원히 살것 처럼 꿈꾸어라. 책을 서점에 가서 어떤책이 좋을까 고민하면서 살펴보다가 어떤 책을 사야하지 고민하던 중 이라는 책을 보게 되었다. 처음에는 이 책이 정말 괜찮을까 라는 생각과 다른 책을 더 찾아 볼까 라는 생각을 하다가 이대로는 공부를 시작하지도 못하겠다 싶어서 이 책으로 공부해서 html문서를 만들어보자!라는 생각으로 구입하게 되었다. 앞으로 3주동안 매일 이 책으로 공부를 할 예정이다. [01 HTML 기본기 다지기] 부분을 공부했다. html5 유형을 적용하기 위해 선언하는 구문이다. html 이전 버전들은 문서 유형 선언을 복잡하게 했다고 한다. 그런데 html5부터는 한줄에 선언된다고 하니 정말 다행이다. 사이에 입력해 주면된다. 사이에 입력되..