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

Study/css

• div box를 가운데 정렬하는 방법

  Study/css 2020. 5. 4. 12:55

  margin: 0 auto; 이렇게 간단한걸 30분을 헤매었다. ㅋㅋㅋㅋㅋflex에서 방황하며...

  Read More
• input box 테두리 변경방법

  Study/css 2020. 5. 4. 10:57

  input 박스를 클릭 했을떄 나오는 테두리 색상 변경하기 input:focus {outline:2px solid #d50000;} input 박스를 클릭 했을떄 나오는 테두리 색상 없애기 input:focus {outline:none;}

  Read More
• position: fixed; 된 친구를 어떻게 가운데 정렬할 것인가?!

  Study/css 2020. 4. 10. 16:38

  css.... 참 흥미롭지만 참 알다가도 모를 녀석이다..ㅎㅎㅎㅎ 열심히 코딩 하다가 알게 된 사실, position: fixed; 된 친구를 어떻게 가운데 정렬할 수 있을까? 바로바로바로... margin: 0 auto; left:0; right:0; 요 친구들을 써주면 된다. 이 방법이 완전히 가운데 정렬하는 방법이다. 궁금하다면, 테스트 해 보시라~~ㅎㅎ

  Read More
• overflow tag

  Study/css 2020. 4. 9. 15:12

  overflow = 넘치다 넘치는 content를 어떻게 처리할지 명령하는 태그이다. Ink overflow and scrollable overflow There are two types of overflow that you might encounter in CSS. The first is described as ink overflow. This is the overflow of painting effects which do not affect layout or otherwise extend the scrollable overflow region, such as box shadows, border images, text decoration, overhanging glyphs, outlines, etc. ..

  Read More
• text-decoration: none;

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

  a태그를 사용하다보면, a태그 이런식으로 밑줄과 파란색이 생긴다. 이걸 색깔도 원래 바디에 있는 글자색, 밑줄도 없애고 싶다면 이렇게 하면 글자 색은 부모요소인 바디 값을 받아서 나오고, 텍스트 데코레이션인 밑줄은 사라지게 된다.

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