비전공자 IT 코딩독학 #12 : CSS 기초 2편 선택자 / 폰트

안녕하세요 길잃은 문돌이입니다. 오늘은 다름 아니라, CSS 기초 2편 다양한 선택자를 배워보고자합니다.

사실 몇일간 이사를 준비한다고 CSS 강의를 못봤더니, 많이 늦었네요. 이제 이사가 끝이 났으니,

한번 CSS 달려보자구요! 다시한번 이야기 하지만 저의 콘텐츠는 단순히 생활코딩 강의를 보고 제가 배운 내용은 단순히

작성하는 그냥 일종의 노트라고 생각해주시면 될꺼같아요! 저도 노트에 필기도 하고 해봤지만, 사실상 잘 안보게 되더라구요. 그래서 글 쓰는 건 좋아하니, 이 둘을 한번 같이 연결해볼까 해서 이렇게 글을 쓰네요.

 

 

비전공자 IT 코딩독학 #11 : CSS 기초 1편 선택자의 종류

비전공자 IT 코딩독학 #12 : CSS 기초 2편 선택자/ 폰트 한번 따라와보시죠!

 

---

 

1. 다양한 선택자 

 

게임을 해나가면서 배우는게 좋습니다.

 

선택자라는 것은 결국 어떻게 잘 선택을 하느냐 인데, 

생활코딩에서 만든건 아니지만 저또한 재밌게 했던 게임이였습니다.

또 어떻게 보면 한국에서는 게임이라고 하면 환장을 하니( 저 또한 그렇습니다 하하)

게임과 공부를 겸한다면 그만한 재미가 있을까요?

 

게임하는 것 처럼 공부하면 서울대 간다는 부모님의 말처럼 게임으로 한번 즐겨보죠!

밑에 URL을 들어가게 되면, 게임화면이 나오는데 그걸 따라가면됩니다!

 

CSS Diner

다들 게임 한번 즐겨 보시죠.

---

 

제가 작성하는 코드들의 일반적인 HTML코드에는 A태그라던지, 선택을 할 수 있는 선택자를 나오게 하지만, 선택을 받는 HTML코드는 있다는 가정하에  진행해주시면 됩니다!

 

 

1.) 단순 선택(A) 

<style>

A

</style>

 

2.) ID 선택(#A)

<style>

#A

</style>

 

3.부모 자손 선택( A B - B 가 자손)

<style>

A B

</style>

 

4.ID 부모 자손 선택(#A B- B가 자손)

<style>

#A B

</style>

 

5.Class 선택(.A)

<style>

.A

</style>

 

6. A의 클래스 선택 ( A.B- B가 클래스)

<style>

A.B

</style>

 

7.C부모의 A의 클래스중 B인 클래스 선택(C A.B)

<style>

C A.B

</sytle>

 

8. A와 B를 함께 선택( A,B)

<style>

A,B

</style>

 

9. 모든 태그를 선택(*)

<style>

*

</style>

 

10. A의 모든 자손을 선택 ( A * )

<style>

A *

</style>

 

11. A 옆의 B를 선택( A+B)

<Style> 

A+B

</style> 

 

* 모든 A의 옆에있는 B를 선택하는것임!

 

12. A와 인접한 모든 B 선택 (A~B)

<style>

A~B

</style>

 

13. 부모 A의 직계 자손 B를 선택 (A>B)

<style>

A>B

</style>

 

A 밑에 있는 모든 B가 아닌, 직계 B만을 선택

14. A 밑에 있는 첫번째 B 자손 ( A B:first-child)
*B:first-child 는 가상 선택자임.

<style>
A B:first-child
</style>

* 가상선택자는 어떠한 조건에 성립이 되었을때만 작동한다.

 

15. 외동자식 선택(*:only-child)

*: only-child는 가상 선택자임

 

<style>

*:only-child

</style>

  

16: 마지막자손(last-child> 선택 ( :last-child)

*자손이 하나있을 경우 , 그 자손은 첫번째 이자, 마지막 자손이 될 수도 있다.

 

------------------------------

여기서 부터는 설명하기만 합니다.

 

nth-child(a) 

n번째 자손을 선택하고 마지막에 (n)을 붙인다

 

ex)A의 3번째 자손을 선택하고 싶다면,

A:nth-child(3)

 

 

------------------------

 

2. 폰트 

 

 

css에서의 속성 = property

 

1) font=size

 

단위 : px , em , rem

 

em과 rem은 사용자가 화면을 수정하거나 할때 상대적으로 폰트 크기를 변환한다.

 rem가 많이 쓰인다.

 

px VS rem과의 비교를 할때, 사용자가 zoom을 한다면 px은 설정한 그대로 움직이게 되고 , rem의 경우 크기에 따라 폰트가 커지고 작아진다.

 

 

2) font의 색상

 

