| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- word2vec
- 머신러닝
- 수동설치
- image
- 밑바닥부터시작하는딥러닝2
- 가비아
- AndroidStudio를활용한안드로이드프로그래밍
- 밑바닥부터시작하는딥러닝
- 생활코딩
- 한빛미디어
- CBOW
- Apache
- Crawling
- 비지도학습
- 예제중심HTML&자바스크립트&CSS
- jupyter
- 크롤링
- MySQL
- 컴파일설치
- attention
- aws
- deeplearning
- 셀레니움
- 딥러닝
- 프로그램새내기를위한자바언어프로그래밍
- 논문리뷰
- 소스설치
- 한빛아카데미
- Selenium
- Lamp
- Today
- Total
안녕, 세상!
2. CSS 속성 본문
(1) 스타일시트의 특성
① 스타일시트의 우선순위
하나의 웹페이지 내의 태그에서 여러 가지 스타일 시트가 동시에 적용되었을 때 스타일 시트의 우선순위 4가지 규칙이 있습니다.
(1) 선언문에 "!important" 를 붙여주면 적용 위치에 관계없이 항상 우선 적용됩니다.
(2) 하나의 웹페이지에 다양한 스타일시트 형식 중에서 2가지 이상의 형식이 정의되어 있고 정의된 스타일시트 형식들이 <body> 태그 내에서 동시에 2개 이상이 적용될 때 <body> 태그에 가장 가깝게 정의되어 있는 스타일시트가 우선적으로 적용됩니다.
(3) 엠베디드 스타일시트 형식 4가지가 동시에 지정될 때 다음과 같은 우선순위를 갖습니다.
| 순위 | 스타일시트 |
| 1 | ID 형식 |
| 2 | Class 형식 |
| 3 | 문장 선택자 형식 |
| 4 | 기본 형식(태그 선택자) |
(4) 해당 요소에 해당하는 선언문이 없는 경우에는 상속된 속성 값이 적용됩니다.
만약 상속된 값도 없는 경우에는 웹브라우저가 가지고 있는 기본 값이 적용됩니다.
② 스타일시트의 상속성
HTML에서 하나의 태그 내에 다른 태그를 포함시킬 수 있습니다.
이때 다른 태그를 포함하고 있는 태그를 부모태그(Parent Tag)라 하고, 포함되어 있는 태그를 자식(Child Tag)라고 합니다.
부모 태그와 자식 태그 내부에 스타일이 적용되어 있을 때 자식 태그는 부모 태그의 스타일을 그대로 이어받게 됩니다.
자식 태그에 이미 적용된 스타일시트 속성이 따로 있으면 상속받지 않고 따로 적용됩니다.
다음은 예제입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<HTML>
<HEAD><title>sample</title>
<meta charset="utf-8">
<style>
p {font-size:10pt; color:red;} /*1번*/
h2 {font-size:15pt; color:blue; text-decoration:underline;} /*2번*/
.c1 {font-size:12pt; color:green;} /*3번*/
#c2 {font-size:18pt; color:orange;} /*4번*/
</style>
</head>
<body sytle="background:lightred">
<p> 1번스타일 보다 <h2>2번 스타일이</h2> 우선 적용됩니다.</p>
<p> 1번스타일은 <i>i태그에</i> 상속됩니다.</p>
<p class="c1" id="c2">이 경우 4번 스타일이 적용됩니다. </p>
</body>
</HTML>
|
cs |
결과에서 '우선 적용됩니다'라는 문장은 5번째 줄의 스타일시트가 적용이 되지 않은 것을 확인할 수 있습니다.
(2) 스타일시트의 속성 (Property)
① font 속성
(1) font-family
요소 내에서 사용할 글꼴을 설정하는 속성입니다.
글꼴은 웹페이지를 보는 사용자의 시스템에 따라 지정되며, CSS에서 앞쪽에 지정한 순서에 따라 사용자의 시스템에 설치된 글꼴을 사용하게 됩니다.
사용자의 시스템에 설치되지 않을 글꼴을 대비해서, 다양한 글꼴 이름을 순서대로 선언합니다.
보통 , (컴마)를 구분자로 여러 개의 글꼴들을 선언하여 첫 번째 지정한 글꼴 사용자가 시스템에 설치되어 있지 않으면 두 번째 글꼴을 출력합니다.
만약 지정한 글꼴이 모두 설치되어 있지 않으면 브라우저에서 지정한 기본 글꼴이 적용됩니다.
브라우저의 기본 글꼴은 5가지가 있습니다.
serif : 명조 계열
sans-serif : 고딕 계열
cursive : 필기체
fantasy : 장식체
monospace : 등폭 글꼴
형식은 다음과 같습니다.
s { font-family: "굴림", gulim, serif; } .... /* s는 선택자 */
(2) font-size
요소 내에서 사용할 글꼴의 크기를 설정하는 속성입니다.
초기값은 medium이며, 7단계 (xx-small, x-small, small, medium, large, x-large, xx-large)의 키워드 또는 절대 단위, 상대 단위와 같은 단위 값, 그리고 상위 요소에 대한 % 값 등을 사용할 수 있습니다.
각 단계별로, 약 1.2배씩 확대되며, 실제 표시되는 크기는 사용자 컴퓨터의 성능과 브라우저와 글꼴에 따라 달라질 수 있습니다.
상대 키워드(smaller, larger)는 상위 요소의 글꼴 크기에 대하여 각각 1단계 작은 글자, 큰 글자를 지정하는 키워드입니다.
상대 단위(px, em, ex, %)는 실수 값+단위 형태로 표현됩니다.
px(픽셀) : 픽셀은 같은 해상도의 화면에서 화면의 DPI(해상도) 값에 따라 상대적인 크기로 보입니다.
em(전각) : 상위 요소로부터 상속된 글꼴의 크기를 1로 간주합니다. 상위 요소가 없을 경우에는 기본 사이즈(medium)를 1로 판단합니다.
ex : 글꼴의 소문자 x의 높이를 1로 간주하고 계산되는 단위입니다. em과 사용방법이 같습니다.
%(퍼센트) : 상위 요소의 글꼴 크기에 따른 퍼센트 값입니다.
절대 단위 (pt, pc, cm, mn, in)는 모니터를 통해 보이는 실제 크기가 정해져 있지만 화면의 해상도에 따라서 달라질 수 있습니다.
fontsize의 형식은 다음과 같습니다.
s {font-size: .... } ....
(3) font-style
요소의 글꼴 스타일을 지정하기 위한 속성으로 보통체, 이탤릭체, 사체의 값을 지정할 수 있습니다.
normal : 일반적인 형태를 나타냄
italic : 이탤릭체 글꼴을 나타냄. 사용 불가능할 때 사체의 글꼴을 나타냄
oblique : 사체의 글꼴을 나타냄. 사용 불가능 할 때 이탤릭체 글꼴을 지정
형식은 다음과 같습니다.
s { font-style : normal; 또는 italic; 또는 oblique; }
(4) font-weight
이 속성은 문장의 글꼴 자체를 굵게 또는 얇게 지정합니다.
대부분의 폰트는 normal과 bold 두 가지의 종류를 선언하고 보통 100~500을 normal로 600~900을 bold로 출력됩니다.
100~900 : 100~900까지 100의 배수로 '100'이 가장 얇고 '900'이 가장 진합니다.
lighter : 더욱 얇게 나타냅니다.
normal : 보통을 의미하며 '400' 정도 됩니다.
bold : 진하게 나타나며, '700'과 같습니다.
bolder : 더욱 진하게 나타냅니다
형식
s { font-weight:700; }
(5) font-variant
이 속성은 문장의 알파벳 소문자를 작은 모양의 대문자로 나타냅니다.
normal : 기본적인 형태로 나타냅니다.
small-caps : 작은 대문자 글꼴로 나타냅니다. (소문자의 크기를 유지하면서 대문자로 변환함)
형식
s {font-size: small-caps; }
(6) @font-face
CSS3가 나오기 전 font를 사용하고 있었을 때 원하는 font들을 사용하기 위해서 다운로드를 받은 후 새로운 글꼴을 사용하려면 글꼴 이름을 정의해야 했습니다.
글꼴을 정의할 때 사용합니다.,
② Text 속성
텍스트 속성은 텍스트의 표현에 영향을 미칩니다.
기본 속성으로는 장식, 들여 쓰기, 단어 및 글자 간격, 줄 여백, 문자 배치의 수직 수평 지정 등의 기능이 있습니다.
(1) text-transform
이 속성은 문장 내 글자의 본래문자를 대/소문자로 바꿔서 나타냅니다.
capitalize : 단어의 첫 글자를 대문자로 변환합니다.
uppercase : 단어의 모든 글자들을 대문자로 변환합니다.
lowercase : 단어의 모든 글자들을 소문자로 변환합니다.
none : 변환하지 않습니다.
형식
s {text-transform : capitalize;}
(2) text-decoration
이 속성은 문장 내 글자에 underline이나 overline 등의 모양을 나타냅니다.
none : 글자의 형식을 지정하지 않고, 기본 형태로 나타냅니다.
underline : 글자의 밑에 줄을 나타냅니다.
overline : 글자의 위에 줄을 나타냅니다.
line-through : 글자의 가운데에 줄을 나타내며, 취소선의 의미를 가집니다.
형식
s {text-decoration : underline;}
(3) word-spacing
이 속성은 문장에 포함된 단어 사이의 여백 크기를 나타냅니다.
s {word-spacing: 10pt;}
(4) letter-spacing
이 속성은 문장내 글자 사이의 공백 크기(자간)를 지정합니다.
s {letter-spacing : 6pt;}
(5) vertical-align
이 속성은 인라인 박스의 높이를 나타냅니다.
baseline : 현재 줄의 기준 줄을 부모 박스의 기준 줄에 정렬합니다.
middle : 현재 줄의 중심선을 부모 박스의 기준 줄에서 소문자 'x' 높이의 반(05.ex)을 올립니다.
sub : 현재 줄의 기준 줄을 부모 박스의 아래 첨자 문자로서 적절한 위치까지 내립니다.
super : 현재 줄의 기준 줄을 부모 박스의 위 첨자 문자로서 적절한 위치까지 올립니다.
text-top : 현재 줄의 윗부분을 부모 요소의 글꼴의 윗점에 정렬합니다.
text-bottom : 현재 줄의 아랫부분을 부모 요소의 글꼴의 아랫부분에 정렬합니다.
top : 현재 줄의 윗부분을 행 박스의 윗부분에 정렬합니다.
bottom : 현재 줄의 아랫부분을 행 박스의 아랫부분에 정렬합니다.
(6) text-align
이 속성은 문장에 포함된 문자열 요소의 수평 정렬을 나타냅니다.
left : 왼쪽 정렬을 나타냅니다.
right : 오른쪽 정렬을 나타냅니다.
center : 가운데 정렬을 나타냅니다.
jsutify : 좌우 양쪽의 정렬을 나타냅니다.
(7) text-indent
이 속성은 문장에서 첫 번째 행의 들여 쓰기 값을 나타냅니다.
길이 : 길이를 나타내며, 음수를 지정하면 내어 쓰기가 됩니다.
% : 백분율 값을 나타내며 부모 요소를 기준으로 계산되어 나타납니다.
형식
s {text-indent : 3em;}
(8) white-space
이 속성은 문장에 공백 문자를 어떻게 배치할 것인가를 나타냅니다.
normal : 정상적으로 출력하도록 나타냅니다. 연속 공백과 줄 바꿈을 묶습니다.
pre : 공백과 줄 바꿈을 통합하지 않고, 원문 그대로 출력하도록 나타냅니다.
nowrap : 연속 공백은 묶지만, 줄 바꿈은 묶지 않도록 나타냅니다.
③ Color
CSS의 웹 문서에서 색상을 설정하는 스타일시트에서는 다양한 방법으로 색상 값을 선언하도록 지원하고 있습니다.
1. Color명
윈도우 VGA에서 지원하는 16색 색상 명을 웹브라우저에서 지원합니다.
Aqua(옥색), Black(검정), Blue(파랑), Fuchsia(바다색), Gray(회색), Green(녹색), Lime(레몬), Marron(밤색), Navy(남색), Olive(국방색), Purple(자주), Red(빨강), Silver(은색), Teal(군청색), White(흰색), Yellow(노랑) 등이 있습니다.
2. 16진수 값
6비트 색상 값 #RRGGBB
3. RGB 값
rgb(255, 255, 255)
rgb(100%, 100%, 100%)
4. HSL 값
HSL(Hue, Saturation, Lightness)으로 hue는 색상의 도수로 0~ 360 값 사이로 나타내며 빨간색은 0도, 녹색은 120도, 파랑은 240도로 표시합니다.
saturation은 채도로 0~100% 사이로 표시합니다.
lightness는 밝기로 % 값으로 0~100% 사이의 값을 나타냅니다.
5. alpha 값
alpha 값은 투명도를 의미하며, 각각 rgba와 hsla로 맨 끝에 'a'를 붙여서 나타내며, 0이면 완전 투명이고 1이면 완전 불투명으로 나타냅니다.
rgba(255,255,255, .4)
hsla(0, 0%, 50%, .3)
(1) color
이 속성은 글자에 다양한 표현을 나타내기 위한 색상 값으로 표현합니다.
color 속성은 RGB 또는 #와 16진수 코드를 결합해서 나타낼 수 있습니다.
예시는 다음과 같습니다.
s {color: rgba(90, 40, 255, 1);}
(2) text-shadow
이 속성은 문자에 하나 이상의 그림자를 지정하는 속성으로 css3에 선언되어 있습니다.
컴마로 분리된 그림자 목록을 속성으로 나타냅니다.
IE9 빼고 다른 브라우저에서 모두 지원됩니다.
h-shadow : 수평 그림자의 값을 나타냄. 음수 허용
v-shadow : 수직 그림자의 값을 나타냄. 음수 허용
blur : 흐림을 나타내며, 생략 가능합니다.
color : 색상 값을 나타내며, 생략 가능합니다.
예제는 다음과 같습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<HTML>
<HEAD><title>sample</title>
<meta charset="utf-8">
<style>
.textshadow1 {font-family:arial; font-size:20pt; color: blue; text-shadow: 10px 10px 5px;}
.textshadow2 {font-family:arial; font-size:20pt; color: red; text-shadow: -10px 10px 2px #000;}
.textshadow3 {font-family:arial; font-size:20pt; color: green; text-shadow: 10px -10px 5px;}
.textshadow4 {font-family:arial; font-size:20pt; color: Maroon; text-shadow: -10px -10px 5px;}
</style>
</head>
<body>
<p class="textshadow1">Text 수직 오른쪽 그림자 </p>
<p class="textshadow2">Text 수직 왼쪽 그림자 </p>
<p class="textshadow3">Text 수평 오른쪽 그림자 </p>
<p class="textshadow4">Text 수평 왼쪽 그림자 </p>
</body>
</HTML>
|
cs |
④ background
background 속성은 기존의 background 속성의 배경과 관련된 여러 속성들을 묶어서 지정할 수 있는 속성입니다.
(1) background-color
이 속성은 화면의 배경에 대한 색을 지정하기 위해 사용합니다.
배경은 속성을 이용하여 작성되는 박스의 내용영역, 패딩 영역, 보더 영역에 적용됩니다.
마진 영역은 항상 투명하므로 부모 요소의 배경이 나타납니다.
color : 배경 값을 RGB 값, 16진수 값 또는 예약어로 나타냅니다.
transparent : 투명하게 나타내어 부모 요소의 배경이 나타나도록 합니다.
(2) background-image
이 속성은 웹 문서의 배경에 대한 이미지를 나타내기 위해 사용합니다.
웹문서에서 배경색 위에 배경 이미지가 나타나고 투명할 경우 다시 그 위에 내용이 표시됩니다.
이미지가 투명하지 않을 때는 색상은 이미지 아래에 지정해야 합니다.
url : 배경 이미지를 url() 함수로 선언합니다.
none : 배경 이미지 미사용
(3) background-repeat
background-repeat 속성은 지정된 위치에서 수평, 수직 방향으로 반복해서 나타나게 하는 속성입니다.
repeat : 기본값으로 수평, 수직방향으로 이미지가 반복됩니다.
repeat-x : 수평 방향으로 이미지가 반복됩니다.
repeat-y : 수직 방향으로 이미지가 반복됩니다.
no-repeat : 이미지가 반복되지 않습니다.
형식
s {background-image : url("...."); background-repeat: repeat-x;}
(4) background-size
이 속성은 CSS3에서 추가된 속성으로, CSS3 이전에는 처리할 수 없었던 배경 이미지 크기를 조정할 수 있습니다.
auto y-px : 이미지의 세로 크기가 y px로 바뀌고 가로 크기는 세로 크기 대비 원본 비율에 맞춰집니다.
x-px y-px : 이미지의 가로 크기 세로 크기를 모두 px 단위로 설정하면 설정한 크기대로 설정됩니다.
cover : 이미지의 가로/세로 비율은 고정되고, 가로 크기가 요소의 가로 크기로 맞춰집니다.
contain : 이미지의 가로/세로 비율은 고정되고, 세로 크기가 요소의 세로 크기로 맞춰집니다.
다음은 background 속성을 사용한 예제입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<HTML>
<HEAD><title>sample</title>
<meta charset="utf-8">
<style>
body {background-image: url("C:///download/iamironman.jpg");
background-repeat: no-repeat;
background-color:#cccccc;
background-size:contain;
font-size:40pt;
font-weight:bold;
}
</style>
<body>
<p> 이 문서에서는 background-image 속성을 사용했습니다. </p>
</body>
</HTML>
|
cs |
④ 사각 박스
사각 박스를 만들려면 다음과 같은 속성들을 이용하면 됩니다.
(1) 컨텐츠의 여백 지정
margin-top:위쪽 여백 값;
margin-bottom:아래쪽 여백 값;
margin-right:오른쪽 여백 값;
margin-left:왼쪽 여백 값;
<tagname style="margin:10pt 13pt 16pt 19pt">
=
<tagname style="margin-top:10pt; margin-right:13pt; margin-bottom:16pt; margin-left:19pt>
(2) 사각 박스의 테두리 모양 지정
border-style:p; 또는 border:p; : 전체 지정
boder-top-style:p; : 상 지정 형식
border-right-style:p; : 우 지정 형식
border-bottom-style:p; : 하 지정 형식
border-left-style:p; : 좌 지정 형식
p(속성 값)
none : 테두리 미지정, border-width의 값은 0이 됩니다.
dotted : 점선 모양
dashed : 굵은 점선 모양
solid : 실선모양
double : 이중 실선모양
groove : 오목하게 들어간 액자 형태의 테두리 모양
ridge : 볼록하게 나온 액자 형태의 테두리 모양
inset : 왼쪽 위에서 빛을 비추어 명암을 준 모양으로 오목한 모양
outset : 왼쪽 위에서 빛을 비추어 명암을 준 모양으로 볼록한 모양
(3) 사각 박스의 테두리 굵기 지정
border-width:p; 또는 border:p; : 전체지정
border-top-width:p; : 상 지정 형식
border-right-width:p; : 우 지정 형식
border-bottom-width:p; : 하 지정 형식
border-left-width:p; : 좌 지정 형식
p(속성값)
thin, medium, thick, xx units
(4) 사각 박스의 테두리 색상 지정
border-color:p; 또는 border:p; : 전체지정
border-top-color:p; : 상 지정 형식
border-right-color:p; : 우 지정 형식
border-bottom-color:p; : 하 지정 형식
border-left-color:p; : 좌 지정 형식
p(속성값): RGB값
(5) 사각 박스의 간격 지정
padding:p; : 전체 지정
padding-top:p; : 상 지정 형식
padding-right:p; : 우 지정 형식
padding-bottom:p; : 하 지정 형식
padding-left:p; : 좌 지정 형식
(6) 사각 박스의 보이기 지정
visibility:p;
p(속성값)
: visible, hidden
(7) 사각 박스의 보이기 순서 지정 (겹칠 경우)
z-index:p;
p(속성값)
: 숫자(값이 클 수록 위쪽에 나타남)
다음은 사각 박스를 이용한 예제입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<HTML>
<HEAD><title>sample</title>
<meta charset="utf-8">
<style>
.box {
color:0000ff;
background-color:#ffefef;
margin-left:5pt; padding:8;
border-color:#aaffee #006600 red #ffffaa; border-style:solid;
border-width:20pt;
}
</style>
<body>
<Table border=1 width=91% class=box>
<tr><td> 가</td><td>나</td></tr>
<tr><td>다</td><td>라</td></tr>
</table>
</body>
</HTML>
|
cs |
다음은 사각 박스안에 사각박스들을 넣는 예제입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<HTML>
<HEAD><title>sample</title>
<meta charset="utf-8">
<style>
.box {
color:0000ff;
background-color:#ffefef;
margin-left:5pt; padding:30;
border-color:#aaffee #006600 red #ffffaa; border-style:solid;
border-width:20pt;
}
</style>
<body>
<div class=box>
<p class=box> </p>
</div>
</body>
</HTML>
|
cs |
이 경우에는 가장 바깥에 위치할 사각 박스를 <div> 태그로 이용해서 나타내면 다음과 같이 사각 박스 안에 사각 박스를 위치시킬 수 있습니다.
다음은 사각 박스가 겹칠 경우의 코드 예제입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<HTML>
<HEAD><title>sample</title>
<meta charset="utf-8">
<style>
.a1 {position:absolute; width:150; height:100; left:10; top:10;
background-color:yellow; color:blue; border:solid; z-index:2;}
.a2 {position:absolute; width:150; height:100; left:30; top:30;
background-color:green; color:green; border:solid; z-index:1;}
.a3 {position:absolute; width:150; height:100; left:50; top:50;
background-color:red; color:red; border:solid; z-index:0;}
.a4 {position:absolute; width:150; height:100; left:70; top:70;
background-color:orange; color:orange; border:solid; z-index:0;}
</style>
</head>
<body>
<p class="a1">z-index:2</p>
<p class="a2">z-index:1</p>
<p class="a3"></p>
<p class="a4"></p>
</body>
</HTML>
|
cs |
같은 z-index:0 인 빨강색상 박스와 오렌지색상 박스중에 <body> 코드에 더 가까운 오렌지 사각박스가 더 위에 있습니다.
HTML 태그의 엘리먼트
HTML에 있는 태그들 중에는 화면 전체를 쓰는 태그가 있고, 자기 크기만큼 쓰는 태그가 있습니다.
블록 레벨 엘리먼트(block level element) : 화면 전체를 쓰는 태그들
인라인 엘리먼트(inline element) : 자기 자신의 콘텐츠 크기만 사용하는 태그들
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<HTML>
<HEAD><title>sample</title>
<style>
h1, a {
border: 5px solid red; /* 두께 스타일 색상 */
}
</style>
</head>
<body>
<h1>가나다</h1>
<a href="www.daum.net">다음</a>
</body>
</HTML>
|
cs |
<h1> 태그는 화면 전체를 사용하는 블록 레벨 엘리먼트고 <a> 태그는 자기 자신 콘텐츠 크기만 사용하는 태그입니다.
블록 레벨 엘리먼트라 하더라도 인라인 엘리먼트처럼 자신의 부피만큼 쓰게 할 수 있는데 display 속성을 이용하면 됩니다. 반대도 마찬가지입니다.
display : inline; : 인라인 엘리먼트로 사용하겠다는 의미
display : block; : 블록 레벨 엘리먼트로 사용하겠다는 의미
그리드(grid)
그리드는 사각 상자안의 텍스트나 요소가 많아짐에 따라 자동으로 사각 상자가 커지는 기능입니다.
그리드는 다음과 같은 형식으로 사용됩니다.
display: grid;
grid-template-columns: 영역1크기 영역2크기; /* 사각 박스 두개가 같은 행으로 부모박스로 둘러졌을 때 사용
영역크기는 픽셀로 나타내거나 rf으로 나타냅니다.
그리드를 적용시키지 않으면 다음과 같이 사각상자 안에 텍스트가 많아도 사각상자는 커지지 않습니다.
다음은 사용예제입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<HTML>
<HEAD><title>sample</title>
<style>
div {
border: 5px solid gray;
}
#grid {
border: 5px solid blue;
display:grid;
grid-template-columns: 400px 1fr;
}
</style>
</head>
<body>
<div id="grid">
<div>abc</div>
<div>dkanrjteh gkrl tlfgek rmsid dkantodrkrdjqtdl claeodp sndnjtj rhkwk Rkajrdmaustj RlfRlfrjflaustj
tnlaus skwnddps gusxkrk dhrpTwlaks rm tnsrksdpsms ekfzhagkrp gbtlrdmf cnlgkrpTwl </div>
</div>
</body>
</HTML>
|
cs |
10번째 줄의 400px 1rf의 뜻은 왼쪽에 있는 상자는 400px 만큼 차지하고 나머지 픽셀 영역은 오른쪽이 차지한다는 뜻입니다.
rf를 '2rf 1rf' 이런식으로 사용하면 왼쪽과 오른쪽에 있는 상자의 픽셀영역을 2:1 비율로 화면에 나타낸다는 뜻입니다.
미디어 쿼리
화면에 크기에 따라 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌는 것을 반응형 웹이라고 합니다.
예시로 웹을 컴퓨터에서 볼 때와 스마트폰으로 볼 때 화면의 크기가 다르므로 모양이 바뀌게 될 것입니다.
즉, 화면의 크기에 따라 웹페이지의 각 요소들이 반응해서 동작하게 됩니다.
이러한 반응형 웹을 구축하기 위해서는 미디어 쿼리를 이용해야 합니다.
미디어 쿼리는 보통 특정수치의 화면보다 작거나 클 때 특정 스타일을 적용시켜는 역할을 합니다.
일종의 조건문이라고 생각해도 됩니다.
형식의 예시는 다음과 같습니다.
@media(min-width: 800px) {
div {
display: none;
}
}
min-width: 800px 라는 의미는 최소 800px일 경우, 즉 800px 이상의 화면에서 다음 스타일을 적용시키라는 의미입니다.
반대로 max-width: 800px 라는 조건을 사용하면 800px 이하의 화면에서 다음 스타일을 적용시키라는 의미입니다.
