[CSS] 생활코딩 CSS 강의 정리 노트

-3강-

​

<!-- ... -->

->c언어의 주석과 같은 태그

​

<style>

a {

   color:red;

}

</style>

->style이라는 태그는 그 값으로 반드시 css의 효과가 들어온다.

한번에 바꿀 수 있다.중복 제거할 때 용이

​

​

-4강-

​

css 추가하는 방법에는 2가지가 있다

​

1.style 태그를 쓴다(전체적용)

​

2.style 속성을 쓴다(부분적용)

<li><a href="2.html" style="color:red;text-decoration:underline;">

​

​

-5강-

​

h1 {

font-size:45px;      //font size property

text-align:center;    //text align property

}

​

property->태그 속의 속성 / 검색을 통해서 속성 알아내기!(개발자에게 검색능력은 아주 중요하다)

​

​

-7강-

​

1.클래스 선택자

class="saw" //saw라는 class로 묶음

.saw {

  color:gray;

}

->saw앞에 쩜붙이기,태그가 아니라 class이기때문.

​

★하나의 클래스에는 여러개의 속성이 들어올 수 있다

ex)class="saq active"  ->띄어쓰기로 구분한다

​
​
2. 아이디 선택자

id="active"

#active {

 color:red;

}

​

※태그 선택자<클래스 선택자<아이디 선택자

​

​

-8강- (박스 모델)

​

border->테두리

​

1.화면 전체를 쓰는 모델들 : block level element (ex : h1)

​

1-1.화면 전체를 쓰는 모델들이 자기자신의 부피만큼 갖게 하는 방법

 ->display:inline;

​

2.자기 자신의 부피,콘텐츠 크기만큼 갖는 모델들:inline element

​

2-1:화면 전체 쓰게 하는 방법

 ->display:block;

-기본값은 css를 통해서 언제든지 바꿀 수 있다-

​

3.(tip)태그들 안보이게 하고 싶을 때 -> display:none;

​

4.콤마라는 선택자를 통해서 중복 없앨 수 있다.

ex)

h1,a{

        "  

        "

   }

​

5. 얘도 중복 없애기 가능 !!

   border-width:5px;

   border-color:red;

   border-style:solid;

​
->border:5px red solid; (순서 중요 x)

​

6.테두리와 글자 사이의 여백 주고 싶을 때(글자 주변에 패딩 입혔다고 생각)
​
-->padding:20px;

​

7.테두리와 테두리 사이의 여백 줄이고 싶을 때
​
-->margin:0;

margin:20px;

​
​
8.

display:block;

width:100px; ->테두리 크기 변함

​
​
9.

content ->글씨

padding ->글씨 밖,테두리 안

border ->테두리 선

margin ->테두리 밖 공간
​
​
★오른쪽 마우스 버튼 클릭->검사 버튼 누르면 ->개발자 도구

​

​

-9강-

세로줄
​
border-right:1px solid gray;
​
width값 조절하면 세로줄 자리 이동

​

-10강-

그리드

​

1.<div>...</div>(block)

->아무런 의미가 없고(h1대신에 쓰는) 단지 디자인의 용도로만 쓰는 태그

화면 전체를 사용하기때문에 줄바꿈이 된다.

무색무취의 태그

​

2.span(inline)

->inline 태그 / 줄바꿈 안됨 /div태그와 같이 아무런 의미가 없다

​
3.

grid-template-columns : 150px 1fr(나머지 공간을 다쓴다);

​

​

-11강-

​

그리드 써먹기

​

1.id가 grid인 태그에 대해서 display를 grid로 지정한다

2.grid-template-columns: 150px 1fr;

​

​

-12강-

​

미디어 쿼리

->c언어의 if문과 비슷(조건문)

​

@media(min-width:800px) == screen width > 800px

->화면의 넓이가 800px보다 크다면

​

min: ~부터는

max: ~까지는

​

​

-13강-

​

미디어 쿼리 써먹기

​

@media(max-width:800px){

#grid{

  display:block;

}

#grid ol{

  border-right:none;

}

h1{

  border-bottom: none;

}

}

​

​

-14강-

중복 제거의 중요성

style.css 파일 생성->중복되는 코드 복사 ->style.css에 붙여넣기 ->2.html에 link추가

​

​

-15강-

css에서 가장 중요한것은 '선택자'와 '속성'

강의가 끝난 지금은 공부한 것을 써먹을 아주 중요한 시기~

여러가지 실습 해보기