HAHYE_ARCHIVE

[새싹 프론트엔드] CSS 기초 정리 본문

새싹

[새싹 프론트엔드] CSS 기초 정리

하혜2 2022. 10. 24. 21:38

🖥 <span>을 20px blue로 출력하는 CSS3 스타일시트

 

1 셀렉터 CSS3 스타일 시트를 HTML 페이지에 적용하도록 만든 이름
2 프로퍼티 스타일 속성 이름. 약 200개 정도의 프로퍼티 있음
3 값 프로퍼티의 값
4 주석문 /* ... */  아무 위치에나 사용 가능

     

∙특징 : 대소문자의 구분이 없음

 

 

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

      ✔️인라인 스타일 (Inline style)

      ✔️내부 스타일 시트 (Internal style sheet)

      ✔️외부 스타일 시트 (External style sheet)

 

 

🖥 인라인 스타일(Inline style)

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

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

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

 

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

 

 

🖥 내부 스타일 시트

<head>
   <style>
	body { background-color : mistyrose; }
	h3 { color : purple; }
   </style>	
   <style>
	hr { border : 5px solid yellowgreen; }
	span { color : blue; font-size : 20px; }
   </style>	
</head>

       ∙ <head> 태그에 <style>태그를 사용하여 CSS 스타일을 적용

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

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

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

 

 

🖥 외부 스타일 시트

/* mystyle.css */
   body { 
	background-color:linen; 
	color:blueviolet; 
	margin-left:30px; 
	margin-right:30px; 
   }
   h3 { 
	text-align:center; 
	color:darkred; 
   }

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

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

       ∙ 동일한 스타일 시트를 웹 페이지마다 중복 작성 해소 및 웹 사이트의 전체 웹 페이지 모양의 일관성 확보

       ‼️ <style> 태그를 사용하지않음!!

 

 

🖥 CSS3 스타일 시트 파일을 불러오는 방법 (1)

      ✔️ <link> 태그 이용

<head>
<link href="mystyle.css" type="text/css" rel="stylesheet">
</head>

       ∙ href : "mystyle.css" 파일을 불러올 것을 지시

       ∙ type="text/css" : 불러오는 파일이 CSS언어로 작성된 텍스트 파일

       ∙ rel="stylesheet" : 스타일 시트를 삽입

 

 

🖥 CSS3 스타일 시트 파일을 불러오는 방법 (2)

       ✔️ @import 이용

<style>
@import url(mystyle.css);
/* @import ulr('mystyle.css'); 로 해도 됨 */
/* @import 'mystyle.css'; 로 해도 됨 */
</style>

 

 

 

 

🌱 스타일 시트 우선순위

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

       ∙ 부모 태그(부모 요소) : 자신을 둘러싸는 태그

<p style="color:green">안녕하세요
   <em style="font-size:25px">자식입니다</em>
</p>

       ∙ <p> 태그는 <em>의 부모 태그

       ∙ <em> 태그의 출력 (글자 크기는 25px. 글자색은 부모<p> 태그의 상속을 받아 green)

 

🖥 태그에 적용 가능한 스타일 (순서대로 1번이 우선순위 높은편) 

1. style 속성에 선언된 스타일 

2. <style> </style> 태그에 선언된 스타일 

3. 스타일 시트 파일에 선언된 스타일 <link href:~~>

4. 브라우저의 디폴트 스타일 (기본 검정글씨, 16px)

 

💡오버라이딩(overriding)

       ∙ 동일한 스타일은 순위가 높은 스타일이 우선 적용되는 규칙

 

 

🌱 선택자(selector)

🖥 선택자(selector)란?

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

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

 

 

🖥 전체 선택자

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

 

🖥 태그 이름 선택자

       ∙ 태그 이름이 선택자로 사용되는 유형

       ∙ 선택자와 같은 이름의 모든 태그에 CSS3 스타일 시트 적용

       ∙ 각 선택자는 콤마(,)로 구분

 

 

🖥 id 선택자

       ∙ #으로 시작하는 이름의 셀렉터

       ∙ HTML 태그의 id 속성으로만 지정 가능

 

🖥 class 선택자

       ∙ 점(.)으로 시작하는 이름의 선택자

       ∙ HTML 태그의 class 속성으로만 지정 가능

💡body.main{background:aqud;} 

     <body class="main">태그에만 적용 가능

 

 

🖥 그룹 선택자

       ∙ 여러 선택자를 쉼포(,)로 구분하여 같이 사용

       ∙ 같은 스타일 코드의 중복을 방지할 수 있음

 

 

 

🌱 결합 선택자

🖥  결합 선택자란?

       ∙ 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>

 

 

 

🌱 가상 클래스  선택자

🖥  가상 클래스 선택자란?

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

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

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

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

 

       ** 콜론( : ) 앞 뒤에 빈칸을 두면 안됨 ex) li: hover, li :hover, li : hover 다안됨

 

 

🖥  가상 클래스 선택자 종류

       ∙ 동적 가상 클래스

       ∙ 상태 가상 클래스

       ∙ 구조 가상 클래스

 

 

🖥  동적 가상 클래스

       ∙ 동적 가상 클래스

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

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

 

 

🖥  상태 가상 클래스

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

          (:checked :enabled :disabled)

 

 

🖥  구조 가상 클래스

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

          (:first-child :last-child :nth-child :nth-last-child 등 ...)

 

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

p:first-child {
	color : red;
    }

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

p:last-child {
	color : red;
    }

 

 

 

🌱 가상 클래스  선택자

🖥  가상 요소 선택자란?

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

          선택자::가상요소이름 {속성:속성값;}

 

       ∙ 대표적인 가상 요소

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

이친구는 실습으로 넘어가자 😝

 

 

 

 

🌱 속성 선택자

🖥  속성 선택자란?

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

          [속성이름] 또는 [속성이름="속성값"]

 

이친구도 실습으로 넘어가자 😝

 

 

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

저작자표시 비영리 변경금지 (새창열림)

'새싹' 카테고리의 다른 글

[새싹 프론트엔드] 자바스크립트 문법  (0) 2022.11.01
[새싹 프론트엔드] 메뉴바 만들기  (0) 2022.10.26
[새싹 프론트엔드] CSS3 레이아웃  (0) 2022.10.26
[새싹 프론트엔드] CSS 속성 정리  (0) 2022.10.26
[새싹 프론트엔드] HTML 기초 정리편  (0) 2022.10.19
'새싹' Related Articles more
Comments