학습/HTML
-
HTML <form>태그, <input>, <button>학습/HTML 2022. 2. 24. 15:03
* get(소량) - 보안에 취약하며 과거엔 많이 썼는데 지금은 잘 쓰지 않습니다. * post(대량) - 보안에 강합니다. 1️⃣ 텍스트 박스 텍스트 입력이 가능한 박스가 생깁니다. 2️⃣ 패스워드 박스 입력된 내용이 원이나 별표로 마스킹 처리 됩니다. 3️⃣ 라디오 버튼 동그란 원형으로 선택 가능한 버튼이며 단 하나만 선택 가능합니다. 태그 안에 name 속성값을 꼭 같게 넣어줘야합니다. 4️⃣ 체크박스 중복선택 가능한 네모 선택 박스입니다. 5️⃣ 선택목록 Family site 박스를 만들 때 주로 쓰이며 드롭다운으로 선택영역이 구현됩니다. ← 이 예시는 맥OS에서 작업된 것이기에 윈도우에서는 다르게 보일 수 있습니다. 6️⃣ 다중 텍스트 박스 직접 여러줄의 텍스트를 입력하는 텍스트 박스입니다. 생..
-
HTML 모달창 만들기 공식학습/HTML 2022. 2. 21. 22:03
모달창은 열려있는 브라우저 위로 새로운 레이어를 까는 것을 뜻합니다. 그래서 팝업창과 다르게 opacity가 들어간 어두운 배경이 기본적으로 깔립니다. 1️⃣ 모달창의 내용 위치는 어디에도 좋습니다. body 안에만 들어가 있으면 됩니다. 2️⃣ 기본 내용은 이러합니다. 어두운 배경이 될 div 안에 내용이 들어갈 div가 들어가고 p태그로 내용을 넣어주었습니다. 텍스트 내용은 ul, li로 하셔도 무방합니다. 닫기 버튼도 input이 아닌 다른걸로 넣어주셔도 됩니다. 3️⃣ css 서식 배경이 될 modal에 position:fixed로 위치를 고정시켜줍니다. 사이즈도 100%는 필수입니다. 배경컬러는 뒤에 기존 브라우저가 살짝 보이게 opacity값을 넣어주세요. z-index는 현 브라우저보다 위에..
-
HTML 하이퍼링크(a), 이미지(img) 태그학습/HTML 2022. 2. 17. 20:40
[이미지 태그] 기본 문법 1️⃣ 절대주소(http)를 사용하여 이미지 삽입하기 ex) 2️⃣ 상대주소(http 없음)를 사용하여 이미지 삽입하기 ex) ./폴더명/내가 가지고 있는 이미지 이름.확장자 이미지가 폴더 여러개 상위폴더에 있을 때는 ../../ 식으로 ../이 늘어납니다. [하이퍼링크] 기본 문법 title 속성을 써주는 이유는 '웹접근성' 때문입니다. 웹접근성이란 사용자가 이용하는 브라우저나 디바이스 환경이 다양할 것이고, 이용하는 사용자들도 다양한 사람들이 있기 때문에(적목색맹, 시각 장애인, 청각 장애인 등) 웹사이트에서 제공하는 정보를 모두에게 차별과 제한없이 이용할 수 있도록 해주는 것입니다. img 태그에도 웹접근성을 준수하려면 와 같이 alt 속성을 넣어줍니다. 추가로 웹접근성 ..
-
HTML 기초학습/HTML 2022. 2. 15. 16:31
1️⃣ HTML_메타 태그 viewport : 화면에 비율에 콘텐츠를 맞춘다. content : 문서안에 내용. width=device-width : 가로폭을 스마트폰의 가로너비에 맞춘다. intial-scale=1 : 실제 사용자가 보는 화면 크기를 100%로 보게 해준다. 2️⃣ 특수문자 삽입 HTML에서는 entity code를 보고 특수문자를 넣어주며, https://entitycode.com 원하는 특수문자가 없을시에는 유니코드 변환기로 변환하여 넣어줍니다. http://kor.pe.kr/convert.htm 3️⃣ 푸터 영역 sns, 회사정보, 로고, 이용약관, 회사소개, 저작권, 개인정보처리방침 등이 들어갑니다.