마크다운 블로그에 적용한거 코드박스가 css 수정 2
코드박스에 줄간격 너무 커서 수정. .hljs{ background-color:#afcba1 !important; line-height:70% !important; }
글
마크다운 블로그에 적용한거 코드박스가 잘 안보여서 css적용했는데
마크다운 블로그에 적용한거 코드박스가 잘 안보여서 css적용했는데 !important 하면 우선순위가 최우선으로 적용된다. 남의 코드에 내css넣을때 유용 .hljs{ background-color:#afcba1 !important; }
wave 애니메이션
움직이는 wave 애니메이션이 있어서 애니메이션으로 구현한건가 했는데 wave font라는게 따로 있고 텍스트에 따라 높이가 다른데 텍스트 변경으로만 구현한거였다. https://fonts.google.com/specimen/Wavefont <img alt="" data-original-height="1450" data-original-width="1040" height="240" src="https://blogger.googleusercontent.com/img/a/AVvXsEgP5ad9tqzFHaipVsGbc5Grhfl99-KVCNN2hcZ2ohErI3b4Js8cFAUtLPmMTkVE--XJaZT3wlpaa48J-BfCDgi6RV2SzGpCbH1FEGffNFReTv1rWC3b3AtgbW8XICoQndgJNYuXRYKYW9OHkLqQc8SXUtdu84TQDy5ToLfTMLvbOTvGtAoeRUWaXoAzJScB" width="172" />
css `align-items` vs `align-content`
`align-items`와 `align-content`의 차이를 좀 더 쉽게 설명해 드리겠습니다. ### Flexbox 레이아웃의 기본 이해 - **주축(main axis)**: Flex 컨테이너의 주요 방향(기본적으로 가로 방향). - **크로스 축(cross axis)**: 주축과 수직인 방향(기본적으로 세로 방향). ### 1. `align-items` - **기능**: **한 줄**의 항목들을 크로스 축을 따라 정렬합니다. - **예시**: 자식 요소들이 한 줄에 있을 때, 그 줄 내에서 자식 요소들의 정렬을 설정합니다. - **사용 상황**: 모든 자식 요소들이 한 줄에 있을 때, 예를 들어, 높이를 조정하거나 중간, 위, 아래로 정렬하고 싶을 때 사용합니다. #### 비유 - **교실에서 책상 정렬**: 학생들이 한 줄로 앉아 있을 때, 그 줄 내에서 학생들을 중간, 위, 아래로 정렬하는 것과 같습니다. #### 예시 ```css .container { display: flex; height: 200px; /* 컨테이너 높이 설정 */ align-items: center; /* 자식 요소들을 컨테이너의 중간에 정렬 */ } ``` ### 2. `align-content` - **기능**: **여러 줄**의 항목들을 크로스 축을 따라 공간을 분배합니다. - **예시**: 자식 요소들이 여러 줄로 랩핑될 때, 각 줄 사이의 공간을 설정합니다. - **사용 상황**: 여러 줄의 항목이 있는 경우, 각 줄 사이의 공간을 조정하고 싶을 때 사용합니다. #### 비유 - **교실에서 줄 간격 정렬**: 여러 줄의 책상이 있는 교실에서 줄 간의 간격을 설정하는 것과 같습니다. #### 예시 ```css .container { display: flex; flex-wrap: wrap; /* 여러 줄로 랩핑 */ height: 400px; /* 컨테이너 높이 설정 */ a...
모바일 드래그 금지
드래그 금지해도 모바일 다른 브라우저 써보면 드래그 되는 경우가 많은데 이 블로그를 참고했더니 성공했다 초고수인듯 https://worksmart-turtlebox.tistory.com/4
css에서 gray grey 됨
css에서 gray grey 됨 https://stackoverflow.com/questions/70430577/why-does-css-accept-grey-but-not-colour
Emmet으로 html css 단축키 사용하기
"Emmet"은 웹 개발자와 디자이너들에게 인기 있는 플러그인입니다. 이 플러그인은 HTML, CSS 코드를 빠르게 작성할 수 있도록 도와줍니다. Emmet을 사용하면 복잡한 HTML 구조나 CSS 속성을 간단한 약어로 표현하고, 이를 자동으로 전체 코드로 확장할 수 있습니다. 예를 들어, 웹 개발자가 "div>ul>li*5"라는 Emmet 약어를 입력하고 트리거를 실행하면, 이 코드는 다음과 같은 HTML 구조로 자동 확장됩니다: ```html <div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> ``` Emmet은 대부분의 주요 코드 에디터와 호환되며, 웹 개발 작업의 효율성을 크게 향상시켜 줍니다. 특히 반복적인 작업을 줄여주고, 타이핑 속도를 높여줌으로써 개발 시간을 단축시켜 줍니다. Emmet을 사용하여 웹 개발을 더 효율적으로 할 수 있도록 기본적인 가이드를 제공하겠습니다. ### 1. Emmet 설치하기 Emmet은 대부분의 주요 텍스트 에디터와 IDE(Integrated Development Environment)에서 사용할 수 있습니다. 예를 들어, Visual Studio Code, Sublime Text, Atom 등에서 Emmet 플러그인을 설치할 수 있습니다. 설치 방법은 각 에디터의 문서나 플러그인 마켓플레이스에서 찾아볼 수 있습니다. ### 2. 기본 약어 Emmet에서는 HTML 요소와 속성을 빠르게 작...
CSS를 사용하여 자식 요소를 부모 요소의 중앙에 배치
CSS를 사용하여 자식 요소를 부모 요소의 중앙에 배치하려면 여러 가지 방법이 있습니다. 여기에서는 가장 일반적으로 사용되는 두 가지 방법을 소개하겠습니다: 1. **Flexbox 사용**: Flexbox는 요소를 쉽게 중앙에 배치할 수 있는 방법을 제공합니다. 부모 요소에 대한 `display: flex` 및 `align-items: center; justify-content: center;` 속성을 설정하여 자식 요소를 수직 및 수평 중앙에 배치할 수 있습니다. ```css .parent { display: flex; align-items: center; justify-content: center; height: 100%; /* 또는 원하는 높이 */ } ``` 2. **Absolute Positioning 사용**: 절대 위치 지정을 사용하려면 부모 요소에 `position: relative;`를 설정하고 자식 요소에 `position: absolute;`와 `top`, `left`, `transform` 속성을 설정하여 중앙에 배치합니다. ```css .parent { position: relative; height: 100%; /* 또는 원하는 높이 */ } .child { posit...
css에서 element의 디스플레이 특성
**block-level 요소:** 페이지 상에서 새로운 줄에서 시작하고, 다음 요소는 이 요소 다음의 새로운 줄에서 시작합니다. 즉, 전체 가로 너비를 차지합니다. 기본적으로 가로 너비는 부모 요소의 전체 너비를 차지하게 됩니다 (width 값이 명시적으로 설정되지 않았다면). width, height, margin, padding 등의 속성을 모두 적용할 수 있습니다. 예: div, h1, p, form 등. **inline-level 요소:** 페이지 상에서 새로운 줄을 시작하지 않고, 텍스트나 다른 인라인 요소와 동일한 줄에 연속해서 표시됩니다. 내용의 너비만큼만 영역을 차지합니다. 즉, 필요한 만큼의 너비를 차지하게 됩니다. width와 height 속성이 적용되지 않습니다. 그러나 padding, margin (오른쪽과 왼쪽만), border는 적용될 수 있습니다. 상하단의 margin과 padding은 적용되지만, 다른 요소를 밀어내지는 않습니다. 예: <span>, <a>, <img>, <strong>등. **inline-block:** inline과 block의 특성을 조합한 디스플레이 속성입니다. 요소는 인라인 수준에서 표시되지만, block처럼 width와 height 속성을 적용받을 수 있습니다. <span>과 같이 인라인 요소에 블록 레벨의 스타일링을 적용하고 싶을 때 유용합니다. **flex:** 요소를 유연한 박스 모델 레이아웃의 컨테이너로 설정합니다. 이렇게 설정하면 자식 요소들은 flex 아이템으로서 표시됩니다. flex 레이아웃은 복잡한 레이아웃과 정렬 문제를 쉽게 해결할 수 있도록 도와줍니다. 주요 관련 속성: flex-direction, justify-content, align-items, flex-wrap 등. **grid:** 요소를 그리드 레이아웃의 컨테이너로 설정합니다. 그리드는 행과 열의 2차원 레이아웃 시...
크롬 css 수정시 적용이 바로 안될 때
크롬 css 수정시 적용이 바로 안될 때 상단의 이 버튼 개발자 도구 열린 상태서 우클릭 후 empty cache and hard reload
[css]Uncaught SyntaxError: Unexpected token '.' css
Uncaught SyntaxError: Unexpected token '.' css 착각함.. You css file is being processed as a javascript file. Are you sure the file is being included as a css file as in: < link href= "yourstyle.css" rel= "stylesheet" > and not < script src = "yourstyle.css" > </ script > https://stackoverflow.com/questions/65158024/uncaught-syntaxerror-unexpected-token-css