CSS continued..

이진경·2019년 9월 24일
0

444fd906e02899c7f1afc1b4b4e924d8.jpg

[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.

0개의 댓글