Selector
-
CSS 설렉터, Pseudo Selectors, 가상설렉터이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 29. 04:55
이번시간은 레이아웃이 복잡할 때 쉽고 유용하게 쓰이는 selector, 설렉터에 대해 배워 보도록 하겠습니다. Pseudo-selector를 배우기 전에, container안에 3개의 box를 만들고, password, 비밀번호를 입력할 수 있는 입력창과 submit, 입력을 누를 수 있는 입력창을 만들어 주면, 아래와 같이, 크롬에서 확인 할 수 있습니다. 여기서, submit, 입력 버튼을 선택하고 싶다면, class 이름을 준 다음, 배경색을 지정해 줄 수 있습니다. 예를 들어, 클래스 이름은 class="submit"과 같이 설정하고, background-color=red와 같이 지정할 수 있습니다. 혼자 작업할 때는 위와 같이 작업하더라도, 별다른 문제가 생기지 않지만, 팀으로 일할 때는 혼란을..
-
CSS syntax, 구성이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 23. 05:35
이번 시간에는 CSS파일을 만든 후, CSS구성에 대해 알아보도록 하겠습니다. 그럼 제일 먼저, 마우스 오른쪽 버튼을 클릭한 후, new file을 클릭 하겠습니다. 파일명은 style.css로 작성 후 생성하면 됩니다. 이때, 확장자를 html이 아닌, css로 쓰고 있다는 점 확인하시기 바랍니다. 파일을 생성했다면, CSS의 구성에 대해 알아보겠습니다. CSS는 크게 두 부분, 1>selector와 2>property 부분으로 구성되어 있습니다. 2> property부분은 selector 내부에 쓰여지는 내용으로, property-name: value;와 같이 생겼습니다. property-name은 소문자로 써야 되고, 공백이 없습니다. 그리고 value뒤에 쌍반점, semicolon, 세미클론, ;..
-
CSS 선택자 ( selector, 셀렉터 )이거 공부 했더니 어때?/HTML & CSS & JS 2020. 9. 17. 18:19
CSS 선택자: body내 태그와 head내 style태그를 연결하거나, HTML파일과 분리된 CSS파일을 연결해 주는 연결고리. 선택자 종류 전체 선택자: 모든 태그에 적용. 태그 선택자: 문서 내 지명된 모든 태그에 적용. id 선택자: 문서 내 유일한 요소에 적용될 수 있는 id 값에 따라 적용. class 선택자: 문서 내 여러 요소에 동일하게 적용될 수 있는 클래스(class) 값(value)에 따라 적용. 속성 선택자: 태그의 속성과 그 값에 따라 적용. 자손 선택자: 내부(하위)의 모든 요소들을 선택해서 적용. 자식 선택자: 바로 안 단계(자식)의 요소들을 선택해서 적용. 가까운 형제 선택자: 동등한 위치에 있는 태그(형제) 중에 매칭되는 첫 번째 형제 하나만 선택해서 적용. 형제 선택자: ..