[클라우딩 어플리케이션 엔지니어링 TIL] TIL(Today I Learned)

들어가기전에

CSS에 대해서 기초부터 잡고 시작하기 위해서 작성합니다.

이전에 CSS를 잘 아시는 분이라면 작성한것만 가볍게 보아도 좋고, 복습한다는 생각으로 보셔도 좋을거 같습니다.

강의를 보며 나의 주관적인 생각이 들어가 정리한것임으로 반드시 '내가 적은것이 맞다' 라는 것이 아니므로 읽어보시고 이상한부분이 있다면 저에게 알려주시거나 꼭 다른곳도 검색해서 찾아보기를 바랍니다.

1. 학습 주제

CSS란
선택자
결합자
단위

2. 주요 메모 사항 소개

3. 공부하며 어려웠던 내용

학습 주제.1
CSS

CSS(Cascading Style Sheets)

HTML, XHTML, XML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어이다.

1996년 12월 W3C(World Wide Web; 웹 표준을 개발하는 국제 컨소시엄)에서 도입하였다.

CSS 3가지 사용방법

인라인 스타일(Inline Style) - 태그에 직접 스타일 정의
- 전역 속성인 "style" 속성을 사용하여 스타일 선언 가능
- 코드 유지보수의 어려움, 반응형 처리 불가능 등의 이유로 가능한 사용을 지양
내부 CSS(Internal Style Sheet) - 웹 문서 안에서 스타일을 작성
- <head> 태그 안에 <style> 태그를 사용하여 작성
- HTML5 부터 "type" 속성의 선언은 생략 가능
외부 CSS(External Style Sheet) - 별도의 파일을 만들어서 스타일 코드 관리
- 스타일이 길어질 경우 하나의 문서 내에서 관리할 수 없기 때문에 분리해서 관리 하기 위함
- "href" 속성에 분리한 시트일시트의 경로를 입력하여 사용.
- "rel" 속성에 stylesheet를 넣어 스타일시트 파일을 불러오는 것을 정확히 명시

CSS의 주석(Comment)

스타일 시트 내에 개발자가 남기는 코멘트로써, 소스상에서만 표시될뿐 실제적으로 아무 영향을 미치지 않는 코드
주석을 적절하게 사용한다면 CSS 문서의 관리가 편해진다.

<style>
	/* 주석 사용하는 방법 */
    
    /*
       줄바꿈을 사용해서
       여러 줄에 입력하여 작성 가능
    */
    
    /*
       주석 안에 사용되는 주석은
       /* 작동하지 않는다 */
    */
</style>

CSS의 우선순위 (명시도)

CSS에서는 어떤 속성이 우선되어 적용될지 미리 명시하고 있다.

속성 값 뒤에 !important() 를 붙인 속성
HTML에서 style 을 직접 지정한 속성
#id 로 지정한 속성
.클래스, :가상클래스 로 지정한 속성
태그이름 으로 지정한 속성
상위 객체에 의해 상속된 속성

* 같은 우선 순위일 경우, 부모-자식 관계가 많은 경우가 우선되고, 모든 설정이 같은 경우 나중에 선언한 것이 우선되어 적용

/* CSS명시도 점수의 기준 */
!important > inline방식(1000점) > id(100점) > class(10점) > tag(1점) > *(0점) > 상속(-)

학습 주제.2
선택자

전체 선택자 (*)

- 모든 요소에 스타일을 적용 가능
* 주의 나도 모르는새 의도하지 않는 요소에 스타일이 적용될 수 있기에 사용에 주의할 것

* { margin: 0; padding: 0; }

유형(태그) 선택자

- HTML 태그 이름으로 선택
* 같은 이름의 태그를 모두 선택

div { color: red; }

ID, Class 선택자

- 요소의 id, class 속성 값에 완전히 동일한 값을 가진 요소를 선택
* ID는 "#"을 시작으로 선택하며, Class는 "."을 시작으로 선택
* ID 값은 절대로 중복되면 안된다.

.box-item { width: 250px; heigth: 250px; }
#container { padding: 24px; margin: 0 auto; }

속성 선택자

- 요소가 가진 속성을 선택

* 대괄호 앞에 태그명을 붙이면 좀 더 강력하게 선택자를 제한 가능 예) a[href]

[href] { color: red; }
[target="_blank"] { color: green; }

의사(가상) 클래스

- 기존 "선택자"에 추가하는 특별한 상태를 선택

