전체 글

[HTML] form 태그 1 - , , 태그 인터넷을 사용하다 보면 사용자의 의견이나 정보를 전달 받기 위해 회원 가입, 검색 등 다양한 정보를 입력받고 있습니다. 이런 공간을 폼(form)이라고 합니다. 로그인 페이지로 예시를 들면, 폼 hyun0907.tistory.com 저번에 form 태그에 대해 공부했습니다. 이어서 방문자로부터 정보를 입력 받을 때 주로 사용하는 폼 요소 중 태그가 있는데, 이 input 태그의 다양한 유형을 정리해보겠습니다. input 태그의 유형은 type="속성"에 의해 결정됩니다. input 태그는 다음과 같은 형식으로 사용할 수 있습니다. name 속성과 id를 지정하여 같은 항목들을 구분하여 지정할 수 있습니다. 목차 (클릭 시 이동합니다) 1. hidden: 보이..

인터넷을 사용하다 보면 사용자의 의견이나 정보를 전달 받기 위해 회원 가입, 검색 등 다양한 정보를 입력받고 있습니다. 이런 공간을 폼(form)이라고 합니다. 로그인 페이지로 예시를 들면, 폼으로 작성된 로그인 페이지에서 사용자가 아이디, 비밀번호를 입력하고 로그인 버튼을 누르면 해당 내용이 웹 서버로 전송됩니다. 서버는 자신이 가지고 있는 사용자 데이터 베이스를 체크해 서로 일치하는지 확인 후 그 내용을 브라우저로 전송해 표시합니다. 이때 폼과 관련된 작업은 대부분 데이터베이스를 기반으로 진행됩니다. 데이터베이스에 관련된 세부 작업은 프로그래밍한 개발자가 담당하며 웹 퍼블리셔, 웹 디자이너들은 해당 폼을 만들기 위한 다양한 입력 양식을 사용자에 맞게 작업합니다. 1. 태그 이렇게 하나의 입력 양식을 ..

우선 Semantic(시멘틱)이란, '의미의, 의미론적'이라는 뜻입니다. 시멘틱 태그는 말 그대로 의미가 있는 태그라는 뜻입니다. 1. 시멘틱 태그를 써야 하는 이유 웹 표준 코드인 HTML5도 구조가 복잡할 경우, 소스 코드에서 구조 파악하기를 하기가 쉽지 않습니다. 따라서 시멘틱 태그를 사용하도록 권장하고 있습니다. 시멘틱 태그는 HTML5에서 추가된 태그로 페이지의 구조를 쉽게 파악하도록 도와줍니다. 또한, 검색 엔진 같은 프로그램에서도 콘텐츠를 쉽게 이해할 수 있게 됩니다. 따라서 검색 엔진 최적화 등 프로그램에서 자료를 검색하여 정보의 의미를 분석할 수 있게 도와줍니다. 그리고 시각 장애인들을 위한 웹 표준 방식이기도 합니다. HTML5 이전, 시멘틱 태그가 나오기 전에는 웹 페이지에서 구조를 ..

저번에 float에 대해 공부한 적이 있습니다. 이번에는 float의 특징에 대해 더 자세하게 다루겠습니다. float은 떠오르다, 떠다니다라고 번역할 수 있습니다. float은 요소를 '띄우는' 개념입니다. 특징은 크게 3가지입니다. 1. float된 요소는 자신의 부모 요소의 content 영역 내에서 배치됩니다. 부모 안에 있는 모든 자식이 float되었을 경우, 부모의 높이는 0이 됩니다. 2. float 적용 시 margin 상쇄 규칙을 해결할 수 있습니다. 3. inline 요소에 float 적용시 display: block으로 변경됩니다. 모든 자식이 float될 시 부모의 높이는 0이 됩니다. float 속성을 부여하면 그 요소는 부모 요소의 content에 없는 것처럼 배치됩니다. 배치되..

전체 목표: 웹 개발을 위한 큰 그림을 그려 흐름을 이해하기 위하여 공부를 시작했습니다. 목표 1: 웹과 서버의 동작 방식 이해하기 요청-응답 웹의 동작 원리는 "클라이언트가 서버에 요청을 보내고 서버는 그 요청에 대해 응답 처리를 한다"입니다. 이전에 프론트엔드(클라이언트)와 백엔드(서버) 개념을 이해하면 좋습니다. 식당으로 비유를 해봅시다. 손님은 식당 직원에게 주문을 합니다. 직원은 주문에 맞게 서빙을 합니다. 즉, 무언가를 요청하는 손님은 클라이언트가 되고 요청한 것을 응답하는 직원은 서버입니다. API 요청 역시 데이터라고 볼 수 있습니다. 이 둘은 서로 데이터를 주고 받는 것이라고 할 수 있습니다. 그런데, 이 데이터를 서로 주고 받을 때 '정해진 규칙'이 있어야 합니다. 이 규칙이 바로 AP..

CSS 포지셔닝은 박스 모델을 배치하는 것을 의미합니다. CSS에서는 float을 이용해 정렬을 할 수 있습니다. float은 사전적 의미로 '떠오르다', '떠다니다'입니다. 웹 페이지에서는 float을 왼쪽이나 오른쪽에 배치할 때 사용하며 배치를 하지 않을 경우 'none'으로 표현합니다. 1. float 쓰는 법 선택자{ float: left; /* 문서의 왼쪽으로 배치 */ float: right; /* 문서의 오른쪽으로 배치 */ float: none; /* 배치하지 않음 */ } 예문을 하나 작성해보겠습니다. DOCTYPE html> float 사진+글 div{ width: 600px; height:700px; border: 5px solid #000; margin: 50px auto; } im..

1. 선택자란 CSS에서 선택자는 특정한 HTML 태그를 선택할 때 사용하는 기능입니다. 선택자를 사용해 특정 태그를 선택하면 해당 태그에 원하는 스타일과 기능을 적용할 수 있습니다. 최근 웹 페이지는 스타일의 비중이 높아졌습니다. 그에 따라 선택자를 지정하는 방법도 무조건 클래스를 붙이기보다는 효율적으로 선택자를 구성하면 좋습니다. 이전에 CSS 기초와 기본 문법에서 선택자를 간단하게 다룬 적이 있습니다. https://hyun0907.tistory.com/9 CSS 기초와 기본 문법 1. CSS란 웹 표준에서 CSS(Cascading Style Sheets)는 HTML과 함께 웹 표준의 기본 개념이다. CSS에서 C는 캐스캐이딩의 약자로 '위에서 아래로 흐르는 스타일시트'라는 의미다. 다만 HTML처..

CSS 인코딩 방식 선언 CSS 첫 코드는 @charset "utf-8";로 선언하는 것이 좋습니다. 이렇게 선언하면, 아스키 코드나 유니코드 문자열이 있을 때 utf-8로 명시적으로 선언해주어 인코딩 셋을 지정합니다. HTML에서 과 비슷한 역할을 합니다. @charset 사용법 charset 규칙은 스타일 시트 가장 처음으로 선언되어야 합니다. 어떤 문자도 선행하면 안 됩니다. @charset 규칙이 여러 개가 정의된 경우는 첫 번째만 유효합니다. @charset 규칙은 외부 스타일 방식에서만 사용 가능합니다. 인라인 방식 및 내부 스타일 방식에서는 사용이 불가능합니다. style 속성 내부에서 사용될 수 없으며 요소 안에서 역시 사용 불가능합니다. @charset을 통해 문자열 인코딩을 지정해줄 때..