[CSS] ; 상속(Inheritance)

문자 그대로의 상속,
css의 특징으로 부모에게 적용된 효과가 그 자식에게도 동일하게 적용이 될 수 있다.
가령, body태그에 글씨 색상을 핑크로 해놓으면 그 밑의 p태그 등 자식 태그들도 자연스럽게 핑크색 글씨를 갖게 됨.
물론, 본인(자식) 스스로 스타일을 갖고 있다면 그 스타일이 반영됨

##[CSS] ; 선택자(Selector)
기본적으로 class 나 id일 때 태그와 결합가능
그래서 여러 selector사용 가능한 데 아래 css에서 최종적으로 적용되는 selector는 span.
but, 모든 span이 아니라 "pre"라는 클래스 내부에 있는 span.
*** 태그 결합시에 한칸 띄워져있는 걸 기억!

.pre span {
  background-color: yellow;
}

//아래는 a클래스 밑에, div밑에, b클래스 밑에, pre클래스 밑에 span태그에 적용.
.a div .b .pre span {
  background-color: yellow;
}

// 참고로, css가 적용될 때의 우선순위는 하기와 같음.
tag <<<<< class <<<< id <<<<<< inline css

[CSS] ; image 넣기

웹사이트에 이미지를 넣을 때 가장 많이 사용하는 태그는 img이다.

<img alt="HTML" src="https://www.w3schools.com/whatis/img_js.png">

**alt: 이미지가 뜨지 않았을 때(서버에서 이미지가 삭제됐거나 잘못된 이미지 주소일 때 혹은 그림이 보이지 않을 때) 이미지 대신 보여줄 텍스트. 거의 해당 이미지의 짧은 brief의 느낌으로 정함

**src: 이미지 파일 경로 or 이미지 url 주소

[CSS] ; Block vs Inline 그리고.. Inline-block.

• block 요소 : 한 줄에 나열되지 않고 그 자체로 한 줄을 완전히 차지.
  기본적으로 너비 100%(width: 100%) 속성을 갖고있고 화면의 가로 폭을 100%로 완전히 차지해서 다음 요소가 양 옆으로 붙을 공간이 없어서 자연히 줄 넘김이 됨.
  inline 요소와 다르게 모양새를 쉽게 제어할 수 있는 속성(margin, width, height 다 적용 가능) 때문에 대부분 블록 속성을 가진 태그를 화면 구성이나 레이아웃에 많이 사용.
  example :

  , ,

  ,

• , ,
  ,

  etc..

  inline 요소 :줄을 바꾸지 않고 다른 요소와 함께 한 줄에 있을 수 있는 애들.
  그 해당 태그 내용 혹은 태그 만큼만 딱 자리 차지함.
  상, 하단 외부 여백(margin-top, margin-bottom, width, height) 속성 적용x.
  인라인 요소의 너비와 높이 = 태그가 품고 있는 내부 요소의 부피만큼.
  인라인 속성을 가진 태그끼리 연속 사용 될 때,좌우에 약 5px 가량의 외부 여백(margin)이 자동으로 발생.

  example :, , etc..

  • Inline-block : 인라인과 같이 한 줄에 표현하면서도 margin, width, height 속성 적용이 됨.
    inline-block 속성을 기본값으로 가지고 있는 태그 없고 CSS에서 기존 inline 혹은 block 속성의 태그가 inline-block 속성으로 변경.
    inline-block 속성을 가진 태그끼리 연속으로 사용될 때,
    최소한의 간격을 유지하려고 좌, 우에 약 5px 가량의 외부 여백(margin)이 자동으로 발생되지만 margin-left나 margin-right를 사용하면 여기에 추가로 여백을 줄 수 있음.
    

  p { 
    display: inline-block 
    }

  *p.s ; block 요소일 때 width 값을 주면 더이상 늘어나지 않는 데, 이 때 margin에 auto로 설정하면 center에 올 수 있게 할 수 있음.

  //하기처럼 2개의 값만 있을 때, 첫번째는 위, 아래의 margin.두 번째는 왼, 오른쪽에 주는 margin이라는 뜻.
    
  .center {
    margin: 20px auto;
  }