(66)[Web]2일차: CSS 개요 / ■ CSS ■ / F

1. 2023.11.28(화)

#CSS

1. CSS 개요

- 선택자(셀렉터라고도 부름): css3에서 특정 html 태그 선택시 사용

 ex. h1 {color: red;}
        -- 선택자
            ----- 스타일 속성
                   ---- 스타일 값

- 스타일 시트: css로 작성된 코드

16가지만 색이 있고  #112233
                        -- 레드(R)
                          -- 그린(G)
                            -- 파랑(B)  -> RGB

- 태그선택자(엘리먼트선택자, 개체선택자.. 모두 같은 말)

ㄴ id: 문서안에서 고유해야함
ㄴ class: 다양하게 부여 가능

- 스타일 적용 방법

ㄴ <steyle></steyle>

- 부모>자식>자손.... 으로 보는 경우가 많음

- HTML에서는 %를 제외하고 단위를 안썼지만(사실 이제 사용하면 안됨),

CSS에서는 단위를 부여해서 써야함.(%,em,px)

- margin>border>padding>height와 width로 구성되어있음

- 속성에 margin: 10px 10px 10px 10px 일 경우

  - 속성에 margin: 10px 10px 10px 10px 일 경우

                     ---- ---- ---- ----
                     (1)  (2)  (3)  (4)
                     위  오른쪽 아래 왼쪽
           위
          (1)  ↘
        ┌─────┐
왼쪽(4) │     │ (2)오른쪽
        └─────┘
      ↖   (3)  ↙
         아래

- 보임/ 안보임 속성 2가지

ㄴdisplay: 화면에 보이지 않음(렌더링을 하는지/ 안하는지 여부 -> 렌더링을 안하면 아예 자리를 차지하지 않음)

ㄴㄴ none(안보임)/ block(보임_블럭단위 태그 형태로 렌더링)

ㄴvisible

■■■ CSS ■■■

○ CSS 선택자(Selector) 구성 및 설정

-『*』 공용 선택자, 전체 선택자

모든 엘리먼트를 선택한다.

-『E』 엘리먼트 선택자, 태그 선택자, 타입 선택자

E 엘리먼트를 선택한다.

-『.』 클래스 선택자

html에서만 사용할 수 있으며, 예를 들어 『div.warning』은
warning 이라는 클래스를 가지고 있는 div 엘리먼트를 선택하게 된다.

-『#』 아이디 선택자

예를 들어, 『#myId』는 myId 를 아이디 속성의 값으로 사용하는
엘리먼트를 선택하게 된다.

-『E>F』 자식 선택자

E 엘리먼트의 자식 엘리먼트인 F 엘리먼트를 선택하게 된다.

-『E F』 자손 선택자, 후손 선택자, 하위 선택자

        E 엘리먼트의 하위에 있는 F 엘리먼트를 선택하게 된다.
        이 경우 특이한 점은, E와 F 사이에 다른 엘리먼트가 포함되어 있더라도
        선택 대상에 해당한다는 것이다.

-『E+F』 인접 선택자, 형제 자매 선택자

E 와 F 가 서로 상하위 관계가 아닌, 인접해 있는 형제 관계인 경우 선택하게 된다.

-『E:action』 동적 선택자, 가상 선택자, 상태 선택자

        사용자 액션이 적용되는 상황에 따라 선택 여부가 결정된다.
        예를 들어, 『button:hover』는 버튼 위에 마우스 커서가 머물게 되면
        이 상황에서만 선택이 이루어지게 된다.

○ CSS 선언 방법

- 외부 선언(External Linked Style)

HTML Document 외부에 별도의 CSS 파일을 생성하여 내용을 구성한다.

『확장자: *.css』

이 CSS 를 적용할 문서에는 『<link rel="stylesheet" href="css경로포함파일이름">』를

활용하여 외부의 CSS를 해당 문서에 적용할 수 있도록 처리한다.

- 문서 안에 포함하여 선언(Embedded Style)

HTML Document 내부에

『<style type="text/css">

선택자 { 적용할 스타일 내용 }

</style>』
과 같이 기술하여 스타일을 적용시키도록 처리한다.

