[새싹 프론트엔드] 1주차 - 2 CSS 기초 & 선택자

CSS 기초

CSS (Cascading Style Sheet)

• HTML 문서의 색이나 모양 등 외관을 꾸미는 언어

• CSS로 작성된 코드를 스타일 시트(style sheet)라고 부름

• 현재 보편적으로 CSS3 사용

CSS로 표현할 수 있는 것

• 색상과 배경

• 텍스트

• 폰트

• 박스 모델(Box Model)

• 비주얼 포맷 및 효과

• 리스트

• 테이블

• 사용자 인터페이스

CSS 기본 구성

콜론 콜론

↑ ↑

span { color : blue; font-size : 20px; }

↓ ↓ ↓ ↓ ↓

셀렉터 프로퍼티 값 프로퍼티 값

예시)

<head>
    <meta charset="UTF-8">
    <title>스타일을 가진 웹 페이지</title>
<style>
/* CSS 스타일 시트 작성 */
body { background-color :bisque; }
h3 { color : purple; }
hr { border : 5px solid orange; }
span { color :red; font-size : 20px; }
</style>
</head>
<body>
<h3>CSS 기초</h3>
<hr>
<p>나는 <span>점심으로</span>카레를 먹었다.</p>
</body>

결과)

HTML 문서에 CSS3 스타일 시트 적용하는 방법

1. 인라인 스타일(Inline style)

2. 내부 스타일 시트(Internal style sheet)

3. 외부 스타일 시트(External style sheet)

1. 인라인 스타일(Inline style)

<태그이름 style=＂속성이름:속성값＂>

• HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법

• 해당 HTML 요소에만 스타일을 적용할 수 있음

• 하나의 요소에 여러 개의 스타일 적용 시, 각각의 값은 세미콜론(;)으로 구분함

예)

<p style = "color : red; font-size : 30px">축구를 좋아합니다.

2. 내부 스타일(Internal style sheet)

<head>
    <style>
        body { background-color :bisque; }
        h3 { color : purple; }
    </style>  
    <style>
        hr { border : 5px solid orange; }
        span { color :red; font-size : 20px; }
    </style>
</head>
<body>
     <h3>날씨가 <span>춥다</span></h3>
     <hr>
</body>

• HTML <head>에 style태그를 삽입 *<body> 엔 절대 위치할 수 없음

• 태그에 태그를 사용하여 CSS 스타일을 적용

• <style> 태그는 여러 번 작성 가능

• 하나의 스타일 시트로 합쳐져서 적용됨

• 해당 HTML 문서에만 스타일을 적용할 수 있음

3. 외부 스타일(External style sheet)

~~<style>~~
body { background-color :bisque; }
h3 { color : purple; }
~~</style>~~
~~<style>~~
hr { border : 5px solid orange; }
span { color :red; font-size : 20px; }
~~</style>~~

• 확장자가 .css인 파일에 스타일 시트 저장

• 웹 페이지에서 CSS3 스타일 시트 파일을 불러서 사용

• 동일한 스타일 시트를 웹 페이지마다 중복 작성 해소

• 웹 사이트의 전체 웹 페이지 모양의 일관성 확보

• <style> 태그를 사용하지 않음

CSS3 스타일 시트 파일 불러오는 방법

(1) <link> 태그 이용

• href - “mystyle.css” 파일을 불러올 것을 지시

• type=“text/css” - 불러오는 파일이 CSS 언어로 작성된 텍스트 파일

• rel=“stylesheet” - 스타일 시트를 삽입

(2) @import 이용

입력 방식은 3가지로 어떤 것으로 해도 상관 없음.

(나는 마지막 방법이 젤 편한 것 같다.)

★ CSS3 스타일은 부모 태그로부터 상속

• 부모 태그(부모 요소)

• 자신을 둘러싸는 태그

<p>
	<a hraf="https//naver.com">부모는 p태그 자식은 a태그 </a>
</p>

스타일 시트 우선순위

4가지 스타일 시트(위에 3가지 방법 + 브라우저의 디폴트 스타일)가 태그에 동시 적용될 때,

우선순위는

1순위 인라인 스타일(Inline style)

2순위 내부 스타일(Internal style sheet)

3순위 외부 스타일(External style sheet)

4순위 브라우저 디폴트 스타일

따라서 스타일 지정이 중첩될 경우 우선순위가 높은 순서대로 스타일이 적용된다.

선택자(selector)

: 스타일을 적용할 대상을 선택하기 위해 사용

종류

