[백엔드 개발자 부트캠프 '오르미4기'] 7일차 CSS 배우기1

오늘의 학습 : CSS 배우기! 

 

 

오늘은 블로그 글이 아닌 아이패드로 강의 당시 직접 적으면서 공부했답니다 ㅎㅎ

 

 

어떻게 저의 공부 방법을 올리는 게 좋을지? 

 

 

 

고민하다가 여러 방식으로 올려보면 좋을 거 같아 오늘은 !

 

 

직접 적은 내용들을 올려보는걸로!!!!!

 

 

 

 

 

일단, 첫번째로 CSS가 무엇인가? 

 

에 대해 간략하게 배웠는데요 ㅎㅎ

 

처음 설명으로만 봤을땐 이게 무슨소리이지 했었는데 

 

강사님이 사진을 토대로 우선순위 적용이 저 그림과 같이 폭포처럼 떨어지는 모양이라고 

 

설명해주셔서 

 

단번에 이해완료! 

 

즉, CSS 는 뭐다?  HTML 스타일, 레이아웃을 꾸며주는 역할을 하는구나! 

 

CSS의 장점으로는 한번 작성하게 되면 다양한 HTML에 재사용이 가능하다는점 

 

 

* 음 그럼 CSS 파일을 따로 작성하고 HTML 스타일에 LINK를 통해 연결해서 재사용 한다는건가? ㅎ

 

질문을 못물어봤지만 급 궁금해지네요 ? 이게 맞겠죠 ㅎㅎ?

 

작성방법으로는 Selector 선택자를 선택하고, color : red ; 선언하기 

 

color 속성이고 속성뒤엔 속성값이 따르므로 red 선택하면 된다아!

 

스타일을 적용하기 위해선 { } 를 붙이면 적용이 된다는점 ㅎㅎㅎ

 

html과 다르게 css는 주석도 모양이 다르군 신기

 

/* 주석*/ 

 

이렇게 작성합니다 

 

 

CSS의 개념정도는 간략하게 익혔고 이제 CSS 적용하기 !

 

CSS 적용하는 방법으로는 3가지 있지요!

 

1. 인라인 방식 

 

태그안에 Style 속성을 넣어주는 방법!

 

ex) <p style="color:yellow; background-color:black;">Hello wold</p>

 

p 태그 안에 직접 스타일 입력하는 식! 

 

2. 내부스타일 

 

css 파일 작성 후 link를 통해 html로 적용한다 

 

* 이 방법을 사용하는 것을 젤 권장한다구 하네엽 ㅎㅎㅎ

 

link 는 빈태그!

 

css를 적용하다보면 html 이 점점 길어지고 읽기엔 힘들어 지기 때문에

되도록이면 css는 분리해서 사용!!!!

 

CSS 상속 ( 상속되는 속성과 상속되지 않는 속성이 존재합니다)

 

1. 인라인 ( 개별 ) 2. 그룹선택(,) 3. 태그선택 4. 상속 - CSS 길이가 줄어들고 효율적이다.

 

상속의 경우 div 의 p 자식이 여러명일경우, 

p에게 개별적으로 주는 것보단 

 

p 부모인 div에 적용함으로써 자식인 p 가 상속되는 식으로 적용시켜주면

 

css가 짧아지므로 효율성이 더욱 좋아진다는거! 

 

but, butteon, 의 경우 브라우저마다 모양과 스타일이 다르기 때문에 상속은 x

 

CSS 선택자

 

*  = HTML 문서내의 모든 요소 선택가능

타입 (유형) 선택자 : TYPE Selector

id = # 아이디의 경우,  id = "pat" 을 다른 곳에 사용중일 경우 id = "pat" 사용불가능

 

한번만 사용할 수 있기때문에 사용성이 적다 ! 

 

대신 id 보다는 

 

클래스 선택자 ( class ) 를 많이 사용한다.

 

class = "fc-red" 을 사용하더라도 한번 더 class = "fc-red" 사용 가능하다 ㅎ

 

자식 선택자 

 

나는 div의 p 라는 자식, 자손이 있지만 직계자식만 선택하고 싶다?

그럼 > 을 사용하여 직계자식만 적용가능

 

또한, 난 일반 형제를 선택하고 싶으면 ( ~ ) 사용!

 

 

가상 클래스 

 

link  방문하지 않은 링크 - 방문하지 않은 링크의 색깔지정 가능 

visited - 방문한 링크 

hover - 마우스 커서를 올려놓았을 때 

active - 마우스로 클릭했을 때 

