ASH_Blog 전체보기
-
html의 역사 및 html5 란?html, css/html 2017. 9. 24. 14:11
HTML5의 역사 TimBerners-Lee는 1989년에 "WorldWideWeb"를 발명했고, 1990년대에 인터넷이 꺼졌다. 1991년부터 1998년까지, HTML은 버전 1에서 버전 4로 발전했다. 2000년에는 월드 와이드 웹 컨소시엄(W2C)이 eTTML1.0을 추천했다. XHTML 구문은 엄격하며, 개발자들은 유효하고"잘 짜여진 "코드를 쓰도록 강요당했다. 2004년에 WHATWORD(WebHypertextApplicationWorkingGroup)는 느린 W/C개발을 위해 HTML의 개발을 중단하고 HTML의 개발을 위해 HTML의 개발을 중단한 상태로 형성되었다. WHATWORD는 HTML을 사용하여 이전 버전의 HTML과 호환되는 반면, 웹을 사용하는 방법과 일치하는 HTML을 개발하고..
-
디자이너를 위한 웹 성능 최적화 기법 (1)Book/디자이너를 위한 웹 성능 최적화 기법 2017. 8. 22. 10:28
책 - "디자이너를 위한 웹 성능 최적화 기법" 을 읽고 정리하는 포스트 입니다. 페이지 속도의 원리와 프론트단에서 성능 최적화를 해야하는 중요성과 최적화 방법들, 성능 최적화 관련 툴들을 소개 하고 있는데, 새로 알게 된 것들이 많았습니다. html,css 코딩을 하시는 분이라면 한번은 봐야 될 책이라고 생각합니다. 이미지 포맷 고르기 대부분의 사이트에서 페이지 용량의 대부분을 이미지가 차지합니다. 이미지 최적화는 사이트 내의 페이지 로딩 시간을 개선할 때 가장 쉬우면서도 큰 효과를 낼 수 있는 방법입니다.다음의 작업을 통해서 주요 콘텐츠 이미지 뿐만 아니라 사이트를 구성하는 이미지들도 상당 부분 개선 할 수 있습니다. 1. 각 이미지 파일의 크기와 품질 사이의 균형점 찾기2. 사이트의 이미지 요청 횟..
-
반응형 웹 레이아웃 주의사항 _2html, css/반응형 웹 2017. 8. 19. 16:44
반응형 웹 레이아웃 주의사항 2번째 포스트입니다. 2. table 태그에서 rowspan, colspan을 css로 컨트롤 할 수 없습니다. 다음 이미지와 같이 모바일 화면과 PC 화면에서의 테이블 표를 다르게 하고 싶은 경우가 있을 것입니다. 모바일 화면에서는 제목 열이 4칸 인데 PC에서는 제목열이 3칸이고 , 또 PC 에서는 내용1열B와 2열B 가 합쳐져 있습니다. 저렇게 표현을 하려면 다음과 같은 html 로 수정이 되어야 합니다. [모바일 html] [PC html] PC 화면의 html 을 확인 하게 되면 안에 있는 두번째 태그 colsapn="2"를 추가 해주었고, 갯수를 하나 지워 주었습니다.그리고 안에 있는 첫번째 안에 있는 두번째 에 rowspan="2" 를 추가 해주었고, 두번째 안에..
-
반응형 웹 레이아웃 주의사항 _1html, css/반응형 웹 2017. 8. 17. 22:40
반응형 웹 레이아웃을 구상하기 전에 다음과 같은 부분들을 알고 구상을 하면 반응형 프로젝트를 좀 더 시간을 단축 할 수 있고 좀 더 효율적인 화면이 탄생 될 것이라 생각합니다. 반응형 웹이란 쉽게 이야기하면 하나의 html 요소들을 css(media query)를 이용하여 PC, 모바일, 태블릿 화면에 알맞는 레이아웃을 표현 해 주는 것입니다. 여기서 더 간단히 요점만 말하자면 기본 하나의 뼈대로 PC일때, 모바일 일때, 태블릿 일때 옷 만 바뀌는 것입니다.(긴팔에서 반팔, 무지 t셔츠가 스프라이트 t셔츠로..이런느낌 입니다.) 뼈 들이 움직이지는 못하고 뼈를 감싸고 있는 옷만 바뀌는 것이기 때문에 레이아웃을 표현 하는데 어느 부분은 제한적인 부분들이 있습니다. 제가 정리하고 싶은 부분은 이런 제한적인 ..
-
Css 깊이있게_2 inherit(상속)에 대해서html, css/css 2017. 8. 12. 20:45
다른 분들이 포스팅을 안 한 것을 찾던 중에 상속에 대해서는 글 들이 많이 없는 것 같아서 이렇게 정리합니다. w3schools에서 font-size랑 margin을 검색하면 다음과 같이 나옵니다. font-size는 inherited가 yes 이고 margin은 inherited가 no 인데요, 이 차이에 대해서 설명 하겠습니다. 먼저 다음과 같이 코딩을 하고 crome 브라우저 요소 검사 화면을 확인 하면 다음과 같이 나오는데요. .parent_element DIV 에 font-size:24px을 주었는데요, 화면을 확인 해보니 .parent_element DIV 안에 있는 div, p, span 태그에 있는tex도 font-size 가 24px로 바뀐것을 확인 할 수 있습니다. 요소검사 창 우측에 ..
-
Css 깊이있게_1 Css 속성 Default value 정리html, css/css 2017. 7. 22. 22:42
css 속성들이 엄청 많은데요..이 중 저의 경험으로 자주 사용했던 것들만 정리 했습니다. 자주 사용 하는 것들은 외우는게 편하더라구요.필요할때 마다 w3schools 에 검색하는것도 귀찮고 ㅎㅎㅎㅎ(none, 0, normal 이 은근 햇갈립니다..--;;) 정리하면서, 제가 사용은 안했지만 새로 알게 된 것도 함께 정리했습니다. Property Default value display ?https://www.w3schools.com/cssref/pr_class_display.asp물음표라고 나와 있네요;; overflow visible position static float none z-index auto width, height auto max-width, max-height none margin, ..