Notice
Recent Posts
Link
«   2024/06   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30
Tags more
Archives
관리 메뉴

공부기록용

CSS 기초 01 본문

📚강의록📚/유노코딩)CSS

CSS 기초 01

과부하가즈아 2023. 4. 14. 14:35

CSS(Cascading Style Sheets)

  • 계단식으로 스타일을 정의하는 문서
  • CSS는 웹문서를 꾸며주기 위해 사용하는 언어이다.
  • CSS코드(문서)는 독립적으로 존재할 수 있지만, 그 목적이 구조화된 HTML 문서의 스타일을 정의하는것이므로 HTML 문서가 없다면 의미가 없다. (HTML문서와 함께 사용되지 않는 CSS문서는 단순한 텍스트에 불과하며, 웹브라우저를 통해 결과물을 확인하기 위해서는 반드시 HTML 문서 작성이 선행되어야 한다.)
  • CSS코드는 CSS파일에 작성한다 -> .css

 

CSS기본문법

선택자{
ㅣ  속성명: 속성값;
}
  • 선택자 : 어떤 요소에 스타일을 적용 할지에 대한 정보
  •  { } / 중괄호 : 선택한 요소에 적용할 스타일을 정의하는 영역
  • 속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보(색상, 크기 등)
  • 속성값 : 어떻게 정의하고 싶은지에 대한 정보

주석

선택자{
  /* 주석처리할 내용 */
}

 

주석은 사람에게는 보이지만, 컴퓨터(웹브라우저)에게는 보이지 않는 코드이다. 코드에 대한 메모를 남기기 위한 용도로 사용

html문서에 css문서를 더하는 방법

 

1. 인라인 스타일 (태그에 직접 기술하기)


태그에 style 속성을 추가하여 요소에 직접적으로 스타일을 정의하는 방식으로 선택자는 필요하지 않다. (빠르고 간단하지만 웹 콘텐츠와 스타일시트를 분리하기 위해서는 사용하지 않는 편이 좋다.)

<p style="color: blue;">
  글자를 파랗게 만들어줘!
</p>

 

 

▶내용실습◀

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>HTML 문서</title>
  </head>
  <body>
    <p style="color: blue;">
      HTML 문서를 준비하고, 에디터로 여신 다음, 내용을 작성하고 브라우저로 확인해주세요.
    </p>
  </body>
</html>

2. 스타일 태그 (스타일시트를 위한 태그를 추가하여 기술하기)

html 문서에 style태그를 추가하여 그 안에 css코드를 작성하는 방식

<head>
 <style>
 
  p{ color: bule; }
  
 </style>
</head>

3. 문서 간의 연결 (스타일시트 문서를 따로 작성하여 html문서와 연결하기)

확장자가 .css 인 스타일시트 파일을 생성해 그 안에 css코드를 작성하고, html문서에 이를 연결하는 방식이다.

(이때 link태그를 사용 / 단일태그 / link태그는 html문서의 head태그 내부에 사용)

<link href="./style.css" rel="stylesheet">
  • href : 연결하고자 하는 외부 소스의 url을 기술하는 속성
  • rel : 현재 문서(html)와 외부소스의 연관 관계를 기술하는 속성

 

▶내용실습◀

/* style.css 라는 css코드만을 담은 파일을 하나 생성 */

p{
    color: red;
}
<!-- html문서에 연결 -->

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>HTML 문서</title>
    <link href="./style.css" rel="stylesheet">
  </head>
  <body>
    <p>
      HTML 문서를 준비하고, 에디터로 여신 다음, 내용을 작성하고 브라우저로 확인해주세요.
    </p>
  </body>
</html>

css가 적용된걸 확인할 수 있다

 

출처 : https://www.youtube.com/@uknowcoding

'📚강의록📚 > 유노코딩)CSS' 카테고리의 다른 글

CSS 기초 04(의사클래스, 의사요소)  (0) 2023.04.19
CSS 기초 03(속성정리03_Box관련속성)  (0) 2023.04.14
CSS 기초 03(속성정리02_position관련)  (0) 2023.04.14
CSS 기초 03(속성정리01)  (0) 2023.04.14
CSS 기초 02(선택자)  (0) 2023.04.14
'📚강의록📚/유노코딩)CSS' Related Articles more
Comments