vw : (viewport width) - 가로폭을 백등분한 단위 vh : (viewport height) - 세로폭을 백등분한 단위 vmax : 긴 폭을 기준으로 백등분한 단위 vmin : 작은 폭을 기준으로 백등분한 단위 vmax는 데스크탑 크기에서만 반응형 적용할 때 vmin은 모바일 기기 크기에서만 반응형 적용할 때

의미있는 이미지를 백그라운드 이미지로 등록했을 경우 html에 이미지설명을 넣어줘야한다 화면엔 보이지않되 html상에 텍스트를 남겨두기 위한 방법 text-indent: -9999px a태그 사이에 생기는 빈 여백을 없애는 방법 기본적으로 인라인요소들은 좌우배치될때 좌우기본간격이 있음 해당 간격이 margin:0px으로 수정안됨 -> 해결방법 1)html에디터에서 태그줄바꿈없이 쓰기 2)부모요소에 font-size:0을 적용 웹표준성을 위해 추가해줘야하는 속성 alt = 이미지 설명 글 title = 마우스 올렸을 때 뜨는 글 아이콘 설정시 아이콘마다 가지는 width 값이 다르기 때문에 가운에 위치하지않을 수 있음 -> 아이콘을 한번 더 감싸주어 text-align:center; 를 적용해 준다. (단..

시멘틱 태그 종류 header - h1 로고, gnb메뉴, 유틸메뉴 figure - 동영상 등의 비쥬얼적인 부분 footer - 카피라이터, 주소, 로고 등등 section - 여러 중심 내용을 감싸는 공간 article - 글자가 많이 들어가는 부분 main - 페이지에서 중요한 내용이 들어가는 부분 aside - 사이드에 위치, 부가적인 내용을 담는 부분 nav - 내비게이션 포트폴리오 만들 때 header와 footer를 깔끔하게 하는 것이 가장 중요하다. 레퍼런스 사이트를 둘러볼 때에도 두 부분을 집중해서 찾아보자.

float: left/right; ▶ float : 블록요소를 좌우로 배치 - 특정 부모요소 안에서 좌우로 배치할 요소 모두에 float 설정 - 특정 요소를 float 처리하면 부모요소는 float 요소의 높이값을 인지하지 못함 ▶ float 해제 - float 처리시 높이값을 인지하지 못하는 현상을 수정 1. 부모요소에 강제로 높이값을 지정 - 복잡한 레이아웃구조에 적합하지않음, 반응형 등 2. 부모요소에 overflow:auto; 지정 - 내부요소가 많을경우 스크롤이 생길 수 있음 3. 부모요소에 overflow:hidden; 지정 4. 부모요소에 float 지정 - 자식요소의 높이값은 인식하지만 레이아웃이 망가질 수 있음 5. float된 요소의 아래쪽에 배치되는 요소에 clear:both; 적용..

▶ 가상선택자 CSS를 이용해서 특정 블록요소 안쪽에서 가상으로 선택하는 요소 요소:: before -> 블록요소 안쪽에서 제일 앞부분에 컨텐츠를 삽입(인라인) 요소:: after-> 블록요소 안쪽에서 제일 뒷부분에 컨텐츠를 삽입(인라인) 필수 속성 값 {content:'';} 1. 화면을 동적으로 꾸며줄 때 사용 2. float을 해제할 때 사용 요소:hover -> 특정요소에 마우스를 올렸을 때 (상황)

▶ 스타일을 초기화해야 하는 이유 - 기본 HTML 요소들은 저마다의 여백 및 다양한 꾸며주기 효과가 적용되어 있으므로 작업자가 원하는 간격과 스타일을 정밀하게 적용하기 어려움 그래서 기본적으로 적용되어 있는 스타일 속성값들을 일괄적으로 초기화 진행 *{ margin: 0; padding: 0; } ul,ol { list-style: none; } a { text-decoration: none; } 인터넷에 올라와 있는 reset파일을 사용할 경우 안에 들어있는 내용을 모두 이해하기 힘들어 오류발생시 해결이 어려울 수 있다. 사용하면서 필요한 부분을 초기화하면 작업하자