Language/HTML10 [09] 하이퍼링크 하이퍼링크 웹문서의 가장 핵심적인 기능으로 텍스트 혹은 이미지 클릭을 통해 다른 페이지로 이동할 수 있도록 도와준다. 한 페이지 내에서 이동하는 방법도 존재. ... anchor의 약자. 하이퍼링크 태그 content부에 입력된것을 클릭했을때 페이지 이동이 발생한다. content부에는 글자, img, div(도형으로 활용),button 등이 올 수 있다. 속성 href="..." : 클릭시 이동하고자 하는 경로. 입력 안할 시 현재 페이지가 재지정 된다. 1) 파일 경로를 입력하는 방식 : 현재 작업중인 폴더이후 경로를 기재한다 2) url을 입력하는 방식 : http://까지 붙여준다. 3) 요소의 아이디를 입력하는 방식 : #아이디로 입력한다. 해당 요소의 위치로 이동한다. 속성 target=".... 2022. 12. 11. [08] 입력 ,폼 관련 / input / form 입력관련 input >사용자에게 값을 입력받을 수 있는 텍스트상자 또는 체크박스 등을 만든다.속성 type="..." ▶text(default) - 글자입력▶password - 가려진 글자입력▶submit - 제출▶reset - 속해있는 폼의 요소들을 초기화▶search - 입력값을 한번에 지우는 x버튼 제공▶url - http:// 가 있는지 내부검사. 통과해야 제출가능▶email - 문자들 사이에 @가 있는지 유효성 검사▶tel - 숫자키 입력창이 뜸(모바일에서만)▶number - 숫자값만 입력가능. 스핀박스가 표시됨. 자바로 넘어갈때는 문자열로 전송된다 - (연관 속성 min(최솟값), max(최댓값), step(증감폭), value(초깃값))▶range - 슬라이드바를 통해 숫자 지정▶dat.. 2022. 12. 11. [07] 블럭과 인라인 / div / span / iframe 블럭 - 인라인 구분하기 background-color를 입혀본다. 한줄을 차지 > 블럭 내용부만 차지 > 인라인 블럭 요소 한 줄 단위로 영역을 차지하여 줄바꿈이 자동적용된다. ex) p, pre, div, ... ... Division의 약자, 레이아웃을 나누는데 주로 쓰임. 다른 태그와 다르게 특별한 기능을 갖고 있지는 않고, 가상의 레이아웃을 설계하는데 쓰이며, 주로 CSS와 연동하여 사용. 블럭요소로 자동으로 줄바꿈이 적용되고, 줄 단위로 영역을 차지해서 영역이 사각형 박스 형태를 띔. 인라인요소 content영역에 해당하는 부분만큼만 영역을 차지한다. 영역이 옆으로 잡히기 때문에 줄바꿈을 하려면 태그를 사용해야 한다. 블럭요소와 달리 대부분 style태그에서 가로세로 조정이 되지 않는다. ma.. 2022. 12. 9. [06] 이미지 및 미디어 관련 이미지 관련 태그 속성 src ="..." : source의 약자. 삽입할 이미지 경로를 지정하는 속성. 필수기재 현재 파일이 위치한 폴더를 기준으로 경로를 입력한다. 속성 alt ="..." : 이미지 설명해주는 텍스트. 이미지가 출력이 안되면 표시됨. 스크린리더가 이미지를 읽는데 사용되기도 함. 속성 width ="..." : 가로 크기를 지정. px로 지정시 고정길이가 되고 %로 지정시 가변길이가 된다 가변길이는 상위요소의 가로길이를 100%로 뒀을때의 비율로 나타남. 속성 height="..." : 세로 크기를 지정. 이미지의 가로크기와 세로크기를 지정하면 이미지 로딩 시 이미지의 크기만큼을 비워두고 텍스트를 표기할 수 있다(지정하지 않으면 로딩 전 후로 텍스트의 위치가 밀려나는 불편 발생) 오디.. 2022. 12. 8. [05] 표 관련 / table 표웹문서에서 자료를 정리할 때 자주 사용.행과 열로 이루어져 있고 행과 열이 만나는 칸 하나하나를 "셀"이라고 함. table >...표를 생성하며 요소들을 감싸주는 태그속성 border="..." : 설정하지 않을 시 기본적으로 테두리는 0. 단위는 입력 안할시 px로 인식 caption >...테이블의 제목을 추가하는 태그, 테이블태그 content부에 기술 tr >...표의 한 행을 나타내는 태그로 content부는 th 혹은 td태그를 감싸준다. th >... td >...표의 셀을 나타내는 태그로 content부에는 셀에 들어갈 내용을 기입한다.th는 제목셀로 굵게, 가운데 정렬되어있으며 td는 일반셀을 나타낸다.속성 width="..." : 가로크기 지정속성 height=".... 2022. 12. 8. [04] 목록 관련 목록 관련 태그 목록은 그 자체로 이용하는 경우 보다는 CSS를 적용하여 메뉴바 등을 만드는데 주로 사용된다. ... 목록태그(ul, ol)안에 사용되며 불릿기호를 표시하는 역할 단독으로도 사용가능 ... 순서 없는 목록태그, content부에 작성된 내용들은 한탭 들여써진다. li태그로 만든 목록 전체를 감싸는 형태 태그 사이로 태그를 넣어 중첩으로도 사용 가능하다. 불릿기호 모양은 CSS를 통해 변경가능 ... 순서 있는 목록태그 type = "..." : 속성값으로는 1(default), a, A, i, I 등을 입력할 수 있다 abcd... i ii iii viii 등과 같이 표기됨 start = "..." : 시작값 변경 reversed : 역순으로 표시하는 속성. (이와같이 속성만 표기하는 경.. 2022. 12. 8. [03] 글자 관련 글자관련 태그 중첩해서 사용 가능하다. ... 제목을 입력할때 사용하는 태그 block타입 : 한줄의 영역을 차지하며(브라우저에서 F12 영역확인가능) 자동으로 줄바꿈이 된다 h1이 가장 큰 제목이며 h6은 여섯번째로 큰 제목이다. 문장을 줄 바꾸기(개행)할 때 사용 페이지에 가로로 밑줄을 만들어 줄 때 사용 ... 문자로 이루어진 문단 영역을 나누는 태그1 줄바꿈은 , 한개 이상의 공백은 라는 기호문구로 기술해야함 .. 문단 영역을 나누는 태그2 입력된 내용 그대로를 표현하여, 편집기 상의 tap까지도 구현된다. 글꼴이 다를 수 있다. ... ... 글자를 굵게 표시하는 태그들. b태그와 다르게 strong은 스크린리더 시 억양을 세게해서 읽어줌 ... 글자에 밑줄이 그어지는 태그 ... 글자에 취소선.. 2022. 12. 8. [02] 선언부 , 헤드부 선언부 태그!DOCTYPE html>문서의 형식이 html임을 선언하며 최 상단에 기재한다. html>...문서 전체를 감싼다.lang="..." : 페이지가 어느나라 언어로 되어있는지 표시한다(검색엔진에서 사용) 헤드부 태그 헤드부 안에 작성하는 태그문서의 각종 정보와 제목, 설명 및 자바스크립트, 스타일시트(CSS) 등을 포함한다.meta />해당 html문서의 정보를 기술하며 검색엔진에 내용을 전달한다.속성값이 많으며 종료태그가 없다.charset="..." : 문자셋의 종류를 입력한다name="generator" content="..." : 문서를 작성한 프로그램을 입력한다.name="author" content="..." : 문서의 저자를 입력한다.name="keyword" content=".... 2022. 12. 7. [01] 개발환경 설정 / Visual Studio Code / EMMET문법 개발환경 설정 html을 사용하기 위한 여러 프로그램 중, Visual Studio Code를 사용해보자 VS Code 설치 VS Code 홈페이지 접속( https://code.visualstudio.com/ )) 컴퓨터에 맞는 OS를 선택하여 다운로드 Stable Build를 선택한다 Visual Studio Code 환경 설정 Font Family를 보면, 폰트가 여러개인데 이는 시스템에 설치되지 않았을 경우를 대비한 것이다. 기본 설정된 세개 폰트는 한글이 지원되지 않아서 굴림체가 나오므로 마지막에 'Malgun Gothic'을 입력해준다. encoding 검색해서 UTF-8로 설정 확장 기능 (Extensions) 추가 설치방법 왼쪽 아이콘 중에 [Extensions]를 클릭해서 검색한 후 설치.. 2022. 12. 7. [00] 개요 : 인터넷 / 웹 / HTML5 에 대해서 웹이란?인터넷통신 시스템에서 데이터를 안전하게 보관, 전송할수 있는 시스템을 구축하고자 1960년대 발명전 세계의 컴퓨터들이 네트워크를 통해 연결되어 정보를 공유하는데 목적을 두며 프로토콜을 이용하여 통신초기에는 군사용과 민간용으로 구분되었고 민간용이 지금의 인터넷이 됨 웹인터넷의 통신망 위에서 작동하는 서비스(FTP,이메일,웹..) 중 하나로 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간1990년대 팀 버너스리가 방대한 연구 자료들을 다른 연구소와 효율적으로 공유하기 위해서 하이퍼링크를 포함하는 문서의 개념 제안하면서 등장. 월드 와이드 웹(WWW)을 개발 및 배포하였다.버너스리는 웹을 이용하려면 지켜야 할 것들을 표준화하는 웹표준단체 W3C 창설하였는데, 강제성은 없었다.높은 .. 2022. 12. 7. 이전 1 다음
