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

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

div (Division) - : 특별한 의미가 없는 구분을 위한 요소 (block 요소) 어떠한 영역을 나눌 때 사용 문장인가? 뭐지 헷갈릴땐 그냥 div 쓰기 h1 (Heading) - : 제목을 의미 하는 요소(block 요소) 목차 역할 숫자가 커질수록 부제목 숫자가 작을 수록 중요한 제목이다. p (Paragraph) - : 문장을 의미하는 요소 (block 요소) 문장을 묶어주는 요소 ul (Unodrdered List) / li (List Item) - : 순서가 필요없는 목록의 집합을 의미(block 요소) 주관적인 순서일경우 많이 사용 - : 목록 내 각 항목 (block 요소) img (Image) - : 이미지를 삽입하는 요소 (inline 요소) 필수 속성 src: 이미지 소스의 파..

글자와 상자 요소가 화면에 출력되는 특성이며 크게 2가지로 구분 인라인 요소(글자) : 글자를 만들기 위한 요소 블록요소 (상자) : 상자(레이아웃)를 만들기 위한 요소 inline 요소 - :대표적인 인라인 요소 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도 요소가 수평으로 쌓임 줄바꿈 하게 되면 띄어쓰기가 된다 가로 세로 사이즈가 포함한 콘텐츠 크기만큼 자동으로 줄어듦 가로 세로 사이즈를 지정할 수 없다 margin, padding은 위아래 여백 추가 불가, 좌우 가능 인라인 요소 안에는 블록 요소를 사용할 수 없다 (예외가 있긴 함) 인라인 안에 인라인 가능하다 block 요소 - :대표적인 블록 요소 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도 요소가 수직으로 쌓..

- 빈태그 : 위에 태그처럼 종료태그 없이 쓰이는 태그 빈태그 종류 빈태그 쓰임새 이미지의 핫스팟 영역을 정의하고 하이퍼링크를 추가할 수 있습니다. 요소 안에서만 사용할 수 있습니다. 문서 안의 모든 상대 URL이 사용할 기준 URL을 지정합니다. 문서에는 하나의 요소만 존재할 수 있습니다. 텍스트 안에 줄바꿈(캐리지 리턴)을 생성 표의 열을 나타내며, 열에 속하는 칸에 공통된 의미를 부여할 때 사용합니다. 안에서 찾을 수 있습니다. 외부 어플리케이션이나 대화형 컨텐츠와의 통합점을 나타냅니다. 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리 문서에 이미지를 넣습니다. 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성 요소는 , , , , 과 같은 다른 메..

내용 : 부모요소 (상위, 조상 요소) - 자식 요소를 감싸고 있는 요소 : 자식 요소 (하위, 후손 요소) - 부모 요소 안에 있는 요소 부모와 자식관계는 상대적인 개념이다 한줄로 쓰면 부모와 자식 관계 찾기 찾기 어렵기 때문에 들여쓰기 하자 - 가독성과 같이 협업하는 개발자를 위해서!! 내용 내용 태그가 바라봤을 때 , : 상위(조상) 요소 태그가 바라봤을 때 , : 하위(후손) 요소 TIL keypoint 부모와 자식 관계는 상대적이다. 느낀점 -코드를 쓸때 나만 생각하는게 아니라 협업하는 사람 혹은 내 코드를 볼사람을 위해 가독성이 중요하다는 걸 알았다 오늘의 학습 만족도 ⭐⭐⭐⭐⭐