🌱 → 🌳

https://gregarious-scone-7e095a.netlify.app/ Starbucks Korea 나이트로 콜드 브루 나이트로 커피 정통의 물결치듯 흘러내리는 캐스케이딩과 부드러운 크림을 경험하세요. gregarious-scone-7e095a.netlify.app 아직 header까지 밖에 구현하지 못했지만 조만간 홈 페이지 전체를 clone할 예정이다

앞으로 배울 CSS 속성 박스 모델 글꼴, 문자 배경 배치 플렉스(정렬) 전환 변환 띄움 애니메이션 그리드 다단 필터 📌 박스 모델 글자와 상자 : 요소가 화면에 출력되는 특성, 크게 2가지로 구분 인라인(inline) 요소: 글자를 만들기 위한 요소들 블록(block) 요소: 상자(레이아웃)를 만들기 위한 요소들 ✅ Inline 요소 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도 span tag: 글자를 쓰기 위한 가로 공간 확보 해주는 빈 tag에 가까움 요소가 수평으로 쌓임 ✅ Block 요소 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 요소 ✅ Inline-Block block 요소가 수직으로만 쌓이는 문제점을 해결하고자 나온 개념 디자인이 중요시 되면서 가로로 블..

📌 CSS SELECTOR ✅ 기본 선택자 전체 선택자 (*) 태그 선택자 (tag) class 선택자 (.) id 선택자 (#) ✅ 복합 선택자 일치 선택자 ABCXZY 선택자 ABC와 XYZ를 동시에 만족하는 요소 자식 선택자 ABC>XYZ 선택자 ABC의 자식 요소 XYZ 선택 후손 선택자 ABC XYZ 선택자 ABC의 하위 요소 XYZ 선택('띄어쓰기' 중요!) 인접 형제 선택자 ABC+XYZ 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택 일반 형제 선택자 ABC~XYZ 선택자 ABC의 다음 형제 요소 XYZ 모두를 선택 ✅ 가상 클래스 선택자(Pseudo-classes) 사용자의 행동에 따라 변화하는 가상 상황에 따라서 요소 선택 시 각 요소의 상황에 따라 사용자가 원하는 요소를 선택 할 ..

📌 CSS 상속 ✅ 스타일 상속 자식 요소가 별도의 style 속성이 없을 경우, 부모의 속성 값을 그대로 상속하는 CSS 특성 (단, 상속이 되는 속성과 상속이 안되는 속성으로 구분) ✅ 상속되는 CSS 속성들 모두 글자/문자 관련 속성들(주의: 모든 글자/문자 속성은 아님) font-style: 글자 기울기 font-weight: 글자 두께 font-size: 글자 크기 link-height: 줄 높이 font-family: 폰트(서체) color: 글자 색상 text-align: 정렬 .. ✅ inherit 강제 상속 : 자동 상속 되지 않는 속성 값을 강제로 부모의 CSS 속성값을 그대로 상속하게 하는 방법 ✅ 선택자 우선 순위 참조 방식 우선 순위와는 다른 개념임 같은 HTML 요소가 여러 선택..

📌 Tag 선택 메뉴(드롭 다운)을 만드는 태그 : select 폼 생성 name: select : select 폼의 옵션 값 생성 value: 실제적으로 전달되는 값(컴퓨터가 읽는 값) selected: 최초에 선택된 값으로 설정 disabled: 옵션은 보이지만 선택을 못하도록 설정 : option을 그룹화 label: optgroup 이름 설정 예시 코드 black sliver skyblue pink

📌 질문 (오류 발생) codingon 과제를 하던 중 질문이 발생하였다. 과제는 div와 span tag를 이용하여 2022 7월 달력 만들기 위 사진에서 같은 span tag에 display:inline-block; 했는데 text값이 들어간 span은 아래로(위에 빈칸 발생), text값이 들어가지 않은 span은 위로 붙어서(아래 빈칸 발생) text가 있는 span과 없는 span이 같이 들어간 div칸만 height가 커져있음 뭐가 문제일까 해결 방법이 뭘까 📌 해결 방법 span 요소의 기본 속성인 vertical-align 속성이 base-line 으로 설정이 되어있기 때문에 발생하는 문제였다. 즉, span 요소의 경우 수직 정렬을 글자의 base-line 에 맞추어서 수직 정렬이 일어나..

📌 HTML 구조 tag 메타 데이터를 포함하기 위한 태크 title : HTML 문서의 제목 style: HTML 문서의 style 정보 정의 link: 외부 리소스와의 연결 정보를 정의(CSS 파일 연계 등) script: JavaScript 정의 meta: 페이지 설명, 키워드, 저자, 화면 크기 등의 정보(주로 브라우저 또는 검색 엔진에서 사용) tag HTML 문서의 내용을 담는 태그 📌 Tag 속성 type : 말머리 기호 변경 start: 시작 값 변경 reversed: 역순으로 시작 속성 target: 링크 된 문서를 열었을 때 문서가 열릴 위치 표시 현재는 div 사용을 더 많이 함 (table 사용 빈도 하락) : 표를 감싸는 태그 : 표 내부의 행 : 표 내부의 제목 칸 : 행 내부의..

Container container 속성값들 display flex-direction flex-wrap flex-flow justify-content flex-start: 요소들을 컨테이너의 왼쪽으로 정렬 flex-end: 요소들을 컨테이너의 오른쪽으로 정렬 center: 요소들을 컨테이너의 가운데로 정렬 space-between: 요소들 사이에 동일한 간격을 둠 space-around: 요소들 주위에 동일한 간격을 둠 align-items align-content Item item 속성 값들 order: item 순서 flex-grow : 고유한 사이즈 유지(0), 박스에 맞도록 변경(1) flex-shrink: container size 작아질 때 어떻게 작아질지 설정 flex-basis: item이..