HTML

progress 태그 진행 상황을 보여주는 기능 max값 설정 가능 디자인을 변경할 수 있지만 custermizing이 귀찮아서 개발자들은 보통 이 기능이 아닌 다른 걸 사용한다고 함. html의 기본 기능이라는것 에 의의가 있다. See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen. meter 태그 progress와 다른점: min 설정 가능 min, max, high, low 설정 가능 See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen. details 태그 및 summary 태그 토글 기능 See the Pen Untitled by 박나래 (@kdzhfgez-the-selec..

HTML5 HTML 5.2가 나오면서 version이 사라졌다. 지금 우리는 5.1에서 계승된 확장 버전이 붙은 HTML을 사용 중이다. input.placeholder 속성 placeholder="값" 해당 입력 필드에 대한 설명(어떤 값을 입력해야 하는지 설명해주는 가이드) 해당 텍스트 박스에 값 입력 시 사라지며, 값을 지울 시 다시 보임! input.required 속성 required 명시하면 적용, 지우면 미 적용되는 속성 해당 입력 필드(form data)의 값을 서버로 전송 전, 필수로 입력 받게 하기 위한 장치 (모든 컨트롤들은 기본적으로 값의 입력 여부와 관계 없이 전송이 가능하기 때문에 → 필수 값을 입력 받기 위해서는 후처리를 해줘야 한다.) required 속성이 동작하는 inpu..

폼(Form) 입력 양식, 입력 컨트롤 클라이언트(사용자)로부터 입력장치(키보드, 마우스, 터치 등)을 통해서 데이터를 입력받는 역할 입력 데이터 → 서버로 전송 → 업무 활용 or 데이터베이스 저장 등.. ex) 텍스트 박스, 버튼, 체크 박스, 라디오 버튼 등.. + 의 자식 태그들.. 나이: form 태그 모든 입력 컨트롤을 감싸는 컨테이너 스스로는 랜더링 결과가 없다. (출력X) 입력한 값을 서버로 전송하는 역할(★★★★★) form 태그의 속성 form.method 데이터를 전송하는 방식 택배(일반 우편 | 등기 우편) POST ex18_server.jsp 데이터를 상자 안에 담아서 전송 데이터가 노출X → 보안O 전송하는 데이터의 최대 길이 제한 → 무제한 GET ex18_server.jsp?..

표(Table) HTML에서는 표를 어떻게 만들까? 2 X 2 테이블을 만든다고 가정해보자. 1. 먼저 큰 상자를 만들고 → 2. 큰 상자 안에 들어갈 중간 상자(가로 2줄 상자)를 만든다. → 3. 중간 상자(가로 2줄 상자)에 들어갈 작은 상자 4개를 만들어 담는다. → 큰 상자 전체 컨테이너 , table row 중간 상자 행 역할 , table data → 물건을 담으면 여기에 담김!!(like 셀) 작은 상자 셀 역할 데이터를 담는 역할 , table header 작은 상자 제목을 출력하는 셀 역할 자동으로 가운데 정렬, Bold체가 적용됨. 데이터의 의미가 명확해짐!(기존 로 헤더를 생성하는 방법에 비해) 과 은 데이터(문자열)을 가질 수 없다. → 데이터는 오로지 에 담긴다. 1 2 3 4 ..

Tag의 성질 인라인 태그 vs 블럭 태그 모든 태그는 위의 두 분류 중 하나에 속한다. (어느 쪽에 속해있는지 반드시 알아야 코딩을 할 수 있다.) 랜더링(Rendering, 태그를 화면에 출력하는 작업) 결과가 서로 다르다. 인라인 태그(Inline Tag) 자신의 내용물과 주변 태그의 내용물을 같은 라인에 출력한다. PCDATA(텍스트)는 인라인 태그에 속하는 성질을 가진다. 내용물의 크기가 태그의 영역이다.(★★★) 블럭 태그(Block Tag) 자신의 내용물과 주변 태그의 내용물을 다른 라인에 출력한다. 내용물의 크기와 상관없이 자신이 속한 라인을 독점한다. 내용물의 크기와 상관없이 태그의 너비는 항상 100%이다. 높이는 내용물의 크기와 동일하다. 문자열 링크1 링크2 링크3 문자열 문단1 문..

