HTML 요소는 박스 모양으로 구성되며 이를 박스모델 이라고 부름
패딩 테두리 마진 내용 으로 구분함
요소 | 설명 |
---|---|
내용(content) | 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 |
패딩(padding) | 내용과 테두리 사이의 간격. 눈에 보이지 않음 |
테두리(border) | 내용과 패딩 주변을 감싸는 테두리 |
마진(margin) | 테두리와 이웃하는 요소 사이의 간격. 눈에 보이지 않음 |
left, right, top, bottom 으로 각각 지정할 수 있음
<style>
p {
border-right: 30px solid red;
border-left: 100px solid blue;
border-top: 50px solid grey;
border-bottom: 10px solid pink;
}
</style>
사용하고자 하는 폰트를 먼저 지정하고 해당 폰트가 적용 안될 경우, 그 다음 폰트를 적용
<style>
body {font-family: 굴림, sans-serif;}
</style>
<p>안녕하세요</p>
<p>Hello World!</p>
<p style="font-family: 궁서, 바탕">안녕하세요</p>
<p style="font-family: Verdana, Tahoma">Hello World!</p>
폰트가 웹에 존재하여 직접 배포하지 않더라도 웹의 링크를 이용하면 자동으로 해당 폰트로 보여줌
Google Fonts : 구글에서 서비스 하는 웹 폰트 사이트
<style>
h1 {
font-style: italic;
}
p {
font-weight: bold;
font-size: 2em;
}
</style>
<h1>안녕하세요</h1>
<p>Hello World!</p>
디스플레이(display) : HTML의 모든 요소는 각각의 기본 display 속성값 가짐
블록(block)인 요소는 언제나 새로운 라인(line)에서 시작
해당 라인의 모든 너비를 차지
요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지
인라인-블록으로 설정된 요소는 해당 요소 자체는 인라인(inline) 요소처럼 동작
해당 요소 내부에서는 블록(block) 요소처럼 동작
하나 또는 여러개의 하위 요소를 포함해 위치나스타일 등을 지정하는데 이용
<style>
div { border: 1px solid;
padding: 10px;}
</style>
<div>div 1
<div>div 2
<div>div 3</div>
</div>
</div>
요소를 공중에 띄워 정렬
none(기본값), left(띄워서 왼쪽), right(띄워서 오른쪽)
부모 요소 overflow:auto 로 복원
다음 요소에서 clear: both 로 복원
부모 요소에서 ::after 가상 요소 이용
<style>
.clearfix::after {
content: "";
clear: both;
display: table; }
<style>
<div class="clearfix">
</div>
어떤 요소의 위치를 지정하는 방식
static : 기본
상대 위치 방식(부모 요소 기준)
절대 위치 방식(조상 혹은 문서 기준)
부모나 조상 중에 static이 아닌 position이 지정되었을때
만약 부모와 조상이 모두 static 이라면 문서 기준
절대 위치로 고정(스크롤 포함)
화면 크기가 변하거나 스크롤이 되어도 위치 고수
스크롤에 따라 relativ와 fixed 전환
기본 relative, 스크롤시 지정된 위치에 fixed
프로그램을 작성할 때 각 모듈이 작동하는 논리를 표현하기 위하여 사용하는 언어
다른 프로그램 개발자나 이용자에게 모듈이 하는 일과 작동원리를 설명하는데 사용함
해당 요소의 상태(마우스, 포커스 등)에 따른 스타일 지정
요소의 상태에 따른 스타일 지정 가능
마우스가 위에 떠 있을 때 적용
폼(Form) 요소에 주로 쓰이는 가상 클래스
해당 그룹 요소 중 첫번째, 마지막번째
해당 요소의 전, 후 등 가상의 효소에 대한 스타일 지정
해당 요소의 시작 전, 후의 가상 요소에 대한 스타일 지정