개발자도전

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

외부 파일(CSS)과 연결하는 태그 기본 속성 선택자 특정 속성이 작성된 요소를 선택하는 선택자. id, class도 선택은 가능하지만 #, . 기호를 사용함. [작성법] : 선택자[속성명="속성값"] { CSS 코드; } 선택자는 생략 가능! 속성값에서 쌍따옴표"는 홑따옴표'로 변경하거나 생략 가능! HTML 작성 화면 - 태그별 name을 다르게 설정해줌 CSS 작성 화면 웹에서 출력된 화면 자식 선택자 ( > ) 지정된 요소 바로 하위에 존재하는 요소를 선택하는 선택자 [작성법] : 선택자1 > 선택자2 { CSS 코드; } 선택자 1 하위에 존재하는 선택자 2 요소를 모두 선택 선택자 1 == 부모 요소 / 선택자 2 == 자식 요소 HTML 작성한 코드 화면 CSS 작성한 코드 하면 웹에 출력된..

CSS Selector ( CSS 선택자) 선택자란 현재 HTML 문서 내에서 특정한 요소를 선택하는 문자 또는 문자열이다. 태그 선택자 현재 HTML 문서 내에서 같은 태그를 선택하는 선택자 [작성법] : 태그명 { CSS 코드; } HTML에 작성한 코드 화면 CSS 작성한 코드 화면 -div 태그에 실선 지정 -strong 태그에 노란색 배경색 지정 -span 태그에 분홍색 배경색 지정 웹 화면에 출력된 화면 id 선택자(#id 속성값) HTML 문서 내에서 id 속성 값이 일치하는 요소를 선택하는 선택자 id 속성 값은 페이지 내에서 유일해야 한다. 하나의 HTML 문서 내에서 중복되는 id가 존재해선 안된다. [작성법] : #id속성값 { CSS 코드; } HTML에 작성한 코드 화면 CSS 작..

CSS 코드는 style 태그에서 작성 또는 새로운 파일을 만들어 확장자를 .css로 작성해주면 된다. style 태그에서는 태그, id, 클래스 등을 이용해서 지정한다. CSS Cascading Style Sheets 종속적 스타일 시트 이다. 마크업 언어(HTML)가 실제로 화면에 표시되는 방법(모양, 색상, 크기 등)을 기술하는 언어이다. HTML 코드가 화면에 어떤 스타일로 보여질지 지정하는 언어이다. W3C(웹 표준 지정 기관)에서 CSS를 표준으로 지정했다.

block / inline 차이점 2 : 영역 지정 방식 block : 사각형 박스 형태로 지정 inline : 내부에 작성된 내용 단위로 지정 영역 지정 방식 block 형식 코드 작성 화면 웹에서 출력된 화면 영역 지정 방식 inline 형식 코드 작성 화면 웹에서 출력된 화면 block / inline 차이점 3 : 크기 지정(width, height) block : 크기 지정 가능 inline : 크기 지정 불가능 block 크기 지정 가능 코드 작성 화면 웹에서 출력된 화면 inline 크기 지정 불가능 코드 작성 화면 웹에서 출력된 화면 - width와 height를 지정해 주었어도 크기 지정은 되지 않은 채 출력됨. iframe 태그 inline 형식의 태그 웹 문서 내부에 다른 웹 문서를 ..

영역 관련 태그에는 block 형식과 inline형식이 있다. block 형식 공간을 수직 분할 한다. == 수직선을 분할한다 == 가로로 분할한다. 크기를 지정하는 css 속성인 width, height를 사용할 수 있다. 사용 가능 : p/pre(문단나누기), h1~h6(제목 영역 나누기), hr(수평선 넣어 화면 나누기), div(영역 나누기) inline 형식 공간을 수평 분할 한다 == 수평선을 분할한다 == 세로로 분할한다. 크기를 지정하는 css 속성인 width, height를 사용할 수 없다. 사용 가능 : strong/b(영역 내 글자 굵게), em/i(영역 내 글자 기울이기), mark(글자에 노란 배경), span(한 줄 내 열 나누기) block / inline의 차이점 1 : 줄..