다연이네

[days01] CSS (구문 및 적용 방법) 본문

Web/CSS

[days01] CSS (구문 및 적용 방법)

　다연　 2020. 12. 3. 13:16
반응형

 1. CSS
ㄱ. [C]ascading [S]tyle [S]heets 
ㄴ. html 요소가 화면, 종이, 기타 미디어에 표시되는 방법을 설명(정의)
ㄷ. 여러 웹 페이지의 스타일을 일괄적으로 관리할 수 있다. (많은 시간 절약, 유지)
ㄹ. 외부 스타일 시트 (???.css)

 

 2. CSS 구문(형식)
스타일을 적용할 대상
선택자(Selector) { 속성(Property):속성값(Value);  속성(Property):속성값(Value) }

선택자로 올 수 있는 것들
  1) 태그명
  2) #아이디명 (숫자로 시작할 수 없다)
  3) .클래스명
  4) * 범용선택자 : 모든 html요소를 선택자로 사용
  5) , 그룹화 선택자: 동일한 스타일 정의할때 html 요소 선택  p, div, span {동일한 스타일 설정}

* 우선순위: 태그명<.클래스명<#아이디명  *
    우선순위가 동급이면 밑에 작성한 애가 적용된다.


 3. CSS 적용 방법
1)inline(인라인) CSS   : 해당 태그(요소)만 스타일 적용 (우선순위 가장 높음)
2)internal(내부) CSS   : 해당 웹 페이지만 스타일 적용 
3)external(외부) CSS  : 여러 웹 페이지에 스타일 적용

                                 rx06_mystyle.css <link>

                                 내부, 외부는 우선순위가 같기에 나중에 작성된 애가 적용된다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- 외부(external) CSS 적용 방법 -->

<link href="ex01_mystyle2.css" rel="stylesheet">
<link href="ex01_mystyle.css" rel="stylesheet">
<!-- 위처럼 같은 속성을 설정하는 똑같은 설정자가 여러개면 나중에 있는게 적용된다. -->

<!-- 내부(internal) CSS 적용 방법 -->
<style>
	p{
	color:blue;
	}
</style>

<style>

	*{ /* 범용적이니까 보통 맨 위에 */
			margin: 0;
			padding: 0;
			color: black;
			text-align: center;
		}
	#third{
		color:white; /* #아이디명이 태그명보다 우선순위가 높아 3째줄은 흰색으로 출력됨 */
		background-color: black;
	}
	
	p{  
		color:red;	  /* p태그가 여러개면 마지막에 있는 태그의 속성으로 출력된다.*/
		text-align:center; 
		border: 1px solid gray
	}
	
	.first{
		color: pink; /* .클래스명이 태그명보다 우선순위가 높다 */
	}
	
	p.first{ 
		color: green; /* p이면서 first인 애가 green으로 됨 */
	} /* 태그명과 클래스명 합쳐서 씀 => 더 구체적인 애가 우선순위가 높음 */
	
/* 	p{
		padding:10px;
		font-size: 12px;
	}
	div{
		padding:10px;
		font-size: 12px;
	} 아래처럼 한번에 주자
	 */
	 p, div, span{ /* 스판태그도 있으면 이렇게 나열하면 됨 */
	 	padding:10px;
		font-size: 12px;
	 }
	 
	 .box{
	 	border-width: 5px; /*5px이 안돼 => 태그 안에 스타일 주는게 우선순위가 높아서 그래  */
	 }
	
</style>

</head>
<body>

<p class="first box">Lorem ipsum dolor sit amet.</p> <!-- 클래스를 2개 가짐(first하고 box) -->
<p>Neque molestias optio mollitia iusto!</p>
<p id="third">Rem error non odio ea.</p>
<p>Hic cum ducimus ipsum neque?</p>
<p>Deleniti ut praesentium eveniet inventore.</p>


<div class="first">Lorem ipsum dolor sit amet.</div> <!-- 태그는 다르지만 first라는 하나의 클래스로 묶임 -->
<div>Odio impedit quisquam corporis aliquid.</div>
<div >Animi enim possimus ex molestias!</div>
<!-- [인라인 CSS 적용방법] 태그(요소,element) style 속성으로 설정  -->
<div class="box" style="border: 1px solid red">Ullam quos nesciunt similique molestias.</div>
<div>Ad molestias quaerat eos qui.</div>


</body>
</html>

ex01_mystyle

@charset "UTF-8";

body{
	background-color: lightblue;	
}

h1,h2,h3,h4,h5,h6{
	color:navy;
	margin:20px;
}

ex01_mystyle2

@charset "UTF-8";

body{
	background-color: yellow;	
}

 

 

반응형
저작자표시 비영리

'Web > CSS' 카테고리의 다른 글

[days01] CSS 텍스트: 색상, 정렬, 장식, 변환 등 + 글씨체  (0) 2020.12.03
[days01] max-width(height)와 오버플로우(스크롤바 외)  (0) 2020.12.03
[days01] 여백(margine)과 패딩(padding) + outline  (0) 2020.12.03
[days01] 테두리 속성 (border-style, border-radius)  (0) 2020.12.03
[days01] CSS 투명도, 박스 위치 지정과 클릭시 맨 위로 이동하는 법, background  (0) 2020.12.03
'Web/CSS' Related Articles more
Comments