a:hover { color: red; } /* 마우스가 요소 위에 있을 때 적용 */
a:active { color: green; } /* 마우스가 클릭하는 순간부터 떼는 순간까지 적용 */
a:link { color: yellow; } /* 아직 방문하지 않았을 때 적용 */
a:visited { color: blue; } /* 이미 방문한적 있을 때 적용 */
a:focus { color: gray; } /* 마우스로 해당 요소를 클릭할 때 적용 */
a:checked { color: olive; } /* 체크박스, 라디오에 체크될 경우 적용 */

/* 순서에 따른 가상 클래스 */
li:first-child { color: red; } /* li 중 첫번째 요소에만 적용 */
li:last-child { color: green; } /* li 중 마지막 요소에만 적용 */
li:nth-child(n) { color: yellow; } /* li 중 n번째 요소에만 적용 */

의사(가상) 요소

- 기존 "선택자"에 추가하는 선택한 요소의 일부를 스타일링

* 닫는 태그가 없는 태그는 가상클래스 사용 불가능 예) <img>

* before 와 after 사용할 때 content 속성값 필수 사용

a::before { content: 'hello'; } /* 특정 요소의 내용부분 바로 앞에 삽입 가능 */
a::after { content: 'world'; } /* 특정 요소의 내용부분 바로 뒤에 삽입 가능 */
li::first-letter { font-size: 24px; } /* 첫 번째 문자 선택 */
li::first-line { font-size: 18px } /* 첫 번째 행 선택 */
li::marker { color: red; } /* 자동으로 생성된 리스트 마커 선택 가능 */
li::selection { color: black; } /* 마우스 드래그로 선택한 영역을 스타일 적용 가능 */
input::placeholder { color: green; } /* input 필드 안 힌트 텍스트에 스타일 적용 가능 */

CSS3에서 가상 클래스는 하나의 콜론( : )을, 가상 요소에는 두개의 콜론 ( :: )을 사용

학습 주제.3
결합자

자손 결합자

- 한 칸의 공백을 주어 앞 셀렉터의 자식 요소 선택

<!-- <div> 태그 안에 있는 모든 <span> 태그 글자에 "빨간색" 적용 -->
<style>
  div span { color: red; }
</style>

<div>
  <span>빨간색 1</span>
  <span>빨간색 2</span>
    
  <p>
    <span>빨간색 3</span>
  </p>
</div>

자식 결합자

- 앞 셀렉터의 직계 자식 요소 선택

<!-- <div>태그의 바로 자식요소인 <span>태그 글자만 적용 -->
<style>
  div > span { color: red; }
</style>

<div>
  <span>난 직계 자식이라 빨간색 적용</span>
  <p>
    <span>난 직계 자식이 아니라서 안돼</span>
  </p>
</div>

인접 형제 결합자

- 앞 셀렉터의 바로 다음에 위치한 형제 요소를 선택

<!-- <span>태그 바로 다음 <p> 태그 글자만 적용 -->
<style>
 span + p { color: red; }
</style>

<div>
  <span>난 적용 </span>
  <p>난 적용 됨</p>
  <p>난 적용 안됨</p>
</div>

일반 형제 결합자

- 앞 셀렉터의 다음에 위치한 모든 형제 요소 선택

<!-- <a>태그 다음부터 위치한 동등한 형제 <p>태그 글자만 적용 -->
<style>
  a ~ p { color: red; }
</style>

<div>
  <a href="https://naver.com">네이버</a>
  <p>나는 적용</p>
  <p>나는 적용</p>
  <div>
    <p>나는 적용 안됨</p>
  </div>
</div>

학습 주제.4
단위

고정 단위 (px)

- Pixel(픽셀)은 정확한 크기를 나타낼 때 사용

* 보통 웹 브라우저의 px 단위 기본 폰트 크기는 16px

html { font-size: 16px; }

고정 단위 (pt)

- Point(포인트)는 일반적으로 문서 등에서 사용

* 대 보통 웹 브라우저의 px 단위 기본 폰트 크기는 12pt

html { font-size: 12pt; } /* 16px과 동일 */

상대 길이 단위 (em)

- em(이엠)은 요소의 글꼴 크기에 상대적인 단위

<style>
  div { font-size: 16px; } /* 초기 폰트 크기 16px (16px = 1em) */
  div p { font-size: 2em; } /* 2em → 32px */
</style>

<div>
  <p>저의 폰트 크기는 32px입니다.</p>
</div>

/*  em 사용할 때 주의사항!!!
    em은 합성 값 이기도 하기 때문에, 값이 합쳐진다.
*/
<style>
  div { font-size: 16px; } /* 초기 폰트 크기 16px (16px = 1em) */
  div p { font-size: 2em; } /* 16px * 2em = 32px */
  div p span { font-size: 2em; } /* (16px * 2em = 32px) * 2em = 62px */