이미지(Image) 단독 태그 img 태그 속성 img.src source 이미지 파일 URL 필수 속성 img.alt alternate text → 대체 텍스트 이미지를 대신해서 출력할 문자열 필수 속성(이지만 안 써도 됨) img.width 선택 속성 img.height 선택 속성 이미지 나도 보내줘 스위스.나도 보내줘 스위스.나도 보내줘 스위스.나도 보내줘 스위스.나도 보내줘 스위스. Switzerland 가고싶다.Switzerland 가고싶다.Switzerland 가고싶다.Switzerland 가고싶다. HTML 속성의 2종류 1. 필수 속성(Required): 반드시 작성해야 하는 속성 2. 선택 속성(Optional): 필요하면 작성하는 속성 *글 작성에 참고한 내용: 학원 쌤의 열정적인 수업

URL(=URI) Uniform Resource Identifier Uniform Resource Locator 웹상의 자원(페이지, 이미지, 영상, 프로그램 등)을 구분하기 위한 고유 주소값 http://localhost:8090/client/html/ex12_url.html http://www.naver.com:80/ (생략하면 80번이 붙은걸로 치자! 다 80번이니까!) https://www.naver.com:443/ (https → 443번 생략) https://www.google.com:80/ URL 주소 분석해서 살펴보기 1. http://, https:// 프로토콜(=통신 규약) Hyper Text Transfer Protocol → 웹 페이지를 주고 받는 통신 규칙 (https)Securi..

a태그 :: 링크, Link anchor(닻), link a태그 속성 a.href: 클릭하면 이동할 URL주소. reference a hyperlink a.targt: 열거형. _self, _blank, _parent, _top, 프레임명 _self: 같은 창에서 링크 이동. 내부 링크용 _blank: 새 창에서 링크 이동. 외부 링크용 링크 링크입니다. 내부 링크(같은 사이트내의 이동) 10번 예제 외부 링크 네이버로 이동합니다. 이동 형태 구글로 이동합니다. 앵커(문서 내 이동시에 사용 - ) 제주도 울릉도 독도 제주도 설명입니다. 설명입니다.설명입니다.설명입니다.설명입니다.설명입니다.설명입니다.설명입니다.설명입니다.설명입니다.설명입니다.설명입니다.설명입니다.설명입니다.설명입니다.설명입니다.설명입니다..

목록, List 순서가 있는 목록 + Ordered List List Item 순서가 없는 목록 + Unordered List List Item 용어 정의 목록 + + Definition List Definition Term Definition Description 오늘의 할일 수업 복습하기 자바 정리 오라클 정리 책상 정리하기 우산 말리기 운동하기 근력 운동 유산소 운동 스트레칭 강아지 산책하기 오늘의 할일 수업 복습하기 책상 정리하기 책장 정리하기 필통 정리하기 우산 말리기 오늘의 할일 수업 복습 운동 도시락 만들기 방청소 강아지 목욕 자바 클래스 클래스는 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어..

HTML과 CSS의 역할을 요약하자면 아래와 같다. HTML 골격 구성, 데이터 표현, 서식 기능(But 서식 기능 절대 사용하지 않는다.) CSS 디자인(서식 구현) → 디자인 담당자로 생각하면 된다. 안녕하세요. 그러나 위의 표에서 서술한 것처럼 HTML이 서식 기능을 갖고 있지만 거의 사용하지 않고, CSS로 서식을 구현한다. WHY? 여기저기 섞여있으면 유지보수가 힘드니까 디자인 담당자인 CSS가 서식 구현을 담당한다고 생각하면 된다. 물리적인 모양을 지정하는 태그 볼드체입니다. 이태릭체입니다. 작은 글자 H2O MC2 밑줄을 긋습니다. 취소선을 긋습니다. 타자기 글자 큰 글자 See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen. 의미..