. min-width 사용- 이미지 리스트를 감싸고 있는 태그의 display 속성이 flex라면, div로 구현된 이미지창 여러 개가 죽 늘어서면서 각각의 폭이 width로 지정된 값보다 더 줄어들게 됨. min-width로 이미지창의 폭을 지정하면 이를 방지할 수 있음.. 이미지 리스트를 감싸고 있는 태그 위에 이보다 더 상위 태그를 사용해야.<div style="width:px;overflow:hi...

. 개요- 하나의 엘리먼트 태그에 적용되는 css 속성이 여럿일 경우, 이들 중 우선순위가 가장 높은 속성이 그 엘리먼트에 우선적으로 적용된다.. 우선순위) !important- css 속성 뒤에 !important를 쓰면 다른 속성이 있더라도 그 속성이 최우선으로 적용된다.) HTML 문서 내 태그 안 style 속성에 직접 정의한 속성(inline style attribute)- 예를 들어 <p st...

  설명 <header> 문서의 헤더. 로고, 제목, 검색 등. <footer> 문서의 푸터. 작성자, 저작권 등. <main> 문서의 메인 내용. 한 문서에 하나의 <main> 태그만 포함 가능. <art...

. 사용법) 외부 .css 파일을 선택적으로 적용() <link rel=”stylesheet” href=”.css 파일 경로” media=”쿼리”> 태그의 media 속성에 쿼리를 적기<link rel="stylesheet" href=".css 파일 경로" media="쿼리">() <style> 태그 안에 @import url(경로) (쿼리); 구문을 쓰기<style>...

. 개요- position 속성은 그 엘리먼트를 노드를 어떤 위치에 배치해 화면에 보여줄지를 결정하는 속성이다. 기본 속성은 static(=문서 흐름에 맞게 배치)이지만, relative, absolute, fixed, sticky 같은 속성을 주어서 그 엘리먼트가 화면에 배치되는 위치를 바꿀 수 있다.- position의 속성을 특별히 지정하지 않는다면, 그 엘리먼트에 top, bottom, left, ri...

. 개요- display 속성은 그 엘리먼트가 주변 엘리먼트와의 관계에서 어떻게 배치될지를 결정하는 속성이다. 대표적으로 block 속성과 inline 속성이 있는데, inline 속성은 ‘앞 엘리먼트와 같은 줄에 공간이 있다면 무조건 그 줄에 그 엘리먼트를 배치할 것’을 뜻하며 block 속성은 ‘앞 엘리먼트와 같은 줄에 공간이 있더라도 무조건 줄바꿈을 해 새로운 줄에 그 엘리먼트를 배치할 것’을 뜻한다.-...