난 HTML 에서 멈췄어야했다.

WeCode 7기로 수업을 받고있는 슈퍼개발자,

춤추는망고입니다.

( 춤 안춥니다. )

- 이 글은 WeCode 에서 배운 내용을 정리하여 공유하는 글입니다.

( 코딩나라에서 살아남기 정도로 보시면 됩니다. )

WeCode 의 둘째날인 오늘,

제가 정리할 내용은 !

웹개발이라는 된장국의 간을 맞추는 방법인,

CSS 입니다.

이번 글에선,

HTML 의 단맛을 충분히 본 뉴비들이

'뭐야? 이정도면 웹개발은 쉽겠는걸?'

이라는 말도 안되는 생각을 하고있을때,
뒷통수를 쳐버리는 CSS 라는 녀석을 조금 소개합니다.

HTML 에서 음식 조리를 했다면,

CSS 에선 간을하고 향을 주는겁니다.

( 불 맛같은느낌? )






이번 글은 내가 조미료를 어디에 뿌리고 있는가에 대한 내용입니다.
-> 된장국에 설탕이랑 물엿넣고, 고구마맛탕에 된장부으면 안된다는 뜻입니다.
( 아 물론 웹문서에서요. )
























서론이 길었네요.

CSS 를 다루게 되었다는 것은.

여러분이 예술가이자 건축가가 되었다는 말과 같다고 생각합니다.

미켈란젤로나 삼성건설이 되고싶다구요?












돌탑도 어디에 쌓을지, 터를 보고 쌓아야 하는법.

일단, 컴퓨터에게 어떤방식으로 조미료를 뿌리도록 정해주는지 알아봅시다.
( 이름표 붙여두고 알려주는거에요. 대단한거 없어요 )

선택자 ( Selector ) -> ( Fight 와 Fighter 같은 느낌 )

id = #
class = .
* = 모든 태그

class 나 id 가 selector 일때 태그와 결합 가능
	예 )
    	p.p-tag {
		color: gray;
	}
		-> p태그이면서 p-tag class 이다.
        
	p#third-line {
		text-decoration: underline;
	}
		-> p태그이면서 third-line id 이다.

	.pre span : "pre" 클래스 내부에 있는 span

	.a div .b .pre span
    		-> a 클래스 밑에, div 밑에, b 클래스 밑에, pre 클래스 밑에 span

중복될때, 우선순위가 있다.
	inline > id > class > tag

선택자를 지정할 때, 태그가 여러 개 있다면,
	- 선택자 : first-child			->맨위!
	- 선택자 : last-child			->맨밑!
	- 선택자 : nth-child(odd)			->홀!
	- 선택자 : nth-child(even)		->짝!

	- 선택자::속성 -> attribute ( 속성 ) 을 선택자로 지정하고 싶을때
	- 선택자[type : 타입] -> 특정 타입을 선택자로 지정하고 싶을때

모르겠다구요?

어쩌라구요.

장난이구요.

선택자라는건 쉽게 말하자면, 이름표 같은겁니다.

HTML 을 정리한 글에서 적어뒀던 p , div , span 같은 것들은

<태그> 라고 합니다.

우리가 이뿌게 꾸미고 싶은건, 웹사이트의 내용이잖아요?

그 내용 하나하나가 태그라고 보시면 됩니다.

그 중, div 와 span 라는 태그들 ( 수납상자 ) 을 통해서

여러 태그들을 담고,

id 와 class 라는 속성들 ( 이름표 ) 을 붙여서

어떤 부분에 MSG 를 칠지 정하는겁니다.

요정도면 CSS 의 다른 요소들을 더 배우는데는 어느정도 준비가 됐다고 봅니다.

지금은 HTML 문서에 내용을 많이 담아보는게 더 좋다고 생각합니다.

하나하나씩 CSS 로 양념 쳐보면서,

대충 ' 이런식으로 하는거구나!? ' 하는 느낌을 느껴봐야,

이 뒤에서 다룰 내용들을 더 잘 사용하실 수 있거든요.

저 약쟁이 아닙니다.

일단 오늘 내용은 느낌정도만 익혀두시기 바랍니다.

모든 일에는 때가 있기 마련입니다.

CSS 라는 것을 이해하는데에는 그마만큼 시간이 필요하다는 뜻입니다.

감사합니다. ( _ _)

부록

알도쓸잡 ( 알아두면 도움이 되나? 쓸모는 있는 잡것들 )

HTML 말고, CSS 에서 이미지를 넣어보고 싶다고?!
background-image : 이미지 첨부 ( 크기를 지정하면 표시됨 )
	( 한번 해보고, 문제 생겨서 구글링이나 잔뜩해라 ㅋ )