하루하루 발전하는 개발자와 블로그🙌🏻 하루하루 발전하는 개발자와 블로그🙌🏻

Study/css

• position:fixed; 를 사용할 때마다, 따라와야 할 것??!

  Study/css 2020. 4. 7. 23:56

  position: fixed; 를 사용할 때마다 내가 기억해서 함께 써 줘야할 코드는 바로 width: 100%; 이다. 왜?? 기본적으로 position: fixed 는 element를 기존 다른 것들에서 떼어내서, 다른 레이어에 올려놔야 함으로 너비값을 화면에 맞게 다시 설정해주어야함.

  Read More
• color: inherit;

  Study/css 2020. 4. 7. 23:45

  color: inherit; inherit => 상속받다, 유산받다. 즉, 부모값을 그대로 받다. 폰트의 색을 부모 값을 받는다는 말. a { color: inherit; } 이렇게 설정해두면, link걸려있어서 파랗게 변하는 아이콘이나 글자 등의 색을 파란색이 아니라, 부모의 값을 받는 색, 폰트값으로 정해둔 색을 받는 다는 말!

  Read More
• cursor 태그

  Study/css 2020. 4. 7. 23:26

  cursor : pointer tag를 넣은 선택자에 커서를 올릴시 커서가 포인트 모양, 즉, 손 모양으로 바뀌게 됨.

  Read More
• google fonts css에서 사용하기

  Study/css 2020. 4. 7. 22:57

  1. 구글 폰트에 들어간다. 내가 사용하고 싶은 폰트를 고른다. 2. 내가 원하는 굵기를 선택하며 customize 한다. **참고: 너무 많이 선택하면, 로딩타임이 느려짐.. 3. customize 된 폰트의 @import 주소를 따온다. 4. styles.css에 @import한다. 그리고 body값에 font-family: "폰트이름", -apple~~~값을 넣어준다. -apple-system, BilnkMacSystemFont,~~~는 "open sans" 폰트를 먼저 사용하는걸루 하구~ 없으면, 다음 폰트 사용하구~, 없으면 그 다음폰트 사용하구~~ 이런의미!

  Read More
• reset.css와 normalize.css

  Study/css 2020. 4. 7. 20:44

  CSS 도구 : reset CSS 수많은 html 태그들은 각각의 스타일을 가지고 있다. 각각 margin 값이나, padding 값이 다르다. 그리고 이게 브라우저 마다 태그의 스타일 값이 다르기도 하다. ex) h1의 크기나 마진값이 브라우저마다 각각 다르다거나.. reset.css 값을 주면 h1이든 h3이든 글자 크기가 모두 같아짐. 그래서 그 상태에서 각각 다르게 값을 주면서 꾸미기가 어려움. reset.css를 통해 모든 값들의 마진과 패딩을 0으로 줄 수 있다. 기본 줄 높이, 여백 및 제목의 글꼴크기 등과 같은 브라우저상의 불일치를 줄이는 것! 프로젝트를 시작할 때, 변경되지 않은 상태로 이것을 사용하는 것이 좋다. 그리고 내가 각각 꾸며주면 되는 것~! /* http://meyerweb...

  Read More
• z-index 란?!

  Study/css 2020. 4. 5. 19:14

  우리들은 HTML 페이지를 2차원 평면으로 생각한다. 왜냐하면 여러 텍스트, 이미지와 다른 엘리먼트들이 서로 겹치지 않고 배열되기 때문이다. 하나의 렌더링 흐름만이 존재하며 모든 엘리먼트들은 다른 엘리먼트들이 어떤 공간을 차지하고 있는지 알고 있다. CSS 스타일 규칙을 보면 기본 렌더링 레이어(layer 0) 이외의 추가적인 레이어를 생성하고 여기에 박스를 위치시킬수 있다는 것을 알 수 있다. 레이어의 Z축 위치는 렌더링 될 때 쌓임 순서를 결정하는 하나의 정수로 결정된다. 큰 정수는 화면을 보고있는 사용자에게 가까운 것을 의미한다. Z축 위치는 z-index 속성 값을 설정함으로써 바꿀 수 있다. z-index CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 ..

  Read More
• height: 100% vs 100vh

  Study/css 2020. 4. 3. 21:59

  .container{ background: beige; height: 100%; } height: 100%; 라는 의미는 선택자 즉, .container가 들어있는 부모의 100%를 채우겠다는 말. html파일이 이렇게 되어있다면, container의 부모는 body 인것이다. body { height: 100%; } .container{ background: beige; height: 100%; } 그럼 body에 높이 100% 값을 추가해보자. 그러나, 그래도 아무런 변화가 없음. 그래서 body, html { height: 100%; } .container{ background: beige; height: 100%; } body뿐 아니라 html의 값도 같이 설정해줘야한다. 그러나 만약 내가 이렇게..

  Read More
• flex-box

  Study/css 2020. 4. 3. 21:52

  flex-box는 CSS의 꽃이라 할 수 있음. flex-box 사용의 유래 아주 예전에는 모든 브라우저에서 호환 가능하고 강력하게 레이아웃을 만들기 위해선 position, float, table 등을 이용했었다. 근데 너무 복잡하고 할 수 없는 기능도 있었다. 사이즈상관없이 동일한 간격으로 놓기.. 같은거.. 이젠, flex-box가 있어서 이런것들을 손쉽게 할 수 잇음 **float을 먼저 알아보자. float의 원래의 목적은 이미지와 텍스트를 함께 놓을 때, 어떻게 함께 배치할 지 정리하기 위해 나타난 아이었다. 예전에는 레이아웃 할만한 도구들이 없었어서 float을 레이아웃을 위해 사용했었는데, 이젠 flex-box가 있으므로 float은 원래 용도로만 사용~~! flex-box는 크게 2가지만..

  Read More