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

가상클래스 선택자 (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 쓸때는 들여 쓰기와 줄 바꿈은 필수 느낀 점 그냥 모르고 썼을때 보다 뭔가 아하 이렇게 읽는 거였구나 알게 됨 오늘의 학습 만족도 ⭐⭐⭐⭐⭐

display display : 요소의 화면 출력(보여짐) 특성 block 상자 요소 = div 태그 inline 글자 요소 = span 태그 inline-block 글자 + 상자 요소 => 각 요소에 이미 지정되어 있는 값 flex 플렉스 박스 (1차원 레이아웃) grid 그리드 (2차원 레이아웃) none 보여짐 특성 없음 화면에서 사라짐 => 따로 지정해서 사용하는 값 기타 table table-row table-cell TIL display는 각 속성마다 이미 기본값이 지정되어 있다. 느낀점 내가 원하는 레이아웃 만들시 많이 사용하는 속성이라 반가움 오늘의 학습 만족도 ⭐⭐⭐⭐⭐

box-sizing box-sizing : 요소의 크기 계산 기준을 지정 content-box : 요소의 내용(content)으로 크기 계산 (기본값) border-box 요소의 내용 + padding + border로 크기 계산 코드펜 예제 HTML 삽입 미리보기할 수 없는 소스 TIL key point box-sizing 기본값은 content-box이다 컨텐츠 포함해서 계산하기때문에 일일이 계산 하기보다는 border-box를 이용하기 느낀점 box-sizing 사용은 유용해서 과제시나 프로젝트시 잘 사용할거 같다 오늘의 학습 만족도 ⭐⭐⭐⭐⭐

border-radius - border-radius : 요소의 모서리를 둥글게 깎음 0 : 둥글게 없음 단위 : px em vw 단위로 지정 코드펜 예시 HTML 삽입 미리보기할 수 없는 소스 각각의 모서리에 정 원를 생성해서 그 원의 반지름이 10px 되도록 배치한다. 배치된 만큼의 둥근 부분을 전부다 삭제해 버리는 것 특정한 모서리만 깎길 원한다면 border-radius : 0 10px 10px 0 (시계방향으로 적용된다) TIL key point border-radius 반지름 기억하자 오늘의 학습 만족도 ⭐⭐⭐⭐⭐