도서 생활코딩 HTML+CSS+자바스크립트

예전부터 코딩을 배워보고 싶었다. 기회는 많았다. 그런데 너무 어려웠다. 천상 문과라 그런지 몰라도 나는 그 쉽다는 파이썬도, 개발자들이 코딩이나 언어라고 부르면 화를 낸다는 html도 잘 이해가 가지 않았다. 절박함이 부족하였는지도 모르겠다. 그걸 몰라도 먹고 사는데는 지장이 없었으니까. 공부를 하다 조금 어려워지면 그만두고(개발자 친구들은 조금 어려운 부분이 있을리가 없다고 하였다) 몇 개월 지나서 다시 처음부터를 반복하다보니 그 무엇도 늘지 않았다. 친구들은 제발 뭔가를 만들어보라고 하였다. 그래야 성장한다고 하였다. 그래서 마지막으로 생활코딩에서 나온 html+CSS+자바스크립트 책을 공부하고 뭔가를 만들어볼 생각이다.
사실 html까지는 내용이 크게 어렵지 않다. 애초에 책 자체가 굉장히 기초적인 내용만 다루고 있고 그마저도 굉장히 쉽게 설명을 해주고 있다. 하지만 나같은 경우 항상 CSS에서 포기를 했던 것 같다. 이번에도 책을 보다보니 CSS에서 헤매는 기분이 든다. 그래서 어떻게든 정리를 해야겠다고 생각했다.

html에 CSS를 사용하는 방법은 두 가지가 있는 것 같다.
첫번째는 <style>이라는 태그를 사용하는 것이다. 다만 이 태그는 위치가 어느 정도 정해져 있는 것 같다(아닐 수도 있지만 책에서는 대부분 <head> 태그 안에 항상 <style>을 가져다 사용하고 있다.
----------------
<head>
  <title> CSS </title>
  <meta charset="utf-8">
  <style>
    a{
      color: red;
    }
  </style>
</head>
----------------
이런 식이다. 즉 애초에 <style>이라는 태그를 만들고 안에 CSS를 적용할 다른 선택자(태그)를 적용하는 것이다. 책의 예시는 a 선택자(태그)에 color: red라는 선언(Declaration)을 한 것이다. color 부분은 속성, 값은 red가 된다. 이렇게 적용을 하면 뒤에 나오는 모든 a태그와 관련된 부분은 빨간색으로 화면에 나타나게 된다. 이렇게 하는 방법이 <style>태그를 쓰는 것이다. 책에 있는 내용을 정리하자면
a{
color:red;
}
에서 a는 선택자, color:red 자체는 선언/효과, color는 속성, red는 값으로 정의할 수 있다.

CSS를 적용하는 또 다른 방법은 style속성을 쓰는 것이다. 사실 큰 차이는 모르겠지만 (추측 시) style속성을 쓰는 경우는 조금 더 협소한 범위에 사용하는 것이 유리할 것 같다. style 속성의 예시는 다음과 같다.
----------------
<li><a href="2.html" style="color:red">코끼리</a></li>
----------------
위의 방식으로 적용하면 모든 a 태그에 효과를 적용하는 대신 현재 a 태그가 적용되고 있는 코끼리라는 글자에만 CSS의 효과를 넣을 수 있다. 이렇게 하는 방법이 style 속성을 적용하는 것이다.

위의 두 가지 방법이 CSS를 적용하는 가장 큰 구조에 해당한다고 보면 된다. 사실 여기까지는 크게 어렵지는 않다. 이후 구체적인 선택자와 선언을 적용해나가는 것이 어려운 것 같다.

저작자표시

'코딩' 카테고리의 다른 글

도서 생활코딩 HTML+CSS+자바스크립트 - <미디어 쿼리> (0)	2020.12.15
도서 생활코딩 HTML+CSS+자바스크립트 - <div 태그> (2)	2020.12.13
도서 생활코딩 HTML+CSS+자바스크립트 - <border, padding, margin> (0)	2020.12.03

THming's Days

도서 생활코딩 HTML+CSS+자바스크립트 - <style 태그, style 속성>

'코딩' 카테고리의 다른 글

댓글

티스토리툴바

도서 생활코딩 HTML+CSS+자바스크립트 - <style 태그, style 속성>

'코딩' 카테고리의 다른 글

관련글

댓글

티스토리툴바