개발자도전

레이아웃 구성 요소(html 요소)를 제한된 공간 (html body 태그 == 보여지는 화면)에 효율적으로 배치하는 것(css) 마지막으로 작성된 클래스의 요소가 적용된다. 화면 배치 방법(형식) : display 속성 block : 화면을 수직 분할(행을 나눔) + width, height 사용 가능 inline : 화면을 수평 분할(한 행의 열(컬럼)을 나눔) + width, height 사용 불가능 inline-block : inline의 수평 분할 + block의 크기 조절 none : 화면에 요소가 표시되지 않으나 존재는 하고 있는 상태 flex : 요소의 정렬되는 방향, 간격을 유연하게 처리하는 형식 각 .area의 background-color를 무지개색으로 설정. block 형식의 요소(..

선택자 우선 순위 기본적으로 style태그 또는 css 파일에 작성된 순서(위->아래)대로 해석이 진행되지만 같은 요소에 여러 css 속성이 서정되는 경우 우선 순위가 적용된다. 여러 선택자를 이용해서 같은 요소에 css를 적용하더라도 지정되는 스타일이 다른 경우 모두 반영 된다. 우선순위 1순위 : !import;가 붙은 css속성 2순위 : inline-style 속성 (태그에 직접 작성하는 style 속성) 3순위 : 아이디 선택자 4순위 : 클래스 선택자 5순위 : 태그 선택자

기타 선택자 :only-child - 특정 요소의 자식이 하나밖에 없을 때 선택 HTML 작성 화면 CSS 작성 화면 웹에서 출력된 화면 :only-cihild 작성 시 같은 태그의 자식이 2개 이상이면 CSS가 적용되지 않는다 :only-of-type - 특정 요소의 자식 중 지정된 형태와 같은 자식 요소가 하나만 있을 경우 선택 HTML 작성 화면 CSS 작성 화면 웹에서 출력된 화면 :only-of-type 작성 시 같은 자식이 2개 이상이면 CSS 적용이 안됨. :empty - 자식 노드가 없는 요소를 선택 HTML 작성 화면 CSS 작성 화면 웹에서 출력된 화면 자식 노드(Node)란 : 태그, 글자, 띄어쓰기 모두를 노드라고 함. 선택자 추가 작성법 여러 선택자 동시 작성 같은 스타일을 적용하..

일반 구조 선택자 특정 요소의 자식 요소(형제 관계 요소)를 선택하는 선택자 형제 관계에 있는 요소 중 특정 요소만을 선택 :first-chid : 형제 관계의 요소 중 첫 번째 요소 :last-child : 형제 관계의 요소 중 마지막 요소 :nth-child(숫자 또는 수열) : 형제 관계 요소 중 숫자 번째 요소 또는 모든 수열번째 요소 :nth-last-child(숫자 또는 수열) : 형제 관계 요소 중 뒤에서부터 숫자 번째 요소 또는 뒤에서부터 모든 수열번째 요소 HTML 작성 화면 CSS 작성 화면 - :first-child - :last-child 웹에서 출력된 화면 - :first-child - :last-child *테스트6이 주황색으로 배경색이 칠해지지 않은 이유 : test1의 자식 ..

문자열 속성 선택자 : 속성 값의 문자열을 확인하여 스타일을 적용하는 방식의 선택자 선택자[속성명 ~= "특정값"] { CSS 코드; } 띄어쓰기로 구분되어 있는 여러 속성 값이 작성된 속성 중 속성 값이 특정 값을 단어로 포함하는 요소를 선택 선택자[속성명 |= "특정값"] { CSS 코드; } 속성 값이 특정 값을 단어로 포함하는 요소를 선택 단, "-" 기호로 구분, "-" 앞의 내용이 동일해야 함. 선택자[속성명 ^= "특정값"] { CSS 코드; } 속성 값이 특정 값으로 시작하는 요소를 선택 (^ : 캐럿) 선택자[속성명 $= "특정값"] { CSS 코드; } 속성 값이 특정 값으로 끝나는 요소를 선택 선택자[속성명 *= "특정값"] { CSS 코드; } 속성 값이 특정 값을 포함하는 요소를 ..

반응 선택자 사용자의 움직임에 반응하여 선택되는 선택자 선택자:active -> 선택된 요소를 클릭하고 있을 경우 선택자:hover -> 선택된 요소에 마우스를 올리고 내릴 경우 HTML 작성 화면 CSS 작성 화면 웹에서 출력된 :active 화면 클릭하기 전 화면 클릭한 상태의 화면 웹에서 출력된 :hover 화면 마우스를 가져가기 전 화면 마우스를 가져다 댄 화면 상태 선택자 입력 양식 관련 태그(input, input 관련 태그) 상태에 따라 선택하는 선택자 :focus -> 요소에 초점이 맞춰진 상태인 경우 선택 (input 상태) :checked -> 요소가 체크 되었을 때 선택 (radio, checkbox) :enabled -> 요소가 사용 가능한 상태일 때 선택 :disabled -> 요..