본문 바로가기

웹코딩 배우기/· CSS140

다중 배경이미지 배경이미지는 다중으로 겹처 사용할 수 있다. 아래의 실습에 사용한 배경은 패턴과, 꽃이 각자 따로 쓰인거다. 하나의 이미지가 아님. See the Pen 다중 배경 by nilgi (@nilgi) on CodePen. 먼저 쓰는게 앞 이미지며 값이다. background: url(image.png), url(image.jpg); / 주소 background-position: right bottom, left top; / 위치 background-repeat: no-repeat, repeat; / 반복 background-size: 146px 251px, 50px 50px; / 크기 : 가로 세로(하나만 쓰면 가로세로 길이 동일), auto값은 자동크기 속기로 사용하자. background: url(ima.. 2021. 6. 28.
둥근 모서리 border-radius 둥근 모서리는 배웠는데 새로운걸 하나 더 배워 다시 써 본다. See the Pen border-radius by nilgi (@nilgi) on CodePen. 각 모서리 별로 둥글기를 지정할 수 있는지 첨 알았다. 아주 쓸만하겠다. 막 써야지. 야르~ • border-radius: 0 0 0 0; / 왼쪽 위부터 시계방향. 2021. 6. 24.
CSS 적용 순서 h2 {color: gold;} h2 {color: tomato;} / 적용 : 마지막에 사용한 값 적용 div#name {color: tomato;} / 적용 : 속성보다 구체적 id 선택 우선 #name {color: gold;} div[id=name] {color: gray;} .name {color: gold;} / 적용 : class 우선 h3 {color: tomato;} ※ CSS적용 순서 : 인라인, 내부, 외부 CSS링크 파일. 2021. 6. 22.
CSS에서 사용 하는 단위 정리 • 절대 단위 cm - centimeters mm - millimeters in - inches (1in = 96px = 2.54cm) *px - pixels / 값이 0이면 단위 생략 가능. dpi기준으로는 상대적이라 할 수 있다. pt - points pc - picas(1pc=12pt) • 상대 단위 *em - 2em; / 현재의 두배 ex - 현재 글꼴의 높이 기준 (거의 사용 안함) ch - 너비 값 기준 rem - 루트 요소의 상대적 크기 *vw - 2vm / viewport 너비의 2% vh - 2vh / viewport 높이의 2% vmin - vw, vh중 더 작은 쪽을 기준 vmax - vm, vh중 더 큰 쪽을 기준 *% * 가장 많이 사용하는 단위 2021. 6. 18.
!important !important는 말 그대로 중요함이다. 중요하니까 내가 먼저임. 우선순위. See the Pen !important by nilgi (@nilgi) on CodePen. id, class를 지정하여 값을 설정하였지만 !important로 모두 배경색이 노랗게 되었다. !important는 css 적용 순서를 무시하고 재설정한다. 그러나 이를 자주 사용한다는 건 css가 체계적이지 못하다는 뜻이기도 하다. 잘 못 된 부분은 수정을 해야 하는데 귀찮아서 !important를 사용하기도 한다. 정말 필요할 때만 사용하라 배웠다. 2021. 6. 16.
특정 속성 값을 가진 HTML 요소 선택 css에서 html 요소를 선택할 때는 #id, .class를 사용하는데 이 두 가지 말고 html의 속성 값을 이용해 선택하는 방법이 있다. 여러 가지라 헷갈리니 외울 필요는 없고 필요시 찾아서 다시 보면 될 것 같다. See the Pen 특정 속성으로 HTML 요소 선택 by nilgi (@nilgi) on CodePen. [속성] 특정 속성을 가진 html 요소 [속성="value"] 특정 속성의 값을 가진 요소 [속성~="value"] 특정 단어를 가진 요소 [속성|="value"] 지정한 값으로 시작하는 요소 : 값은 단독으로 쓰이거나 뒤에 '-' 기호가 있어야 함. [속성^="value"] 지정한 값으로 시작하는 모든 요소 [속성$="value"] 지정한 값으로 끝나는 모든 요소 [속성* =.. 2021. 6. 10.
CSS - 이미지 스프라이트 See the Pen 이미지 스프라이트 by nilgi (@nilgi) on CodePen. 이미지 스프라이트는 이미지 모음에서 원하는 부분만 화면에 표시하는 방법이다. 이는 여러 이미지를 불러오지 않기 때문에 빠른 로딩에 유리하다. ▲ 티스토리에도 이미지 스프라이트를 사용하고 있다. 이렇게 이미지 하나에 여러 이미지를 담아 원하는 부분만 표시하는 거다. ▲ 위 실습 페이지의 이미지도 왼쪽, 오른쪽, 마우스 오버 왼쪽, 오른쪽 4개가 아니라 하나의 이미지에 다 있는거다. • background: url('이미주 조소') 0px 0px; / 이미지가 시작하는 왼쪽px 상단px; 이미지를 만들 때 각 부분의 시작점을 기록해두면 아주 편하다. 2021. 6. 9.
굵은 밑줄 만들기 • background: linear-gradient(방향, 시작 색, 끝나는 색); 이용해 굵은 밑줄을 만들었다. See the Pen background: linear-gradient 굵은 밑줄 by nilgi (@nilgi) on CodePen. background: linear-gradient(to top, #1E90FF 50%, trasparent 50%); //방향은 위로, 파란색 50%에서 투명 50%로 %로 원하는 굵기를 만들면 된다. [웹코딩 배우기/· CSS] - 배경 그라데이션 linear-gradient(to right, 색, 색;) 배경 그라데이션 linear-gradient(to right, 색, 색;) 그라데이션 그라데이션 이쁘다. (ʘ‿ʘ✿) 가끔 써먹어야징~ (◕ㅁ◕✿) *.. 2021. 5. 24.
제목 줄(border)에 삼각형(방향) 넣기 이렇게 제목줄에 삼각형 방향을 넣는 방법이다. • transparent : 색 투명을 이용해서 만들었다. 태그는 복잡해 보이는데 'border 대각선 개념'을 이해하면 아주 쉽다. css에서 h3로 지정하면 모든 h3에 적용되니 이용하는게 좋을 것 같다. 2021. 3. 4.
글자 그라디언트 Text gradient 배경-background-에만 그라디언트 효과를 넣을 수 있는 줄 알았는데 글자도 된다. 배경은 linear-gradient 태그만 쓰면 되는데 글자는 background-image: linear-gradient(방향, 색, 색); // 그라디언트 효과 -webkit-background-clip: text; // 글자에만 효과주기 -webkit-text-fill-color: transparent; // 글자색 투명 요렇게 세트로 써야한다. 어렵고 이쁘다 ʘ‿ʘ 2020. 12. 31.
드롭다운 메뉴 만들기 기본 어렵네... 배움이란 항상 어려운 것이지. 이런거 잘 하는 사람 부럽다. 꾸준꾸준 틈틈이 하고는 있지만 이건 내가 할 수 있는 주제가 아닌 것 같기도 하고... 심심할 때 하면 재미지긴하다. 어렵다.^^ 끝. 2020. 9. 25.

티스토리툴바