CSS 이론 - 박스모델
기본 템플릿 만들기
template.html파일을 만들고
<!DOCTYPE.html>
<html>
<head>
<meta charset="utf-8"/ >
</head>
<body>
</body>
</html>
이 코드를 저장해 둔 후 이 것을 매번 작성하는 수고할 필요 없이 복사해서 사용하자.
실습 1. ol과 li 를 이용해서 수업의 리스트를 출력하기.
<!DOCTYPE.html>
<html>
<head>
<meta charset="utf-8"/ >
</head>
<body>
<ul>
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ul>
</body>
</html>
- li 3번 연속되는 부분은 li*3 + tab으로 빠르게 입력할 수 있다.
실습 2. li 태그에 테두리 넣기
테두리는 border로 설정가능
style 태그를 head에 넣고
border:1px : 테두리는 1px의 두께
한칸 띄우고 red : 빨간색으로
한칸 띄우고solid : 단색으로 그린다
=> border:1px red solid;
=> 한칸 띄우는 것이 속성을 구분하는 약속
solid 말고 dotted로 하면 점선
li {
border:1px red solid;
}
실습 3. li가 3개인데 중간에 있는 li에만 적용시키고 싶을 경우
html의 속성 중 id를 사용하면 된다.
<li id="selected">css</li> 로 해서
id값이 selected 인 것만 수정할 수 있다.
id를 나타내는 특수한 기호 #을 이용.
<!DOCTYPE.html>
<html>
<head>
<meta charset="utf-8"/ >
<style>
#selected {
border:1px red solid;
}
</style>
</head>
<body>
<ul>
<li>html</li>
<li id="selected">css</li>
<li>JavaScript</li>
</ul>
</body>
</html>
실습 4. css와 테두리 사이의 파란색 동그라미 친 공백을 조절하고 싶다.
padding 이용
ex) padding:30px을 css코드에 추가
#selected {
border:1px red solid;
padding:30px;
}
실습 5. JavaScript에 파란색 테두리 주기
<!DOCTYPE.html>
<html>
<head>
<meta charset="utf-8"/ >
<style>
#selected {
border:1px red solid;
padding:30px;
}
#extra{
border:1px blue solid;
}
</style>
</head>
<body>
<ul>
<li>html</li>
<li id="selected">css</li>
<li id="extra">JavaScript</li>
</ul>
</body>
</html>
실습 6. css와 javascript 사이의 간격 주기
margin 이용
#selected {
border:1px red solid;
padding:30px;
margin:50px;
}
태그와 태그사이의 간격 정리 - 박스모델
크롬을 이용한 박스모델
마우스포인터를 css위에 올려놓고 오른쪽 클릭 -> 요소검사
크롬 개발자 도구는 실시간으로 수치를 바꿔보면서 어떻게 하는 것이 시각적으로 아름다운가를 확인하는데 큰 도움을 준다.
이 개발자 도구로 수정했던 내용은 원래의 소스코드에 영향을 미치지 않는다.