몰까로그

사용자가 웹 사이트로 보내는 모든 정보는 폼을 통해 전달됩니다. 폼과 관련된 대부분의 작업들은 정보를 저장하거나 수정하거나 검색하는 일들이지요. 또한 이들은 모두 데이터베이스를 기반으로 합니다. 아이디를 입력하는 칸이나 버튼을 만드는 일을 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..

'반응형 웹'이란? PC 컴퓨터, 스마트폰, 태블릿 등 접속하는 기기의 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지를 말한다. Daum 화면의 모바일 웹페이지와 PC 웹페이지를 비교해보면 이해가 쉽다. 반응형 웹을 만드려면 (1) 어떻게 다르게 구성할건지, (2) 몇개의 다른 화면을 만들건지, (3) 각 화면의 넓이는 몇으로 설정할건지 정해야 한다. 어느정도 미리 구상을 해두면 그림을 그려가듯이 코드를 짤 수 있다. 데스크탑에서 모바일로 갈수록 화면의 넓이는 줄어든다. 좁은 화면을 가로로 쪼개 섹션을 나누면 글자며 사진이며 잘려서 가시성이 떨어진다. 때문에 모바일 화면에서는 아이템들을 세로로 길게 나열해 배치하는 게 좋다. 혹은 슬라이드 형태로 만들면 깔끔하다. 반응형 웹페이지는..

구글폰트에서 제공하는 아이콘을 사용해보자. 구글폰트 바로가기 ↓↓↓↓↓↓↓↓↓ https://fonts.google.com/icons?preview.size=37 Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com >>>>>구글아이콘 사용하기

구글에서 제공하는 브라우저 폰트를 사용해보자. 구글폰트 바로가기 ↓↓↓↓↓↓↓↓↓ https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com >>>>> 폰트 사용하기

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

display: flex; 레이아웃 배치를 위한 전용 기능으로 고안된 기능. 인터넷 익스플로러 구 버전에서는 지원 안 되기도 함. IE 10, 11 지원. box1 box2 box3 위와 같이 html 구조를 설정해, box들을 가로로 나란히 병렬하고 싶을 때. 부모요소인 container에 display: flex;를 적용해 사용. container가 flex의 영향을 받는 공간이며, 그 안에 자리잡는 item들이 설정한 속성에 따라 배치됨. ***** flex 적용 속성 ***** ◎ item 적용 속성 (1) flex-basis // 아이템 기본 크기 설정 flex-direction이 row일 때는 width를, column일 때는 height를 설정. width를 설정하면 아이템이 width보다 ..

display: flex; 레이아웃 배치를 위한 전용 기능으로 고안된 기능. 인터넷 익스플로러 구 버전에서는 지원 안 되기도 함. IE 10, 11 지원. box1 box2 box3 위와 같이 html 구조를 설정해, box들을 가로로 나란히 병렬하고 싶을 때. 부모 요소인 container에 display: flex;를 적용해 사용. container가 flex의 영향을 받는 공간이며, 그 안에 자리 잡는 item들이 설정한 속성에 따라 배치됨. ***** flex 적용 속성 ***** ◎ container 적용 속성 1) display: flex; // flex 선언 .container { display: flex; } 가로 방향으로 배치. item들의 width는 item이 가진 내용물 만큼, he..

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