[CSS] Inline Styles

안녕하세요 동기 여러분! 오늘은 인라인 스타일(HTML에서 CSS 코드를 바로 적용하는 방법)에 대해 알아보도록 합시다!

 

Inline Styles

CSS와 HTML은 확실히 다른 언어이지만 얘들은 떼어낼래야 떼어낼 수가 없는 단짝 친구이기 때문에 마치 순대국밥집이 몰려있는 시장에 있는 식당에 손님이 왔는데 밥이 없어서 급하게 옆 식당에서 밥을 빌려오는(?) ㅋㅋㅋ 그런 일이 가끔 일어납니다. 아니면 말고...

 

HTML라는 식당에서 바로 CSS 식당의 밥을 빌려오는 기능이 있는데, 그것은 style 속성을 사용하는 것입니다. 아래의 코드를 보도록 합시다.

 

<h2 style='color: red;'>티끌모아 티끌이다!</h2>

시작 태그(opening tag)안에 style 속성을 넣어주고 color라는 프로퍼티(property)를 넣어주고 값(value)을 red로 넣어 주었습니다.

 

위 코드의 스타일을 CSS에서 적는다면 아래와 같습니다.

h2 {
  color: red;
}

 

단점은 엄청나게 긴 코드에 inline style를 남발하게 된다면 몹시 헷갈리기 때문에 자주 사용하진 않는다고 합니다. 하지만 상황에 따라 쓰일 수도 있기 때문에 반드시 알아두도록 합시다.

 

끝~

 

---

 

오늘의 느낌

예전에는 헬스장에 가서 몸 좋은 사람들이 있으면 괜히 주눅들고 그랬는데, 요즘은 몸 좋은 사람있으면 어떻게 운동하는지 힐끔힐끔 보게 된다. 그리고 뭔가 동기 부여가 된다고 할까나 더 열심히 하게 되는거 같다.