본문 바로가기

퍼블리싱69

CSS 활용 - 라디오 버튼 커스텀 스타일 라디오 버튼 스타일 변경 하기 브라우저 별로 다르게 보이는 라디오 버튼 디자인 - 리셋하고 다시 스타일 주기! HTML 커스텀스타일1 커스텀스타일2 CSS .checks { position: relative; height: 20px; padding: 30px; line-height: 20px; } .checks label { font-size: 16px; color: #666; margin-right: 10px; vertical-align: middle; } .checks input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, .. 2022. 3. 23.
[CSS 활용] 화살표, css로 만들기 화살표 모양 이미지가 아닌 CSS 로 그리기 보통은 PNG 이미지로 사용하거나, 아이콘폰트를 사용하는 경우가 많지만, CSS 가상선택자를 이용해서 만들게 되면 사이즈, 컬러 등을 자유롭게 바꿀 수 있다. 위와 같이 단순한 선형태의 방향키 디자인이라면 CSS를 통해 만들어서 제어하는것이 편한것 같아서 종종 사용 하고 있다. HTML CSS .wrap { position: absolute; vertical-align: middle; top: 100px; left: 10px; } .wrap .arrow { position: relative; display: inline-block; width: 30px; height: 30px; overflow: hidden; vertical-align: middle; } ... 2022. 3. 17.
[JS 활용] 관련 사이트, family site 패밀리 사이트, 제이쿼리 활용 [토글] 패밀리 사이트나, 관련 사이트를 셀렉트 태그를 사용하는 것이 아니라 div를 사용해서 스타일링을 통해 좀더 다양한 방식으로 꾸밀 수 있다. (패밀리 사이트 선택하는 드롭 박스를 위로 올라가게 한다든지.. ) 제이 쿼리 토글과 CSS를 이용해서 꾸며 본다. 화살표 모양 이미지가 아닌 CSS 로 주기 HTML FAMILY SITE Naver Google Daum CSS .family { position: absolute; vertical-align: middle; top: 100px; width: 207px; background-color: #0d1621; left: 10px; } .family>a { display: block; position: relative; z-index: 10; height: 29.. 2022. 3. 15.
[CSS 활용] 투명한 스크롤바 - 내용위에 오버레이 되는 스크롤바 스크롤바 평소엔 안보이다가, 길이가 길어진 경우 스크롤이 생기는데, 그게 너비값을 갖지 않도록 스크롤 생기는 박스 위에 투명하게 오버레이 되어 보이게 하기. 그래야, 너비값을 갖지 않고, 전체 레이아웃을 틀어지지 않게 한다. ** 단 이런 경우, 스크롤이 들어가는 위치에 뭔가 클릭을 해야하거나 하는 요소가 없어야 함. HTML 01 02 03 04 05 06 07 08 09 10 CSSdiv,ul,li{ padding: 0; margin: 0; box-sizing:border-box; } .scrollbar{ width:200px; height: 200px; overflow:overlay; border:1px solid #ddd; } .scrollbar::-webkit-scrollbar { width: .. 2022. 1. 17.
HTML&CSS 기초 - 요약 (의미,특징,사용법) HTML이란? 웹페이지는 모두 HTML을 사용하여 만들어짐 HTML의 의미와 특징 Hyper Text Markup Language의 줄임말 Hyper Text : 링크 의미 Markup Language : 프로그래밍 언어의 종류/ 정보를 구조적&계층적으로 표현 HTML 파일 확장자 : .html HTML의 역사 제안&개발 : 1990년대 영국의 물리학자 팀 버너스 초기 개발 목적 : 연구원들의 정보와 문서 공유 태그란? HTML은 태그들의 집합 태그로 코드 작성 -> 브라우저 인식 -> 내용 표현 태그 사용 방법 표현 방법 : ~ Hello, HTML 요소란? 태그를 포함한 전체 속성이란? 태그에 대한 추가 정보 제공, 태그 제어 설정값 지정. 속성을 사용하는 방법 시작태그 - 한칸 뛰고(공백) - 속성.. 2022. 1. 16.
스크롤매직- 애플 홈페이지 구현하기 위한 플러그인 스크롤 매직 ScrollMagic은 사용자의 스크롤 위치에 반응하여 효과가 나타나게 함. 스크롤 하면 이미지가 나타나거나, 사라지거나 하는등의 효과를 구현할 수 있게 해주는데 대표적으로 애플 홈페이지 같은 느낌 만들기에 필요한 플러그인 사용방법 홈페이지에서 플러그인 다운로드 examples 폴더내에 index.html 열기 안에 css/script 경로 확인 홈페이지에서 다운로드 받아서 샘플을 보고 필요한 요소를 찾아 쓰면 된다. http://scrollmagic.io/ ScrollMagic The javascript library for magical scroll interactions. ScrollMagic helps you to easily react to the user's current scro.. 2021. 11. 29.
[JS 활용]숫자가 카운팅/카운트 되게 하는 제이쿼리 소스 숫자가 자동으로 올라가거나 내려가게 하는 소스지정된 숫자에서 시작해서 지정된 숫자까지 카운팅이 필요한 경우 사용하면 좋을 소스 홈페이지 디자인할때 동적인 효과를 두드러지게 보여질 수 있게하는 요소중의 하나 연혁이나 팀원의 수 혹은 그외에 다양하게 사용 가능한 소스 HTML 마크업 Since 1700 CSS .title{ text-align:center; display:block; font-size: 30px; color: #222; margin-bottom:10px } .number { text-align:center; display:block; width:150px; height:150px; line-height:150px; margin: 0 auto; font-size: 40px; color: #3f.. 2021. 11. 17.
깜박이는 효과, on-air 라이브 중 상태 (가상요소,애니메이션효과) 깜박이는 효과 css로 나타내기 녹화중인 것 같은 상태를 보여줄 수 있게 깜박이는 점을 넣는 CSS 온에어, 라이브 방송 중.. 등과 같이 현재 상태를 나타내기에 좋은 css 효과이다. 사용되는 css 속성 가상 요소 - :after 애니메이션 - animation 키프레임 - keyframes animation 속성 상세 css @Keyframe 속성 상세 Html Live Css .on_now_tag{ font-size: 14px; color: #fd183a; padding: 2px 10px; margin-left: -7px; font-weight: 500; } .on_now_tag:after { content: ""; display: inline-block; width: 10px; height: 1.. 2021. 11. 17.
[HTML 태그 활용]버튼 클릭시 이미지 다운로드 되는 버튼 만들기 버튼 클릭시 이미지 다운로드 html 신청서나, 양식, 혹은 이미지를 다운 받아야 할경우, 간편하게 쓸수 있는 html 소스 Html 이미지 원본 다운로드 다운로드 할 이미지가 파일이 위치한 경로를 적어야 다운로드가 됩니다! ex) 2021. 10. 13.
[CSS 활용]스크롤바 커스텀하기 - 익스IE 적용 가능한 CSS 스크롤바 익스와 크롬 모두 적용 가능한 스타일링 CSS확실한 크로스 브라우징을 위해서는 조금 더 손을 봐야겠지만... 그래도 좀 비슷하게나마 맞춰 쓸 수 있는 스크롤바 모양. HTML 마크업 스크롤바 익스플로러 IE 10 이하 적용 가능한 css, 디자인을 비슷하게 맞춘 커스텀 스크롤바. 공백 CSS .scrollbox{ width: 250px; height: 250px; overflow: auto; padding: 10px; font-size: 14px; color: #333; border:1px solid #ddd; } .scrollbox span{ display:block; height: 1200px; color:#999; font-size: 11px; } /* 크롬 스크롤바 CSS */ /*스크롤.. 2021. 10. 13.
CSS 디스플레이(display)속성- CSS 디스플레이 속성 기본값 display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나. 대부분의 HTML 요소는 기본적으로 둘 중 하나를 display 속성 값을 가진다. 1. 블록(block) 2. 인라인(inline) 블록(block) { display : block }은 한 라인을 다 쓴다. , , , , , 대표적인 블록(block) 요소 인라인(inlne) { display : inline } 컨텐츠를 감싸는 크기만 갖는다. block속성과 다르게 줄바꿈이 되지 않고, 연달아 쓸경우 옆으로 붙게 된다. , , , 요소는 대표적인 인라인(inline) 요소 **크기를 변화시킬 수 없다. 너비를 주고 싶다면 속성을 block 이나 inline-block 로.. 2021. 10. 10.
[CSS 활용]fade in/out animation배경 이미지가 서서히 나타나게 하기 이미지(배경화면) 서서히 나타나게 하기이미지가 첫 화면에서 자연스럽게 나타나게 되면 부드러운 느낌을 준다. 배경뿐만 아니라 다양한 요소 (폰트/이미지) 에서도 쓰일 수 있는 fadein / fadeout 애니메이션이다. CSS animation을 활용! HTML 마크업 CSS#main { width: 100%; margin:0 auto; animation: fadein 5s ease 3s; -webkit-animation: fadein 3s; /* Safari and Chrome */ } #main img{ width: 100%; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadein { /* Saf.. 2021. 10. 7.
[CSS 활용]css 활용 예제 - 라디오 버튼을 활용한 선택 버튼 디자인 라디오 버튼 태그 활용 - 버튼 디자인 CSS모바일이나 웹에서 두 가지 중 하나를 택해야 하는 선택지가 있을 경우, 라디오 버튼 보다는 버튼 형태를 많이 사용하는데 기능은 라디오 버튼 기능을 갖지만 모양은 css로 버튼 형태로 주기. HTML라디오 버튼에서, 텍스트를 눌렀을때 같이 선택되게 하려면 id속성과 label for속성을 같게 설정한다. tag label 속성 미혼 기혼 CSS 타입 선택자/인접 선택자 - input[type=radio]+label 선택자 종류 상세 .select { padding: 15px 10px; } .select input[type=radio]{ display: none; } .select input[type=radio]+label{ display: inline-block.. 2021. 10. 7.
[CSS 활용]티스토리 book club 스킨 커스텀2 (카테고리보기-썸네일 크기 및 텍스트 길이 수정) 티스토리 book club 스킨 커스텀 두번째 카테고리 보기 페이지 1. 썸네일 크기 및 위치 수정 2. 보여지는 설명글 텍스트 길이 수정 기존 변경 후 거의 이미지가 주를 이루는 블로그 이기에 글자보다 이미지가 더 돋보이는게 중요하므로, 폰트가 많이 보이지 않아도 되는 방향으로 수정- 방법: html 에서 썸네일 사이즈 수정 -> CSS 추가 수정 현재 들어간 이미지 사이즈 확인 개발자 모드로 들어가서 썸네일 속성을 보면 사이즈가 230x300으로 들어간 것을 볼 수 있다. 이 사이즈만 티스토리에서 제공하는 옵션에 맞게 설정을 바꿔 줄 예정이다. 자료 출처 : 티스토리 이미지 썸네일 치환자 완벽정리 https://blogpack.tistory.com/167 티스토리 썸네일 사이즈 옵션 중 C300x20.. 2021. 10. 5.
[CSS 활용]티스토리 book club 스킨 커스텀 (글보기 부분- 상단 타이틀 배경 지우기) 티스토리 Book club 커스텀 하기 티스토리 이런저런 스킨을 쓰다가 북클럽 스킨이 가장 보기도, 쓰기도 편하단 생각이 들었다. 역시, 뭔가 좌측에 메뉴가 한눈에 보여야 안심이 되는건지. 여튼 스타일 모두 맘에 드는데 조금 걸리는 부분이 하나 있었는데.. 바로 글 보기를 눌렀을 때, 타이틀 뒤에 이미지가 들어가고 그 위에 글자가 있는 부분이었다.. 상단 타이틀 배경 자동 삽입되는 디자인 실제로 사용했을때는 화소가 낮은 이미지가 들어가 꺠져보이거나, 보여지는 위치가 엉뚱하거나. 사이즈, 크기, 위치를 고려하여 커스텀한 이미지를 넣으면 예쁘겠지만 그렇지 않은 경우가 대부분이기에 이부분을 안보이게 해서 사용하려고 한다. 수정 방향 완성 시안 잘 만들어진~ 북클럽 스킨을 사용해서 커스텀 하기! 수정 방법은 간.. 2021. 10. 4.
[HTML 태그 활용] MARQUEE 태그- 글자나 이미지를 흐르게 하는 태그 글자나 이미지를 흘러가게 하는 태그 Marquee tag 퍼블리싱 작업중에 글자/이미지를 화면에서 흐르게 하도록 하고 싶었는데, CSS로 하려고 보니 kryframe 애니메이션 효과를 주어야 했다. 문득 다른 방법은 없나 하고 검색하니, 마퀴 태그를 찾았다! (웹표준 HTML5에서는 더이상 지원하지 않는 기능이고, 브라우저마다 작동 여부를 확인해야 한다.) 간단하게 뒷배경이 흐르는 느낌만 주려고 했던거라 그냥 사용해 보기로 했다. 사용방법 왼쪽으로 흘러가는 글씨 여러가지 속성을 곁들어 주면 된다."따옴표가 있는것과 없는것 확인" width=400 height=300 direction="left[right|up|down]" 스크롤 방향 behavior=scroll[slide|alternate] 움직임 속성.. 2021. 8. 5.
[반응형] 모바일 화면 퍼블리싱 폰트 단위 rem 사용방법, rem계산 참고사이트 반응형 rem 단위 사용하기 REM 단위는 문서의 최상위 요소, HTML의 크기를 기준으로 한다. rem 적용 방법 html로 제작시 사이즈를 지정하지 않으면 기본적으로 시스템 사이즈가 적용 된다. html의 기본 시스템 사이즈는 { font-size:16px;} 이다. html { font-size:16px; }로 설정하면 16px = 1rem 17px = 1.063rem 예를 들어 html{font-size: 16px} 일때 p의 폰트를 16px로 a의 폰트를 17px로 하고싶다면? p{font-size:1rem} a{font-size:1.063rem} 이렇게 할 경우, 17px = 1.063rem 이런식으로 소수점 단위가 나오기 때문에 좀더 편하게 제어하는 방법은 아래처럼 html의 폰트 사이즈를 .. 2021. 6. 15.
반응형 디자인 레이아웃 너비 기준 반응형 레이아웃 가로 사이즈 디바이스에 따라 구분하는 기준은 가로 너비 가로 너비 값에 따라 디바이스 인식하여 레이아웃 변경 업계에서 많이 사용하는 값을 기준으로 하기도 하고, 레이아웃 특징에 맞춰 개별적인 값으로 정하기도 한다. ( 디바이스 종류별 너비 값 기준은 제각각 이므로 가로 사이즈는 정의된 표준값이 있지는 않다. ) 기준 해상도 위치를 중단점(Break point) 이라고 합니다. 중단점 나눌 때 대표적으로 디바이스 별로 많이 사용되는 가로 해상도는 다음과 같습니다. 반응형 레이아웃 01 최소한의 반응형 레이아웃 가장 많이 사용하는 대중적이고 간결한 기준 768px 미만 : 모바일 기기 768px ~ 1024px : 타블렛 1024px 이상: 데스크탑 /* 데스크탑 */ @media scree.. 2021. 6. 13.
모바일 리셋 스타일- mobile css reset 글로벌 리셋 소스 reset.css PC버전 reset.css /* reset */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0} fieldset,img {border:0 none} dl,ul,ol,menu,li {list-style:none} blockquote, q {quotes: none} blockquote:before, blockquote:after,q:before, q:after {content:'';content:none} input,select,textarea,but.. 2021. 6. 11.
티스토리 소스코드 코드블럭 꾸미기 티스토리 소스 코드 블럭 꾸미기 - 티스토리에서 제공하는 소스코드 스타일을 커스텀 하기 - highlightjs.org의 CDN을 활용 방법 1. 사이트 방문 https://highlightjs.org/download/ 2. cdnjs 복사 하기 ​ 3. 티스토리 설정에서 HTML 편집 4. Head 사이에 복사한 내용 붙여 넣고 적용 5. 적용 확인 6. 테마 변경 가능 https://highlightjs.org/static/demo/ 사이트에서 테마를 선택 하여 가져온 CDN에서 아래 경로에서 default를 변경해 주면 가능하다. 둘러 보다 보니 어두운 배경이 맘에 들어 agate 테마로 선택. 소스코드를 수정하고 적용하면 변경 완료!! 2021. 6. 9.
CSS Margin - 마진 CSS 마진 테두리 외부에 공간을 만드는 데 사용 여백-개별면 margin-top margin-right margin-bottom margin-left 위/오른쪽/아래/왼쪽을 하나로 합쳐서 적어줄 수도 있다. 여백 속성 auto - 브라우저가 여백을 계산 ex(div 가운데 정렬 - margin : 0 auto; ) 길이 - 여백을 px, pt, cm 등으로 지정 %로 여백을 지정 inherit-여백이 상위 요소에서 상속 (-) 음수 값 사용이 가능하다. ex ( margin : -10px 20px 20px 10px ; 위쪽으로 -10px 올라감 ) 2021. 1. 27.
CSS border-width 테두리 너비 CSS border-width 속성(테두리 너비) 네 테두리의 폭을 지정한다. 너비는 특정 크기 (px, pt, cm, em 등)로 설정하거나 미리 정의 된 값 (thin, medium, thick )으로 설정 p.one { border-style: solid; border-width: 5px; border-color: red } p.two { border-style: solid; border-width: medium; border-color: blue } p.three { border-style: dotted; border-width: 2px; border-color: orange; } p.four { border-style: dotted; border-width: thick; border-color:.. 2021. 1. 22.
CSS border 테두리 속성 CSS 테두리 속성 CSS border 속성을 사용하면 테두리의 스타일, 너비 및 색상을 지정할 수 있다. CSS 테두리 스타일 dotted -점선 테두리 dashed -파선 테두리 solid -단색 테두리 double -이중 테두리 groove-3D 그루브 테두리 / 테두리 색상 값 ridge-3D 능선 테두리 / 테두리 색상 값 inset-3D 삽입 테두리 / 테두리 색상 값 outset-3D 시작 테두리 / 테두리 색상 값 none -경계선 없음 hidden -숨겨진 테두리를 정의 HTML A dotted border. A dashed border. A solid border. A double border. A groove border. A ridge border. An inset border. A.. 2021. 1. 21.
CSS 컬러 (추천 컬러 사이트) CSS 색상 미리 정의 된 색상이름(blue, orange, red) 이나 RGB, HEX, HSL, RGBA, HSLA 값을 사용하여 지정된다. CSS 색상 이름 미리 정의 된 색상 이름을 사용하여 색상을 지정할 수 있다. LightGrey LightGreen LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateGray LightYellow PaleVioletRed PapayaWhip Peru CSS / HTML은 140 개의 표준 색상 이름을 지원하고 있다. (출처 : w3school ) CSS 색상 값 RGB 값, HEX 값, HSL 값, RGBA 값 및 HSLA 값을 사용하여 색상을 지정할 수 있다. 컬러 이름 "LightSalmon": rgb.. 2021. 1. 19.
CSS선택자 - 1 CSS 선택자 스타일 줄 HTML 요소를 찾거나 선택하는 기능. CSS 선택자 종류 단순 선택자 (타입, ID, 클래스를 기준으로 요소 선택) 조합선택자(+,>...) 가상 클래스 선택자(:hover,:after... ) 가상 요소 선택자(::after, ::before..) 속성 선택자 ([title="this"], [attribute~="value"]..) 단순 선택자 종류 : 타입선택자 / ID 선택자 / 클래스 선택자 타입선택자 html 요소 이름을 기반으로 선택 p, span, b, h1, h2, .... html html 파일의 p 요소에 해당 스타이 적용된다 css p { text-align: left; color: red; } 클래스 선택자 HTML 요소 중에 같은 class 이름이 있는 .. 2021. 1. 18.
[CSS] CSS 적용 방법 CSS를 삽입하는 세 가지 방법 외부 CSS 내부 CSS 인라인 CSS 방법 : head에 link로 스타일 파일 경로 지정 특징 : mystyle.css 하나의 파일만 변경하여 전체 웹 사이트의 css 변경 가능 방법 : head 섹션의 사이에 css를 넣어준다. 방법 : 태그 안에 직접적으로 스타일을 준다. 특징 : 가장 직접적인 css 적용 방법으로 html에 스타일 시트가 있다 하더라도 인라인 css 우선적용 * 스타일 시트의 장점(하나만 바꿔도 모두 변경) 을 잃게 되므로 되도록 사용 안하는 것이 유지 관리에 용이 * 운영 관리나 유지 보수 입장에서 추천 하는 방식은 외부 css - 내부 css - 인라인 css CSS 적용 우선 순위 Cascatidng (캐스케이딩 - 계단식 적용) 하나의 태.. 2021. 1. 16.
[CSS] CSS 란? CSS 란? CSS 는 캐스케이딩 스타일 시트의 약자 (Cascading Style Sheets) CSS 는 HTML언어가 화면(화면, 미디어화면, 모바일 화면 등)에 표시되는 방법을 보여주는 언어이다. CSS 파일만 변경해도 같은 HTML의 웹사이트를 전혀 다른 모양으로 꾸밀 수 있다. CSS 는 옷과 액세서리, 화장 같은 역할이라고 할 수 있다. (HTML:마크업언어는 몸체 구조) CSS 구문 CSS 규칙 세트는 선택자와 선언으로 구성 선택자 타입선택자 (ex: h1, h2, span, div, b, 등) 클래스(.classname) , ID (#idname) 선언 각 선언은 속성 : 값 으로 구성된다. 여러 선언이 있으면 선언 하나 끝나고 세미콜론 ( ; ) 반드시 삽입 단순 선택자 종류 선택자의 .. 2021. 1. 10.
[html/css] text-transform (소문자-대문자 자동변환) CSS text-transform Property 텍스트의 대소 문자를 자동으로 변환해 주는 속성 none 기본값 capitalize 각 단어의 첫번째 문자를 대문자로 uppercase 모든 문자를 대문자로 lowercase 모든 문자를 소문자로 div { text-transform:capitalize } div { text-transform:uppercase} div { text-transform:lowercase} 기본값 없음 상속 예 버전 CSS1 자바스크립트 구문 object .style.textTransform = "uppercase" w3school 샘플 2021. 1. 6.
제이쿼리 플러그인 owl carousel2 (슬라이드 이미지) Owl carousel2 올빼미 슬라이드 반응형 슬라이더 레이아웃 종류 설치방법 홈페이지에서 플러그인 다운로드 압축 해제 후 dist 폴더 안에 css 위치를 확인 안에 css 경로 입력 다음에 스크립트 경로 입력 제이쿼리 CDN 입력 반응형도 적용되어, 모바일로 볼때는 썸네일 한개만 보여지도록 한다. 데모중 Animate 효과를 적용하면 일반적으로 알고있는 1개씩 흘러가는 슬라이드가 가능하다~ owlcarousel2.github.io/OwlCarousel2/ Home | Owl Carousel | 2.3.4 Modules and Plugins Owl Carousel supports plugin modular structure. Therefore, you can detach plugins that you.. 2020. 12. 31.
책넘기는 효과 제이쿼리 플러그인 제이쿼리 플러그인 - BOOKLET 웹사이트 소책자, 브로슈어, 신문, 기업 홍보물 등에 종종 쓰이는 책장 넘기는 효과. 제이쿼리로 만들어져서 모바일에서도 볼 수 있다는 장점이 있다. 라이센스 MIT 라이센스로 수정, 배포가 자유로우며 실무 혹은 상업적으로 이용 가능 ( *단 저작권 표시및 허가 표시를 소프트웨어의 복제물 또는 중요한 부분에 기재한다) 사용방법 HTML Yay, Page 1! Yay, Page 2! Yay, Page 3! Yay, Page 4! 홈페이지를 방문하거나 데모를 다운 받으면 다양한 효과를 확인 할 수 있다. 너비/높이/속도/읽는방향,속도/페이지순서,패딩/그림자/자동시작/탭/화살표...등등 여러가지 옵션들을 선택 가능 활용 샘플 : 서울여자 간호대학 브로셔 다운로드 2021-07.. 2020. 12. 29.
728x90
반응형

티스토리툴바