짱뚱짱.log

선택자(selector)란? 👉🏻요소를 선택하게 하는 이름선택자 {속성: 값;속성: 값;} 💎 기본 선택자태그 선택자(태그명) 👉🏻 같은 태그명을 모두 선택클래스 선택자(.클래스명) 👉🏻 같은 클래스를 가지는 모든 태그id 선택자(#id명) 👉🏻 한 문서 내에서 무조건 한 개만 사용(고유)💎 가상 선택자선택자:가상클래스명어떤 조건이나 상황에서 스타일을 적용하도록 만든 선택자앞에 다른 선택자가 오고, 뒤에 가상클래스 선택자가 추가로 나옴:hover 👉🏻 요소에 마우스를 올렸을 때:focus 👉🏻 요소가 포커스를 받고 있을 때:nth-child(a) 👉🏻 a번째 자식 요소 / :nth-of-type(a) 👉🏻 같은 타입 중 a번째 a번째에 해당하는 요소1 : 첫번째 요소eve..

🔷 CSShtml 요소에 스타일을 지정할 때 사용 (html만으로는 꾸미기가 어렵다)어떻게 입히느냐에 따라 적용 방법이 3가지로 나뉨. ✅ 방법 1. 인라인 스타일 (태그에 직접 작성)HTML 태그 안에 style=""로 바로 작성해당 태그 요소에만 적용재사용성이 낮음.적용되는 우선순위는 가장 높음.✅ 방법 2. 내부 스타일 (HTML 파일 안에 head 태그 안에 style 태그를 이용해당 페이지에만 적용재사용성이 중간연습할 때 자주 사용✅ 방법 3. 외부 스타일시트 (CSS 파일 따로 만들어 링크) test.html : style.css :input { width: 100px; height: 50px;}HTML과 CSS를 분리실무에서 가장 많이 쓰이는 방법여러 페이지에 적용 가능.유지보수가 편하..

✅ 시멘틱 태그와 레이아웃 태그?HTML 작성 시 가장 기본이 되는 태그들. HTML 구조를 잡을 때 사용. 📦 div: 가장 많이 쓰는 기본 박스. 영역을 만들어 주는 태그. 레이아웃을 분리하는 역할을 한다.컨테이너 역할을 하는 태그가장 많이 쓰이는 태그 (80%~) 🧠 시멘틱 웹 태그: 의미를 가진 div. 검색엔진 최적화(SEO)나 접근성 측면에서 좋음.시멘틱 태그명의미/용도사이트/페이지 상단메뉴/네비게이션 영역페이지 주요 콘텐츠 영역주제별 구역독립적 콘텐츠 블록사이드바, 광고, 링크 등 부가영역하단 정보(저작권, 연락처 등) Header tagMain tagFooter tag결과 : Header tagMain tagFooter tag">Header tagMain tagFooter tag 📏..

✅ iframe이란?또다른 창을 삽입할 때 사용브라우저 안에 다른 브라우저를 삽입리소스 사용 증가유튜브 영상, 지도, 외부 위젯 가져올 때 많이 쓰임✅ 기본 문법 src: 삽입할 웹페이지의 주소width, height: 프레임 크기 지정frameborder: 테두리 유무 (0이면 없음)✅ 결과"> ✅ 예제: 유튜브 영상 삽입✅ 결과"> ⚠️ iframe 사용시 주의사항외부 사이트가 X-Frame-Options 설정으로 막아두면 안 뜰 수도 있음보안 이슈 때문에 남용 금지예: 로그인 창, 민감 정보 입력 창에는 사용 금지너무 많이 쓰면 느려짐 → 필요한 곳에만 최소한으로 사용

table이란 ? 표를 나타내는 태그 ( 표 전체 테두리 박스)tr : 행 (하나의 행을 의미) th/td : 열 (tr안의 한칸) th : 제목열 (가운데 정렬, 굵은 글씨)td : 일반열 (왼쪽 정렬, 일반글씨) 예제- 테이블 생성- tr * 3 / td * 3*4 =12개- css에서 모양, 색, 크기, 선 지정 가능- border : 테두리 두께- borderColor: 테두리 색- width : 너비- colspan / rowspan : 셀 병합. 병합된 셀은 지워줘야 함. thead / tbody / tfoot => 순서를 바꾸어 써도 head / body / foot 순서대로 나열 HTML5 = 시멘틱 태그   이름 국어 ..