![]()
1. 선택자 (1) plate apple => plate 밑에 있는 모든 apple 이다. (2) plate>apple => plate 중에서 모든 apple 중에 바로 밑에 있는 apple에만 적용이 된다 (3) only child => 자기 혼자 단독으로 누군가의 자식인 경우 (4) nth-last-child() nth-child와 유사하지만 뒤에서부터 카운팅한다. (5) first-of-type 예로 수많은 사과중에서 apple:first-of-type 을 하면 사과 첫번째 선택이 된다. (6) nth-of-type() 괄호에 숫자도 가능하지만 짝수(even), 홀수 (odd)도 가능한다.
css 선택자 정리에 대해서 일반적으로 h1 { color : red; font-size:12px; } h1 => 셀렉터 { } => 선언 블록 - 기본 css 셀렉터 * html 문서 내의 모든 요소를 선택한다. - 태그 셀렉터 태그이름 지정된 태그명을 가지는 요소를 선택함 - ID 셀렉터 #id이름 id 값을 선택하는 셀렉터입니다. id는 html에 중복되어 사용할수 없다. - 클래스 셀렉터 .class이름 class값을 선택하는 셀렉터이다. class는 html문서에서 중복되어 쓸수있다. - 태그, ID, 클래스 복합 셀렉터 (1) p 태그이면서 p-tag라는 클래스값을 가지는 요소를 선택 p.p-tag { color : gray; } (2) p태그이면서 #third-line이라는 id 값을 가지는..
![]()
padding 속성 - 컨텐츠 영역과 테두리 사이의 여백 포지셔닝 postition position 속성 - 배치 방법 지정 static(기본값) -> 요소를 흐름에 맞추어 배치 relative -> 단독으로 사용할때 변화는 없다. -> static 유사함 absolute랑 같이 사용하게됨 absolute -> 원하는 위치를 지정해 배치 => 기준이 되는 값이 relative이다. fixed -> 지정한 위치에 고정해 배치 -> 스크롤내려도 그자리에 고정되어있는것 ================================================================= JavaScript => 사이트를 동적으로 만들 수 있다. 스타일시트 : 내부 스타일시트 방식 / 외부 스타일 시트 방식 자바..
![]()
html, css, 자바스크립트 세개 추가로 공부하기 1. css의 기초 CSS ( Cascading Style Sheet ) HTML -> 태그를 사용해서 뼈대를 잡고 CSS -> 태그에 디자인을 적용 예) p {text-align :center;} p-> 선택자 text-align -> 스타일 속성이름 center -> 속성 값 head 태그 안에 style 태그 넣으면됨 Document p {text-align: center; font-size: 32px;} h1 {color: orange; font-size: 16px;} * 스타일 시트 : 스타일을 한곳에 묶어 놓는 것 - 내부 스타일 시트 => 웹 페이지 내 스타일 시트를 작성 - 외부 스타일 시트 => 이걸 주로 사용많이함 => 스타일 시트 ..
