시멘틱 태그는 HTML5에서 도입된 태그들로, 문서의 구조를 더 명확하게 표시하기 위해 사용한다. 단순히 스타일을 적용하기 위한 것이 아니라, 문서의 의미와 구조를 더 잘 전달해 가독성을 높여 웹 페이지의 구성을 보기 쉽게 해준다 ▼div ▷상단 --> ▷움직이는 이미지 ▷본문 ▷하단 --> ▼내비게이션 링크 ▼주제별로 구분 ▼내용넣기 ▼이미지 ▼이미지 설명 ▼중요내용 ㄴ 일부 브라우저에서 호환이되지 않아 사용안함

▼svg ▷좌표점을 이용해 모양 만들기 -일러스트로 도형을 만든 후 svg로 저장 클릭 - svg code 얻기 - 필요한 정보 빼고 지우기 (viewBox) ㄴex) 붙여넣기 ▽ ㄴex) .tree{width:400px;} .tree .st0{fill:none;stroke:#231F20;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:900; stroke-dashoffset:900; animation:tree 5s infinite;} @keyframes tree{ 0%{} 100%{stroke-dashoffset:0;} }

-pc, 태블릿, tv, 모바일.. 기기 사이즈에 맞춰 홈페이지 레이아웃이 반응하도록 제작 (css를 media쿼리에 맞게 설정) ▼기기에 맞춰 css설정 ▷@media (화면의 크기에 해당하는 조건문){ css입력 } >(min-width: --px) = (최소 넓이: --px) ㄴex) @media (min-width: 801px){ } = 넓이 801px '이상'일 때 적용 >(max-width: --px) = (최대 넓이: --px) ㄴex) @media (max-width: 800px){ } =넓이 800px '이하'일 때 적용 ㅇ ';' 입력 하지 않음 ㅇmin, max 크기가 겹치지 않게 설정 ▼이미지, 비디오 비율 유지 ▷img{object-fit:cover;} -높이값을 주고 비율을 유지..

▼form (텍스트 입력) ▷body에 , 꼭! 안에 넣기 ㄴex) ▼버튼 만들기 ▷form과 같은 부모에 button 입력 ㄴex) send ▼넓이 자동계산 ▷calc(전체 / 나눌 숫자); ㄴex) li{width:calc(100% / 4);} ▷공통 여백주기 (띄고 -'숫자') ㄴex) li{width:calc(100% / 4 - 10px);} > 100%에서 10px를 빼고 4로 나누겠다

▼background ▷배경이 적용되려면 글자또는 이미지가 태그안에 있어야함 또는 height값을 강제로 넣어야함 -background-color:#ff0 (배경색) ▷배경이미지 삽입/변경 -background-image:url ("이미지경로"); ㄴ 박스의 크기만큼 배경이 채워짐 -background-repeat:no-repeat; ㄴ배경이미지가 반복 되지 않음 -background-size:cover; ㄴ박스 이미지 큼 배경이미지 크기를 늘림 -background-position: X축 Y축; ㄴ배경 이미지 위치는 X축: left / center / right Y출 top / center bottom ㄴ배경의 위치는 키워드로 할 수도 있고 px, % 단위도 적용가능 (왼쪽 상단 기준) => 함축해서 ..

▼ favicon ▷웹 브라우저 탭에 표시되는 이미지 ▷ .ico 확장자를 사용한다 ▷웹사이트를 식별하는데 도움을 주어 사용자가 쉽게 기억할 수 있다 ▼탭에 아이콘 넣기 ▷ ㄴex) ▼시멘틱 태그 ▷의미있는 태그 - 를 로 사용 가능