전체 선택자
HTML 요소(태그 이름) 선택자
아이디(id) 선택자
클래스(class) 선택자
그룹(group) 선택자

1. 전체선택자

: 와일드 문자(*)를 사용하여 모든 태그에 스타일을 적용시키는 선택자

CSS

* { color: red; }

HTML

<h3>Web Programming</h3>
…
    <ul>
        <li>HTML5</li>
        <li><b>CSS</b></li>
        <li>JAVASCRIPT</li>
    </ul>
…

결과)

2. 태그 이름 선택자

태그 이름이 선택자로 사용되는 유형
선택자와 같은 이름의 모든 태그에 CSS3 스타일 시트 적용
각 선택자는 콤마(,)로 구분

CSS

h3 { color : brown; }
li { color : brown; }

HTML

<h3>Web Programming</h3>
…
    <ul>
        <li>HTML5</li>
        <li><b>CSS</b></li>
        <li>JAVASCRIPT</li>
    </ul>
…

결과)

3. id 선택자

#으로 시작하는 이름의 셀렉터
HTML 태그의 id 속성으로만 지정 가능

CSS

#list { background : lightpink; }

HTML

<h3>Web Programming</h3>
…
    <ul>
        <li>HTML5</li>
        <li><b>CSS</b></li>
        <li>JAVASCRIPT</li>
    </ul>
…

결과)

4. class 선택자

점(.)으로 시작하는 이름의 선택자
HTML 태그의 class 속성으로만 지정 가능

CSS

.warning { color : red; }
body.main { background : aqua; }

HTML

<body class=“main”>
   <h3>Web Programming</h3>
…
   <ul>
        <li>HTML5</li>
        <li><b>CSS</b></li>
        <li>JAVASCRIPT</li>
   </ul>
   <div class=“warning”>60점 이하는 F!</div>
</body>

결과)

5. 그룹 선택자

여러 선택자를 쉼표(,)로 구분하여 같이 사용
같은 스타일 코드의 중복을 방지할 수 있음

CSS

h3, li { color : brown; }

HTML

<h3>Web Programming</h3>
…
     <ul>
         <li>HTML5</li>
         <li><b>CSS</b></li>
         <li>JAVASCRIPT</li>
     </ul>

결과)

결합 선택자

2개 이상의 선택자 조합

- 조합에 적합한 HTML 태그에만 적용

자식 선택자(child selector)

- 부모 자식 관계인 두 선택자를 ‘>’ 기호로 조합

예) div > b { color : blue; }

<div>의 직계 자식인 <b>에 적용되는 스타일 시트

자손 선택자(descendent selector)

- 자손 관계인 2개 이상의 태그 나열

예) ul b { color : blue; }

<ul>의 자손 <b>에 적용되는 스타일 시트

CSS

ul b { color : blue; } - 자손 셀렉터
div > b { background : yellow; } - 자식 셀렉터

HTML

…
<div>
  <div>2학기 <b>학습 내용</b></div>
  <ul>
      <li>HTML5</li>
      <li><b>CSS</b></li>
      <li>JAVASCRIPT</li>
  </ul>
  <div>60점 이하는 F!</div>
</div>
…

결과 )

가상 클래스(pseudo-class) 선택자

: 선택하고자 하는 HTML 요소의 특별한 ‘상태(state)’를 명시할 때 사용

방법

선택자:가상클래스이름 { 속성 : 속성 값;}

선택자.클래스이름:가상클래스이름 { 속성 : 속성 값;}

선택자#ID이름:가상클래스이름 { 속성 : 속성 값;}

※ 주의사항

콜론(:) 앞뒤에 빈칸을 두면 안됨

li: hover

li :hover

li : hover

이런 형태로 쓰면 안 된다!

항상 li:hover 요렇게 쓰는 것으로

종류

동적 가상 클래스
상태 가상 클래스
구조 가상 클래스

유형	셀렉터	설명
마우스	:hover	마우스가 올라갈 때 스타일 적용
마우스	:active	마우스로 누르고 있는 상황에서 스타일 적용
폼 요소	:focus	폼 요소가 키보드나 마우스 클릭으로 포커스를 받을 때 스타일 적용
링크	:link	방문하지 않은 링크에 스타일 적용
링크	:visited	방문한 링크에 스타일 적용
블록	:first-letter	<p>, <div> 등과 같은 블록형 태그의 첫 글자에 스타일 적용. ::first-line와 동일하며, <span>과 같은 인라인 태그에는 적용되지 않음
블록	:first-line	<p>, <div> 등과 같은 블록형 태그의 첫 글자에 스타일 적용. ::first-letter와 동일
구조	:nth-child(even)	짝수 번째 모든 자식 태그에 스타일 적용
	:nth-child(n)	n 번째 자식 태그에 스타일 적용
	:nth-child(2n+1)	홀수번째 자식 태그에 스타일 적용
	:first-child	부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소를 선택
	:last-child	부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택

