본문 바로가기

CSS11

[CSS]다양한 선택자 #복합선택자# span.apple{} ->span태그에서 애플이라는 클래스를 선택 ul>.apple{} ->ul태그의 자식중에서 apple이라는 클래스를 선택 div .orange{} ->div태그의 후손(띄어쓰기)중에서 orange라는 클래스를 선택 인접형제선택자 .orange + li {} ->선택자 다음의 인접형제선택 일반형제선택자 .orange ~ li {} ->선택자 다음의 일반형제선택 #가상클래스 선택자# :link - 방문한 적이 없는 링크 :visited - 방문한 적이 있는 링크 :hover - 마우스를 롤오버 했을 때 :active - 마우스를 클릭했을 때 :focus - 포커스 되었을 때 (input 태그 등) :first - 첫번째 요소 :last - 마지막 요소 :first-chi.. 2020. 6. 25.
[CSS] display 속성 display >요소의 유형을 설정 값 block(div등), inline(span등), inline-block(input등), table, table-cell, flex, none 2020. 6. 20.
[CSS] border 속성의 값 border (단축속성) -개별속성- border-width 선의 두께 기본값: medium / 값의 종류 thin, medium, thick border-style 선의종류 기본값: none 속성값의 종류 none, hidden(table요소에서 사용), solid, dotted, dashed, double, [groove, ridge], [inset, outset] border-color 선의 색 기본값: black 투명:transparent 2020. 6. 20.
[CSS] box 사이즈를 자동 계산해 주는 box-sizing: border-box box-sizing: border-box; 위 값을 추가 하게 되면 width:100px; height:100px; padding: 30px; box-sibox-sizing: border-box; 이와 같이 코드가 작성 되었을 때, 패딩 상하좌우 각 30px; 을 추가하여 width값과 height 값이 100px이 되도록 자동계산 해준다. 2020. 6. 20.
[CSS] margin 단축속성 입력 순서(ft.개별속성) margin: 1.입력값이 4개 일때 ex) 10px 20px 30px 40px; >위10px 오른쪽20px 아래30px 왼쪽40px 2.입력값이 3개 일 때 ex) 10px 20px 30px; >위10px [좌,우]20px 아래30px 3.입력값이 2개 일 때 ex) 10px; 20px; >[위,아래]10px [좌,우]20px 4.입력값이 1개일 때 ex) 10px; >[상,하,좌,우]10px Ps. margin의 개별속성. margin-top margin-right marginbottom margin-left 2020. 6. 20.
[CSS]vw, vh, vmin, vmax VW와 VH 각각 Viewport width, Viewport height 이 둘 또한 반응형으로 사용하기 좋음 0~100사이의 값을 가짐. 뷰포트 즉 현재 브라우저창이 변함에 따라 크기가 변화됨. vmax width: 50vmax; ->현재 뷰포트의 가로와 세로 중 더 넓은 사이즈의 50%를 가로사이즈로 사용한다. vmin width: 50vmin; -> 위와 비슷한 개념으로 현재 뷰포트의 가로와 세로중 더 좁은 사이즈의 50%를 가로사이즈로 사용한다. 2020. 6. 20.

티스토리툴바