css 적용방법 = 순서는 가장 가까운 순서부터 1. 인라인 시트 태그 style 속성 < tag style = ' ' > { } 중괄호 빼고 style만 적기, color:green; 따로 특별히 주고 싶을 때 사용 2. 내부 스타일 시트 <style> css 작성 </style> 3. 외부 스타일 시트 .css 가장 많이 사용
/* css를 하기 전 꼭 들어갈 기본 값 */
* {margin: 0; padding: 0; list-style: none;}
a {text-decoration: none;}
img {max-width: 100%; height: auto;} 가장 기본 속성
border-radious: 윤곽의 테두리가 중근 사각형 또는 원 만들기 border-radius: 50px 40px 20px 10px; 100px 주면 사각형의 각이 둥글게 나옴
텍스트 속성
color
텍스트 색
line-height
줄 간격
letter-spacing
문자 사이의 간격
normal = 0px, -n px:겹쳐보임, 0.5px 등
text-align
정렬 상태 지정
block에서 사용 left, right, center, justify
text-decoration
텍스트에 줄 표시
none 주로 사용
overflow
일정 공간에 글들이 넘치는 것 방지
hidden, visible, scroll, none
white-space
줄바꿈 할꺼냐, 줄바꿈 없이 쓸꺼냐? nowrap을 사용했을 경우에는 공백을 유지하며 줄바꿈 기능을 하지 않음
정렬
text-align
텍스트(inline) 수평정렬 부모의 block 태그에 적용
left, center, right
vertical-align
수직정렬 기준 (나란히 배치된 요소에 적용) 비교된 대상이 있어야 함
top, middle, bottom
coding 404 텍스트 정렬 팁
기준 정렬할게 없을 때, height와 line-height를 동일하게 맞추면위, 아래에서가운데 정렬 큰 박스의 너비 지정 후, margin: 0 auto; 수평 가운데 정렬
margin: 0 auto; 안될 때
<!Doctype ~> 선언이 제대로 안 되었을 때
가로 사이즈의 설정이 되어있는지 확인 width 지정 필요 (auto가 자동으로 사이즈를 설정해주기 때문)
display 속성이 block인지 확인 inline은 자기 자신만큼만 영역값을 가지므로
차지하는 요소가 이미 해당 가로 공간을 차지하고 있는지 확인 블럭으로 끝까지 다 차지하고 있으면 auto 할 공간이 없으므로
margin: 0 auto 한 후 margine: 30px 같이 전체 마진을 주면 제대로 나오지 않음, 위아래는 margin 가능
메뉴 만들기
ul li는 block 태그라서 inline 요소로 바꿔줘야 옆으로 붙을 수 있음
a 태그는 inline요소여서 너비, 높이를 잡아줄 수 없으므로 inline-block 요소로 바꿔 inline으로 배치하되 block의 성질을 갖게 함
.menu ul li {display: inline;}
.menu ul li a {
display: inline-block;
color: #777;
text-decoration: none;
width: 50px;
height: 50px;
line-height: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tx {color: cadetblue;
letter-spacing: -5px; /* 글자간격 */
text-align: right; /* 글자정렬: 블럭요소에서 사용 */
}
/* p태그에 정렬줘도 안 먹힘 */
.tx1 {vertical-align: top;}
/* 기준이 되는(img)! 나란히 배치된 요소에 들어감 */
.tx1 img{vertical-align: middle;}
/* 기준이 되는 요소가 없을 때 수직정렬 */
/* 한줄만 있을 때 height, line-height 맞춰주면 중앙으로 정렬됨 */
.tx2 {
border: 1px solid #777;
height: 100px;
line-height: 100px; /* 줄간간격 */
}
</style>
</head>
<body>
<p class="tx">
안녕하세요
</p>
<p class="tx1">
<img src="img/css.png" alt="이미지">
버티칼 얼라인
</p>
<p class="tx2">
기준이 되는 요소가 없을 때 수직정렬
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
border: 1px solid#777;
height: 100px;
width: 300px;
}
.tx1 {overflow: hidden;} /* 숨김 */
.tx2 {overflow: scroll;} /* 무조건 스크롤 생성 */
.tx3 {overflow: auto;} /* 내용이 넘칠때만 스크롤로 바꿔줌 */
.tx4 {overflow: visible;} /* 기본값 */
</style>
</head>
<body>
<p class="tx1">
최근 강남 지역 스쿨존에서 교통사고가 잇따르고 또 어린이들이 목숨을 잃으면서 여러 가지 대책마련에 대한 목소리가 높아지고 있습니다.
여기에 일부 지자체에서어린이보호구역 속도 제한을 완화하려는 방침을 밝히고 있습니다. 이에 대한 찬반 논란도 이어지고 있는데요.
관련해서정경일 교통사고전문변호사와 짚어보겠습니다. 어서 오세요. 먼저 청담동 언북초등학교 앞에서 일어난 차량사고요.
초등학교 3학년 어린이가 음주운전 차량에 치여서 사망하는 사고가 일어났는데 먼저 그 사고는 어떻게 난 겁니까?
[정경일]
어린이보호구역 내에서 음주운전자가 이면도로에 있던 어린이를 충격하고 사망케하고 그 현장을 떠났습니다.
그러고 난 뒤에 자신의 집에 주차하고 난 뒤에 뒤늦게 나와서 사고 수습을 했다고 하는데 음주운전 교통사고, 어린이보호구역 내 교통사고, 그리고 또 뺑소니 교통사고 이 세 가지가 다 문제되는 사건이었습니다.
[앵커]
사고가 난 현장을 좀 봤으면 좋겠는데요. 사고가 난 현장을 보면 상당히 골목길인데 좁더라고요.
그런데 어린이보호구역이니까 당연히 속도를 줄여야 되는데 속도를 줄이지 않았나 보죠?
[정경일]
속도 부분은 제한속도 위반한 바는 없었습니다.
</p>
<p class="tx2">
최근 강남 지역 스쿨존에서 교통사고가 잇따르고 또 어린이들이 목숨을 잃으면서 여러 가지 대책마련에 대한 목소리가 높아지고 있습니다.
여기에 일부 지자체에서어린이보호구역 속도 제한을 완화하려는 방침을 밝히고 있습니다. 이에 대한 찬반 논란도 이어지고 있는데요.
관련해서정경일 교통사고전문변호사와 짚어보겠습니다. 어서 오세요. 먼저 청담동 언북초등학교 앞에서 일어난 차량사고요.
초등학교 3학년 어린이가 음주운전 차량에 치여서 사망하는 사고가 일어났는데 먼저 그 사고는 어떻게 난 겁니까?
[정경일]
어린이보호구역 내에서 음주운전자가 이면도로에 있던 어린이를 충격하고 사망케하고 그 현장을 떠났습니다.
그러고 난 뒤에 자신의 집에 주차하고 난 뒤에 뒤늦게 나와서 사고 수습을 했다고 하는데 음주운전 교통사고, 어린이보호구역 내 교통사고, 그리고 또 뺑소니 교통사고 이 세 가지가 다 문제되는 사건이었습니다.
[앵커]
사고가 난 현장을 좀 봤으면 좋겠는데요. 사고가 난 현장을 보면 상당히 골목길인데 좁더라고요.
그런데 어린이보호구역이니까 당연히 속도를 줄여야 되는데 속도를 줄이지 않았나 보죠?
[정경일]
속도 부분은 제한속도 위반한 바는 없었습니다.
</p>
<p class="tx3">
최근 강남 지역 스쿨존에서 교통사고가 잇따르고 또 어린이들이 목숨을 잃으면서 여러 가지 대책마련에 대한 목소리가 높아지고 있습니다.
</p>
<p class="tx4">
최근 강남 지역 스쿨존에서 교통사고가 잇따르고 또 어린이들이 목숨을 잃으면서 여러 가지 대책마련에 대한 목소리가 높아지고 있습니다.
여기에 일부 지자체에서어린이보호구역 속도 제한을 완화하려는 방침을 밝히고 있습니다. 이에 대한 찬반 논란도 이어지고 있는데요.
관련해서정경일 교통사고전문변호사와 짚어보겠습니다. 어서 오세요. 먼저 청담동 언북초등학교 앞에서 일어난 차량사고요.
초등학교 3학년 어린이가 음주운전 차량에 치여서 사망하는 사고가 일어났는데 먼저 그 사고는 어떻게 난 겁니까?
[정경일]
어린이보호구역 내에서 음주운전자가 이면도로에 있던 어린이를 충격하고 사망케하고 그 현장을 떠났습니다.
그러고 난 뒤에 자신의 집에 주차하고 난 뒤에 뒤늦게 나와서 사고 수습을 했다고 하는데 음주운전 교통사고, 어린이보호구역 내 교통사고, 그리고 또 뺑소니 교통사고 이 세 가지가 다 문제되는 사건이었습니다.
[앵커]
사고가 난 현장을 좀 봤으면 좋겠는데요. 사고가 난 현장을 보면 상당히 골목길인데 좁더라고요.
그런데 어린이보호구역이니까 당연히 속도를 줄여야 되는데 속도를 줄이지 않았나 보죠?
[정경일]
속도 부분은 제한속도 위반한 바는 없었습니다.
</p>
</body>
</html>