동적 가상 클래스

- 링크의 상태에 따라 각각의 스타일을 별도로 설정

예시)

방문한 링크의 텍스트 색을 green으로 출력

a:visited { color : green; }

<li> 태그에 마우스가 올라오면, yellowgreen을 배경색으로 출력, 내려가면 복귀

li:hover { background : yellowgreen; }

상태 가상 클래스

- 입력 양식의 상태에 따라 각각의 스타일을 별도로 설정

:checked
:enabled
:disabled

예시)

*input 요소 중에서 체크된(checked) 상태의 input 요소를 선택

CSS

input:checked+span { color: red ; }

HTML

결과)

구조 가상 클래스

HTML 요소의 계층 구조에서 특정 위치에 있는 요소를 선택할 수 있음

:first-child
:last-child
:nth-child
:nth-last-child 등

예시)

모든 자식 요소 중에서 첫 번째 자식 요소를 모두 선택

위에서부터 순서 셈

p:first-child { color : red; }

모든 자식 요소 중에서 마지막에 위치하는 자식 요소를 모두 선택

아래에서부터 순서 셈

p:last-child { color : red; }

가상 요소 선택자

HTML 요소의 특정 부분만을 선택할 때 사용

콜론 2개 쓰는 것이 규칙이지만 1개 써도 가능 (사실 습관 들어서 1개만 자꾸 쓰는중,,)

가상요소	설명
::first-letter	텍스트의 첫 글자만을 선택
::first-line	텍스트의 첫 라인만을 선택
::before	특정 요소의 내용(content) 부분 바로 앞에 다른 요소를 삽입할 때 사용
::after	특정 요소의 내용(content) 부분 바로 뒤에 다른 요소를 삽입할 때 사용
::selection	해당 요소에서 사용자가 선택한 부분만 선택

::firstletter와 :hover의 사용 예시)

<style>
  h3::first-letter { color : red; }
  li:hover { background : yellowgreen;}
</style>
<body>
     …
<h3>Web Programming</h3>
   <ul>
	<li>HTML5</li>
	<li><b>CSS</b></li>
	<li>JAVASCRIPT</li>
   </ul>
     …
</body>

결과 )

가상요소 선택자 여러 개 사용 예시)

<html>
<head>
<title>셀렉터 만들기</title></head>
<style>
  h3, li { /* 태그 이름 셀렉터 */
	color : brown;
  }
  div > div > b { /* 자식 셀렉터 */
	background : yellow;
  }
  ul b { /* 자손 셀렉터 */
	color : blue;
  }
  .warning { /* class 셀렉터 */
	color : red;
  }
  body.main { /* class 셀렉터 */
	background : aliceblue; 
  }
  #list { /* id 셀렉터 */
	background : mistyrose;
  }
  #list span{ /* 자손 셀렉터 */
	color : forestgreen;
  }
  h3::first-letter { /* 가상 클래스 셀렉터 */
	color : red;
  } 
  li:hover { /* 가상 클래스 셀렉터 */
	background : yellowgreen;
  }
</style>
</head>

<body class="main">
  <h3>Web Programming</h3>
  <hr>
  <div> 
	 <div>2학기 <b>학습 내용</b>입니다.</div>
	 <ul id="list">
		<li><span>HTML5</span></li>
		<li><b>CSS</b></li>
		<li>JAVASCRIPT</li>
	</ul>
	<div class="warning">60점 이하는 F</div>
  </div>
</body>
</html>

결과)

속성 선택자

HTML 태그의 특정 속성이나 특정 속성값을 가지고 있는 태그에만 스타일을 적용

[속성이름] 또는 [속성이름=“속성값”]

예시 - 속성이름 선택자)

<input> 태그의 type 속성값이 “text”인 태그에 스타일 적용

input[type=text] { color : red; }

<html>
<head>
<title>속성 선택자</title>
<style>
    [title] {background: black; color: yellow;}
