모바일 지원 (viewport) 만든 웹 페이지가 스마트폰이나 타블릿 같은 곳에서도 볼만하게 잘 표현 될 수 있하는 방법에 대해 공부합니다. 모바일 화면 수정하는 방법 meta name="viewpoint" content="width=device-width, inital-scale=1.0" : 작은 디바이스에서 최적화 하는 방법

웹개발자도구 웹개발자도구는 웹 개발을 하는데 필요한 여러가지 기능을 모아둔 도구들로 웹브라우저별로 비슷한 기능의 도구를 제공하고 있습니다. 여기서는 HTML 개발과 관련된 부분에 초점을 맞춰서 크롬 개발자 도구를 살펴봅니다. 아래 링크는 크롬 개발자 도구에 대한 자세한 수업으로 연결됩니다. 웹개발자도구 웹 개발을 하는데 있어서 필요한 분석작업, 실시간으로 수정해서 테스팅하는 작업 등을 도와주는 도구입니다. Chrome 웹개발자도구 html코드를 볼 수 있습니다.

정보로서의 HTML 본 수업은 HTML에 대한 심화된 내용을 다룹니다. HTML의 기본문법과 HTML의 주요한 태그들에 대한 수업을 담고 있습니다. 웹에 대한 전반적인 분위기, 흐름 등을 공부하게됩니다. 정보로서의 HTML - 글꼴 - font (퇴출됨) font 태그 쓰라고 배우는 태그가 아니라 쓰지말라고 배우는 태그입니다. 의미를 가지고 있지 않고, 시각적인 정보(디자인)입니다. / 가독성x, 파일용량↑ / font size = "8" font의 크기를 정합니다. 1~7 까지 숫자 크기를 결정 할 수 있습니다. font color = "red" font의 색상을 정합니다. 정보로서의 HTML - meta meta 태그 웹 페이지의 내용은 아니지만, 어떠한 데이터를 설명하는 태그 (ex : HTML에 ..

입력양식 - form form(폼) 이란? - 우리가 '로그인, 회원가입을 하거나 물건을 사고, 글을 작성 할 때 입력한 정보를 서버에 전송 할 때 사용하는 "글자를 입력하는 것"들, "선택하는 것"들' 입니다. 사용자가 입력한 정보를 서버로 전송 할 때 사용하는 것들이라고 할 수 있습니다. - 등장시기 : HTML5 input 태그 사용자가 텍스트를 입력 할 수 있는 텍스트 필드가 생깁니다. "text"부분에 "password"라고 치면 ●●●●● 이런식으로 텍스트가 보이지 않게 가려집니다. input type = "submit" 서버로 전송하는 버튼이 생깁니다. form action="http://localhost/login.php" 서버로 전송 할 주소를 적습니다. name = "id" 각각의 필드..

주요태그 - 표 - table table 태그 - (Exel 같이) 구조화된 정보를 표현하고자 씁니다. - 과거에는 레이아웃을 만들 때 이용하기도 하였습니다. - 등장시기 : HTML2 - 테이블을 만들고 싶은 전체 행을 태그로 감싸줍니다. - , 태그로 행을 묶어줍니다. - 테두리를 주고 싶을 때는 border을 이용합니다. 주요태그 - 표2: 구조 테이블을 좀 더 구조화하는 법 (해도 되지만 안해도 됨) : 표의 맨 위에 위치합니다. : thead 안에 위치합니다. 맨 위의 중요한 행을 명시하고 싶을 때 표현합니다. td 태그 대신에 사용합니다. : 표의 중간이 위치합니다. : 코딩 한 부분이 어디든 (결과화면의)표 상에서 가장 아래쪽 위치로 자동으로 내려갑니다. 주요태그 - 표3: 병합 테이블을 병..

주요태그 - 이미지 - img 저작권 없는 이미지 제공 사이트 : pixabay 이미지 (img) 태그 - 목적 : 문서에 이미지를 포함합니다. - 등장시기 : HTML2 - 라는 형식으로 적습니다. - 닫는 태그가 필요 없습니다. - 크기를 변경하고 싶으면 태그 안에 width="200" height="300" 이라는 형식으로 적으면 됩니다. - alt="산이미지" 라는 alt 를 표시하면 이미지가 표시되지않을 때, 대체 텍스트로 제공해줍니다. 따라서 꼭 적어야 합니다. - 이미지에 마우스를 갖다놨을 때 도움말을 주고싶을 때 title="산이미지" 를 사용하여 줄 수 있습니다.