All about WEB/All about HTML

 (20)
1. HTML 문서 둘러보기 ① HTML(Hyper Text Markup Language)은 웹 페이지를 만들기 위한 대표적인 마크업 언어로 브라우저로 하여금 웹페이지의 구조를 알 수 있게 해준다. ㉠ 마크업 언어는 태그를 이용하여 문서나 데이터의 구조를 구성하는 언어이다. ⓐ 태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었다. ⓑ 현재는 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다. ㉡ 브라우저는 웹페이지를 이용하기 위해 사용하는 프로그램으로 Internet Explore, Chrome, Opera, Safari 등이 있다. ② HTML은 요소(Element)들의 나열들로 이루어진다. ㉠ 요소는 아래와 같은 형태를 띈다. ㉡ 요소의 앞 부분은 여는 태그(Start Tag)로 이루어지..
20. HTML div와 span 요소 ① div, span 요소는 아무런 의미를 가지고 있지 않다. ㉠ div, span 요소는 필요에 따라 그룹을 지정하거나, CSS 속성을 부여하기 위해 사용한다. ② div와 span 요소의 차이점은 div는 블럭 요소이며, span은 인라인 요소라는 것이다. ㉠ 둘 다 자기자신을 중첩할 수 있다. ㉡ div는 주로 레이아웃을 만들기 위해 사용한다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스
19. HTML ID ① HTML id 속성은 HTML 요소의 유일한 id를 지정하는데 사용한다. ㉠ 하나의 HTML 문서에 같은 id를 가진 요소가 한 개보다 많이 존재할 수 없다. ㉡ id 속성은 특정 스타일 시트의 스타일을 가리키기도 한다. ㉢ 또한 자바스크립트를 이용해 id로 요소를 접근, 조작할 수 있게 한다. ⓐ 클래스와 아이디로 쓸 수 있는 이름에는 규칙이 있다. ★ 첫 글자는 알파벳으로 시작해야 한다. ★ 두 번째부터는 알파벳과 숫자 그리고 하이픈(-) 또는 언더바(_)가 사용될 수 이다. ★ 대소문자를 구분한다. ★ 띄어쓰기를 사용할 시 구분되는 클래스로 인식하기 때문에 한 개의 클래스의 이름일 경우 하이픈이나 언더바 등을 이용해 띄어쓰기를 대체해줘야한다. ② id는 해쉬태그(Hash tag, #)를 사용하고..
18. HTML 클래스(Class) ① class 속성은 스타일 시트에서 클래스 이름을 가리키기 위해서 사용한다. ㉠ 또한 자바스크립트가 구체적인 클래스 이름으로 요소를 제어하고 접근할 수 있게 해준다. ㉡ class 이름을 지정하면 이름을 통해 같은 이름을 가진 여러 개의 요소의 스타일을 제어할 수 있다. ⓐ 클래스와 아이디로 쓸 수 있는 이름에는 규칙이 있다. ★ 첫 글자는 알파벳으로 시작해야 한다. ★ 두 번째부터는 알파벳과 숫자 그리고 하이픈(-) 또는 언더바(_)가 사용될 수 이다. ★ 대소문자를 구분한다. ★ 띄어쓰기를 사용할 시 구분되는 클래스로 인식하기 때문에 한 개의 클래스의 이름일 경우 하이픈이나 언더바 등을 이용해 띄어쓰기를 대체해줘야한다. ㉢ 클래스를 만들기 위해서 마침표를 작성해고 그 다음 클래스의 이름을 작성한다...
17. HTML 테이블(Tables) ① HTML에서 테이블(Tables)는 데이터를 행과 열로 배열시켜 표로 만들어준다. ㉠ 태그로 HTML에서 사용되는 표를 생성할 수 있다. ㉡ 요소를 구성하는 태그는 태그, 태그, 태그가 있다. ⓐ 태그는 table row를 의미하며, 테이블에서 열을 구분해준다. ⓑ 태그는 표 헤더 셀(table header cell)을 의미하며, 열의 제목을 나타낸다. 또한, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 된다. ⓒ 태그는 표 데이터 셀(table data cell)을 의미하며, 테이블의 열을 각각의 셀로 나누어 준다. ⓓ 태그는 필수 요소는 아니지만, 사용하는 것이 권장되는 태그이다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 ..
17. HTML 리스트(Lists) ① 태그는 순서없는 리스트(unordered list)를 작성할 때 사용한다. ㉠ 각각의 리스트 항목은 태그를 사용해 작성한다. ㉡ 리스트 항목들의 앞은 작은 원이 글머리 기호로 표기된다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 ㉢ 글머리 기호는 CSS의 list-style-type을 이용해 변경할 수 있다. ⓐ 값으로 disc를 사용하면 기본값인 작은 원(bullet)이 글머리 기호로 사용된다. ⓑ 값으로 circle을 사용하면 원이 글머리 기호로 사용된다. ⓒ 값으로 square를 사용하면 사각형이 글머리 기호로 사용된다. ⓓ 값으로 none을 사용하면 글머리 기호가 사용되지 않는다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스..
16. HTML 이미지(Images) ① HTML에서는 태그를 이용하여 웹페이지에 이미지를 끼워 넣기위해 사용할 수 있다. ㉠ 태그는 종료태그가 없는 빈 태그이다. ㉡ 태그는 src와 alt라는 속성을 사용한다. ⓐ src 속성은 이미지의 경로를 나타낸다. ⓑ alt 속성은 이미지를 대신할 대체 텍스트를 나타낸다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 ② src 속성은 이미지의 상대 경로 또는 절대 경로를 요구한다. ㉠ 이미지가 하위 폴더 혹은 상위 폴더에 있는 경우 상대 경로를 이용하면 편리하다. ㉡ 이미지가 다른 서버나 웹사이트에 있는 경우 절대 경로를 이용하면 편리하다. ③ alt 속성은 웹페이지 사용자가 어떤 이유로(느린 인터넷, 이미지 경로 오류 등) 이미지를 로딩할 수 없으면, alt 속성..
15. HTML Links ① 마크업 언어는 웹 페이지의 구조를 설명한다, ② 하이퍼텍스트(HyperText)는 단일 페이지에서 벗어나 다른 페이지들과 연결할 수 있게 해준다. ③ URL(Unifor Resource Locator) 주소란 네트워크 상에서 문서가 어디에 있는 지를 알려주기 위한 하나의 약속이다. ㉠ 절대 경로는 누구나 알 수있는 절대적인 위치를 기준으로한 그곳의 위치이다. ㉡ 상대 경로는 "https://www" 부분이 존재하지 않으며 현재 위치한 곳을 기준으로 한 그곳의 상대적인 위치이다. ④ HTML 링크는 하이퍼링크(Hyperlinks)이다. ㉠ 링크를 누르면 다른 문서로 이동할 수 있다. ㉡ 링크 위에 마우스를 오르면 마우스의 포인터는 손바닥 모양으로 바뀐다. ⑤ 태그는 하이퍼링크를 정의한다. ㉠ href ..

티스토리툴바