*background 속성 안에 기입되는 속성값 중 center의 의미 :
- 첫번째 center는 x축을 기준으로 가운데 정렬
- 두번째 center는 y축을 기준으로 가운데 정렬
if, 만약 100px, 100px이렇게 입력한다면, x축으로부터 100px 떨어진 곳,
y축으로부터 100px떨어진 곳부터 이미지를 노출하겠다는 의미!
| display 속성을 inline 혹은 inline-block 으로 변경할 때, 발생하는 Margin에 대하여 (0) | 2023.03.04 |
|---|---|
| CSS에서 calc( ) 함수에 대하여 (0) | 2023.03.02 |
| 스타일 시트 CSS접두어 -webkit의 의미 (0) | 2023.03.02 |
| backdrop-filter (0) | 2023.03.02 |
| display : inline-flex 에 대하여 (0) | 2023.03.02 |
1.상황 :
- 세로로 나열되어 있는 요소들을 가로로 배열하기 위해서 display 속성을 inline 혹은 inline-block으로
변경해야 하는 경우가 발생!
2.문제점 :
- 가로로 변경은 되었으나, 2줄로 변경!
- 그 이유는 display의 속성값이 변경되면서 각각의 요소들 사이에 기본적인 margin 값이
들어가서 입니다.
3.해결방법 :
- margin-right 값을 해당 요소들 개수만큼 - (*음수) 처리해주기!
*참고사이트 :
https://www.codingfactory.net/10814
CSS / display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법
inline 또는 inline-block의 여백 display 속성값으로 inline 또는 inline-block으로 정하면 요소들이 가로로 배열됩니다. 이 때 요소와 요소 사이에 여백이 생깁니다. 예를 들어 다음과 같이 순서 없는 목록
www.codingfactory.net
| background 속성 내 center값 관련 (0) | 2023.03.25 |
|---|---|
| CSS에서 calc( ) 함수에 대하여 (0) | 2023.03.02 |
| 스타일 시트 CSS접두어 -webkit의 의미 (0) | 2023.03.02 |
| backdrop-filter (0) | 2023.03.02 |
| display : inline-flex 에 대하여 (0) | 2023.03.02 |
calc( ) 함수는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수
*참고사이트
https://www.codingfactory.net/10373
CSS / calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수
개요 calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수입니다. 예를 들어 font-size: calc( 10px + 10px ); 는 글자 크기를 20px로 만듭니다. 버전 : CSS Level 3 문법 연산자 +는 덧셈, -
www.codingfactory.net
| background 속성 내 center값 관련 (0) | 2023.03.25 |
|---|---|
| display 속성을 inline 혹은 inline-block 으로 변경할 때, 발생하는 Margin에 대하여 (0) | 2023.03.04 |
| 스타일 시트 CSS접두어 -webkit의 의미 (0) | 2023.03.02 |
| backdrop-filter (0) | 2023.03.02 |
| display : inline-flex 에 대하여 (0) | 2023.03.02 |
*CSS 속성 중 접두어를 붙어야 하는 경우 있음.
각 접두어 의미 :
참고사이트 :https://mainia.tistory.com/3671
스타일 시트 CSS 접두어 webkit, moz, ms, o 의미
웹에서 CSS 를 적용할 때 webkit, moz, ms, o 접두어가 속성앞에 붙은 것을 종종 보실 수 있을 겁니다. 크로싱 브라우저를 위해서 필요하기 때문입니다. 주로 쓰이는 브라우저는 IE, 크롬, 파이어폭스,
mainia.tistory.com
| display 속성을 inline 혹은 inline-block 으로 변경할 때, 발생하는 Margin에 대하여 (0) | 2023.03.04 |
|---|---|
| CSS에서 calc( ) 함수에 대하여 (0) | 2023.03.02 |
| backdrop-filter (0) | 2023.03.02 |
| display : inline-flex 에 대하여 (0) | 2023.03.02 |
| SVG 이미지 파일에 대하여 (0) | 2023.03.02 |
1.backdrop-filter 정의 :
- 요소 뒤에 흐릿하게 흐림효과를 주거나, 다양한 색상 필터링 효과를 줄 때 사용 가능
- blur(n px) : n숫자가 커질수록 흐림효과가 커짐
https://homzzang.com/b/css-259
홈짱닷컴
홈페이지 제작, 그누보드 강의, 웹코딩, HTML, CSS, JAVASCRIPT, JQUERY, PHP, SQL
homzzang.com
| CSS에서 calc( ) 함수에 대하여 (0) | 2023.03.02 |
|---|---|
| 스타일 시트 CSS접두어 -webkit의 의미 (0) | 2023.03.02 |
| display : inline-flex 에 대하여 (0) | 2023.03.02 |
| SVG 이미지 파일에 대하여 (0) | 2023.03.02 |
| display : grid에 대하여 (0) | 2023.03.02 |
정의 :
- 부모 요소인 컨테이너에 사용하는 스타일 속성
부모요소가 inline-flex속성이 된다면, 자식 요소에도 inline-flex요소가 적용이 된다.
참고사이트 :
https://rgy0409.tistory.com/4813
CSS display: flex 그리고 inline-flex
인터넷 익스플로러도 망한 마당에 이제 HTML의 블록 요소들의 배치가 좀 더 자유로워졌습니다. display: flex; 에 의해서 가능해진 것입니다. 이제 flex(플렉스) 정렬 방법에 의해서 간격이든, 가로 정
rgy0409.tistory.com
| 스타일 시트 CSS접두어 -webkit의 의미 (0) | 2023.03.02 |
|---|---|
| backdrop-filter (0) | 2023.03.02 |
| SVG 이미지 파일에 대하여 (0) | 2023.03.02 |
| display : grid에 대하여 (0) | 2023.03.02 |
| CSS : root (가상선택자) 를 통해 css 변수 선언하기! (0) | 2023.03.01 |
1.SVG 이미지 파일이란?
- Scalable Vector Graphics : 웹 친화적인 벡터 파일 포맷 이미지
- jpeg와 같은 픽셀 기반의 래스터 파일과 달리 점과 선으로 만들어진 수학공식의 이미지 저장 방식
관련 참고 자료 :
https://www.adobe.com/kr/creativecloud/file-types/image/vector/svg-file.html
SVG 파일 알아보기 | Adobe
SVG 파일은 크기를 조정해도 해상도가 저하되지 않으므로 온라인 그래픽에 매우 적합합니다. SVG 파일의 특징과 장단점에 대해 자세히 알아보세요.
www.adobe.com
| backdrop-filter (0) | 2023.03.02 |
|---|---|
| display : inline-flex 에 대하여 (0) | 2023.03.02 |
| display : grid에 대하여 (0) | 2023.03.02 |
| CSS : root (가상선택자) 를 통해 css 변수 선언하기! (0) | 2023.03.01 |
| display에서 inherit의 역할 (0) | 2023.03.01 |
1.Grid와 Flex의 큰 차이점 :
- Grid는 두 방향 (가로 / 세로) 레이아웃 시스템 (2차원)
- Flex는 한 방향 레이아웃 시스템 (1차원)
2.Flex와 비슷한 점 :
- 부모요소를 Grid Container(*그리드 컨테이너)라고 부르고, 자식요소를 Grid Item(*그리드 아이템)이라고 부릅니다.
- Flex와 마찬가지로 Grid는 컨테이너에 display:grid;를 설정하는 것으로부터 시작!
3.전반적인 정리 :
4.그리드 형재 정의 :
- grid-template-rows
- grid-template-columns
원본 출처 및 참고사이트 :
https://studiomeal.com/archives/533
이번에야말로 CSS Grid를 익혀보자
이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “
studiomeal.com
| display : inline-flex 에 대하여 (0) | 2023.03.02 |
|---|---|
| SVG 이미지 파일에 대하여 (0) | 2023.03.02 |
| CSS : root (가상선택자) 를 통해 css 변수 선언하기! (0) | 2023.03.01 |
| display에서 inherit의 역할 (0) | 2023.03.01 |
| CSS에서 all 속성에 대하여 (0) | 2023.03.01 |
일반적으로 CSS문서에서 사이트를 구축할 때, 다양한 CSS파일이 사용됩니다.
그래서 CSS에서 이를 간단하게 변수를 선언하여 사용하면 좀 더 쉽게 작업 가능합니다!!
1. :root 의사 클래스
:root는 문서 트리의 루트 요소를 선택하며, HTML의 루트 요소는 <html>이므로, :root와 html은 같습니다.
2. CSS 변수사용
:root 내 변수를 지정할 때에는 변수 맨 앞에 "--"를 반드시 붙여주어야 합니다.
| SVG 이미지 파일에 대하여 (0) | 2023.03.02 |
|---|---|
| display : grid에 대하여 (0) | 2023.03.02 |
| display에서 inherit의 역할 (0) | 2023.03.01 |
| CSS에서 all 속성에 대하여 (0) | 2023.03.01 |
| clip-path generator 사이트 (0) | 2023.03.01 |