CSS 검색 결과
15 개의 검색 결과가 있습니다.
웹언어/CSS

[CSS] 양쪽 정렬

css의 문자 정렬의 속성을 보면text-align : left (왼쪽 정렬), center(중앙정렬), right(오른쪽 정렬)을 주로 사용합니다. 하지만 text-align: justify; 라는 속성 있는데 이는 문자를 양쪽으로 정렬해 주는 속성입니다.양쪽 정렬이랑 문자를 영역 내부에 양쪽에 맞춰 정렬 할 때 사용합니다. 다만 여백이 있는 양쪽 정렬을 사용하려 한다면 :after를 사용하여 공백을 추가해야 한다. p{ text-align: justify;}p:after{ content: ''; display: inline-block; width: 100%;}

2024. 6. 10. 12:57
웹언어/CSS

사파리 브라우저에서 height:100% 적용안되는 이슈

CSS작업을 하게 되면 만나게 되는 문제 중 대표적인 것이 크로스브라우징입니다. 특히 ios의 사파리 브라우저의 경우 문제점이 더욱 많은 상황입니다. 사파리 브라우저에서 정상적으로 작동을 하게끔 처리 하기 위하여 @supports 문법을 사용하였습니다.  @supports @supports (-webkit-touch-callout: none) { .userguide-wrap .box{height:auto;} .userguide-wrap .boxframe{height:auto;}} @supports (조건)을 사용하면 특정 조건에 해당하는 상태에서만 css적용이 가능합니다. 그중에서도 -webkit-touch-callout: none를 사용하여 사파리 브라우저에서만 적용되는 코드..

2024. 6. 5. 10:26
웹언어/지식인 답변 모음

[지식인] 탭메뉴 만들기

[지식인] 탭메뉴 만들기 -하나의 탭을 클릭하면 해당 콘텐츠만을 표시하는 텝 콘텐츠를 만들어 봅시다. -탭은 요소, 패널은 요소로 작성하시오. 답변 -html 전문 포함 -제이쿼리 사용 -텝메뉴 구현 panel 1 panel 2 panel 3 panel 4 컨텐츠 1 컨텐츠 2 컨텐츠 3 컨텐츠 4 풀이 풀이는 script부분을 확인하시면 됩니다. 탭메뉴는 탭을 눌럿을 때 메뉴가 바뀌는 기능으로 우선 탭을 누를때 이벤트가 발생합니다. // 클릭이벤트 탭을 눌럿을때 이벤트 발생 $('.flex a').click(function(){ } 탭을 누른뒤 탭의 index() 정보를 변수로 저장합니다. index란 내가 누른 탭이 몇번째 탭인지에 대한 정보 // 변수로 저장 let index = $(this).in..

2022. 6. 19. 11:52
웹언어/CSS

초보자 입문 CSS #03

서론 오늘은 선택자들에 대해서 알아 보고자 합니다. 매우 중요한 개념인 선택자이기 때문에 꼭 여러번 읽어 보시고 모르는 부분이 있으면 댓글이나 채널톡을 통하여 질문해주시면됩니다. 채널톡은 오른쪽 하단에 있는 아이콘을 누르면 됩니다. ↑↑↑ 채널톡 아이콘 ↑↑↑ 그럼 시작하겠습니다. 초보자 입문 CSS #03 오늘은 선택자에 대해서 알아본다고 했는습니다. 그러면 선택자가 어떤것인지 간략하고 쉽게 설명하고 넘어가도록 하겠습니다. 위의 이미지 처럼 CSS 제일 앞에 붙는 녀석을 선택자 라고 합니다. {} 안에는 속성과 속성 값으로 구성되어 있지요. 좀더 알아본다 라고 하면 F12를 눌러 관리자 페이지를 열어 보세요 관리자 페이지에서 요소 혹은 Elements 라는 상단탭에 들어가보세요 요소와 Elements ..

2021. 7. 16. 11:02
웹언어/CSS

초보자 입문 CSS #02

서론 최근 회사의 프로젝트를 진행하다보니 매일 업로드 하지 못했습니다. ㅠㅠ 어느정도 프로젝트가 안정기로 접어들어서 다시 포스팅 하게 되었습니다. 오늘은 문서에 css를 적용하는 3가지 방법에 대해서 알려 드리려 합니다. 초보자 입문 CSS #02 문서에 css를 적용하는 3가지 방법은 아래의 1.요소에 style을 설정하여 요소에 직접 적용한다. 2.문서 내부에 문서 내에 style을 만들어서 css 설정을 할 수 있다. 주로 사이에 만든다. 3. 외부에 css파일을 생성하여 적용 제일 많이 사용하는 방법이다. css폴더를 넣어 관리 하기도 하고 같위 위치에 두어 파일 관리를 하기도 한다. html에서는 태그로 css파일이 위치해 있는 곳을 선언해준다. p{ color : blue; font-size ..

