검색결과 리스트
html 이야기에 해당되는 글 6건
- 2013.01.06 익스플로러에서만 이미지 엑스박스가 뜰 때
- 2012.12.18 내 홈페이지, 파비콘 적용하기
- 2012.12.09 inline-block 요소에 관한 고찰
- 2012.11.19 HTML 렌더링 순서에 따른 <script> 태그 사용 권장사항 2
- 2012.11.11 블록 요소 vs 인라인 요소 4
- 2012.11.10 HEAD> META 태그 총정리 1
글
여러 경우가 있겠지만,
익스플로러에서만 그 이미지가 렌더링 되지 않는다면..
이미지 형식이 CMYK로 저장되었는지 의심해보아야 한다.
간략하게 말하면 CMYK란 이미지의 색상 형식이 인쇄용으로 되어 있는 것인데,
익스플로러의 경우 CMYK이미지를 구동시켜 주지 못해서 이미지가 깨져버린다.
'html 이야기' 카테고리의 다른 글
| 내 홈페이지, 파비콘 적용하기 (0) | 2012.12.18 |
|---|---|
| inline-block 요소에 관한 고찰 (0) | 2012.12.09 |
| HTML 렌더링 순서에 따른 <script> 태그 사용 권장사항 (2) | 2012.11.19 |
| 블록 요소 vs 인라인 요소 (4) | 2012.11.11 |
| HEAD> META 태그 총정리 (1) | 2012.11.10 |
설정
트랙백
댓글
글
브라우저를 이용하다보면
이렇게 탭에 웹 사이트 타이틀이 나오고
왼쪽에 아이콘이 하나 나오는데 저 아이콘을 파비콘이라 부른다.
파비콘은 브라우저마다 다르지만 타이틀 앞에도 있지만
이렇게
↑인터넷 익스플로러에서의 즐겨찾기 ↑크롬에서의 북마크
즐겨찾기,북마크,책갈피 등에서도 쓰이고 있다.
이 파비콘을 우리 웹사이트에도 적용해보려고 한다.
준비물 -> 먼저 파비콘 파일이 필요한데,
파비콘은 png,jpg,gif 등의 이미지 파일이 아닌 'ico'확장자를 가진 파일이어야 한다.
(웹검색을 하다보면 png를 ico로 바꾸는 방법이 많이 나와 있으니 참고하세요.)
필자같은 경우는 '애플웹'이라는 컨셉의 페이지를 운영하고 있으므로. 애플 아이콘을 파비콘으로 쓰고 있다.
파비콘 파일을 준비했으면 각자 호스팅에 올려주시고.
<link rel="shortcut icon" href="favicon.ico" />
href 속성내에 파비콘 경로를 써주면 된다.
*파비콘은 기본적으로 루트에 favicon.ico를 쓰면 해당 페이지의
파비콘이 자동적으로 지정되지만, link 태그를 이용해 지정해 주는것이 일반적이다.
'html 이야기' 카테고리의 다른 글
| 익스플로러에서만 이미지 엑스박스가 뜰 때 (0) | 2013.01.06 |
|---|---|
| inline-block 요소에 관한 고찰 (0) | 2012.12.09 |
| HTML 렌더링 순서에 따른 <script> 태그 사용 권장사항 (2) | 2012.11.19 |
| 블록 요소 vs 인라인 요소 (4) | 2012.11.11 |
| HEAD> META 태그 총정리 (1) | 2012.11.10 |
설정
트랙백
댓글
글
비록 IE 6,7의 득세(?)로 인하여 display:inline-block을 사용 할 일은 많지 않지만,
native style이 인라인 블럭인 요소를 다루며 겪었을 몇가지 이슈를 소개하고자 한다.
(img, input 등이 있다.)
인라인 블럭 요소라 하면,
글자 그대로, 인라인 요소의 특성과 블럭 요소의 특성을 합쳐 놓은 요소라 할 수 있다.
다시말해서,
블럭 요소의 '면적 가질수 있는 것과 마진 패딩 등의 특성'과
인라인 요소의 줄바꿈 되지 않고 텍스트 처럼 취급 특성 (엄밀히 말하면 텍스트도 인라인이다. 요소가 아닐뿐..)
을 가진 요소가 인라인-블럭 요소라고 볼 수 있다.
근데 이 인라인 블럭을 다루다 보면 겪는 문제가 있다.
위 네모 박스들은 50X50의 인라인 블럭(span) 요소들이다.
분명히 마진, 패딩에 0을 주었는데 위와 같이 간격이 벌어진다.
무슨 짓을 해도 소용 없다.
우연히 부모 요소에 font-size:0을 주니 붙는다. 왜 이러한 현상이 발생할까?
십중 팔구 다음과 같이 마크업 되어 있을 것이다.
--------------------
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
-----------------
그렇다! 저 공백은 '엔터 한칸' 때문에 발생하는, inline-block은 텍스트 이기 때문에, 스페이스를 무시하지 못해서
발생하는 문제인 것이다. 스페이스 한칸은 font-size에 비례해서 나타나기 때문에,
font-size가 0이라면 스페이스도 0 처리되어 공백이 사라졌던 것이다.
여러가지 해결 방법이 있겠지만, 굳이 들여쓰기를 해야한다면 다음과 같이 코딩 하는 방법도 있다.
-------------
<span></span
><span></span
><span></span
><span></span
><span></span
><span></span>
-------------
그러나 필자라면..그냥 다 붙여서 쓰고만다.
'html 이야기' 카테고리의 다른 글
| 익스플로러에서만 이미지 엑스박스가 뜰 때 (0) | 2013.01.06 |
|---|---|
| 내 홈페이지, 파비콘 적용하기 (0) | 2012.12.18 |
| HTML 렌더링 순서에 따른 <script> 태그 사용 권장사항 (2) | 2012.11.19 |
| 블록 요소 vs 인라인 요소 (4) | 2012.11.11 |
| HEAD> META 태그 총정리 (1) | 2012.11.10 |
설정
트랙백
댓글
글
HTML 파일을 브라우저 렌더링 할때 다음과 같은 순서로 렌더링한다.
<head> 태그 -> <head> 태그 내 script, link (stylesheet)
-><body> 태그 -><body>태그 내 이미지, 문서요소
그런데.....
만약에 <head>태그 구조가 다음과 같다고 해보자>
<head>
<script src="file1.js"></script>
<script src=" file2.js"></script>
<script src=" file3.js"></script>
<script src=" file4.js"></script>
<script src=" file5.js"></script>
</head>
웹 페이지를 들어오는 사용자들은 5개의 js파일을 보기 전에는 웹페이지의 어떤 구조도,이미지도
볼 수 없다는 말이 된다.
일반적으로 사이트의 외관 구성은
css(link 태그) + body 태그로 구성하게 되는데, 저뒤에 숨어있는 자바스크립트 파일들이
맨 위에 위치하는 바람에 사이트가 어떻게 생겼는지를 보여주기도 전에 한참을 기다려야 하는것이다.
이에 대한 해결책으로
yahoo에 근무하며, 'High Perfomance Web Site' 를 저술한 Steve Souder는
'put script to bottom!'(스크립트는 바닥에 넣으세요.) 라고 말했다.
즉, </body>바로 위에 스크립트 태그를 몰아넣으면,
<head>와 <body>의 내용을 전부다 불러온 후에, 스크립트 파일을 로드하기 시작하기 때문에,
위와 같은 문제를 해결 할 수 있다.
또 한가지 방식으로는 'defer'속성인데, script에 defer 속성을 주는것이다.
<script src="file1.js" defer="defer"></script>
위와 같이 말이다. 그러면 모든 파일이 로드 된 후에 스크립트를 로드하기 시작한다.(window.onload 이벤트와 거의 동시 시작)
게다가 HTML 4.01에 포함된 표준이다! 근데 왜 </body> 위에 스크립트를 놓는 방법을 소개했는지 궁금하지 않은가?
....표준이지만.............IE에서..........만 지원된다.
인터넷 익스플로러의 장점도 찾게되고, 살다보니 별일이다.
--------------------------------------------------
‘Put Scripts at the Bottom‘ 에서 속도 차이를 직접 확인해보시라.
(여담이지만 script 태그를 불러오는 순서는 직렬 방식으로, 위의 예로 보면
file1.js ->file2.js -> file3.js ... 순으로 처리하지만, link 태그같은 경우는 병렬식으로 link 태그의
스타일 시트를 불러옴과 거의 동시에 body태그를 렌더링 하기시작하므로 크게 문제가 되지 않는다.)
'html 이야기' 카테고리의 다른 글
| 익스플로러에서만 이미지 엑스박스가 뜰 때 (0) | 2013.01.06 |
|---|---|
| 내 홈페이지, 파비콘 적용하기 (0) | 2012.12.18 |
| inline-block 요소에 관한 고찰 (0) | 2012.12.09 |
| 블록 요소 vs 인라인 요소 (4) | 2012.11.11 |
| HEAD> META 태그 총정리 (1) | 2012.11.10 |
설정
트랙백
댓글
글
항목 |
인라인 |
블록 |
인라인-블록 |
영역 |
컨텐츠 크기 만큼 |
지정 값 또는 지정 안할시 너비는 부모의 가로 크기, 세로는 컨텐츠 크기 |
지정 값 또는 지정 안할시 너비는 |
정렬 |
텍스트 정렬에 영향 받음. (텍스트의 위치를 지정하는 모든 속성) |
마진(auto), 패딩 이용 (테이블 내의 경우 verertical aline) |
텍스트 정렬에 영향 받음. (텍스트의 위치를 지정하는 모든 속성) |
박스모델 |
margin-left,right / padding, border ,float |
margin(width 값 고정일 때 auto 지정 가능), padding,border ,float |
margin(auto 불가),padding,border ,float |
중첩 요소 |
인라인만 가능 |
블록,인라인 모두 가능 |
인라인만 가능 |
특징 |
포지션이 텍스트와 유사하게 처리된다. (vertical-align 영향 받음) |
양 옆에 요소를 둘수 없다. |
포지션이 텍스트와 유사하게 처리된다. (vertical-align 영향 받음) |
대표 엘리먼트 |
span, a, strong, em |
div, h1~6, p, ul, li |
img, input |
여기까지 인라인, 블록, 인라인 블록에 대하여 살펴보았는데, 여기서 빼놓지 말아야 할 중요한 사실이 있다.
첫째. 바로 블록 요소 또는 인라인 요소 안에 어떤 요소를 중첩 시킬수 있느냐의 문제인데,
위 표에서는 블록 안에는 블록,인라인 모두 가능하고 인라인,안에는 인라인만 가능하다고 쓰여있는데 좀더 생각해볼 필요가 있
다.
1.인라인 내부에 인라인을 쓰더라도 문제가 되는 경우
의미만을 주거나 스타일만을 주는, 예컨대 strong, font, em, b, i등의 인라인 요소 안에는
다른 인라인 요소를 중첩 시켜서는 안된다.
가령, <i><a href="#">여기</a></i>
와 같은 중첩은 잘못이다. (여러의미, 스타일을 동시에 주기위한 중첩은 가능,
가령 <i><b>bold italic</b></i> 로 두효과를 주기위해 사용가능하다.)
2.블록 내부에 블록을 쓰더라도 문제가 되는 경우
다른 문제는 없지만, p,h1~6 류는 블록요소들이지만 다른 블록 요소를 중첩시킬수 없다.'
(+추가, ul,ol,dl 등 목록 밑에는 지정된 요소가 들어가야 한다.
예컨대 ul,ol 밑에는 li만을, dl 밑에는 dt,dd이다. 여담이지만 dt,dd,li 아래로는 예외없이 사용가능하다.)
3.강제로 display를 바꾼 경우의 문제
강제로 display를 바꿨더라도, 그 속성의 원래 속성을 상정한 후, 위 규칙을 따른다.
가령 span이 블록 요소가 되더라도 안에 div, p 등을 중첩해서는 안되고,
div가 인라인 요소가 되더라도 a 태그 안에 중첩될수 없다.
->validator 통과상 문제이기에 유효성 검사기는 그요소의 현재 display를 체크해주지는 않기 때문인데,
단순히 유효성 검사상 문제 떄문에 위 규칙을 지켜야 하는 것은 아니고, 조금 엄격한 브라우저에서는
레이아웃이 뒤틀리게 보여질수 있기 때문이다.
(필자 같은 경우 span안에 div를 넣고 IE8에서 레이아웃이 틀어지는 것을 보고
무작정 IE8 탓만 한적이 있다. 그것은 IE가 나쁜것이 아닌 필자가 마크업을 잘못했기 때문이다. 아, 물론 IE8이 좋은브라우저 라는것은 아니다..^^;)
둘째는 float에 관한 문제인데,(자세한 이야기는 CSS이야기 탭에서 합시다.^^)
블록 요소에 float을 주기 전에, 기본적으로 width 값을 설정해 주는것이 맞다. 그러나 지정하지 않으면
마치 인라인에서 너비를 결정할 때 컨텐츠 크기로 결정하는 것처럼 컨텐츠 크기가 가로 사이즈가 된다.
(IE6같은 경우는 너비를 주지않고 float할 경우 문제가 발생한다.
----------------------------------------------------------
이상으로 인라인 ,블록 요소에 대해 정리해 보았는데,
나름 필자가 공부하면서 헷갈렸던 것 위주로 정리해보았다. 마크업을 하는데 있어
상당히 중요한 사실이지만 빼놓고 가기 쉬운부분이니 확실하게 알아두도록 하자.
'html 이야기' 카테고리의 다른 글
| 익스플로러에서만 이미지 엑스박스가 뜰 때 (0) | 2013.01.06 |
|---|---|
| 내 홈페이지, 파비콘 적용하기 (0) | 2012.12.18 |
| inline-block 요소에 관한 고찰 (0) | 2012.12.09 |
| HTML 렌더링 순서에 따른 <script> 태그 사용 권장사항 (2) | 2012.11.19 |
| HEAD> META 태그 총정리 (1) | 2012.11.10 |
설정
트랙백
댓글
글
*문자 인코딩
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
*일정 시간이 지난 후 자동으로 페이지 새로고침
<meta http-equiv="Refresh" content="시간(초)">
*일정 시간이 지난 후 자동으로 페이지 이동
<meta http-equiv="Refresh" content="시간(초);url=주소">
*검색엔진에서 검색되는 키워드
<meta name="Keywords" content="html,tag,mata,메타,태그">
*캐쉬 막기
<meta http-equiv="Pragma" content="no-cache">
*캐쉬 만료(파기)일
<meta http-equiv="Expires" content="Mon, 08 Sep 2003 10:10:10 GMT">
** 보통 캐쉬막을때 <meta http-equiv="Expires" content="0"> 사용
페이지 들어갈때 나갈때 트랜지션 효과
<meta http-equiv="Page-Enter" content="revealtrans(duration=1,transition=12)">
<meta http-equiv="Page-Exit" content="revealtrans(duration=1,transition=12)">
페이지에 대한 정보
<meta name="Description" content="META 태그에 관한 정보">
컨텐츠 제작자
<meta name="Author" content="이름">
제작 툴
<meta name="Generator" content="Ultra Edit">
저작권 정보
<meta name="Copyright" content="2012 이나라학생">
<meta name="format-detection" content="telephone=no">
[출처] meta tag 총정리|작성자 노원오디
'html 이야기' 카테고리의 다른 글
| 익스플로러에서만 이미지 엑스박스가 뜰 때 (0) | 2013.01.06 |
|---|---|
| 내 홈페이지, 파비콘 적용하기 (0) | 2012.12.18 |
| inline-block 요소에 관한 고찰 (0) | 2012.12.09 |
| HTML 렌더링 순서에 따른 <script> 태그 사용 권장사항 (2) | 2012.11.19 |
| 블록 요소 vs 인라인 요소 (4) | 2012.11.11 |
RECENT COMMENT