개발자도전

상하 분할 상하 분할 시 필요한 요소들 감싸고 있는 영역 요소 내부를 분할할 요소 display : block 크기 지정 단위(px, %) HTML 작성 화면 - 상하 2분할 CSS 코드 작성 웹에서 출력된 화면 HTML에서 작성된 화면 - 상하 3분할 CSS 작성 화면 웹에서 출력된 화면 좌우 분할 좌우 분할 시 필요한 요소들 감싸고 있는 영역 요소 내부를 분할할 요소 dispaly : inline-block 크기 지정 단위(px, %) HTML 작성 화면 - 좌우 2분할 CSS 작성 화면 웹에서 출력된 화면 - class="area3"에는 노란색 배경색 class="area4"에는 초록색 배경색이 지정되어 있음. display: none / dispaly: hidden 화면에 요소가 표시되지 않으나 ..

레이아웃 구성 요소(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 코드; } 속성 값이 특정 값을 포함하는 요소를 ..