</style>

<div>
  <p><span>저의 폰트 크기는 62px입니다.</span></p>
</div>

상대 길이 단위 (rem)

- rem(루트 이엠, 알이엠)은 합성을 회피하기 위해 만들어진 단위

<style>
  html { font-size: 16px; } /* 초기 폰트 크기 16px 설정 */

  div { font-size: 16px; } /* 1rem */
  div p { font-size: 2rem; } /* 16 * 2 = 32px */
  div p span { font-size: 2rem; } /* 16 * 2 = 32px */
</style>
<div>
  <p><span>저의 폰트 크기는 32px입니다.</span></p>
</div>

상대 길이 단위 (%)

- Percent(퍼센트)는 부모 크기에 따라 상대적으로 백분율

<style>
  div { font-size: 32px; }
  p { font-size: 50%; } /* 32px * 0.5 */
</style>
<div>
  <p>저희 폰트 크기는 16px입니다.</p>
</div>

상대 길이 단위 (vw)

- Viewport Width(뷰포트 너비)는 화면의 너비에 따라 결정

1vw = 1%
100vw = 100%

상대 길이 단위 (vh)

- Viewport Height(뷰포트 높이)는 화면의 높이에 따라 결정

1vh = 1%
100vh = 100%

상대 길이 단위 (vmin)

- 화면에서 가장 "작은" 크기에 따라 결정

<!-- 웹 브라우저가 가로 1000px, 세로100px 일 경우 -->
1vmin = 10px (100px의 1%)
100vmin = 100px (100px의 100%)

상대 길이 단위 (vmax)

- 화면에서 가장 "큰" 크기에 따라 결정

<!-- 웹 브라우저가 가로 1000px, 세로100px 일 경우 -->
1vmax = 100px (1000px의 1%)
100vmax = 1000px (1000px의 100%)

주요 메모 사항 소개

CSS 3가지 사용방법

- 인라인, 내부, 외부

CSS의 우선순위 (명시도)

- !important > inline방식(1000점) > id(100점) > class(10점) > tag(1점) > *(0점) > 상속(-)

선택자 | 가상클래스, 가상요소

- 가상클래스는 하나의 콜론(:), 가상요소는 두개의 콜론(::)

결합자

- 인접 형제(+), 일반 형제(~)

단위

- em, rem, vmin, vmax

공부하면서 어려웠던 내용
단위의 활용법

단위를 알게되고 반응형이란 검색어가 뜨면서 더 알아보게 됐을때, em과 rem은 어디에 어느속성에 활용하면 좋을까란 생각과 vmin과 vmax로 어떤 활용을 할 수 있을까란 궁금증이 생기며, 알아볼 때, 머릿속에서 정리가 잘 되지 않아서 다소 어려웠다.

저작자표시 비영리 변경금지

'클라우딩 어플리케이션 엔지니어링 TIL' 카테고리의 다른 글

[클라우딩 어플리케이션 엔지니어링 TIL] TIL(Today I Learned) - Day8 (0)	2024.04.26
[클라우딩 어플리케이션 엔지니어링 TIL] TIL(Today I Learned) - Day7 (0)	2024.04.25
[클라우딩 어플리케이션 엔지니어링 TIL] TIL(Today I Learned) - Day5 (0)	2024.04.24
[클라우딩 어플리케이션 엔지니어링 TIL] TIL(Today I Learned) - Day3 (0)	2024.04.18

5DO.SEONGWOO

[클라우딩 어플리케이션 엔지니어링 TIL] TIL(Today I Learned) - Day6

들어가기전에

학습 주제.1
CSS

학습 주제.2
선택자

학습 주제.3
결합자

학습 주제.4
단위

주요 메모 사항 소개

공부하면서 어려웠던 내용
단위의 활용법

'클라우딩 어플리케이션 엔지니어링 TIL' 카테고리의 다른 글

티스토리툴바

[클라우딩 어플리케이션 엔지니어링 TIL] TIL(Today I Learned) - Day6

들어가기전에

학습 주제.1CSS

학습 주제.2선택자

학습 주제.3결합자

학습 주제.4단위

주요 메모 사항 소개

공부하면서 어려웠던 내용단위의 활용법

'클라우딩 어플리케이션 엔지니어링 TIL' 카테고리의 다른 글

관련글

티스토리툴바

학습 주제.1
CSS

학습 주제.2
선택자

학습 주제.3
결합자

학습 주제.4
단위

공부하면서 어려웠던 내용
단위의 활용법