개발해보개

모바일 우선으로 스타일링 min-width 사용 (최소 가로사이즈 보다 큰 경우) 작은 가로폭부터 큰 가로폭 순서로 적용 /* 기본 (가로 360px보다 작은 화면에 적용되는 스타일) */ div { background-color: red; } /* 가로 360px보다 큰 화면에 적용되는 스타일 */ @media (min-width: 360px) { div { background-color: orange; } } /* 가로 600px보다 큰 화면에 적용되는 스타일 */ @media (min-width: 600px) { div { background-color: yellow; } } /* 가로 1000px보다 큰 화면에 적용되는 스타일 */ @media (min-width: 1000px) { div { b..

HTML CSS 2022. 11. 26. 21:58

전화걸기 전화걸기 // 영상통화의경우tel-av:전화번호 를 사용하면 된다고 하니 참고. a태그를 사용하여 href 속성에 tel:전화번호 를 넣어주면, 해당 번호로 바로 전화를 걸 수 있도록 전화걸기 화면으로 이동 된다. 문자보내기 문자보내기 a태그를 사용하여 href 속성에 sms:전화번호 를 넣어주면, 해당 번호로 바로 문자를 보낼 수 있도록 화면으로 이동 된다.

HTML CSS 2022. 11. 26. 18:46

모바일에서 input keyboard 숫자 키보드로 띄우기 흔히 input type을 number로 지정해주면, 안드로이드에서는 문제없이 숫자 키패드를 띄워주지만, IOS에서는 숫자 키패드가 나오지 않는다. 이 경우 pattern 속성을 사용하여 숫자만 받을 수 있도록 지정할 수 있다. 또다른 방법으로는 inputmode 속성을 사용 하는 방법이다. // inputmode는 type 속성에 따라 정해지며 기본값은 text 이다. // input 작성시 모바일 가상 키보드가 나오지 않는다. // 소수점을 제공하는 숫자형 키보드가 나온다. // 숫자형 키보드가 나온다. // 전화번호를 입력하기 위한 숫자형 키보드가 나온다. // 검색을 위한 text 키보드가 나온다. // 이메일 입력을 위한 text(eng..

HTML CSS 2022. 11. 26. 18:30

포트폴리오 제작 중, 너무나도 자연스럽고 무의식적으로 a 태그를 사용하다가 노란색 에러 친구를 만났다. 응? 잠깐... 너무 기본적이고 익숙한 태그를 작성한거 같은데... ? 나 뭐 잘못 썼나 ? 당황하다가 친절한 에러를 보고 구글링을 시작했다. rel="noopener" .... ? stackoverflow에서도 많은 사람들이 왜 rel 없이 사용 할 수 없는지 궁금해하고 있었다. 공부한 결과. tartget="_blank"로 새 탭에서 링크된 페이지를 열게 할 경우, 보안상 취약하다고 한다. 새로운 탭으로 전환되는 동안 기존 페이지가 피싱사이트로 바꾸어 버리는 나쁜 범죄가 있다고한다. 이것을 reverse tabnapping 이라고 한단다.. 이때 rel="noopener noreferrer"이 이것..

HTML CSS 2021. 12. 29. 13:26

Data속성 HTML5부터 새로 추가된 개념. HTML 요소의 'data-'로 시작하는 속성을 말한다. 이러한 데이터 속성은 특정한 데이터를 DOM요소에 저장해 두는 것이 목적이다. 속성명은 data-value 이지만 custom data attributes로서 value자리에 원하는 속성명을 넣을 수 있다. data-code / data-img / data-color / data-number 등 .. 다양하게 사용 가능하다. 이 저장된 데이터를 자바스크립트에서 불러와 사용하게 될텐데, 속성명은 data-의 뒷부분이 된다. dataset.code / dataset.img / dataset.color / dataset.number 등 과 같이 접근할수있다. **주의사항 새로 추가된 속성이다보니, 호환성에 ..

HTML CSS 2021. 11. 17. 13:13

CSS란? Cascading Style Sheets의 약자로, HTML요소들을 꾸며주는 역할을 하는 스타일 시트 언어이다. 선택자란? CSS를 통하여 HTML요소를 지정하여 꾸밀 수 있는데, HTML요소를 지정하기 위해 우선적으로 선택자에 대한 이해가 필요하다. 전체 선택자 (Universal Selector) :body를 포함한 모든 html요소를 선택합니다. * 로 표시 타입 선택자 (Type Selector) :h1 ,div ,span, p등 html의 일부 요소의 전체를 선택합니다. 태그명으로 표시 아이디 선택자 (ID Selector) : 특정 ID값을 갖은 요소를 선택합니다. #아이디값 으로 표시 클래스 선택자 (Class Selector) : 특정 Class값을 갖은 요소를 선택합니다. .클..

HTML CSS 2021. 7. 18. 11:24

HTML 태그를 알아보자. form요소를 이용하여 데이터 입력받고 전송하기. 사용자로부터 데이터를 입력받고, 서버로 전송할 때 사용하는 태그. form element를 그룹화하는 태그. 그룹화한 form element의 이름을 지정하는 태그. input 양식에 이름 붙이기 * label의 for값과 input의 id값을 통일시키면, 두개가 연계되어 label부분을 클릭해도 input부분이 작동됨. 다양한 input 요소의 type을 알아보자. 텍스트 입력 = text 문장 입력 = textarea 비밀번호 입력 = password 라디오 버튼 = radio 체크박스 = checkbox 파일 선택 = file 버튼 입력 = button 전송 버튼 = submit 이메일 입력 = email 검색어 입력 = ..

HTML CSS 2021. 7. 18. 10:21

HTML 태그를 알아보자. 표만들기. 표 지정 태그 *border을 지정해야 표의 테두리가 보이므로 임의로 지정. 이에 관련해서는 나중에 css에서 공부. 표 제목 태그 표의 머리 태그 열의 제목 태그 행 태그 셀 태그 표의 본문 태그 표의 꼬리 태그 예시 결과 셀을 병합해보자. 세로 병합

HTML CSS 2021. 7. 5. 21:45