몰까로그

태그 : 폼 태그로 내용을 입력할 때 대부분 태그를 사용해 처리합니다. : type 속성 값에 따라 입력 내용 종류를 지정합니다. : type 속성이 무엇인지에 따라 사용할 수 있는 속성들이 달라집니다. - type 속성에 들어가는 값들 hidden : 사용자에게는 보이지 않지만 서버로 넘겨지는 값 : 폼을 서버로 전송할 때 함께 전송되는 요소 : text : 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자 : 보통 아이디나 이름 등의 텍스트 입력 : search : 검색 상자, 검색 필드 : 검색 창에 X 표시가 되어 검색어 삭제가 쉬움 : tel : 전화번호 입력 필드 : 사용자가 숫자만 입력하는지 등을 체크하는 건 아님 : url : url주소를 입력할 수 있는 필드 : 웹 주소 필드 : http:..

사용자가 웹 사이트로 보내는 모든 정보는 폼을 통해 전달됩니다. 폼과 관련된 대부분의 작업들은 정보를 저장하거나 수정하거나 검색하는 일들이지요. 또한 이들은 모두 데이터베이스를 기반으로 합니다. 아이디를 입력하는 칸이나 버튼을 만드는 일을 HTML이 담당한다면, 폼에 입력한 사용자 정보를 처리하는 일은 ASP나 JSP, PHP 같은 서버 프로그래밍을 이용해야 합니다. 이번 글에서는 HTML 태그를 통해 폼을 만들어보도록 하겠습니다. 태그란? 폼을 만드는 기본 태그입니다. 태그 안에 여러 폼 요소를 삽입해 사용합니다. - 태그 속성들 속성 설명 method 사용자가 입력한 내용들을 서버 쪽에 어떻게 넘겨줄지 지정 - get : 주소 표시줄에 사용자가 입력한 내용이 표시됨. 256byte~4,096byte까..

웹페이지에 이미지를 넣기 위해선, 이미지 파일과 태그가 필요합니다. 웹페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서 화질은 좋아야 하기 때문에 파일 형식이 제한됩니다. 파일 형식 설명 GIF 표시할 수 있는 색상 수는 최대 256가지, 다른 이미지 파일 형식에 비해 파일 크기가 작아 아이콘이나 불릿 등 작은 이미지에 주로 사용, 투명 배경 사용 가능, 움직이는 이미지 가능 JPG/JPEG 사진을 위해 개발된 형식으로 다양한 색상과 명암 표현 가능, 저장 반복하면 화질 안 좋아짐 PNG 투명 배경 사용 가능, 다양한 색상 표현 가능, 네트워크용으로 개발됨 (1) 이미지를 삽입하는 태그 : 웹 문서에 이미지를 삽입할 때 사용합니다. 기본형은 입니다. 닫는 태그 없습니다. - src 속성..

"표(table)"는 자료를 보기 좋게 정리한 것 (1) 표를 그릴것임을 알리는 태그 : 표의 시작과 끝을 알리며 표 태그 전체를 감싸는 태그입니다. (2) 제목을 표시하는 태그 : 행의 제목을 표시하는 태그입니다. 보통 태그의 자식요소로 가장 윗부분에 적습니다. (3) 행을 표시하는 태그 (3) 셀을 표시하는 태그 : 행마다 같은 수의 셀을 넣으면 각각의 줄이 열이 됩니다. ex) 3x3 행열 만들어보기 제목(1행 1열) 1행 2열 1행 3열 제목(2행 1열) 2행 2열 2행 3열 제목(3행 1열) 3행 2열 3행 3열 제목(1행 1열) 1행 2열 1행 3열 제목(2행 1열) 2행 2열 2행 3열 제목(3행 1열) 3행 2열 3행 3열 (4) 열을 합치는 colspan 속성, 행을 합치는 rowspan..

목록을 만들 때 사용하는 리스트 태그들에 대해 알아보겠습니다. 리스트 태그는 global navigation bar를 구현할 때 많이 씁니다. 여러 게시글이나 이미지 등을 개념적으로 묶어 관리하고자 할 때 용이한 거 같네요. (1) 순서가 없는 , 태그 : 의 자식으로 가 옵니다. 구현은 아래와 같이 하면 되는데요. 각 항목 앞에 불릿이 붙고 css의 'list-style-type'으로 불릿 수정이 가능합니다. li간에 순서가 부여되지 않습니다. 순서가 없는 ul 태그 자식으로 li 태그만 가능 각 항목 앞에 불릿 붙음 css로 불릿 수정 가능 (2) 순서가 있는 , 태그 : 의 자식으로 가 옵니다. 구현은 다음과 같습니다. 각 항목 앞에 숫자가 붙고 css의 'list-style-type'으로 불릿 수..

