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

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

▼transform (변형) >크기(scale), 이동(translate), 회전(rotate), 기울기(skew) 변형 가능 ▷크기 (scale) -scale('숫자') > 숫자만큼 ''커짐 ㄴex) .box1{transform:scale(2);} > 두배로 커짐 -scaleX('숫자') > X축만 커짐 ㄴex) .box1{transform:scaleX(2);} > X축만 두배로 커짐 -scale('소수점') > 숫자만큼 ''줄어듦 ㄴex) .box1{transform:scale(0.5);} > 반으로 줄어듦 -scale('숫자, 숫자') > 가로, 세로 비율이 다르게 커짐 ㄴex) .box1{transform:scale(1.2, 2);} > 가로는 1.2배 세로는 2배 커짐 ▷이동 (translate..

▼전체 높이 채우기 ▷vw = View Width ▷vh = View Height -보이는 홈페이지 높이를 모두 채우기 ㄴex) .element{width:100%; height:100vh;} ▼header에 margin ▷header에 margin을 주면 배경 이미지도 같이 내려온다 -배경이미지(부모)의 높이는 자식의 높이에 영향을 받는다 -header(자식)이 내려오면 배경이미지(부모)도 같이 내려온다 -거리를 두고 싶다면 margin이 아닌 padding으로 벌리기 ▼글자 정렬 ▷홈페이지 전체적으로 중앙에 위치하고 정렬을 하고 싶을 때 -정렬하고자 하는 태그에 같은 width 값을 주고 -margin:0px auto; 적용 ▼박스크기 조절 ▷boder는 크기에 영향을 줌 -외곽선이 생겨 선굵기 만큼..

▼구글 아이콘 -구글에 '구글 아이콘' 검색 -원하는 아이콘 선택 -Static icon font 복사 > head에 붙여넣기 -Inserting the icon 복사 > body 적용하고 싶은 곳에 붙여넣기 ▷아이콘 꾸미기 -가져온 icon class 뒤에 한칸 띄고 class 이름 붙이기 ㄴex) "기존이름 새로운이름" -이미지가 아닌 글자로 적용되어 색상변경 가능 ▼우선순위 높이기 ▷우선순위 높이고 싶은 태그 뒤에 !important 입력 ㄴex) font-size:40px!important;

▼이미지와 글자를 이동 ▷position -position:relative - 움직이는박스의 부모 -position:absolute - 움직이는 박스에 적용 -position:fixed - 현재 화면에 고정 -좌표: left / right / top / bottom ▷relative -크기를 인식할 수 있어 자리를 차지함 -위치값을 줄 수 있음 (top, bottom, left, right) -absolute가 움직이는 범위의 기준이됨 ▷absolute -relative 속성을 준 원하는 태그안에 있도록 구조를 짜야함 -공중에 떠 있는 상태로 (블록요소가 아님) 크기가 인식안됨 -absolute시 범위를 인지하지 못함, 직접 크기를 줘야함 -위치값을 줄 수 있음 (top, bottom, left, rig..