주니어 개발자가 되고 싶은 미짱

속성 선택자(Attribute) [Attr] : 속성을 포함한 요소 선택 속성 선택자를 사용할 때 사용하는 특수 기호는 [](대괄호 square brackets) 밑에 예제로 이해보자 disable이라는 속성에 red 색상을 부여 HTML 삽입 미리보기할 수 없는 소스 [type]에 orange 부여 HTML 삽입 미리보기할 수 없는 소스 [type ="value"] : 속성의 해당 값이 있는 요소 선택 HTML 삽입 미리보기할 수 없는 소스 TIL keypoint html 속성 및 속성값을 찾아서 css로 변경가능하다 느낀 점 페이지 컨셉에 맞는 부분을 해당 부분으로 스타일 할수 있다는 걸 알았다 오늘의 학습 만족도 ⭐⭐⭐⭐⭐

가상요소 선택자(Pseudo-Elements) 가상요소 선택자: 가상의 요소를 선택하는 선택자 콜론 하나도 적용되나 웹표준을 지키기위해서는 :: 콜론 두개를 사용하는 걸 권장 ::before ::before : 선택자 요소의 내부앞에 내용(content)을 삽입 삽입되는 내용은 inline요소 content 속성은 꼭 작성해야한다(글자 안넣고 가상요소 어떤걸 만들때 content:"";) 코드펜 예제 HTML 삽입 미리보기할 수 없는 소스 ::after ::after: 선택자 요소 내부 뒤에 내용(content)을 삽입 삽입되는 내용은 inline요소 content 속성은 꼭 작성해야한다(글자 안넣고 가상요소 어떤걸 만들때 content:"";) 코드펜 예제 HTML 삽입 미리보기할 수 없는 소스 TIL..

:first-child :first-child : 선택자가 형제 요소 중 첫째라면 선택 코드펜 예시 HTML 삽입 미리보기할 수 없는 소스 :last-child :last-child : 선택자가 형제 요소 중 막내라면 선택 코드펜 예시 HTML 삽입 미리보기할 수 없는 소스 :nth-child(n) :nth-child(n) : 선택자가 형제 요소중 (n)째라면 선택 n은 0 부터 시작(Zero-Based Numbering) - 2n 이런 식으로 넣을 경우 2의 배수 번째만(2처럼 다른 숫자도 올 수 있다) - 2n+1 홀수 번째만 - n+2 1번째 자식 제외 하고 나머지 선택 코드펜 예시 HTML 삽입 미리보기할 수 없는 소스 :not() :not(selector): 선택자가 아니니 요소 선택 코드펜 예..

가상클래스 선택자 (Pseudo-Classes) 가상클래스 선택자: 사용자가 어떠한 행동을 했을 때 요소가 동작하게 하는 선택자 가상 클래스 선택자 기호는 : (콜론) :hover :hover: 선택자 요소에 마우스 커서가 올라가 있는 동안 선택 코드펜 예제 HTML 삽입 미리보기할 수 없는 소스 :active :active : 선택자 요소에 마우스를 클릭하고 있는 동안 선택 코드펜 예제 HTML 삽입 미리보기할 수 없는 소스 :focus :focus : 선택 요소가 포커스 되면 선택 focus가 될 수 있는 요소는 html 대화형 콘텐츠에 해당(input, a, button, label, select) 아니더라도 적용되게 하는 속성 tabindex를 사용하면 focus 적용가능 (tabindex는 대화..

복합 선택자 복합선택자 : 기본선택자 4개를 조합해서 사용한다. 일치 선택자 (Basic Combinator) 일치 선택자: 기본 선택자 4개 중 2개를 이용하여 붙여서 사용 ex) tag name.class name or tag name id name (코드펜 예시 보면 이해됨) 선택자 2개를 동시에 만족시키는 요소를 선택 태그 선택자 같은 경우 기호가 없기 때문에 구분할 수 없음으로 클래스(id)와 태그 선택자를 쓸 경우 브라우저가 인식을 못해서 사용 시 태그 우선 클래스는 후순위로 쓴다 붙여쓰기가 일치 선택자 중요한 부분 코드펜 예시 - 같은 이름에 클래스가 있어도 선택자 li 태그 선택자도 만족시키는 요소를 선택해 style 변경이 되었다. HTML 삽입 미리보기할 수 없는 소스 자식 선택자(Ch..

css 선택자에는 기본적으로 5가지가 있다 기본 복합 가상 클래스 가상 요소 속성 기본 선택자 * 전체 선택자(Universal Selector) * (별표시/ 에스터리스크) : 모든 요소를 선택 단독으로 사용하지 않고 복합 선택자를 통해서 어떤 범위 안에서 있는 모든 요소를 선택하는 개념으로 사용 코드펜 예시 -모든 요소가 선택되어 빨강으로 변함 HTML 삽입 미리보기할 수 없는 소스 tag name 태그 선택자(Type Selector) tag name : 태그 이름이 해당 태그인 경우 요소 선택 별다른 기호 없이 태그이름 있을 시 코드펜 예시 - li 태그 요소만 선택되어 글자가 빨강으로 변함 HTML 삽입 미리보기할 수 없는 소스 .class name 클래스 선택자(Class Selector) ...

내장 방식 의 내용(Contents)으로 스타일을 작성하는 방식 링크 방식 로 외부 css 문서를 가져와서 연결하는 방식 (병렬연결 방식 ) html 안에 쓰고 // main.css 파일 div { color: red; margin: 20px; } 인라인 방식 요소의 style 속성에 직접 스타일 작성하는 방법(선택자 없음 ) Hello @import 방식 css의 import 규칙으로 css 문서 안에서 또 다른 css 문서를 가져와 연결하는 방식 (직렬연결 방식) 연결이 직렬 방식이라 조금 늦을 수 있다 /*main.css*/ import url("./box.css") div { color: red; margin: 20px; } /*box.css*/ .box { background-color: red..

css 기본 문법 선택자 { 속성: 값;} 선택자 : 스타일(css)을 지정할 대상(Selector) 속성 : 스타일의 종류(Property) 값 : 스타일(css)의 값(Value) - 해석할 때 : : 콜론 부분은 ~은 ;세미콜론부분은~ 이다 선택자는 속성은 값이다 ex) div { color: red; } div 태그 선택자는 컬러는 레드다 중괄호의 시작은 스타일 범위의 시작이며 중괄호의 끝은 스타일 범위의 끝이다 들여 쓰기와 줄 바꿈은 가독성, 유지보수를 위해서 해야 한다 /* */ 주석 ctrl + / 맥은 cmd + / keypoint css 쓸때는 들여 쓰기와 줄 바꿈은 필수 느낀 점 그냥 모르고 썼을때 보다 뭔가 아하 이렇게 읽는 거였구나 알게 됨 오늘의 학습 만족도 ⭐⭐⭐⭐⭐