본문 바로가기

전체 글

 (36)
[HTML] 폼 태그 - 사용자 정보 입력받기 폼태그 웹 브라우저에서 데이터를 입력받아 서버로 전송한다. , , , 이 있다. 1. - 다양한 정보 입력받기 태그는 type 속성을 다르게 지정해서 다양한 입력 형태로 만들 수 있다. 태그를 함께 사용하여 폼 요소에 입력받을 내용이 무엇인지 나타낸다. type 종류 text 아이디 password 비밀번호 checkbox 태그에 value 속성을 추가하면 선택한 체크 박스의 value 값을 서버로 전송할 수 있다. 좋아하는 아이스크림 회사 하겐다즈 베스킨라빈스 31 나뚜루 radio 각 태그 속성에 name 값을 똑같이 입력하면 사용자는 값을 하나만 택할 수 있다. 직업 프론트 엔드 백엔드 UI/UX file 첨부 파일 color 색상 선택 date 날짜 선택 submit / reset submit 속..
[HTML] <span> - 인라인 요소 태그 그룹화 인라인 요소 태그에는 , , , 등이 있다. 도 인라인 요소인데, 다른 인라인 요소를 그룹화한다. (+ 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지한다.) 태그와의 차이점 태그는 모든 요소를 그룹화할 수 있지만, 태그는 인라인 요소만 그룹화할 수 있다. 코드 내 티스토리 링크를 눌러 주세요 결과 인라인 요소 목록은 아래 페이지를 참고하자 https://developer.mozilla.org/ko/docs/Web/HTML/Inline_elements 인라인 요소 - HTML: Hypertext Markup Language | MDN HTML(Hypertext Markup Language)의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다. 인라..
[HTML] <a> 태그 - 웹 페이지에 링크 연결 웹 페이지로 바로 이동할 수 있도록 링크를 만들어 준다. 내 티스토리 만약 새로운 탭을 열어서 링크 이동을 하려면, target 속성을 추가로 입력해야 한다. 내 티스토리
[HTML] <strong>, <em> - 특정 단어 강조하기 특정 문장이나 단어를 강조하고 싶을 때는 , 를 사용한다. 으로 감싼 글씨는 굵은 글씨로, 으로 감싼 글씨는 기울인 글씨로 표현된다. 코드 Lorem ipsum dolor sit amet. 결과 스크린 리더기에서의 역할(웹 접근성 관련) 스크린 리더기가 웹 문서를 읽을 때, , 으로 감싼 문장이나 단어는 좀 더 강한 억양으로 읽어준다. 텍스트를 굵게 하거나 기울이는 것은 CSS에서도 가능하다. , 태그는 특정 문장을 강조해 읽는 용도로 사용한다는 점을 기억하자. + VSC에서 lorem ipsum 팁 lorem10 이런 식으로 lorem 끝에 숫자를 붙여주면, 그 수만큼의 단어로 lorem ipsum을 만들어준다.
[HTML] 시맨틱 태그(Semantic tag) 시맨틱 태그 웹 문서의 머리말, 본문, 콘텐츠, 꼬리말 영역을 구분하는 태그. 웹 브라우저가 웹 문서를 효율적으로 읽을 수 있게 해준다. 종류 설명 머리말 영역(로고, 메뉴 등) 링크 영역(링크를 포함한 메뉴 그룹화) 멀티미디어(동영상, 사진 등) 콘텐츠 그룹화 본문, 중요한 콘텐츠를 담는 영역(주 콘텐츠 영역) 본문과 연관성이 적은 외부 영역(부가 콘텐츠 영역) 특정 영역을 그룹화(연관성 있는 콘텐츠 여러개 그룹화) 기사 혹은 개별 콘텐츠 영역(특정 기사의 미리 보기, 썸네일, 제목, 본문 등) 꼬리말 영역(기업 주소, 연락처, 약관 메뉴 등)
[웹 개념] DOM과 BOM DOM은 Document Object Model, BOM은 Brower Object Model이다. Object Model이란 객체 지향 모델, 즉 무언가를 객체(Object)들로서 표현하는 형식을 일컫는다. 따라서 DOM은 웹 페이지(문서)의 내용을 객체들로 표현하는 형식을 말하며, BOM은 웹 브라우저 자체를 객체들로 표현하는 형식을 말한다. 무엇보다 중요한 둘의 공통점은 JavaScript와 같은 스크립트 언어가 웹 브라우저/페이지를 쉽게 제어 및 조작할 수 있도록 한다는 점이다. 1. DOM(DOCUMENT OBJECT MODEL, 문서 객체 모델) DOM은 객체 지향 모델로서 구조화된 문서를 표현하는 형식을 말한다. 쉽게 말해, HTML 등의 문서의 내용을 트리 구조의 객체들로 표현하는 형식을 ..
[ 웹 개념 ] URI / URL / URN 의 차이 URI (Uniform Resource Identifier) 서버 리소스 이름은 통합 자원 식별자(uniform resource identifier) 혹은 URI라고 불린다. URI의 'I'가 Identifier(식별자)이다. 인터넷에 있는 자료의 id라고 생각하면 좋다. 서로 다른 자료가 같은 이름을 가지고 있으면 안되기 때문에 URI는 유일해야한다. 그리고 이 URI에는 두 가지 형태가 있는데 이것이, URL, URN이라는 것이다. URI를 정리하자면, 다음과 같다. URI는 웹상의 자원들을 식별할 수 있는 이름표같은 역할을 한다. URI의 하위 개념으로는 URL과 URN이 있다. 여기서 자원(Resource)이란, 웹상에서 우리가 보는 이미지, 이 블로그의 게시글, 기타 웹 상에 접근할 수 있는 모..
[웹 개념] HTTPS와 HTTP의 차이점 1. HTTPS 등장 배경 인터넷의 등장과 함께 프라이버시 문제가 생겨났다. 인터넷을 기반으로 개인 맞춤형 서비스를 진행하다보니, 로그인을 통해 사이트에 고유한 개인 정보를 저장하게 되었고, 전자상거래를 통해 은행과 계좌와 관련된 비밀정보도 오가게 되었다. 그러다 보니 중요한 개인정보가 유출되는 경우가 생기기 시작한다. HTTPS는 HTTP가 전송하는 데이터가 암호화되지 않은 부분을 보완한 프로토콜이다. TLS 계층을 거치는 방식으로 HTTP를 운영하여 HTTP의 전송 메시지 바디(전송되는 데이터가 있는 부분)를 암호화시키는 것이다. 2. HTTP와 HTTPS의 기본 개념과 차이점 HTTP는 클라이언트-서버 구조에 사용되는 프로토콜이다. HTTP는 하이퍼 텍스트 전송 프로토콜의(Hypertext Tran..

티스토리툴바