IT/HTML & CSS (5) 썸네일형 리스트형 [CSS] 수직 정렬 1. padding 값 조정 2. line-height -> 인라인 박스의 높이 지정. (한줄 짜리일 때만 수직정렬 됨) 3. position, transform: translate( ) [CSS] background-image와 img태그 (1) background-image -관리자 모드에서 사진관리 할 수 없음. -사진이 깨져도 broken image와 alt가 안나옴 -검색엔진에 노출 안됨 => 사진이 깨져도 상관이 없는 말그대로 '배경' 이미지인 경우 사용. 대체로 아이콘, 페이지의 cover이미지에 사용. (2) img 태그 -사진 로드 실패 시 broken image와 alt 보임 => 사진이 깨지면 안되고 사용자의 이해에 도움을 주는 경우 사용 [CSS] 가운데 정렬 (1) text-align 블럭 요소 내 인라인 요소에 가운데 정렬 (2) margin: auto 가로 사이즈가 지정되어 있고 block 요소에 적용 가능 (3) position: absolute 위 상황이 적용되지 않을 때 많이 사용. left: 50%을 주어 가운데로 맞추고 자기 자신의 반 값만큼 translate 해 줌 [CSS] display: inline-block 적용 후 요소 간 간격 없애기 display: inline-block; 을 적용할 경우 요소간 미세한 간격이 생기게 됨. 아래의 4가지 방법 중 하나로 이 여백을 없앨 수 있다. 1. HTML에서 해당 부분을 줄내림 없이 한줄로 마크업한다. ★2. 컨테이너 박스에 font-size: 0; 을 적용하고 여백을 없앤 요소에 font-size: px; 를 재정의 해줌 3. HTML의 태그에서(문제가 발생하는 부분) 닫는 태그를 생략한다. 4. 음수마진을 사용한다. (IE6, 7에서는 문제 발생 가능) 두번째 방법이 가장 적합한 방법이라 생각. [CSS] width: 100%, auto 차이 width: 100% (=쓸 수 있는 만큼 다 써라) 마진, 패딩, 보더 영역 모두 포함 포함하지 않는 방법은 box-sizing: border-box; 보더, 마진에 다라 스크롤바 생길 수 있음 width: auto (=알아서 적당히 조절해라) 블록 요소의 초기값으로 자동 설정됨 마진, 패딩, 보더영역 포함x. 보더, 마진 값을 조절하여 스크롤바 생성 x => box의 display 값 or 요소가 사용된 맥락에 따라 달라짐 display 값에 따라 달라지는 경우 - block: 기본으로 100% 니까 auto=100% - inline-block: 자신이 가진 컨텐츠 길이만큼 auto - inline: widht 설정이 불가능하므로 항상 100% 맥락에 따라 달라지는 경우 -absolute, fixed.. 이전 1 다음