Do it! HTML5 + CSS3 웹 표준의 정석
2019. 10. 26. 00:57ㆍEngineer/HTML, CSS, JavaScript
반응형
이번에도 이지스퍼블리싱의 Do it 시리즈 중 하나이다. 제목은 HTML5+CSS3 웹표준의 정석. 학교 도서관에는 7월달에 들어온 따끈따끈한 녀석. Java 를 공부하고나서 이제 뭘 공부할까 하다가 Java Script를 해야지 싶었는데, 그 전에 기초 지식으로 HTML과 CSS에 대한 공부가 필요한듯 하여 선택 했다. 600페이지 분량의 책인데 내용이 어렵지 않아 4-5일만에 본듯한다. 물론 HTML에서 나오는 태그와 속성들을 모두 외운건 아니지만 앞으로 필요할 때 찾아서 쓰다보면 자연히 숙지 될 것이므로. 이제 다른 HTML이나 CSS 책을 더 볼 필요 없이 바로 Java script 공부로 넘어가면 될듯. HTML을 프로그래밍 언어로 쳐주지 않는다는 사람이 있는데 어느정도 그 의견에 이해가 가는 부분이 있다. CSS는 말할 것도 없고.
까먹을 듯해서 다시 정리하는 내용들
- <strong>과 <b>는 눈으로 보기에는 결과의 차이가 없음. 경고나 주의 사항처럼 중요한 내용을 강조할 때는 strong을, 문서의 키워드처럼 단순히 굵게 표시할 때는 <b>
- <em>과 <i>. 문장에서 흐름상 특정 부분을 강조하고 싶을 때는 <em>을, 마음 속 생각이나, 꿈, 기술적인 용어, 다른 언어의 관용구 등에는 <i>
- <q>는 인라인 레벨 태그이므로 줄바꿈 없이 다른 내용과 함께 한줄로 표시됨. <blockquote>는 블록 레벨 태그이므로 인용 내용이 줄이 바뀌어 나타나며 다른 내용과 구별 되도록 인용 내용에 따옴표를 붙여 표시
- <caption>와 <figcaption>. caption은 표의 중앙 위쪽에 표시됨. <table>태그 아래에 사용. figcaption은 설명을 붙이고자하는 대상을 <figure>태그로 감싼후 그 안에서 사용. <figcaption>의 사용 위치에 따라 대상의 위 또는 아래에 표시됨
- <span> 태그 자체는 아무 의미 없음. 줄 바꿈 없이 일부 텍스트만 묶어 스타일 적용할때 주로 이용
- <div> 태그는 주로 콘텐츠를 묶어서 시각적 효과를 적용할 때, 즉 콘텐츠에 CSS를 적용할 때 주로 사용
- 하나의 이미지를 분할 하여 클릭 위치에 따라 서로 다른 링크가 열리도록 하는 방법은 <map>태그와 <area>태그를 이용하여 이미지 맵을 지정하면됨
- jpg, png파일은 비트맵 이미지. SVG 는 벡터 이미지. SVG 이미지는 크기를 조정해도 이미지가 깨지지 않고 깨끗하게 유지되므로 로고나 아이콘에 많이 사용. svg이미지는 어도비 일러스트레이터 프로그램에서 벡터 이미지를 만든 후 svg 파일로 저장하여 만듬
적다보니 너무 길어 질 것같다...그냥 생각 안날때는 인터넷 검색 하는걸로...
책에서 소개한 툴이나 팁
책에서 소개된 다양한 툴이나 팁들에 대한 정리를 해 놓으려고 한다.
- 이 책에서 설명에 주로사용하는 브라우저는 구글의 크롬이다.
- 편집기의 경우 온, 오프라인으로 다양한 프로그램이 소개는 되지만 이중에서 MS의 비주얼 스튜디오 코드(무료)를 추천하고 있다. 이 외에 웹기반 코드 편집기로는 Codepen, JSFiddle, Liveweave, Plunker 등이 있다고 한다.
- 무료 호스팅 서비스 : 닷홈(dothome.co.kr)
- FTP 프로그램 : FileZilla, 다ftp, CuteFTP
- W3C HTML 검사기 : http://validator.w3.org/
- W3C CSS 검사기:https://jigsaw.w3.org/css-validator/
- 웹에 사용하려는 이미지의 픽셀 크기나, 이미지내에서 위치별 픽셀 좌표를 알고 싶을 경우, 그림판을 이용하면 간단.
- 브라우저에서 특정 기능을 지원하는지 여부를 테스트 해주는 툴 기능을 체크하는 moderizr(js파일)를 다운하여 코드에 입력하면 사용자의 브라우저가 지원하는지 여부를 체크가능 : Moternizr (https://modernizr.com/)
- 웹 폰트 변환 사이트 Transfonter(https://transfonter.org/)
- 색상 추출 사이트 Color Picker(www.colorpicker.com)
- 동영상 파일 변환은 카카오인코더 http://www.cacaotools.com/cacaoencoder/
- 메일 문서는 사이트 문서보다 제약이 많기 때문에 HTML4 정도의 표준에 맞추어 작성하는 것이 좋다. 레이아웃은 표를 이용. 스타일 정보는 인라인 스타일.
- 개발자 도구창을 이용하면 디자인한 웹페이지의 padding, margin과 같은 수치를 확인 할 수 있다.
- 레이아웃을 정한뒤 그 안에 내용을 채워야 눈으로 확인이 가능하다. 이때 내용을 채워주는 것을 '로렘 입숨(Lorem Ipsum)이라 한다. http://guny.kr/stuff/klorem/에 접속하면 한글로 된 로렘 입숨을 사용할 수 있다. http://hangul.thefron.me/ 도 있음
- IE8와 같이 HTML5 태그를 지원하지 않는 브라우저에서는 HTML5 태그를 Javascript를 이용하여 직접 정의하여 사용할 수도 있지만 번거롭다. 이 과정을 간단히 만드는 방법은 HTML5 shiv를 사용하는 것이다. html5shiv.js 파일을 다운로드하여 <head>와 </head>사이에 소스를 추가하면 IE8이하 버전에서도 시맨틱 태그를 인식가능하다. (https://github.com/aFarkas/html5shiv)
- 최신 브라우저라도 어떤 브라우저는 HTML5 표준 기능이 지원되고 어떤것은 안되기도 한다. 이런 브라우저 파편화(browser fragmentation)을 줄이고, 비슷하게라도 같은 결과를 만들기 위한 벙법을 통틀어 심(shim) 또는 폴백(fallback)이라고 한다. html5shiv도 sim의 일종이다. Pollyfill은 파편화가 생기는 브라우저에 삽입하는 자바 스크립트로 브라우저를 스스로 진단해 필요한 shim을 자동으로 끼워 넣어 준다. 다양한 폴리필들이 있으므로 다음 페이지를 참고하자 (https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Pollyfills)
- 외부 CSS파일을 연결할때 <link> 태그 대신 @import 를 사용할수 있지만, CSS 파일이 많아질 수록 import보다 link태그가 안정적임
HTML, CSS, 웹 프로그래밍 할 때 도움이 되는 정보들이 있는 사이트
- HTML 표준안 명세 : http://www.w3c.org/TR/html
- 자신이 사용하는 웹 브라우저가 HTML5를 얼마나 지원하는지 알고 싶다면 http://HTML5test.com/
- W3C에서 제공하는 엔티티 코드표 http://dev.w3.org/html5/html-author/charref
- HTML5 태그들의 지원 여부를 확인할 수 있는 곳 http://caniuse.com
- CSS 표준 및 관련 정보 https://www.w3.org/Style/CSS/
- 글꼴 관련 CSS규약 https://www.w3.org/TR/css-fonts-3/
- 브라우저에 따라 CSS 속성을 지원하는지 여부가 다르다. 이로 인해 브라우저 접두사(prefix)를 붙여서 브라우저별로 구분을 해야하는데 이를 자동으로 해주는 자바 스크립트 파일이 있다. http://leaverou.github.io/prefixfree/
- 구글 웹폰트 https://fonts.google.com/
- 다양한 기기의 해상도를 알아 보려면 http://mobiphonespec.com/cellphone-screan-resolution.php/
추가 학습이 필요
코드에서 두수의 합을 도출과 같은 산술 계산 방법 (parseInt 함수를 사용하던데 이건 어디서 정의된거지?)
CSS에서 .은 class 선택자, #은 id 선택자. @은 뭐지? @import @keyframe, @media 등을 사용할때 나오던데
반응형
'Engineer > HTML, CSS, JavaScript' 카테고리의 다른 글
| 노마드 코더, 니콜라스의 Javascript 강의 (0) | 2019.11.20 |
|---|---|
| Do it! 자바스크립트 + 제이쿼리 입문 (0) | 2019.11.12 |