CSS 1 페이지

CSS

전체 17건 1 페이지

부트스트랩5 우측정렬, 좌측정렬, 중앙정렬, 세로 중앙정렬

정렬에 관한 부분 많이 사용할 부분에 테스트 한것입니다.부트스트랩5 용량 크다고 뭐라 하시는분도 있던데 제가 보기엔 일반 사이트 이정도면 큰것 절대 아닙니다.다른것 많이 사용하지 않고 부트스트랩5 위줄 잘 사용하면 충분이 예쁘고 반응형인 사이트 만드는데 충분 합니다.위 페이지의 결과에 대한 부트스트랩5 코드는 아래와 같습니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0…
[부트스트랩5] 화면 중앙에 알림모달 띄우기

화면의 정 중앙에 알림 모달을 띄우는 방법입니다.이부분은 아래 modal-dialog-centered 부분이 추가 되면 자동처리가 되면 화면 위쪽에 보여주고 싶으면 이 클래스명만 제외 시키면 됩니다.<div class="modal-dialog modal-dialog-centered"> 아래는 테스트 해볼 수 있는 소스 입니다.그리고 중요 부분만 있지만 이건 BODY 안에 넣어 두기만 하면 되는것이라서 확인이 무척 간단 합니다.mt-5 부분이 최상위 div에 있는데 상단 부분을 좀 떨어 트리는 부분인데 중앙 정렬에선 필요한 부분은 아닙니다. 중앙 정렬이 아닐때 상단에 너무 붙으면 이부분을 추가해주고 그리고 더 …
[부트스트랩5] 모바일 해상도에 따라 위치 변경

부트스트랩이 반응형 이기 때문에 자동으로 처리가 되는 부분이 있습니다.여기선 이부분에서 나와야 되는 순서 문제로 조정한 부분에 대한 것으로 아래 이미지를 보시면 쉽게 이해가는 부분입니다. 아래는 부트스트랩5 테스트 한 소스 입니다.중요한 부분만 올립니다. 이정도면 사실상 다 올린것과 다름이 없는 부분입니다.<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PABBURI Bootstrap 5 Layout</title&…
html 이미지 태그에서 옆으로 커지는 이미지 처리는 가로 세로 비율이 맞지 않아 사람이 뚱뚱하게 나오는 현상

뚱뚱하게 나온다고 자르면 더 보기가 좋지 않다. 입이나 코가 잘리는 경우 그렇다. 뚱뚱하게 나오면 보기가 좋지 않고 그래서 비율에 맞게 처리해 주는 방법이 제일 좋은데 아래 방법을 사용 하면 된다. 알아보기 쉽게 인라인으로 작성함. 이미지 주변에 옅은 테두리를 추가하고 이미지가 짤리지 않도록 조정하기 위해서 먼저 이미지를 감싸는 div 태그에 테두리(border)를 추가하고 이미지의 object-fit 속성을 contain으로 변경하여 이미지가 전체적으로 보이도록 조정할 수 있습니다. 이미지의 가로 세로 비율을 유지하면서 너비는 100%로 설정하여 부모 요소의 너비에 맞추고 높이는 원하는 값으로 고정합니다. 이렇게 하면…
DIV 글자가 많을 경우 밀리지 않고 뒤쪽이 보이지 않게 처리 하는 방법

글자가 많을 경우 밀리지 않고 뒤쪽이 보이지 않게 처리하려면 텍스트가 넘치는 부분을 숨기는 CSS 속성인 overflow를 사용할 수 있습니다. 여기에 text-overflow 속성을 추가하여 넘치는 텍스트를 어떻게 처리할지 결정할 수 있으며 white-space 속성을 사용하여 텍스트가 한 줄에 표시되도록 설정할 수 있습니다.width 속성을 설정하여 <div>의 너비를 제한하는 것도 중요합니다. 이를 통해 텍스트가 넘치는 부분을 '...' (ellipsis)로 표시하도록 설정할 수 있습니다.아래의 코드 예시는 이러한 속성들을 사용하여 긴 텍스트가 넘칠 경우 '...'으로 표시하는 방법을 보여줍니다. &l…
부트스트랩 레이아웃 관련된 사이트

