728x90 반응형 Software/Front End8 [HTML] XPath란? XPath HTML 문장 속의 요소, 속성 등을 지정하는 언어이다. XPath에는 XML문장을 트리로 다루기 때문에, 요소나 속성의 위치를 지정하는 것이 가능하다. HTML 내의 요소의 경로에 손쉽게 접근할 수 있다. 절대경로 문서의 시작부터 모든 경로를 표시하는 방법 계층 문서 내에서 특정 노드를 선택하기 위해 모든 단일 노드를 지정해야한다. 항상 루트 노드에서 시작한다. /html/body/div/div/div//div[1]/div[2]/div/div/div[2]/section[1]/span[1] 경로를 하나하나 다 적기 힘들고, 경로가 매우 길어진다. 상대경로 속성 이름과 속성 값으로 손쉽게 접근할 수 있는 방법 선택한 노드에서 시작할 수 있다. //태그 이름[@속성='값'] //tagname[@a.. 2023. 1. 13. [HTML] 뷰포트(Viewport) 뷰포트(Viewport) 현재 화면에 보여지고 있는 영역을 의미한다. 기기 별로 뷰포트가 다르기 때문에, 동일한 웹 페이지라도 기기에 따라 배율 조정이 발생해서 화면의 크기가 다르게 보이는 현상이 나타난다. 컴퓨터 화면의 웹 페이지는 웹브라우저를 통해 페이지 크기를 조절하며 웹을 조회할 수 있지만, 모바일은 고정된 사이즈로 조회해야한다. 따라서 웹의 모든 콘텐츠를 디바이스에서 알맞게 표시하기 위해서는 배율 조정이 필요하다. PC용 웹페이지와 모바일 웹페이지를 따로 만드는 경우도 있다. ex) 네이버, 구글 등 뷰포트 추가 전 뷰포트 추가 후 개발자 도구(F12)에서 Toggle Device Toolbar(또는 반응현 디자인 모드)를 누르면 확인할 수 있다. 2023. 1. 12. [HTML] 메타(Meta) 태그 메타(Meta) 태그 HTML 문서에 대한 메타데이터를 정의. 메타데이터 : 데이터에 대한 데이터, 즉 '정보'를 의미 항상 head 태그 안에 들어가며, 문자 세트, 페이지 설명, 키워드, 문서 작성자, 뷰포트 등을 지정하는데 사용. 웹페이지에 대한 정보를 제공하여 검색엔진이 페이지를 검색할 때 참고할 수 있고, 검색 결과에 반영할 수 있음. 유형 및 속성 charset : 문자 세트 문자 인코딩에 대한 요약 정보 속성. 영문과 한글을 모두 사용하기 위해 utf-8 방식을 사용한다. 문자 인코딩을 하지 않으면 웹페이지가 자동으로 추정하여 지정하기 때문에 글자가 깨질 수 있다. http-equiv : 콘텐츠 속성 정보/값에 대한 HTTP 헤더 제공 HTTP : 인터넷에서 데이터를 주고 받을 수 있는 프로.. 2023. 1. 12. [HTML] 폼 태그 폼 태그 폼 : 사용자가 입력한 데이터(입력값)를 서버로 보내기 위해 사용하는 태그 서버와 클라이언트 서버 : 정보를 제공하는 호스트(Host). 클라이언트(사용자)가 요청을 하면 서버는 그에대한 정보를 제공한다. 클라이언트 → 서버 : 네이버 로그인(아이디와 비밀번호 전송) 클라이언트 ← 서버 : 아이디와 비밀번호가 맞으면 로그인시켜줌. 틀리면 틀렸다는 정보를 되돌려준다. 폼(Form) 폼은 입력 요소드를 감싸고 있으며, 입력 값을 서버로 전송할 수 있다. 폼 태그에 묶여있는 입력 요소들은 하나의 양식으로서의 역할을 한다. 폼의 입력 값을 제출하기 위해 input 태그의 submit 타입을 사용한다. 속성 action : 입력값을 전송할 서버의 url method : 클라이언트가 서버로 데이터를 전송하.. 2023. 1. 11. [HTML] 전역 속성 전역 속성 전역 속성은 모든 HTML 태그에서 공통으로 사용할 수 있는 속성을 의미한다. 콘텐츠 대표적인 전역 속성 4개 id : 요소에 고유한 이름은 부여하는 식별자 역할 속성. class : 요소를 그룹 별로 묶을 수 있는 식별자 역할 속성. style : 요소에 적용할 CSS 스타일을 선언하는 속성. title : 요소의 추가 정보를 제공하는 텍스트 속성. 사용자에게 툴팁 제공. 제목입니다. 크기가 가장 커요. 나도 제목입니다. h1에 비해 약간 작아요. 이미지 파일 테스트입니다. HTML 기초 마스터하기 공부만이 살길이다 이미지에 마우스 커서를 올리면 툴팁(진주귀걸이를한 소녀)가 표시된다. 2023. 1. 11. [HTML] 태그 기초 태그의 구분 1. 블록 요소 태그 : 자기가 속한 요소를 모두 차지 ex) ... 2. 인라인 요소 태그 : 필요한 공간만 차지 ex) ... 문단(paragraph) ... 예시 첫 번째 문단입니다. 두 번째 문단입니다. 제목 ... 제목1 제목2 제목3 제목4 제목5 제목6 수평선 제목1 제목2 제목3 제목4 제목5 제목6 줄바꿈 제목1 제목2 제목3 제목4 제목5 제목6 공백 공 백 공 백 이미지 태그 단일 태그이다. width와 height 중 하나만 사용하면 사용하지 않은 값은 자동으로 비율이 조정된다. 이미지 url 주소가 올바르지 않을 때 alt의 텍스트가 출력된다. 2023. 1. 10. 이전 1 2 다음 728x90 반응형