focus - 포커스 되었을 때 

의 종류가 있다! 

 

구조적 가상 선택자 

 

first - child ( 첫번째 자식 )

 

ex ) div input : first - child 

div에 input 이라는 자식이 존재하는데 이 자식 중 1번째 자식을 의미한다.

 

하지만,

 

<div>

<p></p> 

<input> 

과 같이  div 밑에 바로 input 이 1번째 요소로 오지 않는다면?

 

적용이 되지 않는다. 즉, div 다음으로 바로 input의 자식이 1번째로 와야 적용이 가능하다는점! 

 

그럼

 

<div>

<input>

<p></p>

이라면 적용이 되겠죵? ㅎㅎㅎㅎㅎ 이해완료!

 

last -child 마지막요소

 

first child 와 마찬가지로 마지막 요소! 

 

nth - child

 

ex) ul li : nth - child(3) 

 

ul의 자식인 li의 3번째 li 자식 선택

 

만약, 

<ul>

<li>0</li>

<li>1</li>

<li>2</li>

<li>3</li>

의 경우 3번째 자식이니깐 <li>3</li>이다? 

 

nono!!!!!!

 

3번째라는건 3이 아니라 3번째 자식을 가져와야한다. 

<li>0</li> 1번째

<li>1</li> 2번째

<li>2</li> 3번째

<li>3</li> 4번째

 

그럼 3번째는 2가 되는 것이다! 

 

not 부정 선택자 

 

ex) li : not(:first - child)

 

li중에 첫번째가 아닌 li 선택

 

첫번째 li 자식을 제외한 나머지가 선택가능!

 

 

CSS 선택자 우선순위 

3가지 원칙

1. 후자우선원칙 :

p의 컬러가 2가지로 입력되어있을 경우, 마지막으로 나오는 css가 선택된다.

 

* 근데 이부분은 좀 궁금하긴하네요 ? 왜그럴까요?

 

2. 구체적의 원칙

 

p는 body의 자식이다 

스타일 입력 시, body p vs p 둘 중 어떤게 적용될까 ?

 

body p 가 적용되게 된다.

 

가중치에 따라 더욱 구체적인것을 판단하게 되는데 

 

1. 인라인스타일 속성, 2. id 선택자 3. class, 가상/속성 선택자 4. type /가상 요소 선택자 에 따라 점수가 다르고 

 

이 점수에 따라 가중치 적용되어 사용

 

3. 중요성 - important 

 

가중치가 아무리 높아도 important를 적용시키면 

 

가중치를 무시한채 스타일을 입힐 수 있다.

즉, 무적이다......

 

하지만 이것을 쓸 경우 구조가 어긋나기 시작하기 시작하면 

계속적으로 important를 써야하기 때문에 사용 추천 x

 

CSS BOX Model 

 

width 넓이

height 높이

padding 요소 내부의 여백 줄 경우 사용

margin 요소 넓이 포함x 색깔 넣지 못함 / 요소와 요소 사이 여백

 

 

마진 병합 현상

 

A와 B의 마진이 병합 된 현상인데, 

 

자식요소의 마진 값이 부모의 높이에 영향을 미치지 않은 현상을 의미한다. 

 

이 해결방법으론, 부모 요소에 Overflow 속성 값을 입력한다.  등등..

 

다양한 방법이 존재한다. 

 

* 아직 이 부분의 대해서는 css 중 가장 이해가 안되는 부분인거 같긴하다...

 

주말에 한번 찾아 봐야할 거 같다.. 궁금쓰.. ㅠ

 

border - 테두리 지정 

선의 두께와 스타일 색상 지정 가능

border 의경우 한번에 지정 가능

ex) 10px solid color

 

border - radius 

 

네모 모양을 동글동글~! 동그랗게 만들어준다.

 

border - radius : 30px 에서 100px 처럼 

 

값이 커질수록 점점 원이 된다! 

 

opacity ( 투명도 ) 

 

0과 가까울수록 점점 흐려지고 투명해지는

반면, 1과 가까워질수록 

색은 불투명해진다. 

 

오늘의 css는 여기까지 배웠는데 

 

확실히 html 보다는 

 

이해하는데 시간이 좀 걸렸고, 마진병합 부분에서는 

 

아직 설명할 정도의 이해는 부족한거 같다. 

 

조금 더 자세한 지식을 찾아보고 공부해야겠다는 생각이 들었다. 

 

 

 

오늘도 공부 일기 및 수업내용 복습 끝 !!!!

 

 

 

내일 수업도 파이팅!