- 엘리먼트에 직접 선언 (Direct, Inline Style)

        스타일을 적용할 태그(엘리먼트)에 직접
        『style="적용할스타일 내용"』
        형식으로 기술하여 처리한다.
        대상에 직접 적용하는 방식이기 때문에 선택자는 기술하지 않는다.

F_WebApp02

ㄴ C:\WebStudy\WebApp02\WebContent

ㄴㄴTest001.html_CSS 구성 및 관찰하기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test001.html</title>

<style type="text/css">
	/* **
	- css는 공통요소를 부여하는 것
	- css 는 '가장 가까운것'이 적용됨
	- css 는 '덮어쓰기' 됨
	** */
	* {font-size: 20pt;}
	
	p {font-size: 9px; color: red;}
</style>

</head>
<body>

<div>
	<h1>CSS 구성 및 관찰하기</h1>
	<hr>
</div>

<div>
	<p>
		기본적인 CSS 의 개념<br>
		선택자의 활용<br>
	</p>
	
	기본적인 CSS 의 개념<br>
	선택자의 활용<br>

</div>

</body>
</html>

ㄴㄴTest002.html_html 태그(엘리먼트) 선택자 활용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test002.html</title>

<style type="text/css">
/* **
- h2가 h6 보다 크지만, css에서 크기를 지정하면 그에 맞춰 변형됨.
- html에서는 조절할 수 있는 단계가 제한적 이었지만, css로는 더 넓은 폭으로 바꿀 수 있음
** */
	h2 {font-size: 5pt; color: red; font-style: italic;}
	h3 {font-size: 10pt; color: blue; font-weight: bold;}
	h4 {font-size: 100pt; color: gray; font-wieht: normal;}
	h5 {font-size: 150pt; color: green;}
	h6 {font-size: 200pt; color: orange;}	
</style>

</head>
<body>

<div>
	<h1>html 태그(엘리먼트) 선택자 활용</h1>
	<hr>
</div>

<div>
	<h2>스타일 시트는 html 문서에 비해 확장성과 기능성이 매우 뛰어나다</h2>
	<h3>스타일 시트는 html 문서에 비해 확장성과 기능성이 매우 뛰어나다</h3>
	<h4>스타일 시트는 html 문서에 비해 확장성과 기능성이 매우 뛰어나다</h4>
	<h5>스타일 시트는 html 문서에 비해 확장성과 기능성이 매우 뛰어나다</h5>
	<h6>스타일 시트는 html 문서에 비해 확장성과 기능성이 매우 뛰어나다</h6>
</div>

</body>
</html>

ㄴㄴTest003.html _class 를 선택자 활용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
	/* **
	- id는 하나만 가능
	- class는 여러개 가능
	** */
	p {color: green; font-size: 16pt; font-weight: bold;}
	
	p.type1 {color: yellow;}
	p.type2 {color: blue;}
	
	.type3 {color: black; font-size: 27pt;}
</style>

</head>
<body>

<div>
	<h1>class 를 선택자 활용</h1>
	<hr>
</div>

<div>
	<p>그냥 p 태그만 페이지에 적용할 경우 이렇게 확인된다.</p>
	<p class="type1">하지만, 클래스를 사용할 경우 이렇게 확인된다.</p>
	<p class="type2">또한, 다른 클래스를 사용할 경우 이렇게 확인된다.</p>
	<p class="type1">여기서는 이렇게</p>
	<p class="type2">저기서는 저렇게</p>
	<p class="type3">거기서는 그렇게</p>
	<span class="type3">span 태그 영역에서는 이렇게</span>
	
</div>

</body>
</html>

ㄴㄴTest004.html_id 를 선택자로 활용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test004.html</title>

<style type="text/css">
/* **id 로는 여러개를 정의 하지 않음(하나밖에 없기 때문에)** */
/* **
style을 입힌 뒤 페이지 새로고침시 바로 적용이 안되는 경우,
웹서버와 웹클라이언트가 소통하는 과정을 이해해야함.
브라우저마다 캐시가 있음(임시저장 공간)

내가 한번 보았던 서버인경우 캐시에 등록해놓기 때문에 
다시 방문할 경우 안의 내용이 변경되었을 경우, 브라우저 입장에서는
갱신된 내용이 없다고 판단하고 스타일 적용이 안되어 보이는 경우가 있음

이럴 경우 ... > 설정 > 개인정보 및 보안 > 인터넷 사용기록 및 삭제(방문기록, 캐시) > 캐시를 삭제
의 과정을 거치면 적용되어 보일 것.	
** */
	#f001 {color: red; font-family: 굴림; font-size: 20pt;}
	#f002 {color: black; font-family: 궁서체; font-size: 15pt;}
	#f003 {color: aqua; font-family: 맑은고딕; font-size: 10pt;}

