- Float(플로트)
- 배열을 하는 태그. 주변태그들이 속성에 들어간 태그와 어울리도록 위치가 바뀐다. 예를 들어 left를 썼다면 들어간 요소는 왼쪽, 주변태그들은 오른쪽에 배치된다. 주의할 점은 block 속성의 경우 background에 컬러를 넣어보면 float 태그 뒤에도 색이 들어간다. 이 때는 margin으로 폭을 줄인다.
- 만약 float 영향에서 벗어나고 싶다면 clear:both를 넣는다.
- 이미지의 경우도 똑같고 만약 양쪽에 배치하고 글을 넣게 되면 둘 사이에 작성하게 된다.
- overflow : 지정한 크기보다 많은 양을 넣을 시에 영역 밖으로 튀어나오는 것을 조절해주는 속성이다. 예를 들어 높이는 300px인데 적은 내용의 길이가 300px을 넘으면 영역 밖으로 튀어 나온다. 이 때 overflow:auto를 하면 해당 영역에 스크롤이 생기고 300px 높이는 고정되게 된다. 만약 높이를 지정 안했다면 자동으로 맞춰주기에 overflow가 의미없다. overflow:scroll은 길이가 충분해도 스크롤이 무조건 생성된다.
- align(정렬) : 블록 타입 정렬의 경우 margin을 이용한다. 이 때 정해진 길이값이 존재해야 한다. 또는 position을 이용한다면 left:50%를 넣는다. 이 때는 웹브라우저의 전체 길이의 50% 위치이다.
- 선택자
- 전체 선택자 : *{}
- HTML 요소 선택자 : p
- 아이디(id)선택자 id=”name” #name
- 클래스 선택자 : class=”class” .class
- 그룹 선택자 : .class, p
- 자손 선택자 : 해당 요소의 하위 요소 중에서 특정 타입의 요소를 모두 선택
div p{스타일l} : 띄워쓰기 하고 써야함(띄워쓰기 하지 않으면 붙은 divp 를 찾게 됨) - 자식 선택자 : 해당 요소의 바로 밑에 존재하는 하위 요소 중에서 특정 요소를 모두 선택
div>p{스타일;} - 동위 선택자 : 해당 요소와 동위 관계에 있으며, 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택
div~p{스타일;} - 인접 동위 선택자 : 해당 요소와 동위 관계에 있으며, 해당 요소의 바로 뒤에 존재하는 특정 타입의 요소를 모두 선택. 즉, 클래스 바로 밑에 존재하는 하위태그와 다르면 스타일이 적용되지 않는다.
div+p{스타일;}