CSS 썸네일형 리스트형 [css] 디바이스 화면 회전 시 폰트 사이즈 고정 body { -webkit-text-size-adjust : none; } auto : 화면 폭에 맞춰 폰트 사이즈를 자동으로 조절 none : 폰트 사이즈 고정 n% : 폰트 사이즈를 지정된 사이즈로 변경 더보기 [css] css 선택자(Selector), 결합자(Combinators) 결합자 정리하려고 쓰는 글! 1. 기본 선택자 전체 선택자(*) 모든 요소를 선택한다. *{ margin : 0; padding : 0; } 타입 선택자 HTML의 요소를 선택한다. (h1, span, p, div 등) h1{ color : #000; } 클래스 선택자(.) 해당 클래스를 가진 요소를 선택한다. .code{ font-size : 15px; } 아이디 선택자(#) 해당 아이디를 가진 요소를 선택한다. #code{ font-size : 15px; } 속성 선택자([attributename]) attributename 속성을 가진 요소를 선택한다. input[type=text]{ width : 200px; } 2. 결합자 자손 결합자(공백) 첫번째 요소의 자손을 선택한다. A B{ color .. 더보기 [css] 우선 적용되는 순서 (우선 순위) 속성값 뒤에 !important가 붙어있는 속성 html 파일에서 스타일을 직접 지정한 속성( 더보기 [css] background 속성 총정리 오늘은 웹사이트를 꾸며줄 때 많이 사용하게 되는 background 속성에 대해 알아보자. 사이트 내에서 배경을 넣을 때는 거의 대부분 이 속성을 사용하게 된다. 설정할 수 있는 속성 값이 여러 가지라 내가 원하는 대로 잘 되지 않고 어떻게 해야 하는지 헷갈릴 때가 은근히 많다. 정리도 할 겸 헷갈릴 때 볼 겸 포스팅 해 본다! gogo! background-color 단순히 색상만을 채워 넣을 때 쓰는 속성. 다음으로 나올 background-image와 같이 사용하게 되면 image가 우선적으로 보이고 그 아래에 color가 적용된다. .bg{ width : 100%; height : 100%; background-color : #fff; } background-image 특정 이미지를 배경으로 넣을.. 더보기 [css] table border 강제로 제거하기 html에서의 적용 css에서의 적용 table{ border-style : hidden!important; } important 남용은 좋지 않지만 테이블 보더가 겹칠땐 이렇게 하는 게 제일 나은 것 같다 더 좋은 방법 아시면 댓글 부탁드려요.................... 더보기 [css] 컨텐츠 숨기기 (opacity, visibility, display의 차이) CSS에서 컨텐츠를 숨기는 방법은 세 가지가 있다. 숨김 표시 opacity: 0; opacity: 1; visibility: hidden; visibility: visible; display: none; display: block; 여기서 각각의 속성의 차이는 아래와 같다. opacity 영역을 유지함, transition 적용 가능 visibility 영역을 유지함, transition 적용 불가능 display 영역이 사라짐, transition 적용 불가능 영역이 유지되느냐 사라지느냐, 애니메이션(트렌지션) 효과가 적용 가능하냐 가능하지 않냐의 차이이다. opacity - 불투명도 조절 기본 값은 1 - 완전히 보이는 상태 0으로 갈수록 컨텐츠가 투명하게 보인다. img{ opacity: 0.5;.. 더보기 [css] SCSS/SASS에서 변수,믹스인 사용하기 SCSS에서는 JS에서처럼 변수를 사용할 수 있습니다! 변수를 사용하게 됨으로써 코드도 깔끔해지고 코딩하는 시간도 줄일 수 있으니 알고 계시면 좋을 거예요!!! 1. 변수를 담을 SCSS파일 만들기 먼저 변수를 끌어서 쓸 SCSS파일에 변수를 담은 SCSS파일을 import 해주어야 한다. 변수를 담은 SCSS파일이 _variable.scss 라고 하면, 변수를 사용할 SCSS파일에 아래처럼 작성해준다. (파일명 언더바 생략 가능, 확장자 생략 가능, 여러 파일 콤마(,)로 구분하여 작성 가능) @import "variable"; @import "_variable"; @import "variable.scss"; @import "variable", "font"; 파일명 앞에 언더바(_)는 필수! SCSS를.. 더보기 [css] 스크롤 바 커스텀 하는 방법 ::-webkit-scrollbar{ background-color: #fff; width: 10px; height: 10px; } 스크롤 바의 배경색과 두께와 길이를 설정한다. ::-webkit-scrollbar-thumb{ background-color: green; border-radius: 10px; } 스크롤 막대를 설정한다. 나는 색과 보더를 지정해주었다. ::-webkit-scrollbar-track{ background-color: orange; } 스크롤 막대 외부를 설정한다. 설정된 모습은 아래와 같다. 더보기 이전 1 2 3 다음
