본문 바로가기

HTML

(6)
HTML - 6 - Form default propertyaction (목적지 주소)사용자가 '제출(submit)' 버튼을 눌렀을 때, 데이터를 받아서 처리할 **서버 프로그램의 경로(URL)**를 지정합니다.설명: 폼 데이터가 도착할 최종 목적지입니다.특징: 이 속성을 생략하면 현재 페이지의 URL로 데이터를 다시 전송하게 됩니다.method (전송 방식)데이터를 서버로 보낼 때 어떤 HTTP 방식을 사용할지 결정합니다.get: 데이터를 주소창(URL)에 ?name=value 형태로 붙여서 보냅니다. 데이터 크기가 제한적이고 보안이 중요하지 않은 검색어 등에 사용됩니다.post: 데이터를 패킷 내부에 숨겨서 보냅니다. 데이터 용량 제한이 거의 없고, 로그인 정보나 개인정보처럼 보안이 필요한 경우 반드시 사용해야 합니다..
HTML - 5 - from action=""에서 ""사이에 URL 삽입 input은 label로 감싸준다 > 닫지 않아도 되는 태그 (Ex: , , , 코드 안에서 us 쓰다가 (abc)가 나온다면 이미 어디서 사용했다는 뜻 을 밖에 쓰고 을 써도 둘은 단단히 체결 실무에선 아래 방법으로 사용 - 용어 설명이름 label, input: 태그for, type: 프롬포티user-name: 밸류 (변수)text: 밸류 (키워드)키워드들은 html에서 지정된 것이라 다른 단어로 사용 X - fieldset 과 legendfieldset: 박스를 그려주는 기능legend: 필드셋의 박스 영역 중 제목을 부여해 가독성을 높여줌 - submitinput에서 사용하는 submit과 reset을 이용하여 버튼 만들기 type = ..
HTML - 4 1. PNG JPG SVG WebP GIF characteristic, pros and cons- 이미지 파일 비교포맷특징장점단점주요 용도JPG (JPEG)손실 압축 방식사진처럼 색상이 다양한 이미지에 최적화, 용량이 작음투명 배경 불가능, 압축 반복 시 화질 저하실사 사진, 배경 이미지PNG무손실 압축 방식투명 배경(Alpha) 지원, 문자나 로고가 선명함사진의 경우 JPG보다 용량이 훨씬 큼로고, 아이콘, 투명도가 필요한 이미지GIF256색 제한짧은 애니메이션(움짤) 가능, 투명 배경 지원색상 표현 한계로 화질이 낮고 용량이 비효율적간단한 배너 애니메이션, 유머 짤SVG벡터(Vector) 방식아무리 확대해도 깨지지 않음, 코드로 제어 가능복잡한 사진 표현 불가, 파일이 커지면 연산 부담로고, 아이콘,..
HTML - 3 - Web bowsr 브라우저 종류: Google, Chrome, Edge, Whale, Safari 코딩, 웹 사이트 만들때: 크롬을 기준으로 해야함 실무자의 시선 크로스 부라우징의 고충: 크롬에서 잘 돌아간다고 안심 X 사파리나 파이어폭스에서 레이아웃이 깨지지 않는지 확인 해야함. 특히 모바일 환경에서의 사파리 대응은 프론트엔드 개발자의 숙명임 - IDE and Web editor IDE 뭐 쓰냐? 프론트엔드는 VS Code만 쓰기 때문에 이상한 답변할시 바보 프론트엔드라면 VS Code: 리엑트나 뷰를 다룬다면 방대한 확장 프로그램 생태계 덕분에 VS Co..
HTML - 2 이미지 넣기: 이미지 넣기: 이미지 파일 경로 설정: 이미지 표시 할 수 없을 때 나타나는 대체 텍스트, 시각 장애인을 위한 서비스 이미지 설정: 이미지 너비 설정: 이미지 높이 설정: 툴팁 메시지 Text tagText tag Text tag텍스트 태그는 단순히 글자를 화면에 보여주는 것을 넘어, 검색 엔진이나 스크린 리더에게 이 글자가 어떤 의미인지를 알려주는 아주 중요한 역할을 합니다.1. 블록 레벨 태그 (구조를 잡는 태그lshjju.tistory.com List tagList tag List tag웹 페이지에서 메뉴바, 게시글 목록, 용어 사전 등을 만들 때 반드시 사용되는 핵심 요소들입니다.1. 순서가 있는 목록 (Ordered List)항목 앞에 1, 2, 3과 같은 **순서(번호)**..
HTML - 1 태그 없이 사용하면 욕먹음 ~ : 타이틀 (h1 > h4 로 넘어가면 X, 순차적으로 사용해야함) : 기본폰트 (16px, h4이하보다 작아짐): 한줄 내리기: 폰트볼드처리: 글의 순서 ●, ([실무에서 사용 90%): 글의 순서 1., ([실무에서 사용 10%) 표 만들기: 표 만들기 시작 : 표의 제목: 표의 가로행: 행이나 열의 제목 넣을때 사용 (기본적으로 볼드체): 표의 내용 : 표의 제목을 그룹화: 표의 본문을 그룹화: 표의 합계 부분을 그룹화 rowspan: 세로행 합치기 colspan: 가로행 합치기 순서 : 일반적인 순서 : 제목, 본문, 합계 그룹화시킨 순서 : 제목, 본문(세로행 합친) 그룹화시킨 순서 Web accessibility and ta..