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