1 분 소요

🖥 HTML / CSS 이전 글 보기

안녕하세요. Nerd Lee 입니다.

HTML과 CSS를 공부 한 내용 중 CSS의 기본구조에 대한 내용에 대해 알아보도록 하겠습니다.

CSS 기본 구조

1. CSS 공부 전 html의 코드

  • 위 코드로 공부를 진행했습니다.

2. CSS란 무엇인가?

  • Cascading Style Sheets의 약자로
    HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어라고 합니다.
    CSS는 HTML의 요소 하나하나를 어떻게 렌더링되어야 하는지를 지정할 수 있고
    Cascade란, 한국어로 종속을 뜻하는데 서로 다른 원점에서 가져온 속성 여럿을 조합해서
    최종 결과를 도출하는 알고리즘을 뜻한다고, MDN Web Docs에선 표시되어 있습니다.

3. CSS의 기본 구조

4. CSS 사용 방법

4.1 ) HTML style 태그에서 사용하기

  • <style> 태그 안에 h1 태그의 스타일을 지정해주는 코드를 작성했습니다.
    color는, 문자의 색상의 속성을 뜻하고 green은 아시다시피 초록색으로 지정했기에
    청춘예찬이라는 글씨가 초록색으로 변합니다.

4.2 ) 스타일을 변경 할 태그 안에 style 속성을 이용하기

  • <h1> 태그 안에 직접 style 속성에, css의 속성값을 사용할 수도 있습니다.

4.3 ) CSS 파일을 만들어서 html에 연결해서 사용하기

  • index.css 라는 파일을 만들어준다.
  • <head> 태그 안에 <link> 태그를 추가한다.

글이 길어지기 때문에, 2편으로 다시 돌아오겠습니다!


이 글이 도움이 되셨다면 댓글 부탁드립니다^^
다음 글로 찾아오겠습니다!

참고