CSS!!!!

CSS(Cascading Style Sheets)로 HTML문서를 더욱 효과적으로 보여줄수 있게 꾸며주는 언어이다

*여기서 Style Sheets란

Style Sheets는 js에서 객체(object)를 작성할때 처럼 작성하는 형식을 말한다

// js object

const h1 = {
fontSize : 16;
}

/* css style sheets */

h1 {
font-size : 16px;
}

Selector

Selector는 자신이 스타일 해줄 tag(ex. h1, p, button)나 id 그리고 class를 지정해 줘 스타일 할 수 있게 해주는 것이다

type selector

type selector는 html 태그를 지정해 스타일 해주는 것이다!!!

h1 {
  font-weight: bold;
}

이렇게 html 태그인 h1 태그를 선택해 폰트 굵기를 bold로 설정해 주었다

id selector

id selector는 html 태그에 id를 적고 그 아이디를 지정해 스타일 해주는 것이다!!!

/* id는 #~~~ 이런식으로 지정 해준다 */
#name {
  background-color: black;
}

html 태그에 id가 name이라고 되어있는 tag의 배경색을 검정색으로 설정해 주었다
id는 한태그의 하나씩만 지정해 줄 수 있다 (다른 tag 중복 되게 id 지정 불가능)

class selector

class selector는 html 태그에 class를 지정하고 그 class를 선택해 스타일 해주는 것이다!!!

/* class는 .~~~ 이런식으로 지정 해준다 */
.gaon {
  color: red;
}

html 태그의 class가 gaon이라고 되어 있는것을 선택해 색깔을 빨간색으로 설정해 주었다
class는 중복으로 지정도 가능하고 여러 class을 지정할수도 있다 (class 구분은 띄어쓰기로)

event

css에서는 tag에 특정 이벤트에 따른 style을 지정해 줄수 있다

:hover - hover는 태그위에 마우스 포인터가 올라갈때의 상황

:active - active는 클릭했으때의 상황

:focus - focus는 input, textarea 에 입력하려고 할때의 상황

h1 {
  background-color: black;
}

h1:hover {
  background-color: red;
}

이런식으로 selector 옆에 :속성명 이런식으로 하면 된다

---

최근에 알게된 신기한 것들

::after, ::before

위의 속성들은 예를 들어

<h1 id="hello">hell</h1>

이렇게 있는 태그에 style로

h1#hello::after {
  content: "o";
}

이렇게 after나 before로 content를 넣으면

화면에 보일때는 hello 이런식으로 content가 추가되어 보인다

overflow

이 속성은 최근에 알게된 속성인데

자식 요소가 부모 요소 범위 밖으로 삐져 나왔을때 어떻게 할것인지에 대한 속성이다

이 속성은 내가 최근에 프로젝트를 하면서

overflow가 기본값인 visible일때

이랬던것을

overflow가 hidden일때

overflow라는 속성을 알게된후 문제점을 해결하게 되었다

마무리

이번에 css에 대해 정리하면서 내가 아는 속성 별로 없다는 생각이 들었다 앞으로 많은 속성을 알게된다면 좀더 쉽게 코드를 짤수 있을거 같다는 생각이든다