HTML
1.HTML 서론
우리가 pdf 문서를 보고 싶다면? -> pdf 뷰어doc, doxc 문서를 보고 싶다면? -> Ms word이렇듯, HTML은 '웹 브라우저'를 통해 열 수 있다!Q. 웹 브라우저가 무엇일까?=> 크롬, 엣지, 익스플로러, 사파리...etc 'HTML'은 'Hyp
2.HTML 문법 (1)
HTML 서론 게시물에서 언급했듯이,웹 페이지를 구성하고 있는 요소 하나하나가 HTML이며,'tag(태그)'라는 것을 사용한다.어떤 요소인지 명시하는 역할을 함.ex) 태그 종류 중 하나인 'p'태그는 본문과 관련됨.이렇듯 태그만의 역할이 있다는 것.위 사진처럼 'ta
3.HTML 문법 (2)
'DOCTYPE html'은document(문서)의 타입이 'HTML'이라고 명시하는 것!\*tag를 공부할 때는 mdn 사이트를 활용해 보기https://developer.mozilla.org/ko/ HTML 태그는 모든 문서에 하나만 존재해야 함.최상위
4.텍스트 요소 (1) - h, p, br, hr
개발 환경 설치나는 'Visual Studio Code'를 통해 실습하고 있다.https://code.visualstudio.com/'h'는 'heading'의 약자로, h1이 가장 높은 레벨,h6가 가장 낮은 레벨임.h1~h6 레벨에 따른 글자 크기숫자가 커
5.텍스트 요소 (2) - blockquote, q, pre, figure, abbr
이전 게시물에 이어HTML의 텍스트 요소에 대해 알아보겠음.이 두 태그는 모두 '인용'을 목적으로 사용하는 태그들이다.blockquote와 p의 차이점blockquote 태그는 사용 시 들여쓰기가 되면서 여백이 생김.\++ 텍스트가 긴 인용문에 주로 사용!'q'태그는
6.텍스트 요소 (3) - 포매팅 : b, strong, i, em
\-> 다른 태그들에 비해 텍스트에 특별한 의미를 부여하는 태그b와 strong 태그는 글자를 굵게 만들어줌으로써 결과는 동일함.b태그 보다는 strong 태그의 사용을 권장함. i와 em 태그는 글자를 기울임꼴로 표시함.em 태그는 강조를 뜻하는'emphasis'의
7.텍스트 요소 (4)- 포매팅 : mark, sub, sup, del, ins
지난 게시물에 이어포매팅 태그에 대해 알아보겠음형광줄을 그어주는 mark 태그.맥락에서 관련이 깊거나 중요해서 표시해야 할 부분에 사용.\++ 스크린리더가 읽지 못함(당연)두 태그의 차이점. del 태그는 누가 봐도 삭제된 듯한 표현ins 태그는 추가된 내용 밑줄로
8.텍스트 요소 (5) - a, Entity
드디어 HTML 텍스트 요소의 마지막,a 태그와 'entity'.a 태그는 닻, 'anchor'의 줄임말이다.(닻을 내려서 이동할 수 있게끔)하이퍼링크를 만드는 태그이며 사용 빈도 높음.사용법은,'href' 속성에 도착 링크(주소)를 넣은 후, a 태그의 내용에 문구를
9.구조를 나타내는 요소 - div, span, semantic tag
https://developer.mozilla.org/ko/tag를 학습할 때는 mdn 문서를 참고하는 것이 도움됨!예제도 나와있어서 이해하기 좋음.div와 span 태그의 경우, 사실 아무 의미가 없다.그냥 컨테이너 역할을 할 뿐임.\+CSS로 디자인을 입혀
10.목록 요소 - ul, ol, li, dl, dt, dd
예를 들어 요리 레시피와 같이순서가 있는 목록을 구현하고 싶다면,'ordered list'의 약자인 <ol> 태그를 쓰면 된다.주의사항ol, ul 태그는 반드시 'li'라는 단일 아이템을 필요로 한다!li = list item.순서가 있는 목록, olol 태그를
11.표 요소 - table, tr, th, td,caption
↑ table 사용 예시table 태그를 써서표를 만들겠다고 명시를 한 뒤,'tr'(table row) 태그를 작성.그 내부에 th(table head)와 td(table data)를 작성해준다.th는 행이나 열을 대표하는 통명칭으로 굵은 글씨로 표현된다.td는 테이블
12.임베디드 요소 - img, video, audio
이미지 삽입 방식절대경로인 경우, 이미지의 주소를 복사해서 'src'속성에 넣으면 됨src 속성은 필수임상대경로인 경우, \-> <img src ="./img/son/jpg">img 속성alt : 'alternative text'의 줄임말. 사진이 로딩되지 않았을
13.폼 관련 요소 - form
<form> '폼'은 사용자가 정보를 입력할 수 있도록 해줌. form 속성 action : 다른 페이지(최종 목적지)의 서버 주소를 넣음. 백엔드 개발자가 제공하는 주소 첨부. method : --> get : 주소창에 드러남 : get method
14.메타데이터 요소
'메타데이터' 가장 단순한 정의는 '데이터를 설명하는 데이터'. 즉, HTML 문서에 대해 설명하며 <head>에 포함된다. 부가적인 정보를 추가하기 위해 데이터 뒤에 함께 따라가는 정보! 문서 제목 요소 <title> <title&g
15.전역 속성
전역 속성은 어떤 tag에도 모두 사용 가능한 속성이다. 메서드를 통해 요소에 접근할 수 있는 방법.요소의 의미와 목적을 설명하는 명칭을 사용클래스마다 공백으로 구분, 대소문자를 구분X.세 번째 코드에서는, 두 가지의 클래스가 명시되어 있음.'hi'클래스와 'hello