신선우의 블로그 신선우의 블로그

✔️ [클래스 선택자 복습]~ 젠코딩 수업 내용 바로가기 div.div-${div-$}*7 + (tab) = div-1 ~ div-7 까지의 코드 완성. ✔️ [클래스 선택자 그룹화 복습] 수업 내용 바로가기 다른 자리에 있는 두 가지 문자를 한번에 선택할 땐 ctrl+원하는 문자 마우스로 클릭 + shift+좌방향키로 조절 ✔️ [inline- block 여백 제거 복습] 수업 내용 바로가기 div.inline-block-box _ (tab) .inline-block-box { border: 1px solid red; } ▼ 겉에 박스 선 칠하고, 작은 박스 색 칠하기 하지만 여기서는 색 박스가 한 줄에 같이 배치되지 않음. 그럼 어떻게? ▼위 코드에서 박스를 한 줄에 같이 배치되게 하기 display..

✔️ [상위 및 하위 표시에 대한 명칭] ✌ 관련 코드펜 바로가기 TIP 한 엘리먼트를 기준으로 위 : 부모엘리먼트 아래 : 자식엘리먼트 위위 : 조상엘리먼트 아래아래 : 후손엘리먼트 ✔️ [css 선택자] ✌ 관련 코드펜 바로가기 ** ">"는 자식을 나타내고, " "는 후손을 나타낸다 > : 자식 선택자 띄어쓰기 : 후손 선택자 + : 인접 동생 선택자 ㄴ 인접동생 선택자는 바로 밑에 붙어 있는 동생(엘리먼트)만 선택한다 ✔️ [상속되는 텍스트 속성] ✌ 관련 코드펜 바로가기 ✔️ [인접 동생 선택자 활용] ✌ 관련 코드펜 바로가기 바로 밑에 붙어 있는 엘리먼트만 선택됨 ✔️ [클래스 선택자] - 젠코딩(복잡한 html을 한 코드로 정리해주는 것) ✌ 관련 코드펜 바로가기 젠코딩 : " div{div..

[공통사항] 디자인을 구현하기 위해 존재하는 Html과 css. (Block과 Inline은 레이아웃을 구분해주기 위한 속성값임) Block은 한줄로 표현하기 위해 inline은 한 블럭에 작은 표현을 하기 위해 Block에 inline이라는 속성을 넣은 것이다. 한 줄에 하나씩 표현하기 위함** ** 네이버 검색창으로 보는 Block과 inline의 차이 네이버 로그인창의 나뉜 영역 부분은 Inline(나뉜 영역으로 표시됨) 상단 페이 ~ 알림 부분은 Block(한줄로 표시됨) - 한줄씩 ex. - 한줄에 같이 나오는 ex. 정리하는 방법 : 공통사항을 나열한 후 세부 사항을 적고 , 세부사항의 디테일들을 적어 나가는 연습하기 [Block과 Inline의 차이점?] Block 코드펜 바로가기 상위 엘리..

✔️Html, css, Js 용도 Html : 문서 뼈대를 담당함, 공간만 제공 ex. 이미지, 글자 등 css : Html에서생성된 공간, 이미지, 글자등을 꾸며주는 역할을 함 ex. 글자 크기,글자색, 박스크기,색 등 Js : 동적인 부분 담당 ex. 특정 레이아웃을 클릭했을 때 페이지 넘어감, x버튼 클릭하면 팝업 닫힘 😀 TIP - 숙제 제출 시 크롬 확장프로그램-확장프로그램관리-주소창에 주소 줄이기검색-다운후 상단클릭 ✔️ 태그 : 브라우저가 html 문서를 읽어들일 때 인식할 수 있도록 도와주는 용도 🌟태그 모음집 div (레이어를 구분하는 무색 무취의 용도) tab : 태그 생성 : 여는 태그 : 닫는 태그 엘리먼트 : 여는 태그와 닫는 태그 합쳐서 엘리먼트라고 칭함 ; : 나 식끝낫엉 : ..

✅ 수업 시작할 때 세팅해야 하는 페이지 1️⃣ 티스토리 : 사이트 이동하기 2️⃣ 코드펜  : 코드펜 이동하기3️⃣ 깃허브 : 깃허브 이동하기 4️⃣ 숙제 제출 시트 : 구글 시트 이동하기- 숙제 제출하는 방법 : 제출 방법 이동하기  ✅ 단축키✔️ 단축키 연습 : 코드펜 바로가기✔️ 단축키 바로가기 [24. 3. 13] 수업 내용 메모 🦾- Html 은 " {} " 필수라고 하셨음 (이에 대한 개념은 나중에 더 알려주신다고 함~)- 영타를 많이 쓸 수 있으니 틈틈히 독수리 타법이 되지 않게 영타연습하기 *   🦾 2일차 (2024. 3. 15) 수업 내용 🦾 ✔️ HTML, CSS, JS 용도 및 개념✔️ 태그와 주석의 종류/사용법✔️ 글자에 색 넣기/배경 색 설정하기✔️ 코드펜의 기본 설정값 ..

[단축키] 새탭 열기 ctrl+T url 주소 한번에 선택하기 : F6 텍스트 하이퍼링크(링크 삽입하기) : ctrl+K 글자 두껍게 만들기 : ctrl+B 화면 반으로 가르기 : 윈도우 아이콘 + 좌우 방향키 end : 커서를 문장 가장 뒤쪽으로 이동 Home : 커서를 문장 가장 앞쪽으로 이동 ctrl : 커서 단어 기준으로 이동 ctrl + end : 문단 가장 뒤쪽으로 이동 ctrl + home : 문단 가장 앞쪽으로 이동 shift : 커서 이동 시 문자 선택 ctrl + shift : 단어 선택 ctrl + A : 전체선택 ctrl + X : 잘라내기와 동시에 복사 ctrl + page up : 왼쪽 탭으로 이동 ctrl + page down : 오른쪽 탭으로 이동 ** ctrl + page ..