미미 공부/취미방

[패스트캠퍼스:1주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 6/7 본문

Programming

[패스트캠퍼스:1주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 6/7

mionager 2022. 6. 28. 18:04


1주차.Chapter 06

 

 

01

CSS 기본 문법

HTML 요소를 찾아서 스타일을 주는 CSS.

 

CSS 문법

선택자 {
  속성: 값; 
  속성: 값; 
  속성: 값;
}

선택자 : 스타일을 적용할 대상

속성 : 스타일의 종류

값 : 스타일 종류의 값

 

중괄호 안에 있는 속성들이 선택자에 적용됩니다.

*콜론(:)과 세미콜론(;) 중요!

 

 

02

CSS 선언 방식

css 스타일을 적을 수 있는 방법이 4가지(내부(내장) 스타일, 인라인 스타일, 외부(링크) 스타일, @import 스타일) 있는데,

 

내부(내장) 스타일 :  HTML내부에 들어있는 스타일

<head>
  <style>
    div {
      color: red;
    }
  </style>
</head>

 

장점. 별도 CSS 파일 만들지 않아도 된다.

단점. HTML 문서가 복잡해질 수 있다. / 유지보수가 어렵다.

 

 

인라인 스타일 : HTML 요소에 직접 작성 (선택자 필요 없음)

<div style="color: red; margin: 20px;">Style test</div>

단점. 다른 방법으로 css 스타일을 주려고 해도 바뀌지 않음

 

 

외부(링크) 스타일 : HTML에서 link로 연결(병렬방식)

<head>
  <link rel="stylesheet" href="경로/파일이름.css" />
  <link rel="stylesheet" href="경로/파일이름2.css" />
</head>

 

가장 자주 사용되는 방법

 

 

@import 스타일 : css파일 내부에서 외부파일을 가져온다. (HTML에서 link로 가져오는 것 처럼)(직렬방식)

<head>
  <link rel="stylesheet" href="경로/파일이름.css" />
  <link rel="stylesheet" href="경로/파일이름2.css" />
</head>
@import url("경로/파일이름3.css");

 

장단점. 열결이 지연됨(자주 사용하지 않음)

 

 

03

CSS 선택자

선택자는 외울게 많아많아요...😅😅

그래도 계속 연습하다 보면 익혀지니까 화이팅!

 

선택자 종류로는 기본, 복합, 가상 클래스, 가상 요소, 속성

선택자 분류 이름 HTML CSS 설명
기본 선택자 전체 선택자
(Universal Selector)		 HTML 모든 요소 * {
 background: yellow;
}		 모든요소를 선택
기본 선택자 태그 선택자
(Type Selector)		 <div>
  <ul>
    <li>딸기</li>
    <li>수박</li>
    <li class="orange">오렌지</li>
    <li>망고</li>
    <li>사과</li>
  </ul>
  <span class="orange">바나나</li>
</div>
<span class="orange">멜론</li>		 span {
 background: yellow;
}		 해당 태그요소를 모두 선택
기본 선택자 클래스 선택자
(Class Selector)		 <span class="orange">오렌지</span> .orange {
 background: yellow;
}		 해당 클래스요소를 모두 선택
기본 선택자 아이디 선택자
(ID Selector)		 <span id="orange" class="orange">오렌지</span> #orange {
 background: yellow;
}		 해당 아이디 요소를 선택.
복합 선택자 일치 선택자
(Basic Combinator)		 <div>
  <ul>
    <li>딸기</li>
    <li>수박</li>
    <li class="orange">오렌지</li>
    <li>망고</li>
    <li>사과</li>
  </ul>
  <span class="orange">바나나</li>
</div>
<span class="orange">멜론</li>		 span.orange {
 background: yellow;
}		 해당 선택자를 모두 충족하는 요소를 선택
복합 선택자 자식 선택자
(Child Combinator)		 <div>
  <ul>
    <li>딸기</li>
    <li>수박</li>
    <li class="orange">오렌지</li>
    <li>망고</li>
    <li>사과</li>
  </ul>
  <span class="orange">바나나</li>
</div>
<span class="orange">멜론</li>

<ul>
  <li class="orange">바다</li>
</ul>		 ul > .orange {
 background: yellow;
}		 부모태그의 직계 자식 중 해당 선택자 요소를 선택
복합 선택자 하위(후선) 선택자
(Descendant Combinator)		 <div>
  <ul>
    <li>딸기</li>
    <li>수박</li>
    <li class="orange">오렌지</li>
    <li>망고</li>
    <li>사과</li>
  </ul>
  <span class="orange">바나나</li>
</div>
<span class="orange">멜론</li>		 div .orange {
 background: yellow;
}		 왼쪽 선택자 내부에 있는 후손중에서 해당 선택자를 선택한다.
복합 선택자 인접 형제 선택자
(Adjacent Sibling Combinator)		 <ul>
  <li>딸기</li>
  <li>수박</li>
  <li class="orange">오렌지</li>
  <li>망고</li>
  <li>사과</li>
</ul>		 .orange + li {
 background: yellow;
}		 왼쪽 선택자의 바로 다음 형제 요소 하나를 선택
복합 선택자 일반 형제 선택자
(General Sibling Combinator)		 <div>
  <ul>
    <li>딸기</li>
    <li>수박</li>
    <li class="orange">오렌지</li>
    <li>망고</li>
    <li>사과</li>
  </ul>
  <span class="orange">바나나</li>
</div>
<span class="orange">멜론</li>		 .orange ~ li {
 background: yellow;
}		 왼쪽 선택자의 모든 다음 형제를 선택
가상 클래스 :hover <a href="https://www.naver.com">NAVER</a>
 a:hover {
 background: yellow;
}		 마우스가 선택자 요소에 올라가 있는 동안만 선택
가상 클래스 :active a:active {
 background: yellow;
}		 마우스가 선택자 요소를 클릭하고 있는 동안만 선택
가상 클래스 :focus <input type="text" />
 input:focus {
  background-color: orange;
}		 선택자 요소에 포커스가 되면 선택

(포커스가 될 수 있는 요소는 정해져 있다. - input, textarea, a, label, select 등)

(포커스가 불가능한 요소 억지로 가능하게 만들기 :
태그에 tabindex="-1" 속성을 넣는다.
<div class="box" tabindex="-1"></div>
)
가상 클래스 :first-child <div class="fruits">
  <span>딸기</span>
  <span>수박</span>
  <div>오렌지</div>
  <p>망고</p>
  <h3>사과</h3>
</div>		 .fruits span:first-child {
   background: yellow;
}		 선택자의 형제요소 중 선택자가  첫째라면 선택
가상 클래스 :last-child <div class="fruits">
  <span>딸기</span>
  <span>수박</span>
  <div>오렌지</div>
  <p>망고</p>
  <h3>사과</h3>
</div>

<div class="fruits">
  <span>딸기</span>
  <span>수박</span>
  <div>오렌지</div>
  <p>망고</p>
  <div>사과</div> (X)
</div>		 .fruits h3:last-child {
   background: yellow;
}		 선택자의 형제요소 중 선택자가  막내라면 선택
가상 클래스 :nth-child(n) <div class="fruits">
  <span>딸기</span>
  <span>수박</span>
  <div>오렌지</div>
  <p>망고</p>
  <h3>사과</h3>
</div>		 .fruits *:nth-child(2) {
  background: yellow;
}

/* 짝수 선택 */
.fruits *:nth-child(2n) {
  color: red;
}

/* 홀수 선택 */
.fruits *:nth-child(2n+1) {
  color: blue;
}

/* 시작점 선택 */
.fruits *:nth-child(n+3) {
  background: pink;
}

n은 0부터 시작		 선택자의 형제 요소 중 n번째라면 선택
가상 클래스 :not(선택자) <div class="fruits">
  <span>딸기</span>
  <span>수박</span>
  <div>오렌지</div>
  <p>망고</p>
  <h3>사과</h3>
</div>		 .fruits *:not(span) {
  background: yellow;
}		 선택자 아닌 요소를 선택
가상 요소 선택자 ::before
::after		 <div class="box">
  ::before
  내부요소...
  <div></div>
  ::after
</div>
 .box::before {
  content: "앞!";
}		 선택자 내부요소의 앞/뒤에 내용이 가상으로 인라인 요소로(content) 삽입.

*content 속성이 반드시 들어있어야 함
속성 선택자 [속성] <input type="text" data-name="HEROPY" value="HEROPY">
<input type="password" value="1234">
<input type="text" value=ABCD" disabled>		 [disabled] {
  background: yellow;
}

[type="password"] {
  color: red;
}

[data-name="HEROPY"] {
color: grey;
}		 선택한 속성을 포함한 요소 선택

 

많죠...?^^

화이팅...🌹

저작자표시

'Programming' 카테고리의 다른 글

[패스트캠퍼스:2주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 1/4  (0) 2022.06.28
[패스트캠퍼스:1주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 7/7  (0) 2022.06.28
[패스트캠퍼스:1주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 5/7  (0) 2022.06.28
[패스트캠퍼스:1주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 4/7  (0) 2022.06.28
[패스트캠퍼스:1주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 3/7  (0) 2022.06.26
'Programming' Related Articles more
Comments