</style>
</head>
<body>
	<h1>[속성] 선택자를 이용한 선택</h1>
	<h2 title="first_h2">이 제목은 title 속성을 가지고 있습니다.</h2>
	<h3>이 제목은 title 속성을 가지고 있지 않습니다.</h3>
	<p title="first_p">이 단락은 title 속성을 가지고 있습니다.</p>
	<p title="second_p">이 단락은 title 속성을 가지고 있습니다.</p>
</body>
</html>

결과

예시- 속성="속성값" 선택자)

<html>
<head>
	<title>속성 선택자</title>
	<style>
		[title="first h2"] {background: black; color: yellow;}
	</style>
</head>

<body>
	<h1>[속성="속성값"] 선택자를 이용한 선택</h1>
	<h2 title="first h2">이 제목은 title 속성값이 "first h2"입니다!</h2>
	<h3>이 제목은 title 속성을 가지고 있지 않습니다!</h3>
	<p title="first p">이 단락은 title 속성값이 "first p"입니다!</p>
	<p title="second p">이 단락은 title 속성값이 "second p"입니다!</p>
</body>
</html>

결과)

[실습 회고]

이 문제에서 나는 nth-child-()로 태그를 이용

p:nth-child(1) p:nth-child(4)로 지정하였는데

nth-last-child를 이용하면 훨씬 간편하고 짧게 쓸 수 있었음

 <style>
      div {
        border: 3px solid #008000;
      }
      p:nth-last-child(3n) {
        color: red;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1>:nth-child 를 이용한 선택</h1>
    <hr />
    <div>
      <p>이 p 태그는 div 태그의 여섯 번째 child 입니다!</p>
      <p>이 p 태그는 div 태그의 다섯 번째 child 입니다!</p>
      <p>이 p 태그는 div 태그의 네 번째 child 입니다!</p>
      <p>이 p 태그는 div 태그의 세 번째 child 입니다!</p>
      <p>이 p 태그는 div 태그의 두 번째 child 입니다!</p>
      <p>이 p 태그는 div 태그의 첫 번째 child 입니다!</p>
    </div>
  </body>

이렇게 nth-last-child(3n)을 사용하면 아래에서부터 3의 배수로 세기 때문에 문제처럼 위를 기준으로 맨 윗줄과 4번째 줄을 지정할 수 있다. 마지막 요소를 선택하는 것이기도 하지만 순서를 아래에서 위로 센다는 점을 기억!

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 1주차 블로그 포스팅

'Html & Css' 카테고리의 다른 글

[새싹 프론트엔드] 2주차 - 1 CSS 레이아웃 & HTML 테이블 (0)	2022.10.24
[새싹 프론트엔드] 1주차 - 5 CSS 위치 속성 (0)	2022.10.21
[새싹 프론트엔드] 1주차 - 4 CSS 배경 & 박스 속성 (0)	2022.10.21
[새싹 프론트엔드] 1주차 - 3 CSS 단위 & 글자 속성 (0)	2022.10.19
[새싹 프론트엔드] 1주차 - 1 HTML 기초 & 태그 (0)	2022.10.18

step to dev

[새싹 프론트엔드] 1주차 - 2 CSS 기초 & 선택자

CSS 기초

CSS (Cascading Style Sheet)

CSS로 표현할 수 있는 것

CSS 기본 구성

HTML 문서에 CSS3 스타일 시트 적용하는 방법

CSS3 스타일 시트 파일 불러오는 방법

선택자(selector)

1. 전체선택자

2. 태그 이름 선택자

3. id 선택자

4. class 선택자

5. 그룹 선택자

결합 선택자

가상 클래스(pseudo-class) 선택자

동적 가상 클래스

상태 가상 클래스

구조 가상 클래스

가상 요소 선택자

속성 선택자

[실습 회고]

'Html & Css' 카테고리의 다른 글

티스토리툴바

[새싹 프론트엔드] 1주차 - 2 CSS 기초 & 선택자

CSS 기초

CSS (Cascading Style Sheet)

CSS로 표현할 수 있는 것

CSS 기본 구성

HTML 문서에 CSS3 스타일 시트 적용하는 방법

CSS3 스타일 시트 파일 불러오는 방법

선택자(selector)

1. 전체선택자

2. 태그 이름 선택자

3. id 선택자

4. class 선택자

5. 그룹 선택자

결합 선택자

가상 클래스(pseudo-class) 선택자

동적 가상 클래스

상태 가상 클래스

구조 가상 클래스

가상 요소 선택자

속성 선택자

[실습 회고]

'Html & Css' 카테고리의 다른 글

'Html & Css' Related Articles

티스토리툴바