all속성은 html 에서 기본적으로 가지고 있던 태그의 속성을 reset시키고
처음부터 직접 스타일을 다시 주고 싶은 경우, 사용!
참고사이트 :
[HTML / CSS] 요소의 모든 속성을 초기화 시켜주는 all 속성
css 스타일 속성 중 unset이라는 아이가 있는데, 요 아이는 예를들어 버튼을 생성하면 브라우저마다 기본적으로 적용되어있는 버튼의 기본 스타일 값을 초기화 시켜주는 아이다. 예를들어, 아래와
velog.io
| CSS : root (가상선택자) 를 통해 css 변수 선언하기! (0) | 2023.03.01 |
|---|---|
| display에서 inherit의 역할 (0) | 2023.03.01 |
| clip-path generator 사이트 (0) | 2023.03.01 |
| flex 박스에 대하여 (0) | 2023.02.23 |
| float: left 속성 활용 중 가운데 정렬하기 (0) | 2023.02.23 |
clip-path 사이트
https://bennettfeely.com/clippy/
Clippy — CSS clip-path maker
About Clip Paths The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source. CSS Animations and transitions are possible with two or more clip-path shape
bennettfeely.com
clip-path 좌표순서에 따른 의미
좌상 / 우상 / 우하 / 좌하 => 시계방향 순
| display에서 inherit의 역할 (0) | 2023.03.01 |
|---|---|
| CSS에서 all 속성에 대하여 (0) | 2023.03.01 |
| flex 박스에 대하여 (0) | 2023.02.23 |
| float: left 속성 활용 중 가운데 정렬하기 (0) | 2023.02.23 |
| jQuery PC 및 Mobile 버전 체크 (0) | 2023.02.12 |
1.flex박스를 사용하기 위해서는 우선 container와 items의 요소를 인식해야 한다.
- container : items를 감싸는 부모요소
- items : container의 영향을 받는 자녀요소
- container에 적용할 수 있는 속성과 items에 적용할 수 있는 속성이 서로 다르다.
2.그리고 flex박스의 가장 중요한 요소는 바로 direction(방향) 이다.
- flex-direction : row => display : flex 의 경우, 기본값이 row이며, 왼쪽에서 오른쪽으로 표시하는 것을 의미.
- flex-direction : column => 위에서 아래로 표시하는 것을 의미.
3.flex-direction에 따라서 "주축"과 "교차축"이 나눠진다.
- 만약 flex-direction이 row일 경우, 주축은 가로가 되며, 교차축은 세로가 된다.
4.flex-basis는 주축의 너비를 의미한다. (*flex-direction이 무엇이냐에 따라서 너비가 될수도 있고, 높이가 될수도 있다.)
5.flex-grow는 빈 공간을 채울지에 대한 여부를 의미한다. 기본값은 0이지만, 만약 숫자를 입력할 경우, 전체 길이에서 1의 영역을 차지하겠다는 의미이다. (*반대의 개념이 flex-shrink)
6.수직과 수평 정렬을 원하는 경우
- justify-content : 주축에서 아이템을 정렬하고 싶을 때 사용
- align-content : 수직축에서 아이템을 정렬하고 싶을 때 사용 (단, 2개 이상의 줄인 경우만 사용)
- align-items : 수직축에서 아이템을 정렬하고 싶을 때 사용 (단일 컨텐츠로도 사용가능)
7.부모 요소에 gap을 사용해주면 인접 items 사이에 공간을 떨어뜨려 주는 효과 발생
8.flex-wrap : 한줄에 아이템들이 많아졌을 경우, 그럼에도 한줄로 표기하게 하려면 nowrap / 화면구성상 한줄에 꽉 차게 되면 wrap으로 변경
*참고사이트
https://heropy.blog/2018/11/24/css-flexible-box/
CSS Flex(Flexible Box) 완벽 가이드
많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS F
heropy.blog
| CSS에서 all 속성에 대하여 (0) | 2023.03.01 |
|---|---|
| clip-path generator 사이트 (0) | 2023.03.01 |
| float: left 속성 활용 중 가운데 정렬하기 (0) | 2023.02.23 |
| jQuery PC 및 Mobile 버전 체크 (0) | 2023.02.12 |
| counter-increment 속성 (0) | 2023.02.12 |
1.float: left 속성을 display: inline-block으로 변경
2.부모요소에 text-align: center로 변경
| clip-path generator 사이트 (0) | 2023.03.01 |
|---|---|
| flex 박스에 대하여 (0) | 2023.02.23 |
| jQuery PC 및 Mobile 버전 체크 (0) | 2023.02.12 |
| counter-increment 속성 (0) | 2023.02.12 |
| CSS에서 em과 rem 의 의미 (0) | 2023.01.24 |
1.PC 버전 : https://jquery.com/
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jquery.com
download > Using jQuery with a CDN >
jQuery CDN
The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr
releases.jquery.com
2.Mobile 버전 : https://jquerymobile.com/
jQuery Mobile
Developer Links Seriously cross-platform with HTML5 jQuery Mobile framework takes the "write less, do more" mantra to the next level: Instead of writing unique applications for each mobile device or OS, the jQuery mobile framework allows you to design a si
jquerymobile.com
Download > Lastest stable version
| flex 박스에 대하여 (0) | 2023.02.23 |
|---|---|
| float: left 속성 활용 중 가운데 정렬하기 (0) | 2023.02.23 |
| counter-increment 속성 (0) | 2023.02.12 |
| CSS에서 em과 rem 의 의미 (0) | 2023.01.24 |
| border-box vs content-box 차이점 (0) | 2023.01.24 |
1.counter-increment : 숫자를 생성하면서 자동으로 번호를 매겨주는 속성!!
- 항상 content : counter(카운터이름)과 함께 다닌다.
| float: left 속성 활용 중 가운데 정렬하기 (0) | 2023.02.23 |
|---|---|
| jQuery PC 및 Mobile 버전 체크 (0) | 2023.02.12 |
| CSS에서 em과 rem 의 의미 (0) | 2023.01.24 |
| border-box vs content-box 차이점 (0) | 2023.01.24 |
| vh vw 그리고 %와 차이점 (0) | 2023.01.24 |
1.em이란? :
- element의 약자, px, pt와 달리 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 상대 단위!
2.사용방법 :
- em, rem 모두 CSS의 font-size 속성값에 따라 결정된다.
예를 들어 font-size가 16px인 경우,
1em = 16px
2em = 32px
3em = 48px
3.em과 rem의 차이점 :
- em은 해당 단위가 사용되고 있는 요소의 font-size
- rem은 root, 즉 최상위 요소 <html>요소의 font-size 속성 값이 기준이 됨.
*참고사이트
| jQuery PC 및 Mobile 버전 체크 (0) | 2023.02.12 |
|---|---|
| counter-increment 속성 (0) | 2023.02.12 |
| border-box vs content-box 차이점 (0) | 2023.01.24 |
| vh vw 그리고 %와 차이점 (0) | 2023.01.24 |
| 플렉서블 박스 flexible box 레이아웃 (0) | 2023.01.24 |
CSS box-sizing 속성 차이점
1.content-box :
- 지정한 CSS width 및 height를 컨텐츠 영역에만 적용
2.border-box :
- 지정한 CSS width 및 height를 전체 영역에 적용
*참고사이트
https://dasima.xyz/css-box-sizing-content-box-vs-border-box/
| counter-increment 속성 (0) | 2023.02.12 |
|---|---|
| CSS에서 em과 rem 의 의미 (0) | 2023.01.24 |
| vh vw 그리고 %와 차이점 (0) | 2023.01.24 |
| 플렉서블 박스 flexible box 레이아웃 (0) | 2023.01.24 |
| (CSS)에서 hr, td 스타일 적용시 유의사항 (0) | 2022.11.20 |
1.정의 : 현재 실행중인 스크린 크기에 맞춰 상대적 크기 반환
- vh : viewport height
- vw : view width
> 100vh, 100vw가 전체 화면의 기준이 됨.
> 예를 들어, height 1000px / width 800px 이라고 가정 시,
1vh = 10px / 1vw = 8px 이 됨.
> height: 50vh = 500px / width: 25vw = 200px
2.%와 차이점
- vh와 vw는 열려있는 화면 전체의 상대길이를 의미 = 스크롤바를 포함한 길이 반환
- %는 창이 중심이 아닌, %를 사용하고 있는 요소의 부모 요소의 길이에 맞게 반환
*참고사이트
| CSS에서 em과 rem 의 의미 (0) | 2023.01.24 |
|---|---|
| border-box vs content-box 차이점 (0) | 2023.01.24 |
| 플렉서블 박스 flexible box 레이아웃 (0) | 2023.01.24 |
| (CSS)에서 hr, td 스타일 적용시 유의사항 (0) | 2022.11.20 |
| (border)에서 두께와 스타일을 별도로 만들고 싶을 때 (0) | 2022.11.19 |
1.플렉서블 박스 = 플렉스(flex) 박스라고도 부른다.
2.CSS3에서 처음 소개된 레이아웃 모델
3.주요개념
- flex-direction : 플렉스 컨테이너 안에서 플렉스 요소가 배치될 방향 설정
1) row : 기본설정 / 왼쪽에서 오른쪽으로
2) row-reverse : row의 반대 / 오른쪽에서 왼쪽으로
3) column : 위쪽에서 아래쪽으로
4) column-reverse : column의 반대 / 아래쪽에서 위쪽으로
- justify-content : 플렉스 요소의 수평 방향 정렬 방식 설정
- align-items : 플렉스 요소의 수직 방향 정렬 방식 설정
- flex-wrap : 플렉스 라인에 더 이상의 여유 공간이 없을 때, 플렉스 요소 위치를 다음 줄로 넘길지 여부 결정
*참고사이트
https://ipex.tistory.com/entry/CSS3-flex-Box-flexdirection-%EC%83%9D%EC%84%B1-%EB%B0%A9%ED%96%A5
http://www.tcpschool.com/css/css3_expand_flexbox
| border-box vs content-box 차이점 (0) | 2023.01.24 |
|---|---|
| vh vw 그리고 %와 차이점 (0) | 2023.01.24 |
| (CSS)에서 hr, td 스타일 적용시 유의사항 (0) | 2022.11.20 |
| (border)에서 두께와 스타일을 별도로 만들고 싶을 때 (0) | 2022.11.19 |
| (css)에서 (margin) 값 설정시 ","는 넣지 말자! (0) | 2022.11.19 |