</style>

</head>
<body>

<div>
	<h1>id 를 선택자로 활용</h1>
	<hr>
</div>

<div id="f001">id 선택자를 활용하는 실습이다.</div>
<p id="f002">id 를 선택자로 활용하는 경우 id 앞에 우물정(#) 표시를 해야 한다.</p>
<p id="f003">id 는 class 와 유사하게 활용되지만, 페이지 내에서 유일하게 구성해야 한다.</p>
</body>
</html>

'📝 배우고 익히기 + > Web' 카테고리의 다른 글

(68)[Web]3일차: ■ Javascript 개요 및 기본문법 ■ / F_WebApp03>Test001~Test014 (0)	2023.11.29
(68)[Web]3일차: ((CSS)) F_WebApp02>Test005~020 (4)	2023.11.29
(66)[Web]2일차: ((HTML)) F_WebApp01>Test005~023 (1)	2023.11.28
(65)[Web]1일차: ■ HTML ■ / 이클립스 WebStudy 환경셋팅 / Test001~003 (0)	2023.11.28
(65)[Web]1일차: 웹 개요 (3)	2023.11.28

🍀보통 기록합니다💭

(66)[Web]2일차: CSS 개요 / ■ CSS ■ / F_WebApp02>Test001~004

1. 2023.11.28(화)

#CSS

1. CSS 개요

■■■ CSS ■■■

○ CSS 선택자(Selector) 구성 및 설정

-『*』 공용 선택자, 전체 선택자

-『E』 엘리먼트 선택자, 태그 선택자, 타입 선택자

-『.』 클래스 선택자

-『#』 아이디 선택자

-『E>F』 자식 선택자

-『E F』 자손 선택자, 후손 선택자, 하위 선택자

-『E+F』 인접 선택자, 형제 자매 선택자

-『E:action』 동적 선택자, 가상 선택자, 상태 선택자

○ CSS 선언 방법

- 외부 선언(External Linked Style)

- 문서 안에 포함하여 선언(Embedded Style)

- 엘리먼트에 직접 선언 (Direct, Inline Style)

F_WebApp02

ㄴ C:\WebStudy\WebApp02\WebContent

ㄴㄴTest001.html_CSS 구성 및 관찰하기

ㄴㄴTest002.html_html 태그(엘리먼트) 선택자 활용

ㄴㄴTest003.html _class 를 선택자 활용

ㄴㄴTest004.html_id 를 선택자로 활용

'📝 배우고 익히기 + > Web' 카테고리의 다른 글

티스토리툴바

(66)[Web]2일차: CSS 개요 / ■ CSS ■ / F_WebApp02>Test001~004

1. 2023.11.28(화)

#CSS

1. CSS 개요

■■■ CSS ■■■

○ CSS 선택자(Selector) 구성 및 설정

-『*』 공용 선택자, 전체 선택자

-『E』 엘리먼트 선택자, 태그 선택자, 타입 선택자

-『.』 클래스 선택자

-『#』 아이디 선택자

-『E>F』 자식 선택자

-『E F』 자손 선택자, 후손 선택자, 하위 선택자

-『E+F』 인접 선택자, 형제 자매 선택자

-『E:action』 동적 선택자, 가상 선택자, 상태 선택자

○ CSS 선언 방법

- 외부 선언(External Linked Style)

- 문서 안에 포함하여 선언(Embedded Style)

- 엘리먼트에 직접 선언 (Direct, Inline Style)

F_WebApp02

ㄴ C:\WebStudy\WebApp02\WebContent

ㄴㄴTest001.html_CSS 구성 및 관찰하기

ㄴㄴTest002.html_html 태그(엘리먼트) 선택자 활용

ㄴㄴTest003.html _class 를 선택자 활용

ㄴㄴTest004.html_id 를 선택자로 활용

'📝 배우고 익히기 + > Web' 카테고리의 다른 글

관련글

티스토리툴바