HiDevelop

CSS 본문

HTML&&CSS

CSS

꽃달린감나무 2022. 5. 24. 19:28
728x90
 

CSS Zen Garden: The Beauty of CSS Design

So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into thi

www.csszengarden.com

 

 

 

 

  • CSS 문법
h1 { color: yellow; font-size: 2em;}

 

  • CSS는 꾸밀 대상이 되는 요소와 그에 대한 스타일 내용을 이루어져 있음
  • 선택자(selector) : 꾸밀 대상이 되는 요소 -->h1
  • 속성(property)  : HTML 의 속성(attribute)와 다름  --> color
  • 값(value) -->yellow
  • 선언(declaration) :"color: yellow", "font-size : 2em"
  • 선언부(declaration block) : {color: yellow", "font-size : 2em}
  • 규칙(rule set) -"h1 {color : yellow; font-size : 2em;}" or "h1 {color : yellow; font-size : 2em}" 마지막 선언에는 ;(세미클론)을 안 붙여도됨 
/* 올바른 css1 */

h1
{color : yellow; font-size : 2em; }

/* 올바른 css2 */
h1{
 color: yellow;
 font-size: 2em;
 }
 
 
/* 잘못된 CSS */

h1{
	color:
    yellow;
 }
  • 위 모든 코드가 실행은 되지만, 개발자들만의 암묵적인 규칙이 있다.( 코드의 가독성을 높이기 위한 규칙)
  • 속성과 값개행을 안해주는 것이 좋음.

 

 

  • 주석
/" 내용 "/

여러줄도 사용가능
/* ~~~~~~~~
	~~~~~~~
    ~~~~~~~ */

 

 

  • CSS 적용방식

 

  • inline
<div style="color: yellow;">Hello, CSS</div>
  •  해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법
  •  해당 요소에 직접 입력하기 떄문에 선택자는 필요하지 않게 되고, 선언부에 내용만 스타일 속성의 값으로 삽입
  •  홈페이지에 div 태그가 10개가 넘으면 inline 방식으로 CSS를 적용할 경우 모든 태그에 일일히 적용해야하는 일이 생기므로 inline 태그는 잘 사용하지 않음.

 

 

  • 결과
CSS

Hello, CSS

requiem florence milky cherish honey iris twinkle computer blush cresent illusion like adolescence world flutter masquerade apple vanilla miracle flora computer flutter laptop adolescence like computer computer banana ideale adolescence lovable banana lovable girlish twinkle you melody flora flora purity cherish charming blush flutter shine melody adolescence banana ice seraphic.

requiem florence milky cherish honey iris twinkle computer blush cresent illusion like adolescence world flutter masquerade apple vanilla miracle flora computer flutter laptop adolescence like computer computer banana ideale adolescence lovable banana lovable girlish twinkle you melody flora flora purity cherish charming blush flutter shine melody adolescence banana ice seraphic.

 

 

  • Internal
	<style>
		p {color : gray; }
	</style>
  • 문서에 <style>을 활용한 방법
  • <style>은 <head> 내부에 들어가면 <style>안에 규칙이 들어감
  • 위 코드를 통해 <p>에 같은 스타일을 줄 수 있음
  • 단, inline보다는 효과적으로 사용할 수 있지만, 웹 페이지 안에는 많은 페이지가 존재하기 때문에, 한 페이지에 스타일을 적용할 때 사용하는 것이 좋음
  • 결과
CSS

Hello, CSS

requiem florence milky cherish honey iris twinkle computer blush cresent illusion like adolescence world flutter masquerade apple vanilla miracle flora computer flutter laptop adolescence like computer computer banana ideale adolescence lovable banana lovable girlish twinkle you melody flora flora purity cherish charming blush flutter shine melody adolescence banana ice seraphic.

