지난 글에 이어 CSS에 대해
알려드리도록 하겠습니다.
저번 글에서는
CSS 코드 작성방법에
대해 알려드렸는데요.
만약 기억이 잘 나지 않으시거나
혹시 모르시는 분들은
밑에 글을 참고해주세요.
기초코딩 - CSS의 기초(CSS 코드 작성하기)
지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 CSS 개념 정리와 HTML에 CSS를 적용시키는 방법에 대해 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은
tm-csc.tistory.com
CSS 코드는
브라우저가 코드를
읽을 때 위에 있는 코드부터
하나씩 차례대로 읽는다는
특성을 가지고 있습니다.
이것에 대해 알려드리는
이유는 가끔은 브라우저의
읽는 방식을 유용하게
사용할 수 있기 때문인데요.
일단 VSC를 실행해보겠습니다.
만약 저번에 알려드렸던
HTML안에 CSS 코드를
적는 방식과 CSS파일 안에
적는 방식 중에 만약
같은 태그를 가리켜
다른 색상을 지정했다면
어떻게 될까요?
두 개다 h1을 지정한 만큼
초록색 아니면 주황색으로
변경될 텐데요.
이렇게 HTML안에 적은
CSS 코드가 적용된 것을
확인할 수 있습니다.
즉 처음에 분명 위의
그린색이 적용됐지만
마지막에 쓰여있는 주황색으로
색상이 적용된 거죠.
당연히 이런 식으로
HTML안의 코드보다
CSS 파일을 나중에
불러오는 식으로 코드를
작성한다면
이렇게 초록색이 적용된
코드가 뒤에 적혀있기에
초록색으로 적용된 것을
확인할 수 있습니다.
앞으로 많은 코드를 작성하면서
코드가 오류가 나기도
또는 사용했던 태그를 또 지정하기도
하면서 오류가 나기도 합니다.
하지만 CSS 코드를 순서대로
읽고 실행한다는 것을 기억한다면
아래에서 위로 읽어가며
어느 부분이 틀렸는지,
오류가 나는지 찾아낼 수 있습니다.
사소한 세미콜론(;) 문제부터
띄어쓰기 문제까지요.
만약 이러한 규칙을 모른다면
단순히 무작정 찾을 수 있겠죠.
또한 움직이나 어떠한 태그를
사용할 때도 먼저 적용하고 싶은
태그를 먼저 적어야 한다는 것도
알 수 있습니다.
하지만 CSS 코드는 HTML과
달리 이해해야 하는 개념이
있습니다.
바로 BOX라는 개념인데요.
다음 글에 자세히 다루도록
하겠지만 CSS는 위치를
변경하고 크기를 조절하며
색상을 변경해야 하는 만큼
모든 콘텐츠를 위의 보이는
그림처럼 박스 안에 넣습니다.
그리고 박스에 이름 지정하여
박스의 위치부터 색상까지
모든 것을 설정하죠.
일단 이번 글에서는 CSS는
위에서부터 차례대로 코드가
읽힌다는 것과 모든 콘텐츠는
박스 안에 들어있다는 개념만
기억해주시면 됩니다.
그럼 여기까지 궁금하신 점은
댓글로 부탁드리며
공감과 구독도 부탁드립니다.
