개발 일기

visibility 요소를 화면에서 show/hide 시킬 수 있으며 화면에서 가려지나 그 자리는 지키고 있다. visibility:hidden; 속성값 - visible : 요소가 보임. - hidden : 요소가 보이지 않지만 공간을 잡고 있기때문에 레이아웃에 영향을 미친다. - inherit : 부모 요소의 값을 상속 display 요소를 표시하는 방법을 지정한다. display:none; 요소가 완전히 사라진다. 공간도 차지하지 않는다. overflow 자식 요소가 부모 요소의 범위를 초과할 때 어떻게 처리할지 결정해준다. overflow : hidden; 부모 요소의 범위를 넘어가는 자식요소의 부분은 보이지 않도록 처리한다.

한 줄에 있는 글자들의 폰트가 달라 수직 정렬이 달라지는 경우가 생겼다. 그래서 vertical-align을 이용해 맞춰보려고 했는데 잘 안 되었고... 개발자 툴에서 여러 개의 속성을 적용하며 때려맞췄다. 이번엔 제대로 공부해서 알아보자! 1 vertical-align 이란? 인라인 블록 등을 포함한 모든 인라인요소의 수직 정렬을 위해 사용된다. 2 vertical-align의 특징 - inline이나 inline-block 요소에만 적용된다.(table-cell box에서 수직 정렬을 지정한다.) - vertical-align은 정렬하려는 요소를 다른 인라인 요소에 상대적으로 정렬한다. - 대부분의 브라우저에서 작동한다. 3 vertical-align 속성 See the Pen by yanggjoy ..

background-attachment 속성 scroll - 화면 스크롤과 함께 배경 이미지도 스크롤된다. fixed - 화면이 스크롤되더라도 배경 이미지는 고정된다.

background-position 속성으로 이미지를 배치할 때 origin 속성을 이용하면 유용할거같아 정리한다. 속성 값 설명 border-box 박스 모델의 가장 외곽인 테두리(border)가 기준이 된다. padding-box 박스 모덜에서 테두리를 뺀 패딩(padding)이 기준이 된다. content-box 박스 모델에서 내용 부분이 기준이 된다.

See the Pen by seyoungjoy (@seyoungjoy) on CodePen.

text-transform 속성 영문자를 표기할 때 텍스트의 대,소문자를 원하는 대로 바꿀 수 있다. 이중 capitalize 속성은 몰랐는데... 시작하는 첫번째 글자를 대문자로 변환한다. capitalize - 시작하는 첫 번째 글자를 대문자로 변환한다. text-shadow 속성 text-shadow : none | See the Pen by seyoungjoy (@seyoungjoy) on CodePen. letter-spacing 자간은 가능하면 em 단위로 지정하는 것이 좋다. 그래야 바뀌는 글꼴에 맞추어 자간이 유지되기 때문이다.

블록 요소(block element) 블록 요소 특징 - 모든 인라인 요소를 포함할 수 있다. - 다른 블록 요소도 일부 포함할 수 있다. - 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 된다. - width, height, margin, padding 등을 사용하여 형태를 변형해 레이아웃을 수정할 수 있다. - 블록 요소 다음에는 줄바꿈이 이루어진다. - vertical-align 적용 ❌ - text-align 적용 ❌ ※블록 요소에 text-align 적용시켜보기 블록 요소는 기본적으로 width값을 수평 전체로 잡히기 때문에 text-align이 먹히질 않는다. 그래서 해당 요소를 inline-block으로 display 속성을 바꾼 후, 그 부모요소에 text-align을 해주면 적용..

https://transfonter.org/ Online @font-face generator The @font-face CSS rule allows web developers to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their transfonter.org

css 표준 규약이 아닌 속성들은 브라우저에 따라 다른 방식으로 지원되기 때문에 속성 이름 앞에 접두사(prefix)를 붙여 브라우저별로 구분해야 한다. 이를 벤더 프리픽스라고 한다. 표준 규약이 만들어졌더라도 이전 버전의 브라우저 사용자를 고려해 계속 브라우저 접두사를 붙여 사용하기도 한다. 대표적인 예로 transition/transform/border-radius/text-shadow/box-shadow/background:linear-gradient 등이 있다고 하는데.. caniuse로 확인해보면 대부분 표준으로 자리잡은거 같다. 주로 사용하는 브라우저 접두사 접두사 설명 -webkit- 사파리, 크롬 - 웹키트 방식 브라우저용 -moz- 모질라, 파이어폭스 - 게코 방식 브라우저용 -o- 오페..

캐스 캐이딩(Cascading) - 위에서 아래로 흐르는 스타일 시트 HTML element는 하나 이상의 스타일에 영향을 받을 수 있다. 그래서 스타일 간의 충돌을 막기 위해 어떤 스타일을 적용 받을지에 대한 우선순위가 결정되어야 한다. 이를 캐스캐이딩이라고 한다. CSS 정식 명칭이 Cascading Style Sheets인 만큼 캐스캐이딩이 중요하다. 캐스캐이딩은 다음의 3가지에 의해 결정된다. Importance(중요도) Specificity(명시도) 코드 순서 Importance(중요도) 1 사용자 스타일 시트 저시력자, 색약자 등과 같이 특별한 조건이 필요한 사용자가 그들에게 맞게 구성해 놓은 스타일 시트. 2 제작자가 만든 스타일 스티 중 !important가 붙은 스타일 3 제작자가 만든 ..