분류 전체보기
-
[HTML] 폼 관련 태그와 예제 - 2🌐 FrontEnd/HTML & CSS 2022. 5. 16. 20:13
폼 관련 태그들 폼과 관련된 태그들을 공부해봅시다. 3. 태그의 다양한 속성 (1) autofocus 속성 - 입력 커서 표시하기 페이지를 불러오자마자 원하는 요소에 마우스 커서가 표시되도록 하는 것입니다. 이전에는 자바스크립트를 이용했지만, HTML5 에서 autofocus 속성으로 쉽게 해결할 수 있게 되었습니다. (2) placeholder 속성 - 힌트 표시하기 요소의 필드 안에 적당한 힌트 내용을 표시하고 있다가 그 필드를 클릭하면 내용이 사라지도록 하는 것입니다. 텍스트 필드 앞에 레이블을 사용하지 않고도 어떤 내용을 입력해야 할 지 알려줄 수 있습니다. (3) readonly 속성 - 읽기 전용 필드 만들기 readonly 속성은 해당 필드를 읽기 전용으로 바꿉니다. 필드 안에 내용이 있으면..
-
[HTML] 폼 관련 태그와 예제 - 1🌐 FrontEnd/HTML & CSS 2022. 5. 15. 16:10
폼 관련 태그들 폼과 관련된 태그들을 공부해봅시다. 1. 폼 (1) 폼(form)이란? 사용자가 웹 페이지에 어떤 정보(값) 을 입력했을 때 그 정보를 서버에 전달하고자 할 때 폼을 이용합니다. 즉 사용자의 값을 서버에 전달해주는 일을 합니다. (2) 태그 - 폼 만들기 사용할 수 있는 속성 method : 폼을 전송할 방식 선택 name : 폼을 식별하기 위한 폼의 이름 action : 폼을 전송할 서버 쪽의 스크립트 파일 target : action 에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정 autocomplete 속성 : 사용자가 입력했던 내용을 기억했다가 비슷한 내용을 입력할 경우, 이전에 입력했던 내용을 힌트로 보여주는 속성입니다. 기본형 : 폼 요소 (2) 예제 (3..
-
[HTML] 이미지와 하이퍼링크 관련 태그와 예제🌐 FrontEnd/HTML & CSS 2022. 5. 9. 16:32
시작하면서 이미지와 하이퍼링크와 관련된 태그들을 예제와 함께 공부해봅시다. 이미지와 하이퍼링크 관련 태그와 예제 1. 이미지 (1) 웹에서 사용하는 이미지 형식 웹 페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서도 화질은 좋게 유지해야 합니다. 이러한 이유로 몇 가지 파일 형식만 사용할 수 있습니다. 웹에서 사용할 수 있는 이미지 파일 형식 표 GIF (Graphic Interchange Form) JPG 나 PNG 형식에 비해 파일 크기가 작지만 표시할 수 있는 색상 수가 최대 256가지뿐으로, 웹 페이지에서 아이콘이나 불릿 등 작은 이미지에 주로 사용합니다. 투명한 배경이나 움직이는 이미지를 만들 수 있습니다. JPG 또는 JPEG (Joint Photographic Experts..
-
[HTML] 텍스트 관련 태그와 예제 - 2🌐 FrontEnd/HTML & CSS 2022. 5. 8. 00:59
텍스트와 관련된 태그들 HTML 에서 텍스트와 관련된 태그들을 공부해봅시다. 3. 목록을 만드는 태그들 (1) 태그, 태그 - 순서 없는 목록 만들기 각 항목 앞에 작은 원이나 사각형 같은 불릿 (bullet) 이 붙습니다. 기본형 : 내용 내용 ... (1) 예제 윤리경영 핫라인 개선/제안 사항을 접수하는 제도 입니다. 윤리경영 핫라인은 스타벅스 임직원, 고객 및 주주 등 기업 이해관계자가 부정부실 행위를 신고하거나 윤리경영 측면에서 잘못된 관행이나 정책부문에 대한 개선/제안 사항을 접수하는 제도 입니다. 주소 : 서울특별시 중구 퇴계로 100 9F 주식회사 에스씨케이컴퍼니 윤리경영 핫라인 담당자 앞 팩스번호 : 02) 3015 - 1106 이메일 : sck_ethics@shinsegae.com (2)..
-
[HTML] 텍스트 관련 태그와 예제 - 1🌐 FrontEnd/HTML & CSS 2022. 5. 7. 00:09
텍스트와 관련된 태그들 HTML 에서 텍스트와 관련된 태그들을 공부해봅시다. 1. 텍스트를 덩어리로 묶어 주는 태그 (1) 태그 - 제목 표시하기 각 웹 콘텐츠 영역에서 제목을 표시할 때 사용하는 태그입니다. ~ 까지 여섯 단계로 나누어져 있고, 숫자가 클수록 그 크기가 작아집니다. 태그는 문서 안에서 여러 번 사용할 수 있으며, 같은 태그라도 스타일을 사용해서 서로 다른 형태로 표시할 수 있습니다. 태그를 사용한 후 글자 크기를 크게 하거나 진하게 하는 식으로 스타일을 적용해 제목 텍스트를 만들기도 하는데, 이는 웹 표준에 맞지 않습니다. 기본형 : 텍스트 (2) 태그 - 단락 만들기 텍스트 단락을 만듭니다. 태그로 표시하는 텍스트 앞 뒤에서 줄바꿈이 일어납니다. 기본형 : 내용 (3) 태그 - 줄 바..
-
[HTML] HTML 기본 문서 구조🌐 FrontEnd/HTML & CSS 2022. 5. 6. 16:59
HTML 기본 문서 구조 1. 태그 태그는 소문자로 씁니다. 예) 여는 태그와 닫는 태그를 정확히 입력합니다. (닫는 태그가 없는 태그도 있습니다) 적당히 들여씁니다. 태그는 속성과 함께 사용됩니다. 예) 인코딩 방식은 utf-8 로 합니다. 예) 2. HTML 문서 기본 구조 (1) - 문서 유형을 지정하는 선언문 웹 브라우저에게 '이제부터 처리할 문서는 HTML 문서이고, 어떤 유형을 사용했으니 그 버전에 맞는 방법으로 해석하라' 라고 명시해 주는 것입니다. 기본형 : 또는 -> 현재 문서가 HTML5 언어로 작성됨을 알려줍니다. (2) ~ - 웹 문서의 시작과 끝을 알리는 태그 실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그입니다. lang 이라는 속성을 사용해 문서에서 사용할 언어를 ..
-
웹 표준과 웹 표준의 장점🌐 FrontEnd 2022. 4. 29. 21:39
웹 표준 웹은 브라우저 종류 및 버전에 따라 기능 차이가 발생한다. 이 차이를 호환 가능하게 제시한 표준이 바로 '웹 표준' 이다. 기종 또는 플랫폼에 따라 다르게 구현되는 기술을 동일하게 구현하고, 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법을 의미한다. 웹 표준의 궁극적인 목적은 웹 사이트에 접속한 사용자가 어떤 운영체제나 브라우저를 사용하더라도 동일한 결과를 보이게 하는 것이다. 표준을 지키지 않는 페이지나 과도한 플러그인 사용은 사용자들에게 정보 접근 제약을 야기한다. 즉, 웹 표준을 지키는 것은 웹 접근성에도 영향을 주는 것이다. 웹 표준의 장점 1. 검색엔진 최적화 (SEO) 구조화된 웹 페이지는 검색 엔진에 효율적으로 노출되어 검색 결과를 최적..