2021. 7. 15. 17:26
웹언어/CSS

초보자 입문 CSS #01

서론 초보자를 위한 간단한 자료를 만들어 보고자 한다. 누군가에게는 도움이 되면 좋을 것 같아 이렇게 만들어서 포스팅 하게 되었다. 주로 웹디자이너 분들이나 퍼블리싱에 관심 있는 분들을 위한, 혹은 아무것도 모르는 초보자를 위한 강의이다. 매일매일 css에 대해서 조금씩 포스팅 할 계획이다. 초보자 입문 CSS #01 실전에서 자주 사용하는 CSS 속성 및 설명 오늘은 첫번째 시간으로 CSS에는 아래와 같이 다양한 속성들이 있다라는것만 알아보고자 속성과 설명을 간단히 적어 볼 것입니다. 추후에 해당요소들의 사용법이나 세부 사항은 다음 게시물 부터 적을 예정입니다. 질문 있으시면 댓글로 남겨주시거나 채널톡으로 남겨주시면 빠른 피드백 받아 보실 수 있습니다. 크기 관련 width : 요소의 너비 (가로크기)..

2021. 7. 7. 21:02
웹언어/CSS

[CSS] 그라데이션 설정하기

[CSS] 그라데이션 설정하기 그라데이션? 그라디언트? 그라데이션(Gradation)은 하나의 색채에서 다른 색채로 변하는 단계, 혹은 그러한 기법을 의미하는 단어다. 아래아 한글이나 파워포인트, 포토샵 등을 이용해 제작해 본 사람들은 이 기법을 쉽게 이해할 수 있을 것이다. 순 우리말로는 '바림', 한자어로는 계조(階調)라고 한다. 일본어 잔재 현장 용어로는 보카시라고도 한다. 외래어 표기법에 의거한 표준어로는 그'러'데이션이라고 한다. 사진이나 영상 전문가들은 계조라는 표현을 상당히 쓰는 편이다. 서양에서는 'Gradation(그라데이션)'보다 'Gradient(그레이디언트)'라는 표현을 더 많이 쓴다. 2021.06.04 - [디자인/색] - [COLOR] 그라데이션 알아보기 [COLOR] 그라데이..

2021. 6. 28. 11:21
웹언어/CSS

[CSS] #, . / id와 class

[CSS] #, . / id와 class css를 작성하다보면 #과 .을 붙여 코드를 작성을 하게 된다. 예전에 코드를 처음 배울때 #과 .의 차이가 뭔지 몰랐고 개발을 하다 보니 #과 .의 차이를 알게 되었다. id와 class의 차이점 id와 class의 차이점이라 말할만 한것은.... id와 class의 차이점이라 말할만 한것은.... # ID #은 html에서 설정한 id에 css코드를 적용할 때 사용한다. #은 css말고도 javascript에서도 사용한다. #[이름]은 id[이름]와 같다. #title{ font-size : 30px; } #contents{ color : red; } . Class .은 html에서 설정한 class값에 css코드를 적용할 때 사용한다. class는 id와 달..

2021. 5. 31. 10:09
웹언어/코드공유

[코드공유] 필터 갤러리(반응형) 만들기

[코드공유] 필터 갤러리(반응형) 만들기 필터 갤러리를 만드는 코드를 공유하고자 한다. 필터는 내가 원하는 부분만을 찾기 위한 장치이기에 필터에 해당되는 이미지를 보게 해주는 코드를 만들 예정이다. 도움이 되었다면 공감 혹은 덧글 남겨주면 좋겠다. 첨부파일 참고자료 ↓↓↓↓ 결과물 새로 고침 할 때마다 배열을 섞기 때문에 매번 다르게 정렬된다 각 필터에 들어가면 각 필터에 해당되는 자료들만 나타나게 된다. HTML 코드 All Action Animation Comedy Drama Thriller Horror Romance HTML 관전 포인트 1)제이쿼리 사용 2)li에 data-filter을 이용하여 필터 만들어주기 3).poster의 자식인 .itemBox들 주석처리 1) 좀더 편한 접근을 위하여 제..

2021. 5. 14. 09:00
웹언어/CSS

[CSS] 요소를 투명하게 만드는 여러가지 방법들

