Frontend/CSS23 css 가시성 제어(overflow/visibility/display) visibility 요소를 화면에서 show/hide 시킬 수 있으며 화면에서 가려지나 그 자리는 지키고 있다. visibility:hidden; 속성값 - visible : 요소가 보임. - hidden : 요소가 보이지 않지만 공간을 잡고 있기때문에 레이아웃에 영향을 미친다. - inherit : 부모 요소의 값을 상속 display 요소를 표시하는 방법을 지정한다. display:none; 요소가 완전히 사라진다. 공간도 차지하지 않는다. overflow 자식 요소가 부모 요소의 범위를 초과할 때 어떻게 처리할지 결정해준다. overflow : hidden; 부모 요소의 범위를 넘어가는 자식요소의 부분은 보이지 않도록 처리한다. 2021. 11. 6. [CSS] vertical-align / middle 제대로 적용되는 조건 한 줄에 있는 글자들의 폰트가 달라 수직 정렬이 달라지는 경우가 생겼다. 그래서 vertical-align을 이용해 맞춰보려고 했는데 잘 안 되었고... 개발자 툴에서 여러 개의 속성을 적용하며 때려맞췄다. 이번엔 제대로 공부해서 알아보자! 1 vertical-align 이란? 인라인 블록 등을 포함한 모든 인라인요소의 수직 정렬을 위해 사용된다. 2 vertical-align의 특징 - inline이나 inline-block 요소에만 적용된다.(table-cell box에서 수직 정렬을 지정한다.) - vertical-align은 정렬하려는 요소를 다른 인라인 요소에 상대적으로 정렬한다. - 대부분의 브라우저에서 작동한다. 3 vertical-align 속성 See the Pen by yanggjoy .. 2021. 9. 30. [CSS] background-attachment background-attachment 속성 scroll - 화면 스크롤과 함께 배경 이미지도 스크롤된다. fixed - 화면이 스크롤되더라도 배경 이미지는 고정된다. 2021. 9. 26. [CSS] background-origin 속성 : 배경 이미지 배치할 기준 조절하기 background-position 속성으로 이미지를 배치할 때 origin 속성을 이용하면 유용할거같아 정리한다. 속성 값 설명 border-box 박스 모델의 가장 외곽인 테두리(border)가 기준이 된다. padding-box 박스 모덜에서 테두리를 뺀 패딩(padding)이 기준이 된다. content-box 박스 모델에서 내용 부분이 기준이 된다. 2021. 9. 26. [CSS] text-overflow로 넘치는 텍스트 표시하기 See the Pen by seyoungjoy (@seyoungjoy) on CodePen. 2021. 9. 26. [CSS] 텍스트 스타일(text-transform/text-shadow) text-transform 속성 영문자를 표기할 때 텍스트의 대,소문자를 원하는 대로 바꿀 수 있다. 이중 capitalize 속성은 몰랐는데... 시작하는 첫번째 글자를 대문자로 변환한다. capitalize - 시작하는 첫 번째 글자를 대문자로 변환한다. text-shadow 속성 text-shadow : none | See the Pen by seyoungjoy (@seyoungjoy) on CodePen. letter-spacing 자간은 가능하면 em 단위로 지정하는 것이 좋다. 그래야 바뀌는 글꼴에 맞추어 자간이 유지되기 때문이다. 2021. 9. 26. 이전 1 2 3 4 다음 반응형
