See the Pen box-sizing by nilgi (@nilgi) on CodePen. box-sizing을 사용하면 박스의 크기에 padding과 border의 크기를 포함하게 된다. 이거 공부했는데 정리한 게 없네. 없는 거야 못 찾는 거야. 하.....

See the Pen var() function by nilgi (@nilgi) on CodePen. :root { --red: #3c9066; --black: #fff; // root에 미리 이름과 값을 저장한다. } background: var(--red); color: var(--red); border-bottom: 5px solid var(--red); color: var(--red); background: var(--black); padding: 10px; border : 2px solid var(--red); color: var(--red); var(이름); 이렇게 쓴다. 이는 root값만 변경하면 문서의 모든 색깔을 변경할 수 있다는 뜻이다. 잘 쓰면 아주 편하다. • var(); 재지정 하..

배경이미지는 다중으로 겹처 사용할 수 있다. 아래의 실습에 사용한 배경은 패턴과, 꽃이 각자 따로 쓰인거다. 하나의 이미지가 아님. 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..

둥근 모서리는 배웠는데 새로운걸 하나 더 배워 다시 써 본다. See the Pen border-radius by nilgi (@nilgi) on CodePen. 각 모서리 별로 둥글기를 지정할 수 있는지 첨 알았다. 아주 쓸만하겠다. 막 써야지. 야르~ • border-radius: 0 0 0 0; / 왼쪽 위부터 시계방향.

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링크 파일.

• 절대 단위 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중 더 큰 쪽을 기준 *% * 가장 많이 사용하는 단위

!important는 말 그대로 중요함이다. 중요하니까 내가 먼저임. 우선순위. See the Pen !important by nilgi (@nilgi) on CodePen. id, class를 지정하여 값을 설정하였지만 !important로 모두 배경색이 노랗게 되었다. !important는 css 적용 순서를 무시하고 재설정한다. 그러나 이를 자주 사용한다는 건 css가 체계적이지 못하다는 뜻이기도 하다. 잘 못 된 부분은 수정을 해야 하는데 귀찮아서 !important를 사용하기도 한다. 정말 필요할 때만 사용하라 배웠다.

css에서 html 요소를 선택할 때는 #id, .class를 사용하는데 이 두 가지 말고 html의 속성 값을 이용해 선택하는 방법이 있다. 여러 가지라 헷갈리니 외울 필요는 없고 필요시 찾아서 다시 보면 될 것 같다. See the Pen 특정 속성으로 HTML 요소 선택 by nilgi (@nilgi) on CodePen. [속성] 특정 속성을 가진 html 요소 [속성="value"] 특정 속성의 값을 가진 요소 [속성~="value"] 특정 단어를 가진 요소 [속성|="value"] 지정한 값으로 시작하는 요소 : 값은 단독으로 쓰이거나 뒤에 '-' 기호가 있어야 함. [속성^="value"] 지정한 값으로 시작하는 모든 요소 [속성$="value"] 지정한 값으로 끝나는 모든 요소 [속성* =..

See the Pen 이미지 스프라이트 by nilgi (@nilgi) on CodePen. 이미지 스프라이트는 이미지 모음에서 원하는 부분만 화면에 표시하는 방법이다. 이는 여러 이미지를 불러오지 않기 때문에 빠른 로딩에 유리하다. ▲ 티스토리에도 이미지 스프라이트를 사용하고 있다. 이렇게 이미지 하나에 여러 이미지를 담아 원하는 부분만 표시하는 거다. ▲ 위 실습 페이지의 이미지도 왼쪽, 오른쪽, 마우스 오버 왼쪽, 오른쪽 4개가 아니라 하나의 이미지에 다 있는거다. • background: url('이미주 조소') 0px 0px; / 이미지가 시작하는 왼쪽px 상단px; 이미지를 만들 때 각 부분의 시작점을 기록해두면 아주 편하다.

• 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, 색, 색;) 그라데이션 그라데이션 이쁘다. (ʘ‿ʘ✿) 가끔 써먹어야징~ (◕ㅁ◕✿) *..