웹개발 프로젝트(CSS/HTML)-#1.CSS

jsistop16 2021. 8. 10. 14:48

HTML과 CSS의 차이점에 대해서 간단하게 먼저 알아보자

일단 HTML은 크게 뼈대를 갖추는것과 같다.

그 구조는 다음과 같다

<!DOCTYPE html> <!--html버전이 5 라는것-->
<html> 
    <head>

    </head>
    <body>



    </body>
</html>

<>로 이루어진 부분을 태그라고 부르고 태그는 항상 시작과 끝이 짝을 맞춘 상태여야한다.<> </>

반면 CSS는 뼈대가 갖춰진 상태에서 세세한 디자인을 꾸미는 요소이다

오늘은 CSS의 적용 방법과 기본적인 사용법에 대해서 알아보겠다.

일단 CSS를 적용하는 방법에는 크게 3가지가 있다.

오늘은 그 중에서태그안에 적용하는 방법을 보겠다.(위의 코드와 함께 참고)

자그럼 CSS가안에 들어가는것인데

이때 CSS디자인 속성을 적용할 대상을 의미하는 선택자 라는 개념이 있는데

이 선택자는 3가지 종류가 있다.

HTML태그/클래스 선택자/id선택자 이것들이다.

이 3가지를 한번에 볼수있는 코드를 올려보면 다음과 같다.

<!DOCTYPE html> <!-- html버전이 5 라는것 -->
<html>
    <head>
        <title>웹사이트 이름</title>
        <style>
        h1 { 
            color: red; <!-- html태그 h1으로 선택자 css적용 -->
          } 
        
        h2 { 
            color: blue; <!-- html태그 h2으로 선택자 css적용 -->
          }  
        .orange{ 
            color: orange; <!-- 클래스선택자 css적용-->
        }  
        #hello{  
            color:brown; 
            background-color:darkgray;
            width: 80px; <!-- id선택자 css적용 -->
        } 
        </style>
     </head>

    <body>
        <h1>안녕</h1> <!--모든 h1태그는 빨간색-->
        <h2>안녕</h2> <!--모든 h2태그는 파란색-->
        <h1 class="orange">안녕</h1> <!--클래스 orange로 인해서 오랜지색-->
        <div id="hello">안녕하세요</div> <!--id값 hello로 인해서 글자:브라운 배경:회색 너비:80px-->



    </body>
</html>

CSS가 적용된 위치는 <head>태그 안에있는 <style>태그이다.

선택자를 어떤걸 사용했냐에 따라 방식이 조금은 다르다

html태그를 이용한 적용은 html문서 전체에 적용되기떄문에 많이 사용하지는 않는다.

보통 클래스나 id값을 많이 활용하여 적용한다

정리하자면 css적용 위치는 <head>태그 안에 <style>태그

적용방법은 크게 3가지 html태그/class/id

이렇게 정리하면 될것같다.

위의 코드에 주석처리 해놓은 대로 웹페이지가 구현된다면 성공이다.

성공이다.