CSS4 css overflow: hidden; 오버플로우란? overflowf : 넘쳐흐른다. 즉 컨텐츠요소의 크기가 너무 커서 지정된 공간을 넘쳐흐르는 경우, 어떻게 보여줄지 지정하는 태그. 적용해보기! 최소넓이 min-width: 1280px 사이즈 / height:700px 로 배경에 메인 슬라이드를 적용해보자! 여기 2000px 짜리 이미지를 적용했을때 빨간 박스보다 이미지가 커 넘치고, 스크롤이 생긴걸 볼 수 있다. 먼저 부모영역에 position:relative; 로 기준을 잡고 .container .main_slider { border: 3px solid red; height: 700px; position: relative; } 다음으로 자식영역에 position: absolute; 로 컨텐츠를 띄어준다. .container .main_slider a.. 2022. 9. 12. css magin, padding 여백주는 방법! magin / padding 차이점과 쓰임!! F12, 개발자 모드에서 볼 수 있는 margin 과 padding 값 margin : 오브젝트 바깥 여백 (오브젝트를 이동하거나, 빈 간격을 줄떄 사용) / 음수사용가능 사용법 (시계방향으로 값주기) - margin: 위, 오른쪽, 아래, 왼쪽 / 4개지정 - margin: 위, 좌우, 아래 / 3개 지정 - margin: 위 아래 좌우 / 2개 지정 - margin: 모두 (사용자제할것!) - margin:0 auto 가로가 있는 블럭 가운데 정렬할 때 * margin collapsing 마진병합 : 부모+자식이 수직방향으로 인접할 때 부모 or 자식 위,아래가 margin-top이 가장 바깥 조상에 적용됨. 형제요소가 수직 방향 인접일 .. 2022. 9. 7. css display란? (block, inline, inline-block) 블록요소 인라인 요소란? CSS block element CSS inline element - 모든 인라인 요소를 포함 할 수있다. + 블록 요소도 포함 할 수 있음 - 너비 width, 높이 height, 안쪽여백 padding, 바깥여백 magin 사용가능 - 블록 요소가 끝나는 지점에서 자동 줄바꿈됨 - 인라인 요소는 다른 인라인 요소를 포함 할 수 있다. - width, height 사용불가. line-height (높이 조절) & text-aling (텍스트 정렬) 로 사용 - 인라인 요소가 끝나는 지점에 줄바꿈 없음 - 컨텐츠가 끝나는 지점 까지의 넓이를 가짐 display : 화면의 웹페이지 레이아웃에 어떻게 나오게 할것인지 결정하는 속성태그 1. dispaly:block (상자) 2. di.. 2022. 9. 6. css before, after 가상선택자 정리 가상선택자를 왜쓸까? HTML에서 CSS class 가 지정되지 않았을경우 가상선택자를 이용해서 꾸미는게 가능하다 (맞나..?) :before, :after 특정요소의 앞(:before) 또는 뒤(:after)에 지정한 내용 (텍스트나 이미지)를 추가할 수 있음 인라인 요소로 가짜속성이기 때문에 content="" 필수 속성으로 들어감!!! (after 줄때 html에 표기하지 않고도 css의 부모 요소에 :after 삽입) 구글정의 선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있음 :link - 방문한 적이 없는 링크 :visited - 방문한 적이 있는 링크 :hover - 마우스를 롤오버 했을 때 링크로 다른 페이지로 이동한후 링크컬러 변경 a:visited {c.. 2022. 9. 4. 이전 1 다음
