블록체인 기술사업 교육 21일차
레이아웃 배치
- HTML 태그가 출력되는 위치를 지정
- display = 박스 유형 설정(block, inline, inline-block)
=> span { display : block }, div { display : inline } 등으로 기존 설정 변경 가능 (display: block => 브라우저 기준 가운데 정렬할 때 유용)
- position = relative(기존 위치에서 지정한 프로퍼티(left,right,top,bottom) 만큼 이동), absolute(창 크기가 변해도 고정 - 부모 기준), fixed(창 크기가 변해도 고정 - 브라우저 창 기준)
- z-index = z축 순서 지정 (큰 값을 가진 요소가 작은 값을 가진 요소를 덮음)
- float = 텍스트 및 인라인 요소와 어울리며 배치 (left, right)
- visibility : hidden = 해당 요소 숨기기
- overflow = 텍스트가 공간에 비해 넘칠 경우에 대한 처리 결정
(hidden/visible - 넘치는 부분 가리기/보이기, scroll - 넘치는 부분을 스크롤로 볼 수 있도록 설정)
리스트 설정
- list-style-type = 마커 타입(circle, square, decimal, none 등) - list-style-image = 마커 이미지
- list-style-position = 마커 위치(inside/outside)
표 설정
- border = 표 테두리 설정 (두께/스타일/색)
- border-collapse : collapse => 중복된 테두리 합치기
- border-top/border-bottom/border-left/border-right = 테두리 위쪽/아래쪽/왼쪽/오른쪽 설정 (입력 방식은 border와 같음)
가상 클래스
- 특정 이벤트 발생 시 적용 할 스타일을 설정할 때 사용하며 [:가상이벤트명] 형식으로 입력
- :hover = 마우스 커서를 올렸을 때
- :active = 마우스를 클릭했을 때
- :focus = 포커스 되었을 때 => ex) input 태그에서 입력하려고 할 때
- :nth-child(2n+1), :nth-child(2n) = 홀수/짝수 번째 자식
※ 자식 = 같은 이름의 태그가 여러개일 경우 => 여러 중복된 태그들 중에서 1번째 태크면 1번째 자식
ex) :nth-child(n+7) = 7번째부터 쭉, :nth-child(-n+3) = 앞에서부터 3개만,
:nth-child(n+8):nth-child(-n+15) = 8번째부터 15번째까지
- :first = 첫 번째 요소
- :last = 마지막 요소
- :first-child = 첫 번째 자식
- :last-child = 마지막 자식
- :link = 방문한 적이 없는 링크
- :visited = 방문한 적이 있는 링크