본문 바로가기

web7

[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] 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]우선순위 결정 같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법 1. 명시도 점수가 높은 선언 (명시도) 2. 점수가 같은경우, 가장 마지막에 해석되는 선언 (선언 순서) 3. 명시도는 '상속' 규칙보다 우선(중요도) 4. !important가 적용 된 선언방식이 다른 모든방식보다 우선(중요도) !important > 명시도 점수가 같을 때 가장 마지막에 해석되는 선언 > 명시도 점수가 가장 높은 선언 > 상속 스타일 속성을 통한 인라인선언(1000 Point)[비추천/ 덮어쓰기 힘듦] ex) HELLO WORLD ID 선택자를 통한 선언(100pt) ... #Apple Class 선택자를 통한 선언(10pt)... .Apple 단, 가상클래스 선택자 중 :not은 점수.. 2020. 6. 17.
[CSS]4가지 기본 선택자 1. *: 전체선택자(Universal Selector) ex) * {color:red;} 2. A,li,div 등 특정이름: 태그선택자(Type Selector) ex) div {color: red;} 3. 클래스의 속성값 :클래스 선택자 ex) .fruits{color: red;} 사과 4.id의 속성값: 아이디 선택자(ID Selector) ex) #fruits{color: red;} 사과 2020. 6. 12.
[HTML] 블록레벨(Block level) 요소와 인라인(Inline) 요소 1.블록요소 [DIV, H1, P, ...] -사용 가능한 최대 가로너비를 사용한다. (크기지정 가능)- 기본값이 width:100%; height:0; -수직으로 쌓인다. 안녕? 를 다섯개 작성 시 수직으로 '안녕' 5개가 출력된다. -여백 개념(마진, 패딩)을 모두 자유롭게 사용 가능. 2.인라인 요소 [SPAN, IMG, ...] -필요한 만큼의 가로너비를 사용한다.(크기지정할 수 없음) ex) # 이만큼 # 이라고 하면 '이만큼'이라는 문자를 감싸는 만큼의 너비를 가진다. -수평으로 쌓인다 안녕? 을 다섯개 작성 시 수평으로 '안녕' 5개가 출력된다. -margin, padding의 top, bottom의 기능의 작동이 완벽하지 않다. 블록 요소와 인라인 요소를 서로 변경하는 방법 display:.. 2020. 5. 30.

티스토리툴바