requiem florence milky cherish honey iris twinkle computer blush cresent illusion like adolescence world flutter masquerade apple vanilla miracle flora computer flutter laptop adolescence like computer computer banana ideale adolescence lovable banana lovable girlish twinkle you melody flora flora purity cherish charming blush flutter shine melody adolescence banana ice seraphic.

 

 

 

 

  • External
<link href="./style.css" rel="stylesheet">
  • 외부 스타일 시트 파일을 이용한 방법
  • 스타일 규칙들을 별도의 외부 파일을 만들어 넣는 방식
  • 외부 파일의 확장자는 .css
  • <head> 태그내에 위치
  • 예시 : stlye.css 파일을 만들고 <link> 태그의  속성 href에 경로지정,
  • stylesheet를 연결해주는 것이므로 rel에 stylesheet라고 알려주어야 함
  • 외부스타일 파일을 이용하면 수정에도 용이하고 용량 측면에서 효율적이기 떄문에 자주 사용
/*외부 스타일 시트 : style.css*/

p {
 color : skyblue;
 }

 

 

  • 결과
CSS

Hello, CSS

requiem florence milky cherish honey iris twinkle computer blush cresent illusion like adolescence world flutter masquerade apple vanilla miracle flora computer flutter laptop adolescence like computer computer banana ideale adolescence lovable banana lovable girlish twinkle you melody flora flora purity cherish charming blush flutter shine melody adolescence banana ice seraphic.

requiem florence milky cherish honey iris twinkle computer blush cresent illusion like adolescence world flutter masquerade apple vanilla miracle flora computer flutter laptop adolescence like computer computer banana ideale adolescence lovable banana lovable girlish twinkle you melody flora flora purity cherish charming blush flutter shine melody adolescence banana ice seraphic.

 

  • 우선순위
  • inline > internal > External
  • 아래 코드를 보면 External의 skyblue 대신 inline의 gray가 뜨는 것을 확인하실 수 있습니다.

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>CSS</title>
	<link href="./style.css" rel="stylesheet"> 
	<style>
		p {color : gray; } 
	</style>
</head>
<body>
	<p style="color: yellow;">Hello, CSS</p>
	
	<p>requiem florence milky cherish honey iris twinkle computer blush cresent illusion like adolescence world flutter masquerade apple vanilla miracle flora computer flutter laptop adolescence like computer computer banana ideale adolescence lovable banana lovable girlish twinkle you melody flora flora purity cherish charming blush flutter shine melody adolescence banana ice seraphic.</p>

	<p>requiem florence milky cherish honey iris twinkle computer blush cresent illusion like adolescence world flutter masquerade apple vanilla miracle flora computer flutter laptop adolescence like computer computer banana ideale adolescence lovable banana lovable girlish twinkle you melody flora flora purity cherish charming blush flutter shine melody adolescence banana ice seraphic.</p>

</body>
</html>

 

 

 

 

  • 결과
CSS

Hello, CSS

requiem florence milky cherish honey iris twinkle computer blush cresent illusion like adolescence world flutter masquerade apple vanilla miracle flora computer flutter laptop adolescence like computer computer banana ideale adolescence lovable banana lovable girlish twinkle you melody flora flora purity cherish charming blush flutter shine melody adolescence banana ice seraphic.

requiem florence milky cherish honey iris twinkle computer blush cresent illusion like adolescence world flutter masquerade apple vanilla miracle flora computer flutter laptop adolescence like computer computer banana ideale adolescence lovable banana lovable girlish twinkle you melody flora flora purity cherish charming blush flutter shine melody adolescence banana ice seraphic.

728x90

'HTML&&CSS' 카테고리의 다른 글

CSS-문서구조 관련 선택자  (0) 2022.07.16
CSS- Selector(선택자)  (0) 2022.05.24
콘텐츠 모델, 시멘틱 마크업, 블록 레벨, 인라인 레벨  (0) 2022.05.20
HTML태그(5) -Form 관련 태그(4)  (0) 2022.05.19
HTML 태그(4) - Form 관련 태그(2)  (0) 2022.05.19
'HTML&&CSS' Related Articles more