Dream Lovers

[생활코딩] 02. css 본문

데잇걸즈/생활코딩

[생활코딩] 02. css

yun.bagus 2022. 8. 5. 01:37

CSS의 목적 : 웹 사이트를 아름답게 디자인하기 위해 사용한다. 

inline: 태그에다가 style 속성의 값으로 css 코드를 배치한다. 

//inline 
<h1 style="font-size:50px; color:red"> title </h1>
// 세미콜론(;)은 선언과 선언을 구분해주는 역할을 한다.

style tag : style 태그 안에 css 코드 위치. 선택자가 필요하다. 

<style>
 h1 {선택자(selector) font-size:100px; color:red;
     }
</style>

모든 h1에 해당 스타일을 적용 시킨다. 

태그 선택자 < 클래스 선택자 < 아이디 선택자 순으로 우선 순위가 있다. 

<html>
	<head>
    	<style> 
        li{
        	color:green;
        }
        .group1{
        	color: blue;
        }
        #id1{
        	color:magenta;
        }
        </style> 
    </head>
    <body>
    <h1 class="group">CSS Syntax</h1>
    <ul>
        <li class="group1" id="id1">html</li>
        <li> css </li>
        <li style="color:red; text-decoration: underline;">js</li>
    </ul>
    </body>
</html>

 

 

 

box model : 태그들의 시각적인 부피감을 결정하는 중요한 요소 

  • border : 테두리
  • padding : 테두리와 콘텐츠 사이의 여백 
  • margin : 다른 콘텐츠의 margin과의 거리 
  • width, height : 콘텐츠의 크기 
<html>
	<body>
    	<style>
        h1{
        	border:10px red solid; 
            width:100px;
            height:100px;
            padding:30px;
            margin:200px;
           }
         </style>
         <h1>BOX</h1>
         <h1>BOX</h1>
	</body>
</html>

저작자표시 비영리 변경금지

'데잇걸즈 > 생활코딩' 카테고리의 다른 글

[생활코딩] 03. JavaScript (버튼 생성, 계산기 만들기)  (0) 2022.08.08
[생활코딩] 01. html  (0) 2022.08.04
'데잇걸즈/생활코딩' Related Articles more