Semantic 브라우저 검색엔진 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 함 Semantic의 사전적 의미는 ‘의미론적인’, ‘의미가 통하는’이다. 검색 로봇 또는 스크린 리더등의 기계가 쉽게 해석하고 분석 할 수 있도록 만들어진 태그 HTML4에서는 와 id 속성을 이용하여 화면을 구성 id의 이름을 정하는 규칙이 없기때문에 문서의 구조를 이해하는데 한계. 웨어러블 장치나 스마트 기기를 이용하여 웹문서를 읽는 데 부적합 구조 해결책으로 HTML5에서는 웹문서 레이아웃을 표준화 하는 semantic tag를 이용 사이트의 제목과 로고, 검색 창 등이 있는 헤더(header), 여러 내용이 있는 본문(contents : section + articles), 본문 외 내용을 나타내는 사이드바..

공간 분할 태그 block VS inline Element - HTML Elements는 크게 block 형식 element와 inline 형식 element로 나눔 - block 형식 element는 사용하는 element가 한 줄을 모두 사용 - inline 형식 element는 contents의 크기만큼만 공간을 사용 div & span 차이점 - div와 span을 여러 개를 만들어 나란히 나열하였을 때, div는 자동 줄 바꿈이 일어나면서 세로로, span은 줄 바꿈이 일어나지 않고 가로로 나열 - 동일한 문장을 감쌌을 때, div는 박스 형태로 영역이 설정되고 그 안에 정렬됩니다. 하지만 span은 줄 단위로 영역이 설정되기 때문에 박스 형태가 아닌 텍스트가 노출되는 영역만 포함 - div의 ..

form control 요소 사용자로부터 데이터를 입력 받아 서버에서 처리하기 위한 용도로 사용 사용자의 요청에 따라 서버는 HTML form을 전달(회원가입양식, 검색 양식 등) 사용자는 HTML form에 적절한 데이터를 입력한 후 서버로 전송. 이를 submit이라 함 서버는 사용자의 요청을 분석한 후 데이터를 등록하거나, 원하는 데이터를 조회하여 결과를 다시 반환 사용자가 입력하기 위한 control 요소들은 모두 tag 하위에 위치해야 서버로 전송됨 각 control 요소마다 텍스트 입력, 버튼 클릭 등 다양한 형식으로 입력을 받는다. form control 요소 - form 사용자가 입력한 자료들을 어떤 방식으로 서버로 전달할 것인지 결정 서버에서 어떤 프로그램을 이용해 처리할 것인지 결정 f..

포맷팅 요소 포맷팅 요소에는 화면에는 동일하게 출력되지만 각 요소가 가진 의미가 다른 것이 있다. 예를 들면, 와 은 모두 텍스트를 굵게 표현하지만, 요소는 텍스트를 강조 목록형 요소 목록 tag는 하나 이상의 하위 tag를 포함 목록 tag는 각 항목을 들여쓰기로 표현 번호 또는 심볼을 이용해서 목록을 표현 table - HTML table 모델 HTML table 모델은데이터를 행(Row)과 열(Column)의 셀(Cell)에 표시 행 그룹요소인 , , 요소를 사용하여 행들을 그룹화 과 요소는 열 그룹을 위한 추가적인 구조정보를 제공 table의 셀(Cell)은 머리글()이나 데이터()를 가질 수 있음 table - 스타일 , , tag에는 table에 스타일을 적용하는 다양한 속성들이 있다. fra..

HTML HTML은 Hypertext Markup Language의 약자 1990년도 이후 웹(Web, World Wide Web)에서 사용하는 문서 양식 문서에 하이퍼텍스트, 표, 목록, 비디오 등을 포함할 수 있는 tag를 사용 문서를 Web Browser에 표현할 때 tag(element)를 사용 웹표준 이란? 모든 브라우저에서 웹서비스가 정상적으로 보여질 수 있도록 하는 것 W3C(World Wide Web Consortium) - http://www.w3.org W3C에서 HTML5를 웹 표준으로 권고하고 웹 브라우저는 이를 따름 HTML5의 특징 HTML5는 지금도 개발 중에 있고, 다양한 기능이 추가됨 멀티미디어 요소 재생 - 과거 브라우저는 멀티미디어를 재생하기 위해 별도의 외부 플러그인을..

HTML - 마크업(markup) 언어 CSS - 스타일(style) 언어 Javascript - 프로그래밍 언어 HTML 작성 Emmet 명령어가 기본적으로 내장되어 있습니다. !입력후 탭키를 눌러봅니다. 언어를 "ko"로 변경해줍니다. HTML 태그 - : 제목 6단계의 구획 제목을 나타냅니다. 구획 단계는 이 가장 높고 은 가장 낮습니다. h1 제목 h2 제목 h3 제목 h4 제목 h5 제목 h6 제목 : 문단 각각 줄 바꿈이 됨 문단의 내용입니다. Hello, World! : 줄바꿈 기본적으로 HTML은 코드 가독성 향상을 위해 줄 바꿈을 해도 줄 바꿈이 화면에 출력되지 않습니다. 줄 바꿈하기 위해서 태그를 사용 : 가로줄 콘텐츠 내용에서 주제가 바뀔 때 사용할 수 있는 수평 가로선을 정의할 때 ..