반응형으로 만들기 좋은 부트스트랩에 관한 툴이 있는 사이트입니다.가끔씩 사용할때 레이아웃이 생각나지 않은 경우 이용하면 좋습니다.지원하는 버전은 현재 버전보다 낮은 4버전 이긴 하지만 기본적인것은 동일하기 때문에 사용하는데는 큰 문제는 없습니다. * 찾을 때 검색한 키워드bootstrap design toolbootstrap builder* 부트스트랩 레이아웃 관련된 사이트 https://www.bootstrapcdn.com/https://bootstrap.build/apphttps://www.layoutit.com/https://bootsnipp.com/builder
현재 페이지의 스타일 정보를 엊는 방법

현재 페이지에서 표현이 되고 있는 스타일을 간단하게 자바스크립트로 볼 수 있는 방법입니다.const fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0])위에대한 설명입니다.window.getComputedStyle(document.body) - HTML BODY에 대한 모든 스타일을 얻으려면getPropertyValue('font-size') -글꼴 크기의 문자열 값을 얻으려면 예 : (16px)match(/\d+/)[0]) - 숫자 부분 만 얻으려면 예 : (16) - 문자열Number(…
[부트스트랩] 텍스트 컬러 지정하기

글자색을 지정하는 방법에 대한 것입니다. font-color 같은것을 사용해도 되겠지만 가능하면 프레임워크 사용할때는 프레임워크에서 지웒는것이 있는지 찾아본 다음 있으면 그것을 사용하는것이 좋기 때문입니다.텍스트 컬러에 대한 표준적인 형태로 잘 정리된 표 입니다.
[부트스트랩] 제목 두줄로 보이는것 한줄로 나오도록 하는법

일반적으로 제목이 길면 2줄로 나오게 됩니다. 너무 긴 경우 더 나올수도 있겠지요.그런 경우 백엔드에서 잘라서 보여주기도 하곤 합니다.이런 경우 css 처리 방법에선 hidden을 주면 됩니다.부트스트랩에선 overflow-hidden 클래스만 추가해주면 기본적인 길이에서 넘치게 되면 보이지 않게 처리를 합니다.높이게 대한것과 길이에 대한 부분은 필요하면 style 속성을 추가해서 해주면 됩니다.a 태그도 필요하면 style 줘서 높이와 길이 지정하여 사용하면 원하는 형태로(길어서 넘치는 경우) 한줄로 보이고 초과된 부분은 화면에서 보이질 않게 됩니다.
부트스트랩 배지(badge) 패딩 주기

부트스트랩 배지(badge) 패딩 주기 입니다.기본은 너무 바짝 붙어서 패딩을 주었으면 하는데 위 이미지 참고 하면 됩니다.마진과 패딩 가끔 사용하다 보니 얼마나 헷갈리는지... 패딩은 겨울옷 패딩을 생각하면 되고 마진은 밖에서 남겨 먹는거라~
웹사이트 반응형 구현하는 방식에 대한 명칭

다음에 찾을때 필요할듯 하여 올림.!!반응형을 처리 하는 방식에 대한 이름(명칭) 입니다. 화면의 크기와 더불어 요즘은 해상도가 커지면서 글자 크기에대 한 부분도 같이 신경써야 합니다. squish, scroll, collapse rows, collapse columns 방식의 반응형 모델 입니다.
jQuery 부트스트랩 버튼 클래스 변경하기

버튼을 클릭하면 아작스를 통해서 서버로 보낸다음 버튼의 색을 변경하고 명칭도 변경하여 목록으로 이동 할 수 있게 하는 기능을 만들다 보니 이런것이 필요하게 되었습니다.처음의 버튼은 '글 삭제하기'였습니다.그리고 클릭하여 정상적으로 삭제가 되면 메시지를 하나 보여주고 '정상적으로 삭제 되었습니다.' 그리곤 아래의 jquery 명령으로 버튼를 변경해 줍니다. - 버튼의 명칭을 변경합니다. - onclick 특성을 줘서 클릭하면 주소를 이동합니다. - 부트스트랩의 클래스를 변경하여 버튼의 색이 바뀌게 합니다. $('#del_btn').html(' 목록으로 이동하기 '); $("#del_btn").attr("o…
리눅스에서 공백제거 css 파일 용량 줄이는 방법(min 파일 만들기)

공백을 제거 하는 방법 입니다.이렇게 되면 줄바꿈 문자도 같이 버리는 작업이 들어가기 때문에 한줄로 나옵니다. 이에 대한 프로그램은 vscode에서 Beautify 확장 프로그램을 사용하면 들여쓰기와 줄바꿈을 해줍니다. 이런 역활은 웹사이트에도 있으니 "온라인 Beautify" 같은 키워드로 검색하면 쉽게 찾을 수 있습니다.CentOS에서 아래 명령으로 설치 하고 명령을 내리면 min 파일을 만들 수 있습니다.yum -y install yuicompressoryuicompressor s.css -o s.min.css웹서버를 직접 관리 할 수 있다면 서버 설정으로 자동으로 gzip 으로 압축하여 전송하는 방법이 있습니다.…
vscode 사스(SCSS) 설정 방법

제목에 있듯이 여기서 SCSS 설정에 대한것은 VSCODE 프로그램을 사용한다는 것을 기반으로 합니다.1) 먼저 아래 확장 프로그램을 설치 합니다. Live Sass Compiler v3.0.0 Sass Lint (deprecated) 2) 아래는 setting.json 에서 SCSS 부분에 해당 하는 부분만 발췌한 것입니다. "liveSassCompile.settings.generateMap": false, "liveSassCompile.settings.formats":[ { "format": "expanded", "extensionName": ".css", …
✔️ CSS 포지션(position)의 종류(static, relative, fixed, absolute,stickey)예 따른 기능 구분

시작 하기전에 기본적은 CSS에서의 block과 inline에 대해서 알아둘 필요가 있습니다.div는 기본적으로 설정을 하지 않으면 block 입니다. 설정을 하지 않으면 기본적으로 한라인을 다 차지 한다는 의미 입니다.span은 기본적으로 inline 특성을 가지고 있습니다. 컨텐츠의 크기 만큼만 차지를 합니다.물론 위 요소에 대한 특성을 변경이 가능 합니다. 아래 포지션에 대해 테스트 하기 전에 이런 특성을 알고 있는것이 중요 합니다.보통 확인을 할때는 style의 값을 "border: 1px solid black" 이런 형태로 박스를 쳐서 확인 합니다.▶ 포지션의 특성은 아래 4가지가 있다.static, relat…
[VSCODE] HTML CSS Support 자동완성

소개 하고자 하는것은 업데이트가 좀 되었지만 현재 작동을 잘 하고 있는 서포트 프로그램 입니다.VSCODE는 리눅스 같습니다.오픈된 확장프로그램 좋은것이 많지만 안되는것도 많고. 버전관련 문제도 있고 나에게 맞는것을 찾는데 시간을 써야 합니다.제가 요즘 하고 있는 CSS 서포트 프로그램 입니다. * HTML CSS 지원* Visual Studio Code에 대한 HTML ID 및 클래스 속성 자동완성. - HTML ID 및 클래스 속성 완성. - 연결 및 포함된 스타일 시트를 지원합니다. - 템플릿 상속을 지원합니다. - 추가 스타일 시트를 지원합니다. - 언어와 같은 다른 HTML을 지원합니다. - 요청 시…
CSS 역할과 무엇인고 어떤곳에 쓰이는것인가?

CSS는 페이지를 꾸며주는 역활을 합니다. HTML은 어떠한 기능이라면 말이죠. 예를 들면다른 페이지를 연결 할때는 a태그, 표형태로 표현을 하고자할때는 table 그리고 문단은 p태그 등으로 표현하는 기능적인 것입니다.그렇다면 CSS의 역활은?. 와꾸(틀)를 잡아 줍니다.. 색을 입혀 줍니다. 마우스 올라갔을때 나갔을때의 색을 변경해 줍니다.. 글자색을 변경해줍니다.. 화면크기에 따라서 넓게 혹은 좁게 모바일버전등 처리를 해줍니다.. 화면에 보이는것들과 관련이 있다고 보시면 됩니다.. 폰트를 설정 합니다.......이 페이지에선 기본적인 선택자(셀렉터)에 대해서 하나 배우고 갑니다. CSS에서 말하는 속성(프로퍼티)와…

게시물 검색