반응형 웹에서는 px(고정된 크기)를 사용하는 것은 좋지 않습니다. 큰 화면에서나 작은화면에서나 고정된 크기를 보여주는 px단위 대신 em이나 rem을 사용합니다. em이란? 부모 요소의 글꼴을 기준으로 글자 크기의 영향을 받습니다. (바로 한단계위인 요소) 부모 요소의 글꼴크기가 기본이면 대문자 M의 너비를 1em으로 지정한 것으로 1em = 16px입니다. 부모 요소 폰트 사이즈가 20px일 경우 2em = 40px이 됩니다. 부모 요소의 글자크기에 따라 em 수치가 달라지는 것이 단점이라고하면 단점입니다. rem이란? em의 단점 부분을 보안하기위해 만들어진 단위이며 rem에 r은 루트를 뜻하고 부모요소의 폰트크기와 상관없이 루트요소의 폰트크기에만 영향을 받습니다.
HTML4때 까지는 div태그에 id나 클래스이름으로 보여주는 화면의 부분을 나누어 사용했으나 이로인해 검색엔진은 웹페이지를 제대로 식별하지 못했습니다.그것을 보안하고자 의미적 요소의 태그들이 HTML5에 등장한 것입니다. 이런 식의 구조로 만들면 스크린 리더나 웹 소스를 보면 태그만 보아도 이부분이 어디에 위치하며 무슨 의미를 정의하고 있는지 바로 알 수 있습니다. Semantic Elements in HTML5제목, 로고(아이콘), 저자 정보 등을 포함합니다. 탐색 링크를 정의합니다. 콘텐츠를 주제별로 묶고 싶을 경우 사용 독립적으로 사용할 수 있는 내용을 정의합니다. 사이드 바 부분에 메인 내용과 상관없는 광고나 내용들을 정의합니다. 웹페이지의 가장 아래부분에 속하며 저자, 저작권, 연락처, 사이트..
HTML 폰트 또는 웹 폰트 간단히 적용해 보기
font-family 속성font-family : "글꼴1", 글꼴2, 글꼴3 형식으로 사용글꼴1번이 없을경우 글꼴2로 대체되고 글꼴 2도 없을경우 글꼴 3으로 표시합니다. 만약 글꼴 3도 없을 경우 기본 글꼴로 적용됩니다. 폰트는 사용자 시스템의 글꼴을 반영하기 때문에 사용자 컴퓨터에 폰트가 없을경우 기본 글꼴로 표시됩니다. 개발자가 자기가 정한 글꼴을 보여주고 싶을 경우에는 웹폰트를 사용하면됩니다.웹폰트는 구글 웹 폰트 나눔 고딕 기준으로https://fonts.google.com/earlyaccess 만약 특정폰트를 적용하고 싶을경우에는 ttf, woff, otf, eot, svg, svgz 폰트를 업로드하여 적용가능합니다. 스타일을 적용해 볼께요. 스타일 미적용 입니다. 적용 결과 화면입니다.
스타일 태그를 사용하여 웹문서의 디자인을 변경할 수 있습니다. 스타일의 형식선택자{ 속성:값;}p{color:black;} 형태로 사용합니다. 선택자는 한번에 여러개도 적용 가능합니다. p,h1{color:black;} 모든 선택자에 적용하고 싶을경우 *{속성:값;} 을 사용하시면 됩니다.특정 태그가 아닌 특정 클래스이름에 스타일을 적용하고 싶을 경우 .클래스이름{속성:값};특정 id 이름에 스타일을 적용하고 싶을 경우 #아이디이름{속성:값}; 스타일은 헤드태그 사이에 넣어도되고 css파일을 따로 만들어 적용하거나 태그에 직접 하는 방법들이있습니다. 스타일을 적용해 볼께요. style.css 파일 @CHARSET "UTF-8"; p{ margin: 200px; }
로그인 창과 같은 폼을 통해 JSP,PHP,ASP와 같은 서버 언어를 이용하여 데이터를 전달할 수 있다.폼태그 안에는 input, textarea, button, select, option, optgroup, fieldset, label 요소를 포함합니다. form 속성accept-charset제출에 사용할 문자를 지정합니다.action데이터를 보낼 URL위치를 지정합니다.autocomplete자동완성 사용여부를 지정합니다.enctypepost방식일경우 사용하며 서버로 전송할 때 데이터 인코딩 방법을 지정합니다.methodget과 post방식의 속성값을 가지고 있으며 get은 주소 표시줄에 입력한 내용이 그대로 드러나는 방식으로 256바이트 부터 4096바이트까지 데이터만 성버로 넘길 수 있으며, pos..
속성 id를 사용하여 이름을 정한뒤에 a태그 href에서 #id를 이용하시면 됩니다.
글에 링크를 달고 싶을 경우 a태그에대한 속성에 대해서는 아래 예제를 참고하세요.
표 구성 순서1. 속성 border을 이용하여 표의 윤곽을 잡습니다.2. 테이블의 제목을 푱의 위쪽 중앙에 표시하고 싶을 경우 사용2. , 행을 추가합니다. th태그는 tr태그와달리 셀의 중앙에 정렬이되며, 볼드체로 표시됩니다.3. 열에 들어갈 셀을 만듭니다.4. 속성 colspan, rowspan을 이용하여 행이나 열을 합칠 수 있습니다.5. 속성 aria-describedby은 스크린 리더에서 특정 요소의 상세 설명이나 기타 레이아웃들의 설명하는 용도입니다. colspan, rowspan사용시 열과행이 밀려나는 형태를 파악하세요.