(webFront) CSS 정리

1 분 소요

💼📝🔑⏰ 📙📓📘📒🎓

💼 css 속성 정리

  • border-raidus : 둥글게 만들때 사용하는 속성
    • 완전히 둥글게 만들기 위해서는 width, height 에 따라 계산해줘야한다.
    • 아예 50%를 주게 되면 둥글게 바뀌게 된다.
    • border-radius: 50%;

📝 상속(inherit)

상위 엘리먼트의 속성이 변경됨에 따라 자식 엘리먼트가 바뀐다는 것은 대부분 의경우 자식 엘리먼트가 속성이 inherit인 경우 속성이 따라가는 개념이다.

  • 대표적인 inherit 속성들 color, text-align, font-size 등이 있다.
  • color:inherit : 부모 엘리먼트의 color 속성을 따르겠다는 속성값이다.

📝 노말라이즈

해당 엘리먼트에 기본적으로 적용되어 있는 디자인을 없애서 다시 평범하게 만든다.

  • a, body, ul, li, ol, li, h1, h2, h3, h4, h5, h6 은 사용하기전에 노말라이즈 해야 한다.
  • ul,li 노말라이즈 예제 
    body, ul, li {
    margin:0;
    padding:0;
    list-style:none;
}

📝 position 속성

  • absolute, fixed
    • 너비 : 최대한 줄어든다. (아무리 display:block 이더라도 너비 최소화)
    • 본질 : 유령화, 유령의집화
    • 겹침허용 : 겹치는게 가능
    • 이동 : top, left, right, bottom 속성으로 이동을 한다.

💼 img 테그

  • img는 display:inline-block 기본 속성을 갖는다.
  • width, height 중 1개의 속성만 줄 경우 비율에 따라 줄어드는데,
  • 만약, width, height 둘다 속성을 줄 경우 비율이 깨지게 되므로 사용하지 말자.

💼 before, after

사용하는 이유는 돈을 표기하는 “원”이나 이름뒤에 “님”을 일괄로 해당문자의 앞이나 뒤에 붙여야 할때 사용한다.

  • befer는 해당하는 CSS 선택자의 첫번째 Child로 content를 추가할 수 있다.
  • after는 해당하는 CSS 선택자의 마지막 Child로 content를 추가할 수 있다.

See the Pen before, after by RichardKim (@hiddenevent) on CodePen.

댓글남기기

참고