Part3. HTML & CSS 첫걸음/CSS

Develop/HTML & CSS

Part3. HTML & CSS 첫걸음/CSS

마크투비 2021. 7. 4. 11:24

나중에 내가 다시 보려고 정리하는 패스트캠퍼스 리액트 강의 중 HTML & CSS

강의자료: https://heropy.blog/2019/04/24/html-css-starter/

강의영상: 패스트캠퍼스 프론트엔드 개발 올인원 패키지 with React Online https://fastcampus.co.kr/

1. CSS 문법

◾️ 선택자

- HTML에 스타일(CSS)을 적용하기 위해 HTML의 특정한 요소를 선택하는 사인(sign)

- 선택자 div. <div>태그를 선택하겠다!

div {
  font-size: 20px;
  color: red;
}

/* 다음과 같이 이해할 수 있습니다. */
선택자 {
  속성: 값;
  속성: 값;
}

HTML
<div>
  <h1>제목..</h1>
  <p>본문..</p>
</div>

CSS
h1 {
  color: red;
}
p {
  color: blue;
}

◾️ 속성(Properties)과 값

div {
  color: red; /* 글자색은 빨강 */
  font-size: 20px; /* 글자 크기는 20px */
  width: 300px; /* 가로 너비는 300px */
  margin: 20px; /* 바깥 여백은 20px */
  padding: 10px 20px; /* 안쪽 여백은 위아래 10px, 좌우 20px */
  position: absolute; /* 위치는 부모 요소 기준 */
}

2. CSS 선언 방식

◾️ 태그에 직접 작성하기(인라인)

- 이 방법은 HTML 태그에 직접 작성하기 때문에 선택자가 필요하지 않음

- 인라인 작성방법은 권장하지 않음

◾️ HTML에 포함하는 내장 선언 방식

<head>
  <style>
    div {
      color: red;
    }
  </style>  
</head>
<body>
  <div>HTML에 포함1</div> <!-- red -->
  <div>HTML에 포함2</div> <!-- red -->
  <div>HTML에 포함3</div> <!-- red -->
</body>

◾️ HTML 외부에서 불러오기

- <link>태그로 stylesheet(css)를 불러올 수 있음

<!-- HTML 1 -->
<head>
  <link rel="stylesheet" href="/css/main.css">
</head>
<body>
  <div>HTML에 외부에서 불러오기1</div> <!-- red -->
</body>

/* main.css */
div {
  color: red;
}

3. 선택자와 속성

1) 선택자 선언 방법

◾️ 태그로 찾기

- 선택자를 입력하는 부분에 적용하려는(찾으려는) 태그의 이름을 입력

- div 태그의 경우 태그로 찾는 방법이 정확하지 않을 수 있음

/* CSS */
/*<h1>은 글자색이 빨강이야!*/
h1 {
  color: red;
}
/*<p>는 글자색이 파랑이야!*/
p {
  color: blue;
}

/* HTML */
<h1>제목1</h1> <!--red-->
<h1>제목2</h1> <!--red-->
<p>본문1</p> <!--blue-->
<p>본문2</p> <!--blue-->

◾️ 클래스로 찾기

- . 를 통해 클래스 선택자

/*class="title"은 글자색이 빨강이야!*/
.title {
  color: red;
}
/*class="main-text"는 글자색이 파랑이야!*/
.main-text {
  color: blue;
}

<h1 class="title">제목1</h1> <!--red-->
<h1>제목2</h1>
<p class="main-text">본문1</p> <!--blue-->
<p>본문2</p>

2) 속성

◾️ 크기

- width: 요소의 가로 너비 지정. 단위는 px(pixels) 사용

- height: 요소의 세로 너비 지정

- font-size: 요소 내용(Text)의 글자 크기를 지정

◾️ 여백

- margin: 요소의 바깥 여백을 지정. 바깥 여백은 요소와 요소 사이의 여백(거리, 공간)을 생성할 때 사용. margin-방향을 지정할 수도 있음(개별 속성). 총 5개의 속성이 있음. margin(단축 속성), margin-top(개별 속성)

- padding: 요소의 내부 여백을 지정. margin과 같이 한 방향씩 지정할 수 있음. 요소의 크기가 커지게 됨.

◾️ 색상

- color: 요소 내용(Text)의 글자 색상을 지정

- background: 요소의 배경 색상을 지정(단축 속성)

- 요소의 (배경)색을 바꾸려면 background-color(개별 속성)가 필요

저작자표시

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

Part6. HTML 요소 - 인라인 텍스트 & 수정 (0)	2021.07.10
Part5. HTML <body> 요소 - 콘텐츠 구분 & 문자 콘텐츠 (0)	2021.07.10
Part4. HTML 요소 - 주요범위 & 메타데이터 (0)	2021.07.10
Part2. HTML&CSS첫걸음/HTML (0)	2021.07.03
Part1. HTML & CSS 첫걸음 (0)	2021.07.02

현재글Part3. HTML & CSS 첫걸음/CSS

마크투비의 고 GO