투명하게 만들기 CSS의 기능만으로 요소를 화면에서 보이지 않게 할 수 있다. 아래의 방법들을 통하여 요소를 투명하게 설정 할 수 있다. 방법1. opacity 0 설정 div{opacity : 0;} opacity는 불투명도라고 한다. 불투명도 값이 0 이면 요소는 화면에서 보이지 않게 된다. opacity의 단점으로는 요소와 자식요소도 함께 투명해지기 때문에 요소에만 투명도를 유지하고 싶다면 다른 방법을 사용해야 된다. 공간을 차지한다. 방법2. rgba에서 a를 0값으로 설정하기 div{color : rgba(0,0,0,0); background: rgba(0,0,0,0);} 배경색과 글자색에 a에 투명을 주면 해당요소가 보이지 않게 된다 자식요소에 설정을 따로 하지 않으면 요소의 속성을 상속받기에..

2021. 5. 1. 09:00
웹언어/jQuery

[jQuery] 제이쿼리 css

jquery .css() .css()은 요소의 css 속성을 바꾸는 기능을 수행하는 매소드입니다. 사용법 1 하나의 속성 수정할 때 //요소를 고르고 css('속성 이름','바꿀 값') $(요소).css('color','red'); 사용법 2 여러 개의 속성을 수정할 때 //요소를 고르고 css({'속성 이름':'바꿀 값'},{'속성 이름':'바꿀 값'}); //하나의 요소를 바꿀 때에도 사용가능하다 $(요소).css({'color':'red'}); $(요소).css({'color':'red'},{'font-size':'20px'}); $(요소).css({'color':'red'},{'font-size':'20px'},{'width':'100%'}); 제이쿼리 .css()는 혼자 사용하지 않고 특수한 조..

2021. 4. 13. 10:04
웹언어/CSS

[CSS] @media 쿼리 / 반응형 만들기

media쿼리를 이용하면 반응형 페이지를 만들수 있다. 반응형 페이지란 페이지 하나로 화면사이즈에 따라 다르게 보여주는 표현해주는 기술입니다. 사용자가 보기 편리하게 만드는 페이지입니다. 디바이스별 사이즈 해상도 320px 이상 또는 768px 미만 -> 스마트폰 해상도 768px 이상 또는 1024px 미만 -> 태블릿 해상도 1024px 초과 -> PC 사용법 HTML head 부분에 아래의 코드를 넣어줍니다. 아래의 코드는 meta태그로 뷰포트를 사용함으로 장치의 크기에 따라서 크기를 바꿔주겠다는 명령어입니다. meta태그가 선언되어야지 반응형으로 만들수 있습니다. 방법 1. 모바일에서 PC로 커진다. /* 모바일 -> PC / 점점 커진다.. */ @media screen and (min-widt..

2021. 4. 1. 10:56
웹언어/CSS

[CSS] 선택자 :Hover

:hover란 :hover는 html에서 요소에 마우스를 올렸을 때 반응하게 하는 css요소이다. javascript 혹은 jquery의 조건으로도 사용가능한 요소이다. 마우스로 반응 하기에 모바일이나 테블릿에서는 효과를 적용하기가 쉽지 않다. :hover 적용 방법 css파일에서 이벤트를 적용하고 싶은 위치에 :hover를 선언해주고 나머지 코드를 작성하면 된다 코드 [css] /*초기화*/ *{margin: 0 auto; padding: 0;} /*기본셋팅*/ h1, p, button, div{ border : 1px solid black; width : 300px; height : 70px; text-align : center; line-height : 70px; font-size : 15px; d..

2021. 3. 25. 09:25
웹언어/CSS

[CSS] Parallax Scroll / 패럴렉스 적용방법

Parallax Scroll 적용방법 영역 요소에 background-attachment : fixed; 를 선언하고 background를 설정함으로 손쉽게 적용할수 있습니다. 코드 [html] Parallax Effect 패럴렉스는 끌려가는 느낌을 줍니다 (시각적 효과) Normal 일반적인 효과는 컨텐츠와 같이 움직입니다. [css] *{ margin : 0; padding : 0; } div{ height : 100vh; width : 100%; } h1{ text-align : center; line-height : 100vh; color : white; font-size : 70px; } p{ text-align : center; line-height : 100vh; font-size : 30p..

2021. 3. 24. 09:45
웹언어/CSS

[CSS] 스크롤바 커스텀

[css] /* 영역 설정*/ 영역{ height: 300px; width: 65px; background: #F5F5F5; overflow-y: scroll; } /* 스크롤바 설정*/ 영역::-webkit-scrollbar{ /* 스크롤바 막대 너비 설정 */ width: 6px; } /* 스크롤바 막대 설정*/ 영역::-webkit-scrollbar-thumb{ /* 스크롤바 막대 높이 설정 */ height: 17%; background-color: rgba(255,255,255,1); /* 스크롤바 둥글게 설정 */ border-radius: 10px; } /* 스크롤바 뒷 배경 설정*/ 영역::-webkit-scrollbar-track{ background-color: rgba(0,0,0,0)..

2021. 3. 15. 14:39