개발 일기

Data 속성 HTML5부터 데이터 속성이라는 개념이 추가되었는데 HTML 요소의 'data-'로 시작하는 속성이다. 이러한 데이터 속성은 특정한 데이터를 DOM 요소에 저장해두기 위함이 목적이다. 데이터 속성은 'data-'로 시작해야하면, 브라우저는 이러한 데이터 속성에는 어떠한 행동도 관여하지 않기 때문에 개발자는 요소에 특정한 데이터를 저장하고 싶은 경우 자유롭게 사용할 수 있다. data-*전역 트성은 사용자 지정 데이터 특성(custom data attributes)라는 특성 클래스를 형성할 수 있다. data-value 속성은 임의로 만들어진 사용자 지정 데이터이기 때문에 value속성과는 상관이 없다. 데이터 속성의 장점 데이터 속성의 장점은 이전과 같이 hidden으로 태그를 숨겨두고 데..

태그 - 버튼 넣기 태그로 submit이나 reset의 버튼을 만들 수 있다. 속성 속성 값 설명 submit 폼을 서버로 전송한다. reset 폼에 입력한 내용을 초기화시킨다. button 버튼 형태만 만들 뿐 자체 기능은 없다. 태그와 태그의 차이점 태그는 태그 이름에서 알 수 있듯이 화면 낭독기에 그 역할을 정확하게 전할 수 있다. 즉 웹접근성에 더 좋다는 것이다. 또한 태그를 사용한 버튼에는 콘텐츠를 포함할 수 있기 때문에 아이콘을 추가할 수 있고 CSS를 이용해 원하는 형태로 꾸밀 수 있다. form에서 버튼을 만들 때는 웹접근성을 위해 태그로 만드는 것이 좋을 것 같다. 태그 - 계산 결과 입력하는 값이 계산 결과라는 것을 브라우저에 알려준다. output 태그를 사용하면 output으로 묶인..

, , 태그 - 드롭다운 목록 만들기 사용자가 내용을 입력하는 것이 아니라 여러 옵션 중에서 선택하도록 하고 싶을 때 드롭다운 목록을 사용한다. 태그 드롭다운 목록의 시작과 끝을 표시한다. 한 가지 옵션이 표시되고, 화살표를 클릭해 그 옵션들을 살펴볼 수 있고 필요한 한 가지 항목을 선택할 수 있다. 즉, 사용자가 선택할 수 있는 선택 항목을 제공하고, 그 범위내에서 선택이 가능하다. 속성 size - 화면에 표시될 드롭다운 메뉴의 항목 개수를 지정한다. multiple - 브라우저 화면에 여러 개의 옵션이 함께 표시되면서 ctrl 키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목을 선택할 수 있다. 태그 드롭다운 목록에 표시되는 옵션들은 태그를 이용해 지정한다. 태그에서만 사용하는 속성은 다음과 같다...

See the Pen by seyoungjoy (@seyoungjoy) on CodePen. 각각 스타일을 주기위해 어떤 부분은 label안에 input을 포함할지 말지의 여부를 다르게 한다. 필수로 들어가야하는 부분은 required를 꼭 붙여주고 주문 정보 같은 부분은 한 list 안에 두개의 label태그가 들어가 상품 checkbox와 number 두개의 input을 만들어야한다.

autofocus 속성 - 입력 커서 표시하기 페이지를 불러오자마자 폼의 요소 중에서 원하는 요소에 마우스 커서를 표시할 수 있다. placeholder 속성 - 힌트 표시하기 사용자가 텍스트를 입력할 때 도움이 되도록 입력란에 적당한 힌트 내용을 표시하고 있다가 그 필드를 클릭하면 내용이 사라지도록 만들 수 있다. readonly 속성 - 읽기 전용 필드 만들기 입력란에 사용자가 입력하지 못하고 읽게만 만든다. required 속성 - 필수 필드 지정하기 내용을 폼에 입력한 후 submit 버튼을 클릭하면 폼을 서버로 전송하는데 이때 필수 필드에 필요한 내용이 모두 채워졌는지 검사해준다. min, max, step 속성 - 최솟값, 최댓값, 간격 태그의 유형이 date, datetime, datetim..

웹에서의 폼은 크게 사용자가 입력하는 부분과 입력한 내용을 서버로 보내는 버튼 부분으로 나눌 수 있다. 사용자가 입력하는 부분은 한 줄짜리 텍스트나 비밀번호 같은 부분인데 이런 부분을 만들 때 사용하는 태그가 태그이다. id 속성 사용하기 input에서 id 속성은 매우 중요하다. 똑같은 폼 요소들을 많이 사용할 수도 있기때문에 이것을 구분해주고, 또 폼마다 다른 css를 적용해줄 때 id 값이 필요하다. 또한 id를 지정해놓으면 태그를 이용해 캡션을 붙일 수도있다. 태그의 type 속성에서 사용 가능한 유형 유형 설명 hidden 사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가진다. text 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣는다. * 사용 가능한 속성 name - 텍스트 필드를 ..

태그 - 폼 만들기 폼을 만드는 가장 기본적인 태그 form 태그의 속성 폼 태그는 몇 가지 속성을 통해 사용자가 입력한 자료들을 서버로 어떤 방식으로 넘길 것인지, 서버에서 어떤 프로그램을 이용해 처리할 것인지 지정한다. 속성 설명 method 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정한다. 속성 값 get - 주소 표시줄에 사용자가 입력한 내용이 그대로 드러난다. 256byte~4096byte까지의 데이터만 서버로 넘길 수 있다. post - 대부분 이 방식을 사용한다. 사용자의 입력을 표준 입력으로 넘겨주기 때문에 입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 드러나지 않는다. name 폼의 이름을 지정한다. 한 문서 안에 여러 개의 태그가 있을 경우, 폼들을..

html이 뭐냐고 물으면... 웹사이트의 구조를 만드는 언어라고밖에 대답못하는 나... 그래서 조금 더 알아보기로했다. HTML이란 무엇일까? HyperText Markup Language, 해석하면 하이퍼텍스트를 마크업하는 언어다. 하이퍼텍스트란? 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능 마크업이란? 태그를 사용해 문서에서 어느 부분이 제목이고 본문인지, 어느 부분이 사진이고 링크인지 표시하는 것 즉, 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어가 HTML이라고 정리할 수 있다. HTML 문서 기본 구조 1 - 문서 유형을 지정하는 선언문 웹 브라우저에게 '이제부터 처리할 문서는 HTML 문서이고 어떤 유형을 사용했으니 그 버전에 맞는 방법으로 해석하라' 라..

하나의 이미지에 여러 개의 링크를 걸 수 있다. 즉, 한 이미지상에서 클릭 위치에 따라 서로 다른 링크가 열린다. 이것을 '이미지 맵'이라고 한다. 기본형

, , , 태그 - 기본적인 표 만들기 기본형 제목 내용 표를 나타내는 html 태그 행을 나타내는 과 셀을 나타내는 , 태그 등이 사용됨. - table row - 표 내부에서 행을 나타내는 태그 - table header - header의 cell을 나타내는 태그 - 기본 스타일 : text-align:center, font-weight:bold - table data - 일반적인 칸(cell)을 나타내는 태그 - 기본 스타일 : text-align:left colspan, rowspan 속성 - 행 또는 열 합치기 ※ 이러한 속성들을 적어줄 때 합쳐지는 셀들은 html 상에서 지워줘야 한다. colspan - 가로로 이웃한 셀을 합칠 때 - column이 열이라는 뜻, 열 하나하나를 합치니깐 가로로..