텍스트를 묶는 , , 태그 등은 묶는 내용 다음에 자동으로 줄바꿈이 들어갑니다. 이번에는 줄바꿈 없이 문장 안 단어에 의미를 주는 태그들에 대해 알아보겠습니다. (1) 굵게 표시하는 , 태그 : 텍스트를 굵게 만들어 볼드처리를 해주는 태그입니다. 여는태그와 닫는태그 사이에 내용을 입력합니다. 태그는 중요한 내용이라 강조할 필요가 있을 때 사용합니다. 태그는 단순히 굵게 표시할 때 사용합니다. 이러한 기능은 css에서도 조절 가능하기 때문에 잘 사용하지 않습니다. 내용을 강조하는 의미가 있는 태그를 적재적소에 사용하면 좋습니다. (2) 이텔릭체로 표시하는 , 태그 : 이텔릭체로 글꼴을 표기해주는 태그입니다. 여는태그와 닫는태그 안에 내용을 입력합니다. (1)번과 마찬가지로 은 중요한 내용을 강조하는 의미로..

웹 문서도 문서이지요. 많은 양이 텍스트로 이루어진 만큼 모든 태그들은 텍스트를 묶는 박스라 볼 수 있습니다. 그 중에서도 가장 텍스트다운(?) 태그들을 먼저 알아볼 건데요. 제목을 의미하는 태그, 본문을 의미하는 태그, html에서 줄바꿈은 어떻게 하는지, 띄어쓰기는 어떻게 넣는지 등을 알아보고자 합니다. (1) 제목을 표시하는 태그 : 각 콘텐츠 영역에서 제목을 표시할 때 사용합니다. 숫자가 적을수록 중요도가 높음을 의미하며 그에 따라 크기도 커집니다. 하지만 text-size는 나중에 css에서 변경 가능한 부분이니, 글자 크기가 기준이 아닌 내용의 중요도를 기준으로 사용해야 합니다. 웹문서에서 검색할 때 대상이 되는 순위이기도 합니다. h1제목입니다. h2제목입니다. h3제목입니다. h4제목입니다..

태그를 사용할 때는 소문자로 쓰기 적당히 들여쓰기 닫는 태그 확인하기 HTML 문서 내용은 태그를 사용하여 작성됩니다. 작성하려는 내용의 속성에 따라 알맞은 태그를 사용합니다. '태그를 사용할 때는'에서 이 태그에 해당합니다. 여는 태그와 닫는 태그가 있으며 태그처럼 닫는 태그가 없는 태그도 있습니다. 태그는 소문자로 작성되며 태그마다 가질 수 있는 속성들이 있습니다. 태그의 'src'가 그 예시입니다. HTML 문서의 기본 구조는 아래와 같습니다. - 작성하는 문서가 HTML5로 작성된 웹 문서라는 뜻입니다. 웹 브라우저에게 처리할 문서가 어떤 유형인지 알려주는 역할을 하죠. doctype은 대문자로 써도 무방합니다. - 웹 문서의 시작과 끝을 나타내는 태그입니다. 웹 브라우저가 웹 문서를 읽을 때 H..

컴퓨터에서 사용하는 모든 파일은 저마다 고유의 형식을 갖습니다. 웹에서는 그에 맞는 형식인 html으로 웹문서가 저장되는데요. 파일 형식은 *.html 또는 *.htm입니다. 웹 문서는 텍스트와 이미지, 링크, 동영상 등 여러 요소를 다루고 표시할 수 있어야 합니다. 이러한 요소들이 웹에서 자유롭게 오가도록 웹 문서를 만드는 언어가 HTML입니다. 지금은 HTML5가 최신 표준안입니다. 웹 문서를 보는 프로그램을 '웹 브라우저'라 하고 웹 문서를 작성하는 프로그램을 '웹 편집기'라 합니다. 우리는 누군가 웹 편집기로 만든 웹 사이트를 웹 브라우저로 보고 있는 거죠. 많이들 쓰는 웹 브라우저로는 크롬, 사파리, 파이어폭스, 엣지, 인터넷 익스플로러 등이 있습니다. 마이크로소프트사의 인터넷 익스플로러는 취약..