개발자 끄적끄적
Inline block mode, 배경화면 이미지 속성 본문
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>background-image</title>
<style>
div{
border:4px solid #666;
margin:10px;
}
div.c1{
width:600px;
height:300px;
background-image:url(../images/pink.jpg);
background-repeat:no-repeat;
}
div.c{
width:300px;
height:300px;
}
/*.c2에 바탕 이미지를 반복되지 않도록 추가*/
div.c2{
background-image:url(../images/gabi.jpg);
background-repeat:no-repeat;
background-position:center;
}
div.c3{
background-image:url(../images/flower.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
}
h2{
color:#00f;
font-size:30pt;
font-weight:bold;
text-align:center;
background-color:#fff6;
}
div.c4{
background-image:url(../images/flower.jpg);
background-size:100%;
}
</style>
</head>
<body>
<h1>background-image</h1>
<div class='c1'></div>
<div class='c2 c'></div>
<div class='c3 c'></div>
<div class='c4 c'>
<h2>고양이</h2></div>
</body>
</html>
-------------------
- background-image:url(../images/pink.jpg);->이미지가 반복된다(이게 기본속성)
- background-repeat:no-repeat;->이미지가 반복되지 않고 1개반 이미지 삽입(position은 (0,0)에 위치한다)
- background-position:right(bottom/left/top/center);->이미지 위치시키기
- backgorund-position: right(or left);->중앙의 right, left로 위치한다
- background-postion:50px 100px;->x축으로 50px만큼, y축으로 100px만큼 이동해서 위치시킨다
- background-size:100% 100%;->이미지 사이즈 설정
- text-align:center;->text를 가운데 정렬
- .c4안에 h2제목 "고양이" 삽입->설정된 background 위에 "고양이" text가 쓰여진다
---------------------------------------------------------------------------------------------------
*#RRGGBBAA : A는 투명도를 조절(=#RGBA라고도 한다 반복생략 ex)#fff6)
*#RR/GG/BB
- 16진수로 표현
- R : 빨강 / G : 초록 / B : 파랑
- RR이라는 것은 빨강을 나타내는 16진수 숫자를 말하며 00~FF까지의 값이 된다(GG, BB도 마찬가지)
*ctrl키+space키 : 기본 속성을 모를 때(또는 까먹을 때)찾을 수 있다
*background-repeat : repeat-x->x축으로 반복(가로로 반복)
*background-repeat : repeat-y->y축으로 반복 (세로로 반복)
*브라우저 창을 열고 키"F12" 또는 / 속성->기타속성->개발자모드에서/ 'elements'->화면에 나타난 css가 어떻게 적용됐는지 확인 할 수 있다
'console' : javascript모드 때 많이 활용 할 예정
*단위
a. 절대단위 : in, cm, mm, pt, pc가 있으며 출력장치(모니터)의 물리적 속성을 아는 경우 효율적
- pt : point, 일반 문서(워드 등)에서 많이 사용하는 단위
b. 상대단위 : em, ex, px, %가 있으며 기종간, 플랫폼 간의 호환성을 유지하는데 유리
- em : font_size, 해당폰트의 대문자 M의 너비를 기준으로 함
- ex : x-height, 해당폰트의 소문자 x의 높이를 기준으로 함
- px : pixel, 표시장치(모니터)에 따라서 상대적인 크기를 가짐
- % : percent, 기본글꼴의 크기에 대하여 상대적인 값을 가짐
*Inline, block mode 차이
- 줄바꿈 현상 유무
- width, height 속성 유무
- margin, padding 속성 적용 유뮤
Inline mode
- 오른쪽 여백이 있는 경우 다른 요소가 오른쪽에 배치된다
- height(높이), width(넓이)가 조절되지 않는다(컨텐츠 크기만큼 사용)
- 줄바꿈이 없고 우측으로 바로 이어서 표기된다
ex) <span>,<a>,<br>,<button>,<img>,<input>,<output>,<font>,<label>,<tt>...
block mode
- 넓이와 상관없이 한 줄 전체를 차지한다
- 넓이와 높이가 조절된다
- vertical-align, text-align이 적용되지 않는다
ex)<hr>,<div>,<h1>~<h6>...,<p>,<ul>,<form>,<li>,<table>...
block mode+inline mode=>inline-block
- 넓이와 높이가 조절된다
- 오른쪽에 다른 요소가 올 수 있다
-------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css_exam/box</title>
<style>
.box{
width:400px;
height:300px;
border:3px solid #999;
/*좌우 여백이 자동이므로 box가 항상 화면 가운데 표시*/
margin:100px auto;
}
.in{
width:100px;
height:100px;
border:1px solid #f00;
/*
margin-top:100px;
margin-left:100px;
margin:50px 0 0 50px
*/
margin:100px auto;
box-sizing:border-box;
padding-top:60px;
padding-left:30px;
}
div.box2{
border:4px solid #f00;
box-sizing:border-box;
padding:20px;
}
</style>
</head>
<body>
<h1>box model</h1>
<div class='box'>
<div class='in'>
HONG
</div>
</div>
box model
margin(border와 다른 태그 영역 사이)>border(테두리 영역)>padding>content(글씨가 삽입되는 영역)
- margin : 100px->상하좌우 모든 곳에 여백 지정
- margin : 50px 100px->상하는 50px, 좌우는 100px
- margin : 10px 20px 30px 40px->상,우,하,좌(상에서 시계방향으로)의 여백이 10px, 20px, 30px, 40px
*padding도 margin과 동일하게 적용 가능하다
-padding을 사용하면 전체 넓이나 높이가 padding크기만큼 늘어나거나 줄어든다->(결과)UI가 깨진다
따라서, padding을 사용하기전에 box-sizing : border-box 속성을 추가해준다
- box-sizing : border-box
ex) padding-top : 40px->padding size만큼 top크기가 40px만큼 늘어난다(높이)
ex) padding-left : 30px->padding size만큼 left크기가 30px만큼 늘어난다
*모든 CSS는 기본 설정값은 content-box입니다.
따라서 초기 설정에서 width, height를 설정하면, 컨텐츠 영역 이외에 border, padding, margin은 따로 계산되므로
초기 설정값보다 영역이 더 커지게 되어 레이아웃이 엉망이 되는 경우가 많습니다.
따라서 본인이 지정한 width, height 값으로 영역 전체 크기가 똑같이 유지되기를 원한다면,
box-sizing : border-box를 삽입해주면 됩니다.
거의 대부분은 그런 오류 방지를 위해서 border-box 속성을 필수로 사용합니다.
*content-box : 지정한 CSS width 및 height를 컨텐츠 영역에만 적용합니다. border, padding, margin은 따로 계산되어 전체 영역이 설정값보다 커질 수 있습니다.
border-box : 지정한 CSS width 및 height를 전체 영역에 적용합니다. border, padding, margin을 모두 합산하기 때문에 컨텐츠 영역이 설정값보다 적어질 수 있습니다.
---------------------------------
block mode->inline mode
ex).box2 li{
display:inline;
}
결과...x
A
B ---->A B C D
C
D
----------------------------
.box2 li{
display:inline;
width:100px;
}
- inline모드는 넓이가 바뀌지 않는다(실행 결과는 x와 동일)
- inline->inline-block으로 바꾸면 width가 실행된다
*Inline mode
- 오른쪽 여백이 있는 경우 다른 요소가 오른쪽에 배치된다
- height(높이), width(넓이)가 조절되지 않는다(컨텐츠 크기만큼 사용)
- 줄바꿈이 없고 우측으로 바로 이어서 표기된다
ex)<hr>,<div>,<h1>~<h6>...,<p>,<ul>,<form>,<li>,<table>...
-----------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css_exam/box</title>
<style>
.box{
width:400px;
height:300px;
border:3px solid #999;
/*좌우 여백이 자동이므로 box가 항상 화면 가운데 표시*/
margin:100px auto;
}
.in{
width:100px;
height:100px;
border:1px solid #f00;
/*
margin-top:100px;
margin-left:100px;
margin:50px 0 0 50px
*/
margin:100px auto;
box-sizing:border-box;
padding-top:60px;
padding-left:30px;
}
div.box2{
border:4px solid #f00;
box-sizing:border-box;
padding:20px;
}
.box2 li{
display:inline-block;
width:70px;
background-color:#aaa;
margin-right:2px;
padding:2px;
text-align:center;
}
li:hover{
background-color:#000;
color:#fff;
cursor:pointer;
}
</style>
</head>
<body>
<h1>box model</h1>
<div class='box'>
<div class='in'>
HONG
</div>
</div>
<div class='box2'>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
이해선
</div>
</body>
</html>
----------------------
li:hover{
background-color:#000;
color:#fff;
cursor:pointer;
}
- A B C D상자위에 커서를 올리면 커서는 손가락 표시가 되고, 커서를 올리면 설정된 색깔로 변한다
---------
(미션)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel='stylesheet' type='text/css'
href='../css/index.css'>
</head>
<body>
<h1>미션</h1>
<div class='main'>
<header class='header'></header>
<div class='center'>
<nav class='memu'></nav>
<div class='content'></div>
<aside class='aside'></aside>
</div>
<footer class='footer'></footer>
</div>
</body>
</html>
-----CSS-----
@charset "UTF-8";
*{ /*모든 태그에 외각선 표시해 보기*/
border:0px solid #aaa;
padding:10px
}
.main{
width : 1100px;
margin:10px auto;
border:4px solid #66f;
}
.header{
height:130px;
background-color:#77ff77;
}
.center{
border:1px solid #ff4444;
}
.menu{
width:200px;
height:300px;
background-color:#ff99ff;
display:inline-block;
vertical-align:top;
}
.content{
width:650px;
height:150px;
background-color:#ffff44;
display:inline-block;
vertical-align:top;
}
.aside{
width:200px;
height:300px;
background-color:#eee;
display:inline-block;
vertical-align:top;
}
.footer{
height:120px;
background-color:#ccc;
}
---------------------------------
*vertical-align
- css에서 인라인 요소(inline)와 인라인 블록 요소(inline-block)를 수직 정렬 할 때 이용
border-radius : 모서리를 둥글게((0,0)에서 시작 시계방향으로)
ex)border-radius:0 100px 0 100px;
box-shadow: box에 그림자
text-shadow : 문자에 그림자
----->
1 2
4 3
'HTML, CSS' 카테고리의 다른 글
| position, 좌표 (0) | 2023.03.04 |
|---|---|
| 글꼴, 바탕색, 자손 (1) | 2023.03.04 |
| input type, 테이블 병합 (0) | 2023.03.04 |