front-end/HTML

[수업-HTML] 03. HTML 영역/시멘틱 태그

영역 관련 태그 종류 설명 블록요소 인라인 요소 속성 집어 넣기(css) 시멘틱 태그 HTML5로 넘어오면서 div이지만 의미까지 포함된 시멘틱 태그를 사용하게 되었다. 종류 설명 웹 문서에서 머리말 영역을 나타낼 때 사용 제목, 제목 설명 등을 나타내는 요소 표함 body안에서 여러 번 사용가능 웹 문서에서 다른 웹 문서나 문서 내 다른 부분으로 이동하는 부분을 나타내고자할 때 사용 웹 문서의 광고같이 부가적인 정보를 구분하기 위해 사용 비슷한 그룹이나 문서를 묶기 위해 사용 - 웹 문서에서 주요 내용을 가진 본문을 나타낼 때 사용 - 실제로 나타내고자하는 내용을 갖고 있으므로 중요한 부분으로 인식되어 처리 - 여러개 article사용 가능 웹 문서의 저자 정보, 저작권 정보, 이용 조건 등을 나타내기..

[수업-HTML] 02. HTML (영역관련~폼태그관련)

1. 영역 관련 태그 : block형식의 공간을 수직으로 분한 : inline 형식의 공간을 수평으로 분할 style : 속성 넣기 / 주로 CSS에서 사용 (background, width, height 등 ) 2. 시멘틱 태그 이전에는 div에 id를 집어넣어 div를 구분했지만 실질적인 의미를 갖지 못했으나 HTML5로 넘어오면서 div이지만 거기에 의미까지 포함된 시맨틱 태그가 등장했다. 컴퓨터는 단순 문장이나 위치, 모양만으로는 내용을 이해하기 힘드므로 컴퓨터가 각 문장에 대한 의미를 이해할 수 있도록 요소를 명확하게 나타내기 위함이다. : 웹문서에서 머리말 영역을 나타낼 때 사용 (주로 검색어 form, 메뉴 nav가 들어간다) : 웹 문서에서 다른 웹문서나 문서 내 다른 부분으로 이동하고자 ..

[수업/HTML] 01. HTML (글자태그~시멘틱태그)

기본 구조 : 현재 문서파일이 어떤 타입인지 알려주는 것 : 머리, 문서 정보, 문서 자체에 대한 설명 (style, script,meta...) : 속성 태그를 구체화함 Insert title here : 문서에 대한 제목 작성 : 몸통, 화면에 출력해 보여줄 내용 시작태그 종료태그 글자 관련 태그 종류 설명 . . . 제목 태그 숫자가 커질수록 글자가 작아짐 자동굵게 자동줄바꿈 블록요소 구분 줄 줄바꿈 글씨를 굵게 만들어주면서 강조의 의미를 담는다. 글씨 굵게만들기 형관펜(노란색) 효과 밑줄 취소선 글자를 기울이면서 강조의 의미를 담는다. 글자 기울이기 글자 작게하기 인용문구 나타내기 : 한 블록 띄어 나오며 블록요소 인용문구 나타내기 : " " 로 감싸져나오고 인라인요소 아래 첨자 윗 첨자 블록요소..