본문 바로가기

비전공자3

[HTML/CSS] Media Queries(미디어쿼리), Viewport(뷰포트) 1) 미디어쿼리 소개 미디어퀴리(Media Queries)는 각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것입니다. 미디어 매체는 모니터와 같은 스크린 매체, 프린트, 스크린 리더기와 같은 것들을 이야기 합니다. 미디어쿼리는 동일한 웹 페이지를 다양한 환경의 사용자들에게 최적화된 경험을 제공할 수 있게 해줍니다. 미디어쿼리는 CSS2의 미디어 타입(Media Types)을 확장해서 만들어졌습니다. 미디어타입은 이론적으로는 훌륭했지만, 결과적으로 제대로 활용되지 못했습니다. 이유는 당시에는 미디어 타입을 제대로 지원하는 기기가 없었기 때문입니다. 미디어 쿼리가 등장하기 이전에는 제대로 된 반응형 웹 사이트를 제작할 수는 없었습니다. 하지만 당시에는 사용자들의 환경이 아주.. 2020. 8. 22.
[HTML/CSS] HTML Form 요소 2 - <select>, <option>, <textarea>, <label>, <fieldset>, <legend> 12) 폼 요소 3 ● 는 선택 목록 상자 또는 콤보박스라고도 하는데, 몇 개의 선택지를 리스트 형태로 노출하고 그중 하나를 선택할 수 있게 하는 태그다. (multiple 속성을 사용하면 다중 선택도 가능) 거주지: 서울 경기 인천 기타 내부의 으로 각 항목을 나타내고, 의 selected 속성으로 미리 선택돼 있을 항목을 정한다. ​ ​ ● 한 줄만을 입력할 수 있는 와 달리 여러 줄의 텍스트를 입력할 때 사용한다. 자기소개: 에는 텍스트 상자의 크기를 조절하는 rows, cols 속성이 있고, 다른 태그와 마찬가지로 placeholder 속성을 이용해 하고싶은 말을 미리 적어둘 수 있다. - cols : 가로 크기를 조절하는 속성(한 줄에 들어가는 글자의 수, 영문 기준이라 한글은 정확하진 않음) .. 2020. 8. 2.
[HTML/CSS] HTML Form 요소 1 - <form>, <input> type = "text", "password", "radio", "checkbox", "file" 10) Form 요소 1 Form 요소는 서버에 데이터를 전달하기 위한 요소이며, 태그는 대표적인 Form 요소 태그다. 은 내용이 없는 빈 요소이며, type 속성을 통해 여러 종류의 입력 양식으로 나타나게 된다. ​ 하지만 Form 태그 안의 태그들을 동작시키려면 태그에 action이라는 속성을 부여해서 어떤식으로 동작할지 명시해줘야한다. ​ 하나의 예시 코드를 들어보자면, 위와 같이 작성한 Form이 submit(제출)되면, /test.html로 이동하는 action 속성을 부여했다. ● type="text" 아이디: 주로 아이디, 이름, 주소, 전화번호 등 단순한 텍스트를 입력할 때 사용하고, type="text"에는 placeholder 속성이 존재하는데, 이 placeholder 속성은 사용자.. 2020. 8. 1.