💻 <!-- dev -->
[HTML] 6. 입력 양식 및 폼 관련 태그
더보기 HTML의 입력 양식 및 폼 관련 태그에 대해 알아보자 input 관련 태그 사용자에게 값을 입력받을 수 있는 텍스트 상자 또는 체크박스 등을 만들 수 있음 ✔️ 아이디: 비밀번호: 성별: 남 여 회원가입 입력 양식의 틀을 의미 form 태그 내의 submit 버튼을 클릭 시 해당 form 내에 작성된 사용자가 입력한 값들을 서버로 넘기면서 요청하는 역할을 수행 ✔️ 👉🏻 action 속성: 해당 form 내에 사용자가 입력한 값들을 전달할 서버의 경로 (어디로 보낼 건지) 👉🏻 method 속성: 요청 전송 방식을 지정하는 속성 (get / post 택1로 값을 넘김) > get 방식: 요청 시 사용자가 입력한 값들이 url에 노출되는 방식 > post 방식: 요청 시 사용자가 입력한 값들이 u..
[HTML] 5. 이미지 및 멀티미디어 관련 태그
더보기 HTML의 이미지 및 멀티미디어 관련 태그를 알아보자 *해당 알집 파일을 html-workspace에 압축 푼 후 실행할 것 이미지 관련 태그(정리 ver.) ✔️ src = source의 약자 img src= 경로는 필수지만 나머지는 선택사항임 👉🏻 alt="이미지설명문구" - 사진의 경로가 잘못되거나 이미지를 제대로 표현할 수 없을 때 대체 텍스트의 용도 - 시각 장애인들을 위한 스크린리더(화면 낭독기)에서 이미지를 읽어 주는 설명 문구 : 접근성을 높여 주는 용도 👉🏻 width 속성, height 속성 - 이미지의 가로, 세로길이를 조정 가능한 속성 px: 고정길이(화면의 사이즈가 변해도 이미지의 사이즈는 변하지 않음) % : 가변길이(화면의 사이즈가 변하면 이미지의 사이즈도 변함) 이미지..
[HTML] 4. 표 관련 태그
더보기 HTML의 표 관련 태그를 알아보자 표 관련 태그(정리 ver.) 표: 문서에서 다량의 데이터를 정리해서 표현하고자 할 때 사용 행과 열로 이루어져 있음 표를 구성하는 태그로는 , , , 👉🏻 : 기본적으로 표를 생성해 주는 태그 테이블태그 내부에 행과 열을 표현함 👉🏻 : 표의 한 행을 나타내는 태그 (가로줄 한 줄) 👉🏻 : 표의 한 칸을 나타내는 태그(주로 컬럼명을 작성할 때 씀) => 제목 칸을 나타냄 👉🏻 : 표의 한 칸을 나타내는 태그(주로 컬럼값을 작성할 때 씀) => 일반 칸을 나타냄 👉🏻 현재 표 테두리의 기본값이 0이기 때문에 previewer에는 보이지 않는 것임 ✔️ 테이블의 구조 thead: 이 테이블의 머리부를 의미하게 됨, 테이블당 1개만 존재 가능 tbody: 이 테이..
[HTML] 3. 목록 관련 태그
더보기 HTML의 목록 관련 태그를 알아보자 목록 관련 태그(정리 ver.) li: list의 약자로 자동 줄바꿈 됨 ul: 순서 없이 동그라미로 표시되며 들여쓰기 됨 👉🏻 보통 ul의 자식으로 li가 오지만 그 li의 자식으로 다시 ul가 올 수 있음 👉🏻 즉, 목록 안에 또 목록이 올 수 있음(제한이 없음) ol: 순서가 있는 목록을 나타내는 태그 불릿(bullet) 기호: ul의 동그라미, ol의 순서(숫자, 문자,...) 등을 말함 ✔️ 순서가 있는 목록 태그는 기본 숫자 1부터 시작하지만 하기 태그로 변경 가능함 👉🏻 목록 표시값 바꾸기: 1, A, a, i, I 가능 👉🏻 시작값 바꾸기: 👉🏻 역순으로 표기: HTML CSS JavaScript jQuery ✔️ 설명과 관련된 목록을 나타내는 ..
[HTML] 2. 글자 관련 태그
더보기 HTML의 글자 관련 태그를 알아보자 프리뷰어(Previewer) 단축키 : ctrl + q + (1초 후에) s (맥북 동일) HTML의 주석 단축키: 안녕하세요 *^ㅁ^* 반갑습니다 ^0^~!! 안녕히 가세요 ㅠ3ㅠ... 이거는 h1 태그입니다. 요거는 h2 태그입니다. 이게 바로 h3 태그다. I am a h4 tag. thank you. wo de mingzi 태그 h5. zaizien. 쪼꼬미 h6 태그 거의 안 보임 ;; h7 태그가 있나?? 문단을 나누는 태그 문단 영역을 나누는 태그로는 p 태그와 pre 태그가 있다 단, p 태그는 줄바꿈 입력을 별도의 태그로 지정해야 한다. 그리고 공백은 한 개의 공백만을 표시하기 때문에 기호 문구를 작성해야 한다. pre 태그는 여러 공백이 인식..
[HTML] 1. 개발 환경 구축
더보기 HTML을 사용하기 위해 개발 환경을 구축해 보자 1-1. Visual Studio Code 다운로드 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 1-2. 기본 경로는 건드리지 않음 (..
[HTML] 0. HTML5(HTML의 개요)
더보기 Front-end의 종류를 알아보고 가장 기초 뼈대가 되는 HTML의 개요에 대해 공부해 보자 프론트앤드(Front-end) HTML 👉🏻 뼈대 CSS 👉🏻 꾸미기 JavaScript 👉🏻 만들어진 화면에 동적인 요소 추가 jQuery 👉🏻 JavaScript의 문법 간략화 API library 작업 환경 구성하기 HTML5 인터넷: 전 세계의 컴퓨터들이 네트워크를 통해 연결되어 정보를 공유하는데 목적을 두며 프로토콜을 이용하여 통신 👉🏻 초기에는 군사용, 민간용으로 구분되었고 민간용이 지금의 인터넷이 됨 👉🏻 프로토콜은 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계 웹: 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간 👉🏻 인터넷의 통신망 위..
[JDBC/중요] Properties 객체 적용하여 공통 코드 빼놓기
더보기 파일 입출력에 특화된 Properties를 이용하여 환경설정과 관련된 내용을 따로 빼서 만들어 보자 *내가 필요한 정보들을 외부 파일로 빼내는 작업을 추가할 예정 👉🏻 이 작업을 통해 코드의 오타를 줄일 수 있고(= 오류 확률 낮춤), 어디서 오류가 발생했는지 더욱 쉽게 확인 가능함 *미리 설정해 놓을 작업 Template에서 진행했던 내용에서 환경설정과 관련된 내용을 따로 빼는 수정을 할 것이기 때문에 03_JDBC_Template_SERVICE 프로젝트 복사 후 04_JDBC_Properties로 copy하기 Properties 복습 Properties: Map 계열의 컬렉션 (key + value 세트로 담는 게 특징) 주로 외부 설정 파일 읽어오기 또는 파일 형태로 출력하고자 할 때 사용 ..