티스토리 뷰

Language/CSS

CSS ) 시작

공부하는 승승 2022. 1. 18. 22:40

🎨 CSS(Cascading Style Sheets)
: HTML, XML과 같은 구조화된 문서를 화면에 어떻게 렌더링할 것인지 정의하기 위한 언어

 

✅ Selector

✅ Property

✅ HTML-CSS연동

✅ Reset CSS

 

1. 셀렉터(Selector, 선택자)

  • HTML에서 스타일을 적용하기 위해 선택하는 부분

 

 

 

2. 프로퍼티(Property, 속성)

  • 셀렉터로 HTML요소 선택 ➡ {} 안에 프로퍼티와 값을 지정하여 스타일 정의
  • 프로퍼티를 여러개 연속해서 쓸 땐 세미클론 사용

    * {
     font-style: italic;
     font-size: 20px;
     color: blue;
    }​

    3. 값(Value, 속성값)

    * {
     font-style: italic;
     font-size: 20px;
     color: blue;
    }​

 

 

3.  HTML - CSS 연동

  • link style

<HTML>

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1>Hello World</h1>
    <p>Today I Learned</p>
  </body>
</html>

<CSS>

h1 { color: blue; }
p { font=size: 10px; }

 

  • embedding style: HTML 내부에 CSS가 있음
<!DOCTYPE html>
<html>
  <head>
    <style>
 	 h1 { color: blue; }
 	 p { font=size: 10px; }
    </style>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>Today I Learned</p>
  </body>
</html>



4. Reset CSS: 기본적인 HTML 요소의 CSS를 초기화하는 용도로 사용함

더보기
더보기 
/* http://meyerweb.com/eric/tools/css/reset/
  v2.0 | 20110126
  License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

 

 

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

CSS) 속성값(property value) 단위  (0) 2022.01.25
CSS) 선택자(Selector)  (0) 2022.01.18
3. HTML & CSS 실습(프로젝트?)  (0) 2021.07.07
2. CSS 박스모델  (0) 2021.06.29
1. CSS  (0) 2021.06.28
댓글