728x90 반응형 웹UI/HTML_CSS26 HTML/CSS - 이미지 정렬, 이미지의 일부만 노출 ** f12 혹은 ctrl + shift + i 로 개발자 도구를 열 수 있다 1) div태그 내에 이미지 삽입 시 여백이 생기는 경우 display: block; - (이미지는 기본적으로 inline) vertical-align: bottom; - (인라인 요소의 기준선을 bottom으로 설정) 2) 페이지 축소 시 메인 이미지가 중앙이 아닌 좌로 정렬될 경우 display: block; margin: 0 auto; 3) 설정된 크기의 영역보다 큰 이미지를 삽입해야할 경우 overflow: hidden; - 영역 내 이미지만 보이게 -> 영역 태그에 작성 transform: translate(0, 0); - 이미지 위치 조절 -> 삽입된 곳 : (0, 0) 을 기준으로 + or - 부호로 조절 2021. 3. 18. HTML/CSS - CSS float과 inline block (블록 스타일을 위로 정렬) display inline-block -> 영역을 inline style의 block으로 설정하여 block스타일을 유지하면서 공백이 삭제된다 float left, right -> float은 해당 영역 이후를 3차원화하여 공백 영역을 삭제한다 (겹치는 부분 발생) **inline-block의 경우 border가 각각 생성되어 겹치는 영역의 border가 2배가 되기 때문에 float:left를 사용하여 border의 선이 겹치게 해주면 편리함 clear both -> claer가 적용된 영역부터 float 해제 큰 테두리 안의 작은 영역들에 float을 주면 테두리 밖 영역에는 영향을 미치지 않는 것 같다 반대의 경우로, 큰 영역에 float 설정 시에도 내부에 영향을 미치지 않는 것 같다 생각대로 위.. 2021. 3. 11. 2021.03.10) HTML/CSS - css속성 overflow, boxsizing 등 학교소개 교육과정 취업정보 커뮤니티 상담신청 #header > #container > #gnb > li > a 에서 a의 높이를 키우면 상위 div태그도 함께 height가 늘어날줄 알았지만 커지지 않았다 a태그의 높이는 106이지만 header와 container는 height가 각각 90으로그대로였다 css파일에서 #container { overflow: hidden; }overflow visible: 기본 값, 상자 밖으로 컨텐츠가 보여진다 hidden: 영역을 초과하는 부분을 숨긴다 ( 겹쳐진 부분 없이 영역 분리 후 적용 되는듯) scroll: 초과하는 컨텐츠는 숨기고 스크롤이 생긴다 (가로/세로 모두) auto: 영역을 초과할 경우 스크롤 바가 생긴다 (넘치는 영역에만 생성) -> 영역을 초과.. 2021. 3. 10. 2021.03.09) HTML/CSS - block style css의 float 속성 float 속성 block style 태그에 float을 줄 경우 block은 그대로 유지되고 inline속성만 딸려온다 -> 같은 float이 적용된 block도 영역을 할당 받을 수 있음 2021. 3. 9. 이전 1 2 3 4 5 6 7 다음 728x90 반응형
