코드 여행 일기

CSS 기초 본문

CSS

CSS 기초

할짝개발자 2023. 7. 21. 17:10
728x90
반응형

CSS = Cascading Style sheets

    Cascading : 계단식

    Style : 멋을 내다

    sheets : (종이) 한 장

 

계단 식으로 스타일을 정의하는 문서

HTML 문서를 꾸며주는 언어

 

HTML 파일에 CSS 코드 적용 방법

 

1. 인라인 스타일

 

태그에 style 속성을 추가하여 요소에 직접적으로 스타일을 정의 하는 방식

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST</title>
</head>
<body>
    <p style = "color: blue;"> <!-- 인라인 스타일 -->
        안녕하세요 예문 입니다.
    </p>
</body>
</html>

<p style = "color: blue;"> 적용 전

 

<p style = "color: blue;"> 적용 후

 

 

2. 스타일 태그

 

HTML 문서에 <style></style> 태그를 추가하여 그 안에 CSS 코드를 작성할수 있다

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST</title>
	<!--스타일 태그-->
    <style> 
        p{
            color: blue;   
        }
    </style>
	<!--스타일 태그-->
</head>
<body>
    <p>
   	 안녕하세요 예문 입니다.
    </p>
    <a>
   	 안녕하세요 예문 2222 입니다.
    </a>
</body>
</html>

<p></p> 안에 들어간 모든 코드에 적용 이 된다

 

<style></style> 코드 적용 전
<style></style> 코드 적용 후

 

3. 문서 간의 연결

 

확장자가 *.CSS 인 스타일 시트 파일 생성해 그 안에 CSS 코드를 작성하고, HTML 문서에 이를 연결하는 방식. 이때는 <link> 태그를 사용한다.

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST</title>
<!-- 문서 연동-->
    <link rel="stylesheet" href="style.css">
<!-- 문서 연동-->
</head>
<body>
	<p>
        안녕하세요 예문 입니다.
	</p>
	<a>
    	안녕하세요 예문 2222 입니다.
	</a>
</body>
</html>

style.css

p{
    color: red;   
}

 

  • href : 연결 하고자 하는 외부 소스의 url 을 기술하는 속성
  • rel : 현재 문서 (HTML) 와 외부 소스의 연관 관계를 기술하는 속성

⇒ <link> 태그는 HTML 문서의 <head></head> 내부에서 사용해야 함

style.css 문서 연동 전
style.css 문서 연동 후

위 글은 유튜브 유노코딩 영상을 정리하여 쓴 글 입니다.

728x90
반응형

'CSS' 카테고리의 다른 글

박스모델 2편, margin padding 다루기  (0) 2023.09.24
박스모델 1편, 박스모델 소개  (0) 2023.09.22
블록 레벨 요소 vs 인라인 요소  (0) 2023.09.22
CSS 텍스트 꾸미기 속성  (0) 2023.07.28
CSS 선택자 1  (0) 2023.07.21
'CSS' Related Articles more