본문 바로가기

Frontend136

[HTML] form 이용해서 상품 주문서 작성해보기 See the Pen by seyoungjoy (@seyoungjoy) on CodePen. 각각 스타일을 주기위해 어떤 부분은 label안에 input을 포함할지 말지의 여부를 다르게 한다. 필수로 들어가야하는 부분은 required를 꼭 붙여주고 주문 정보 같은 부분은 한 list 안에 두개의 label태그가 들어가 상품 checkbox와 number 두개의 input을 만들어야한다. 2021. 9. 25.
[HTML]<input> 태그 속성 autofocus 속성 - 입력 커서 표시하기 페이지를 불러오자마자 폼의 요소 중에서 원하는 요소에 마우스 커서를 표시할 수 있다. placeholder 속성 - 힌트 표시하기 사용자가 텍스트를 입력할 때 도움이 되도록 입력란에 적당한 힌트 내용을 표시하고 있다가 그 필드를 클릭하면 내용이 사라지도록 만들 수 있다. readonly 속성 - 읽기 전용 필드 만들기 입력란에 사용자가 입력하지 못하고 읽게만 만든다. required 속성 - 필수 필드 지정하기 내용을 폼에 입력한 후 submit 버튼을 클릭하면 폼을 서버로 전송하는데 이때 필수 필드에 필요한 내용이 모두 채워졌는지 검사해준다. min, max, step 속성 - 최솟값, 최댓값, 간격 태그의 유형이 date, datetime, datetim.. 2021. 9. 25.
[HTML] <input> 태그의 type 웹에서의 폼은 크게 사용자가 입력하는 부분과 입력한 내용을 서버로 보내는 버튼 부분으로 나눌 수 있다. 사용자가 입력하는 부분은 한 줄짜리 텍스트나 비밀번호 같은 부분인데 이런 부분을 만들 때 사용하는 태그가 태그이다. id 속성 사용하기 input에서 id 속성은 매우 중요하다. 똑같은 폼 요소들을 많이 사용할 수도 있기때문에 이것을 구분해주고, 또 폼마다 다른 css를 적용해줄 때 id 값이 필요하다. 또한 id를 지정해놓으면 태그를 이용해 캡션을 붙일 수도있다. 태그의 type 속성에서 사용 가능한 유형 유형 설명 hidden 사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가진다. text 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣는다. * 사용 가능한 속성 name - 텍스트 필드를 .. 2021. 9. 25.
[HTML] 기본form 만들기(<form>, <label>, <fieldset>, <legend>) 태그 - 폼 만들기 폼을 만드는 가장 기본적인 태그 form 태그의 속성 폼 태그는 몇 가지 속성을 통해 사용자가 입력한 자료들을 서버로 어떤 방식으로 넘길 것인지, 서버에서 어떤 프로그램을 이용해 처리할 것인지 지정한다. 속성 설명 method 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정한다. 속성 값 get - 주소 표시줄에 사용자가 입력한 내용이 그대로 드러난다. 256byte~4096byte까지의 데이터만 서버로 넘길 수 있다. post - 대부분 이 방식을 사용한다. 사용자의 입력을 표준 입력으로 넘겨주기 때문에 입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 드러나지 않는다. name 폼의 이름을 지정한다. 한 문서 안에 여러 개의 태그가 있을 경우, 폼들을.. 2021. 9. 25.
[Sass] Sass(Scss)란? 1 SASS(SCSS)란?CSS란?Cascading Style Sheets, 문서의 스타일을 구현하는 스타일 시트 언어 CSS PreprocessorSass, Less 등이 css전처리기이다. css가 동작하기 전에 사용하는 기능으로, 웹에서는 분명 css가 동작하지만 우리는 css의 불편함을 이런 확장 기능으로 상쇄할 수 있다. SassSyntactically Awesome Stylesheets, 문법적으로 엄청난 스타일 시트- CSS의 단점을 보정하기 위한 css의 확장으로 나온 스크립트 언어.프로젝트가 점점 커지고, 스타일 시트도 덩달아 커지게 되면 유지보수가 힘들어진다. 그래서 이러한 단점들을 보완하기 위해variable, nesting, mixin, inheritance 등의 개념이 추가된 것이.. 2021. 9. 23.
[CSS] display : inline, block, inline-block 블록 요소(block element) 블록 요소 특징 - 모든 인라인 요소를 포함할 수 있다. - 다른 블록 요소도 일부 포함할 수 있다. - 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 된다. - width, height, margin, padding 등을 사용하여 형태를 변형해 레이아웃을 수정할 수 있다. - 블록 요소 다음에는 줄바꿈이 이루어진다. - vertical-align 적용 ❌ - text-align 적용 ❌ ※블록 요소에 text-align 적용시켜보기 블록 요소는 기본적으로 width값을 수평 전체로 잡히기 때문에 text-align이 먹히질 않는다. 그래서 해당 요소를 inline-block으로 display 속성을 바꾼 후, 그 부모요소에 text-align을 해주면 적용.. 2021. 9. 23.
반응형

티스토리툴바