[웹] CSS 복습

안녕하세요.

 

저번 시간에 이어 CSS 공부 기록을 포스팅합니다.

생활코딩 WEB2 CSS 를 학습하며 기록한 것들입니다.

생활코딩

 

 

•  <!-- , --> 은 html에서 주석과도 같은 역할을 한다.
• <style> </style> 은 태그 사이의 내용을 CSS로 해석하라는 의미다.
• 태그에 대한 스타일을 묶을 수 있다
  • 예 : a {color : black;} (a태그들이 색을 모두 검은색으로 바꿈)
• 특정 코드만 바꾸길 원한다면 Class 와 id 를 이용하면 된다
  • class 의 스타일을 설정할 때는 .을 붙이고, id의 스타일을 설정할 때는 #을 붙인다.
  • class 보다 id가 우선순위에 있다.
  • #active {color:red;},.saws {color : gray;} 이런 식으로
• 결론적으로 태그<클래스<아이디 순으로 쌔다.
  • 만약 같은 파워끼리 만나면, 마지막에 입력되는 코드가 가장 우선순위가 높다.
  • 특정 id 값은 단 한번만 등장해야한다. 예를 들어, class 라는 id가 있으면, 그 class 가 쓰인 태그는 단 하나만 존재해야한다.
• html 에서 태그들은 각자 차지하는 공간이 있다.
• border : 테두리
• /* */  : 주석
• <h1> 처럼 자기 컨텐트보다 많은 공간을 차지하는 태그를 block level element.
• <a> 처럼 자기 컨텐트만큼만 공간을 차지하는 태그를 inline element.
• display 라는 속성으로 block 을 inline 으로, 또는 반대로 만들 수 있음.(inline, block /  none - 이건 화면에서 사라지는 것)
• selecter 에서 콤마 사용 할 수 있음
• border-width : 5px; border-color : red; border-style : solid; 이 세가지를 border : 5px solid red; 이렇게 한번에 표현 가능
• 테두리와 컨텐트 사이 여백을 주고 싶다면 padding 을 쓰면 됨
• 테두리와 또 다른 테두리 사이 여백은 margin 으로 조정
• block 의 너비를 조정할 때는 width
• 구글에 css box model 이미지 검색하면 아주 잘 나옴 (이런 식으로 다른 property 들도 써먹으면 됨.)
• <div>,<span> 아무런 의미가 없고 디자인 용도로만 사용하는 태그
  • div 는 block 이고 span 은 inline.
• display : grid;
•                 grid-template-columns: 150px 1fr;
•  grid 는 최신 기술인데, CSS 는 데이터에 근거해서 어떤 기술을 써도 되는지 판단해야함. 그럴 때 caniuse.com 에서 찾아보면 됨.
• padding 이나 margin 같은 것들은 검사 - styles  상자에서 키보드 위아래로 조절한 값 미리 보기 가능
• #grid ol 처럼 사용하면 #grid 안 ol 에게만 property 가 적용됨
• @media(max-width:800px) 처럼 창 크기 같은 media 요소에 의해 달라지는 속성 - 미디어 쿼리 (media query)
• <link> 는 CSS파일을 가져오는 태그
  • <link rel="stylesheet" href="style.css">
  • <style></style>은 안씀.

 

다음 기록은 JS 입니다!