본문 바로가기

분류 전체보기164

[CSS] display : inline, block, inline-block 블록 요소(block element) 블록 요소 특징 - 모든 인라인 요소를 포함할 수 있다. - 다른 블록 요소도 일부 포함할 수 있다. - 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 된다. - width, height, margin, padding 등을 사용하여 형태를 변형해 레이아웃을 수정할 수 있다. - 블록 요소 다음에는 줄바꿈이 이루어진다. - vertical-align 적용 ❌ - text-align 적용 ❌ ※블록 요소에 text-align 적용시켜보기 블록 요소는 기본적으로 width값을 수평 전체로 잡히기 때문에 text-align이 먹히질 않는다. 그래서 해당 요소를 inline-block으로 display 속성을 바꾼 후, 그 부모요소에 text-align을 해주면 적용.. 2021. 9. 23.
[SASS] 중첩과 특수 선택자 중첩중첩은 CSS의 문법을 응용하여, 선택자나 속성의 관계를 중첩 형태로 풀어낸 문법. 규칙 중첩부모 선택자를 반복하지 않고 중첩해서 사용할 수 있다. 속성 중첩css 속성 중 네임스페이스로 묶인 속성이 있다. 예로 들면 font-, margin-....box{ font:{ family:Gothic; size:30em; weight:bold; }; margin:{ top:50px; left:40px; }; padding:{ top:20px; right:20px; };} 특수 선택자Sass는 css 선택자의 모든 형태 외에 특수 선택자를 제공한다. 부모 참조 선택자 && 키워드는 상위(부모) 선택자를 참.. 2021. 9. 22.
[SASS] 변수 선언하고 사용하기 SASS는 변수를 사용할 수 있어서, 반복적으로 사용되는 코드를 변수에 저장하고 꺼내 쓸 수 있다.수정할 때는 변수의 값만 변경하면 되므로 작업이 간단해진다. 변수 선언하기$variable-name : variable-value;예를 들어 $jb-color:red;jb-color라는 변수에 red라는 값을 저장한다. 변수 사용하기.box{ background-color:$jb-color;}   See the Pen by seyoungjoy (@seyoungjoy) on CodePen. 2021. 9. 22.
[CSS] 웹폰트 변환 사이트 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 2021. 9. 22.
[CSS] 브라우저 접두사/벤더 프리픽스/크로스 브라우징 css 표준 규약이 아닌 속성들은 브라우저에 따라 다른 방식으로 지원되기 때문에 속성 이름 앞에 접두사(prefix)를 붙여 브라우저별로 구분해야 한다. 이를 벤더 프리픽스라고 한다. 표준 규약이 만들어졌더라도 이전 버전의 브라우저 사용자를 고려해 계속 브라우저 접두사를 붙여 사용하기도 한다. 대표적인 예로 transition/transform/border-radius/text-shadow/box-shadow/background:linear-gradient 등이 있다고 하는데.. caniuse로 확인해보면 대부분 표준으로 자리잡은거 같다. 주로 사용하는 브라우저 접두사 접두사 설명 -webkit- 사파리, 크롬 - 웹키트 방식 브라우저용 -moz- 모질라, 파이어폭스 - 게코 방식 브라우저용 -o- 오페.. 2021. 9. 22.
[CSS] 캐스케이딩 스타일 시트 캐스 캐이딩(Cascading) - 위에서 아래로 흐르는 스타일 시트 HTML element는 하나 이상의 스타일에 영향을 받을 수 있다. 그래서 스타일 간의 충돌을 막기 위해 어떤 스타일을 적용 받을지에 대한 우선순위가 결정되어야 한다. 이를 캐스캐이딩이라고 한다. CSS 정식 명칭이 Cascading Style Sheets인 만큼 캐스캐이딩이 중요하다. 캐스캐이딩은 다음의 3가지에 의해 결정된다. Importance(중요도) Specificity(명시도) 코드 순서 Importance(중요도) 1 사용자 스타일 시트 저시력자, 색약자 등과 같이 특별한 조건이 필요한 사용자가 그들에게 맞게 구성해 놓은 스타일 시트. 2 제작자가 만든 스타일 스티 중 !important가 붙은 스타일 3 제작자가 만든 .. 2021. 9. 22.

티스토리툴바