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

Study

• selector 선택시 유의점

  Study/css 2020. 4. 8. 23:05

  css selector 선택시, .friend .friend__avatar {} 이렇게 한칸 띄어 쓰면 friend 클래스 안에 있는 friend__avatar를 선택하는 것이 되고, .friend__avatar.g-avatar{} 이렇게 띄지 않고 붙여 쓰면 이 freind__avatar와 g-avatar 클래스를 두 클래스를 가진 element에 적용된다는 의미이다. 즉, 두 클래스 이름을 모두 가져야 적용한다는 말.

  Read More
• li 태그 겹사용 금지

  Study/css 2020. 4. 8. 23:01

  li태그 안에 li태그를 또 넣을 수 없당... 넣으면 .. 나중에 display 할떄 오류가 생김... 코딩 후 깨달음.

  Read More
• box-sizing: border-box;

  Study/css 2020. 4. 8. 21:30

  box에 margin, padding, border 값 등을 줄 경우, margin, padding, border 값들은 원래 있던 박스 사이즈 위에 얹어져 전체 박스의 값이 더 커지게 된다. 예를들어, 가로 150px, 세로 50px 크기의 박스가 있다고 해보자. 여기에 margin 10px, padding 20px, border 5px 값을 준다면, 이렇게 박스 자체가 커지게 됨. 그런데 이 박스에게 height나 width값을 100%줄경우, box의 값이 커져버리면 화면을 이탈하는 경우가 발생함. 그래서 우리는, padding이나 margin 값을 줘도 박스 자체의 크기는 커지지 않도록 하기 위해 box-sizing: border-box; 값을 준다. 그러면 padding값을 줘도 box의 전체 ..

  Read More
• HTML과 JavaScript의 만남 3 (콘솔)

  Study/JavaScript 2020. 4. 8. 16:59

  콘솔을 이용해 웹사이트에서 간단히 자바스크립트를 이용할 수 있음.

  Read More
• 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