------------------------------------------------------------------------------------------------------------------------------------------------------
- 데스크톱뿐만 아니라 태블릿이나 스마트폰으로 접속할 것을 고려한다면, 브라우저 화면 너비가 변하더라도 스크롤 막대 없이
한 화면안에 내용이 들어오도록 해야 합니다. 그러려면 고정그리드를 가변그리드 레이아웃으로 바꾸면 됩니다.
가변그리드에서 너비를 계산하는 방법을 다시 확번 확인해 볼까요?
(요소의 너비 / 콘텐츠를 모두 감싸는 요소의 너비) x 100
. 먼저 콘텐츠 전체를 감싸고 있는 #container의 너빗값 960px을 100%로 바꿉니다. 부모 요소(#container)의 너비를 기준으로 해서 나머지 요소의 너비를 계산합니다.
.content1은 너비가 960px이므로 100% 그대료 사용합니다.
.content2는 너비가 300px이므로 (300/960)*100 = 31.25%가 되고, 마진 역시 %로 환산하여 (10/960)*100 = 1.04167%가 됩니다.
<style>
html
{
margin:0;
}
#container
{
width:100%;
margin:0 auto;
}
.content1
{
width:100%;
...
}
.content2
{
margin:1.0417%;
width:31.25%;
}
.content3
{
margin:0.521%;
width:15.625%;
}
------------------------------------------------------------------------------------------------------------------------------------------------------
요즘처럼 스마트폰까지 고려한 반응형 웹을 제작할 때는 미디어 쿼리를 주로 사용합니다.
미디어 쿼리의 기본동작 원리는 조건에 맞게 콘텐츠의 배치를 다르게 하는 것입니다.
이때 가장 많이 사용하는 조건이 화면의 크키나 기기의 방향인데요.
이 조건을 체크할 때 사용하는 것이 바로 뷰포트(Viewport)입니다.
뷰포트는 스마트폰에서 실제 콘텐츠가 표시되는 부분을 가르키는 말입니다.
웹 문서의 글자나 이미지 같은 컨텐츠를 스마트폰 화면에서 잘 보이는 크기로 표시하려면 스마트폰 화면을 웹 문서 너비에 맞추는 것이 아니라
그 반대로 문서의 컨텐츠를 스마트폰 너비에 맞춰 표시해야 합니다.
이때 사용하는 것이 <meta> 태그 이며, 아래 소스가 가장 기본으로 사용하는 뷰포트 설정 소스입니다.
<meta name="viewport" content="width=divice-width, initial-scale=1">
- width=divice-width : 현재 기기의 px 크기에 맞추도록 브라우저에게 알려주고 웹문서를 불러와 보여 줍니다.
- initial-scale=1 : 문서를 불러와 화면에 표시할 때 화면 너비에 맞추도록 기본 배율을 1로 지정 합니다,
105p
------------------------------------------------------------------------------------------------------------------------------------------------------
픽셀 너비 서술자
화면의 너비가 1024px인 경우 sky-large.png
화면의 너비가 640px인경우 sky-medium.png
화면의 너비가 320px인경우 sky-medium.png
<img src="sky.png" srcset="sky-large.png 1024w, sky-medium.png 640w, sky-small.png 320w">
------------------------------------------------------------------------------------------------------------------------------------------------------
익스플로러 8이하에서는 HTML5와 CSS3을 지원하지 않기 때문에 html5shiv.js 와 respond.js 파일을 링크해야 합니다.
<!--[if It IE9]>
<script src="repond/repond.min.js">
<script src="js/html5shiv.min.js"></script>
<![endif]-->
132p
------------------------------------------------------------------------------------------------------------------------------------------------------
TTF(ture type Font)
OTF(open type font)
EOT(embedded open type)
SVG(scalable vector graphic)
WOFF(wev open font format) - 모던브라우저들은 웹표준형식인 WOFF도 지원
TTF 형식의 폰트 파일은 다른 형식의 파일보다 영량이 크기 때문에 대부분의 모던 브라우저에서 지원하는
WOFF 폰트를 먼저 선언하고 TTF 파일은 그 뒤에 선언합니다.
이렇게 하면 WOFF 형식을 지원하는 브라우저는 WOFF 파일을 다운로드하고 그뒤 선언된 TTF 파일은 다운로드 하지 않습니다.
@font-face
{
font-family:Blackout, Atial Black;
src : url('Blackout.woff') format('woff'), url(Blackout.ttf') format(truetype');
}
인터넷 익스폴러러 8이하 버전에서는 EOT 형식의 폰트만 지원하므로 다음과 같이 EOT 형식을 WOFF보다 먼저 선언합니다.
EOT 형식을 선언할 떄는 fotmat을 따로 지정하지 않습니다.
@font-face
{
font-family:Blackout, Atial Black;
src : local('Blackout'),
url('Blackout.eot'),
url('Blackout.woff') format('woff'), url(Blackout.ttf') format(truetype');
}
--------------------------------------------------------------------------------------------------------------------------------------------------------
absolute와 relative
relative 인 컨테이너 내부에 absolute인 객체가 있으면 절대 좌표를 계산할 때, relative 컨테이너를 기준점으로 잡게 됩니다. (없다면 전체 문서가 기준)
-----------------------------------------------------------------------------------------------------------------------------------------------------
마진(margin)은 바깥쪽 여백이고, 패딩(padding)은 안쪽 여백이죠.
거의 모든 HTML 태그들은 브라우저에서 설정된 기본 스타일 값을 가지고 있습니다.
예를 들어, <blockquote> 태그는 따로 스타일을 지정하지 않더라도 들여쓰기가 되죠.
질문하신 별표(*) 문자는 전체 선택자(Universal Selector)라고 합니다.
그러므로 * { margin:0; padding:0 }은 브라우저에서 기본으로 설정되어 있는 모든 태그의 마진과 패딩값을 없애겠다는 뜻입니다.
이것은 각 브라우저마다 HTML 태그에 기본값으로 설정된 마진과 패딩값이 미묘하게 다르기 때문에 마진과 패딩값을 0으로 초기화한 후 마진과 패딩값을 다시 적용하고자 할 때 사용합니다.
그리고 전체 선택자를 다른 선택자와 조합해서 사용하면 쉽게 특정 엘리먼트 하위에 있는 모든 엘리먼트에 스타일을 적용할 수도 있습니다.
더불어 현재의 CSS에는 특정 부분을 제외시킬 수 있는 선택자가 없지만, CSS3 에는 특정 요소에 스타일을 적용시키지 않는 :not 라는 부정 선택자(Negation Selector)가 있습니다.
예를 들어,
<html>
<head>
<title>example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style type="text/css">
body *:not(h2){
color: darkred;
}
</style>
<body>
<h1>제목1</h1>
<h2>제목2</h2>
<p>문단</p>
</body>
</html>
body *:not(h2)는 h2 태그만 제외하고 body 안의 모든 태그에 스타일을 적용하라는 의미로 브라우저에서는 아래와 같이 화면에 표시됩니다. (:not는 CSS3 속성으로 현재 파이어폭스1.5, 크롬 3, 오페라 9.5, 사파리 3.1 이상에서만 지원하며, 익스플로러에서는 사용할 수 없습니다.)
제목1
제목2
문단
-----------------------------------------------------------------------------------------------------------------------------------------------------
자바스크립트를 이용하여 브라우저의 우측에 생성되는 스크롤트랙를 없애는 소스입니다.
scroll=no 하면 되는데 무슨소리냐구요???
일반적으로 익스플로러를 실행하여 웹사이트에 접속하더라도 스크롤바가 있건 없건 그 공간을 스크롤트랙이 약 20픽셀정도 차지하고 있답니다.
그렇기 때문에 만일 800모드에 맞추는 웹사이트를 제작할때 그 최대크기를 780픽셀로 맞추는 것도 그 이유에서랍니다.
요즘엔 1024 보드가 기본이니.. 1000에 맞춰야겠죠? :)
이러한 스크롤트랙 자체를 아에 없애보도록 하겠습니다.
해당문서에 Html 소스보기를 하셔서 <head>와 </head> 태그 사이에 다음과 같이 삽입합니다.
<script language="JavaScript">
function get_IEscroll(choice) {
if (document.all) {
document.body.scroll = choice;
}
}
//-->
</script>
다음으로 onLoad="get_IEscroll('no')" 태그를 다음과 같이 <body>내에 삽입합니다.
<body onLoad="get_IEscroll('no')">
그러면 스크롤보더가 없어진 것을 확인하실 수 있습니다.
인트로페이지에 스크롤 트랙이 있으면 보기 싫잖아요....
홈페이지의 인트로 화면에 이러한 팁을 활용하면 좋겠지요?^^
[출처] 브라우저에 스크롤없애기|작성자 권혁규
-----------------------------------------------------------------------------------------------------------------------------------------------------
Position 속성이 있으면 psition의 속성이 있는 엘리먼트들이 순서대로 배치가 된다.
포지션 속성이 없다면 포지션 속성이 있는것보다 뒤에 배치가 된다는 이야기!
DIV5는 z-index 가 8로 가장 높지만 포지션 속성이 지정되지 않았으므로
z-index 속성 값의 순서를 결정하는데 영향을 미치지 못하여 가장 하위로 내려간다.
z-index의 값은 포지션 속성이 있는 것들 중에서 결정이 된다.
https://blog.naver.com/dydals56789/221458116209
-----------------------------------------------------------------------------------------------------------------------------------------------------
[text-align]
text또는 inline요소, inline-block요소에 대한 정렬
- 텍스트 또는 요소의 부모에 제공해야 됩니다.
[margin:0 auto]
block요소에 대한 정렬
-블록요소 자신에 대해 css표현
-width값을 꼭 써줘야 함!
(왜냐하면 블록요소는 기본적으로 가로가 100%이기 때문에 가운데정렬해봤자 변화가없기 때문)
--------------------------------------------------------------------------------------------------------------------------------------------------