방식

 

color name (red)

 

<style>

   a {

   color: red ; 

}

</style>

 

hex(16진수- FF000)

<style>

a{

   color= ff0000 ;

}

</style>

a{

   color = rgb(255,0,0);

}

</style>

 

 

3) 텍스트 정렬 (text-align)

text-alignd의 여러가지 속성

center, left, right,

justify (간격을 가변적으로 바꿔서 한페이지에 꽉 차게끔 만들어줌)

 

<style>

p{

   text-align:  

}

 

 

3. 폰트 상세내용

 

font-family : arial, verdana, "helvetica";

→ 폰트의 우선순위로 상대방의 컴퓨터에 arial 폰트가 없으면 verdana, 

verdana가 없으면 helvetica를 적용시킨다는 의미.

(, 가 필수)

 

이후, 글자의 규칙을 정리해줘야하는데,

 

 

 

serif :  장식이 있는 폰트

sans-serif : sans는 not의 의미를 가지고 있다. 즉, 장식이 없는 폰트를 의미한다.

 

합치게 되면,

<style>

p{

font-family : arial, verdana, Helvetica ,sans-serif;

}

</style>

 

 

font-weight: bold 

line-height: 10px

→ 글자와 글자 사이가 아닌, 자간

 

 

★축약형★
(순서를 지켜야함)
font : weight, size, family ;
여기서 size와 family는 필수 요건이다.
font : 15px arial, serif; (ok)
font: 2rem arial, verdana, sans-serif; (ok)
font: bold arial, serif (x) - size가 빠짐

---

4. 상속

 

태그들에게 효과를 주고자 한다면, 하위의 태그들이 속성을 이어받게 되는것이 상속인데 생산성과 관련하여, 한번의 css 언어로 여러 html에 적용하게끔 한다. 하지만, 일괄적이라는 말은 예외 처리를 해야한다는 말이다.

 

<h1>수업내용</h1>

<ul>

<li>html</li>

<li>css</li>

<li>java</li>

</ul>

일때,  css스타일을

 

<style>

  li{

color:red;

}

h1{

color:red;

}

 

와

 

html{

color:red;

}

 

는 같다. li, h1를 2개 css를 써서 빨간색으로 만들 수 있지만 가장 상위의 태그인 html에 red 스타일을 줌으로써 나머지 li 와 h1를 상속 받게 할 수 있다.

 

여기서 li에 둘러 쌓인 css만 검은색으로 바꾸고 싶다면 id를 주고

#(id 선택자)을 이용하여 선택후 검은색으로 바꿀 수 있다. 

상속되는 속성이 있으며, 상속 되지 않는 속성도 있다.

 

폰트의 컬러는 상속가능, 테두리(border, soild)는 상속이 되지 않는다.

 

지금까지 비전공자 IT 코딩독학 CSS기초, CSS선택자를 보고있는데, 다들 따라오시는지..? 제가 이 글을 낙서장 처럼 쓰고 한번 더 목차라드지 이런걸 맞춘다고 다시 들어오는데, 다시 복습을 해도 뭐가 뭔지를 잘 모르겠는게 함정이네요 하하

 

그럼 다음 비전공자 IT 코딩독학 # 13편으로 넘어올께요! 점점 어려워지는 느낌이긴한데, 천천히 하면 되겠죠??