프로그래밍/HTML (5) 썸네일형 리스트형 <a>태그 관련 예제 ③ 태그 관련 예제 - href속성을 이용한 앵커 앵커 만들기 웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. 메뉴1 메뉴2 메뉴3 [메뉴로] 내용1 웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. 웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. 웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을.. <input>태그 관련 예제 ② 태그 관련 예제 - type속성의 text, password와 size속성 아이디 : 비밀번호 : → 을 이용하여 테두리박스를 만들어주고, 아이디 텍스트박스를 만들 때엔 input type="text"를 이용하여 size를 10으로 지정해주고, 비밀번호 텍스트박스를 만들 때엔 input type="password"를 이용해 size 10으로 만들어주었다. → 이때, 비밀번호를 불릿 형태로 표시하도록 하고 싶다면 input type을 text가 아닌 password로 지정하면 된다. - type속성의 number, range, color와 value속성과 min/max/step속성 등록 정보 참여인원(최대10명) 지원물품(1인당 5개) 희망단계(하,중,상) <form> 관련 태그 예제 ① 관련 태그 예제 - 과 예제 개인 정보 이름 메일 주소 로그인 정보 아이디 비밀번호 → 태그 안에 인 테두리 박스를 긋고, 인 테두리의 제목을 만들어 틀을 구성하였다. → 테두리 박스 안에 를 사용하여 이름과 메일주소, 아이디와 비밀번호를 배치시켰다. → 타입의 text를 이용해 텍스트박스를 만들어주고 의 for속성과 input의 id속성의 이름을 'id', 'pwd'로 같게 하여 텍스트를 누르면 텍스트박스가 작동되도록 하였다. - 의 action속성과 method속성 → form의 action속성은 서식 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL을 적어두는데, 위 예제에서는 search.jsp로 적어주었다. → form의 method속성은 폼 데이터를 별도로 첨부하여 .. 텍스트 관련 태그들 태그 설명 각 웹 콘텐츠 영역에서 제목을 표시할 때 사용하는 태그. ~ 줄 바꾸기. 주제가 바뀔 때 분위기 전환. 수평 줄 생김. 텍스트 단락이 만들어짐. 인용 내용, 다른 텍스트보다 안으로 들여 써짐. 입력한 그대로 표시. , 글자 게 표시. 인용 내용 표시. 형광펜 효과. , 영역 묶기. - 줄 안에서(인라인), - 줄 바꿔 (블록) 단락으로 묶기. , 태그 안에 태그를 사용해 주석 표시. 약자 표시. title 속성과 함께 사용할 수 있음. 웹 문서나 포스트에서 참고 내용 표시. 컴퓨터 인식을 위한 소스 코드. 키보드 입력이나 음성 명령 같은 사용자 입력 내용. 부가 정보처럼 작게 표시해도 되는 텍스트. 아래 첨자. 위 첨자. 취소선. 밑줄. , 순서 없는 목록. , 순서.. 첫 프로그래밍-HTML 제가 공부했던 코드 내용을 주절주절 적는 공간입니다. 첫 교재로는 _위키북스가 적합할 거 같아 선택하였습니다. HTML이란 웹 페이지를 만드는 컴퓨터 언어이다. 1. 기본 문법과 태그 - 문자를 진하게 - 밑줄 - 제목을 나타내는 태그 ~ - 줄바꿈 : 새로운 줄 표현 ※ 은 특이하게 이 없다 : 두 개의 단락으로 나눔 2. 속성 태그 문법 - 태그 : 이미지를 웹 페이지에 포함시킬 때. - 태그의 width 속성 설정 : => 이미지 파일을 불러 와서 웹을 열어봤는데 계속 엑박이 뜨길래 구글링 해서 img 문법에 관한 내용을 다 찾아 보고 읽어도 무슨 뜻인지 모르는 절대경로와 상대경로에 대한 내용밖에 없어서 이 교재의 유튜브 동영상 강의 댓글에 어떤 분이 '사진(이미지 파일)을 같은 폴더 안으로 이동시.. 이전 1 다음