호기심으로 시작한 Frontend 꾸준함으로 채워나가는 Developer

Unit5 - [CSS] 기초 본문

Codestates 부트캠프/Section01 - TIL

Unit5 - [CSS] 기초

RachelLee 2022. 6. 30. 14:43

CSS (Cascading Style Sheets)

UX : user experience

UI : user interface

 

chapter1-1 CSS와 프론트엔드 개발

For front-end developer

  • 컴포넌트 기능별로 묶어서 제작
  • 화면의 구성이나 배치 (레이아웃 디자인)
  • 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 등
  • 정렬이나 배색에 대한 감각
  • UX에 대하여 고민해 보고, UX가 잘 적용된 웹이나 앱을 분석해 본 경험

chapter1-2 CSS따라하기

  • CSS 따라하기
  • body { margin: 0; padding: 0; background: #fff; color: #4a4a4a; } header, footer { font-size: large; text-align: center; padding: 0.3em 0; background-color: #4a4a4a; color: #f9f9f9; } nav { background: #eee; } main { background: #f9f9f9; } aside { background: #eee; }
  • CSS 내용분해
  • 텍스트의 가운데 정렬을 하기 위한 속성은 무엇인가요?
  • 글자 색을 바꾸기 위한 속성은 무엇인가요?
  • 배경 색을 바꾸기 위한 속성은 무엇인가요?
  • background 속성과 background-color 속성은 어떻게 다른가요?
  • em의 의미는 무엇인가요?

CSS 파일 추가

<link rel="stylesheet" href="index.css" />

CSS 스타일 적용할 수 있는 3가지 방법

  • 인라인
  • <nav style="background: #eee; color: blue">...</nav>
  • 내부 스타일 시트
  • CSS파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 <sytle> 요소 내에 작성
  • 외부 스타일 시트
  • <link rel="stylesheet" href="index.css" /> <link rel="stylesheet" href="layout.css" />

Id (#) VS Class (.)

<h4 id ="navigation-title">This is the navigation section.</h4>

#navigation-title {
	color: red;
}

<ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">Mac</li>
  <li class="menu-item">iPhone</li>
  <li class="menu-item">iPad</li>
</ul>

.menu-tiem {
	text-decoration: underline;
}

chpater1-3

색상 color

color: HEX (16진수로 RGB; Red Green Blue가 표현된 값)

.red {
	color: #ff0000;
}
.box {
	**color**: #155724; /* 글자 색상 */
  **background-color**: #d4edda; /* 배경 색상 */
  **border-color**: #c3e6cb; /* 테두리 색상 */
}

글꼴 font-family

.emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}
link 를 사용하여 간단하게 embed 할 수 있다.

크기 font-size

.title {
  font-size: 24px;
}

기타 스타일링

w3school, mdn을 통해 확인 가능

굵기: font-weight
밑줄, 가로줄: text-decoration
자간: letter-spacing
행간: line-height

정렬 text-align

가로정렬
text-align: letf
						right
						center
						justify

세로정렬
vertical-align
* 부모 요소의 display: table-cell 이어야 한다.
정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가, 글자 높이보다 큰 경우에만 적용할 수 있다.

chapter1-4

글꼴 사이즈를 정할 떄

절대 단위 (px, pt) 와 상대 단위 (%, em, rem, ch, vw, vh 등)

  1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 → px
  • 픽셀은 모바일 기기처럼 작은 화면이면서, 동시에 고해상도인 경우에도 적합하지 않습니다.
  • 기본적으로 고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일(upscale) 되기 때문에, 뚜렷하지 못한 형태로 출력되는 경우도 있습니다.
  • 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리합니다.
  1. 일반적인 경우 → rem
  • 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리합니다
  • em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵습니다. 이에 비해 rem 은 root의 글자 크기에 따라서만 상대적으로 변합니다.

화면 사이즈를 정할 때

  1. 반응형 웹(responsive web) 에서 기준점을 만들때
  • 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트, 스마트폰에서 세로 모드와 가로 모드, 테블릿

ex) iPhone 12 Pro Max의 너비는 414px

  1. 화면 너비나 높이에 따라 상대적인 크기가 중요한 경우
  • vw, vh를 사용
  • viewport width와 viewport hight (웹사이트에서 보이는 영역 “viewport”)
  • 1vw는 보이는 영역 너비의 1/100을, 1vh 는 보이는 영역 높이의 1/100을 뜻
  • 참고로 <body>태그에서의 %는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤 했을 때 보이는 영역까지 포함했을 때 비율입니다
  • 예시 사이트https://www.krause.studio/#one
  • https://redredefined.preciosacomponents.com/
  • https://www.tesla.com/

chapter2-1

박스모델의 기초

줄 바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)

  • block 요소의 대표적인 예는 <div>, <p> 입니다.
  • inline 요소의 대표적인 예는 <span>입니다.

박스를 구성하는 요소

border (테두리)

p {
  border: 1px solid red;
}
두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)
border-style mdn

margin (바깥여백)

p {
  margin: 10px 20px 30px 40px;
}
top, right, bottom, left로 시계방향

padding (안쪽여백)

콘텐츠와 테두리 사이의 간격

박스를 벗어나는 콘텐츠 처리

p {
  height: 40px;
  overflow: auto;
}

overflow-x 속성과 overflow-y 속성ㅇㄹ 이용하면 두 방향 모두 지정할 수 있다.

박스 크기 측정 기준

레이아웃 디자인을 쉽게 하는 방법

여백과 테두리 두께를 포함해서 박스 크기를 계산하게 만드는 것

* {
  box-sizing: border-box;
}
모든 박스에서 여백과 테두리를 포함한 크기로 계산된다.

chapter3-1 CSS selector 연습

기본셀렉터

  • 전체 셀렉터
  • 태그 셀렉터
  • ID셀렉터
  • class 셀렉터
  • attribute 셀렉터

자식/후손/형제 셀렉터

  • 자식 셀렉터
header > p { }

<header>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
</header>
  • 후손 셀렉터
header p {}

<header>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
</header>
  • 형제 셀렉터
section ~ p { }

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
</header>
  • 인접 셀렉터
section + p { }

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p>
	<p></p>
</header>

기타 셀렉터

  • 가상클래스
a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */
  • UI 요소 상태 셀렉터
input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */
  • 구조 가상 클래스 셀렉터
p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }
  • 부정 셀렉터
input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }
  • 정합성 확인 셀렉터UX : user experiencechapter1-1 CSS와 프론트엔드 개발
    • 컴포넌트 기능별로 묶어서 제작
    • 화면의 구성이나 배치 (레이아웃 디자인)
    • 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 등
    • 정렬이나 배색에 대한 감각
    • UX에 대하여 고민해 보고, UX가 잘 적용된 웹이나 앱을 분석해 본 경험
    chapter1-2 CSS따라하기
    • CSS 따라하기
    • body { margin: 0; padding: 0; background: #fff; color: #4a4a4a; } header, footer { font-size: large; text-align: center; padding: 0.3em 0; background-color: #4a4a4a; color: #f9f9f9; } nav { background: #eee; } main { background: #f9f9f9; } aside { background: #eee; }
    • CSS 내용분해
    • 텍스트의 가운데 정렬을 하기 위한 속성은 무엇인가요?
    • 글자 색을 바꾸기 위한 속성은 무엇인가요?
    • 배경 색을 바꾸기 위한 속성은 무엇인가요?
    • background 속성과 background-color 속성은 어떻게 다른가요?
    • em의 의미는 무엇인가요?
    CSS 파일 추가CSS 스타일 적용할 수 있는 3가지 방법
    • 인라인
    • <nav style="background: #eee; color: blue">...</nav>
    • 내부 스타일 시트
    • CSS파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 <sytle> 요소 내에 작성
    • 외부 스타일 시트
    • <link rel="stylesheet" href="index.css" /> <link rel="stylesheet" href="layout.css" />
    Id (#) VS Class (.) 
    <ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">Mac</li>
  <li class="menu-item">iPhone</li>
  <li class="menu-item">iPad</li>
</ul>

.menu-tiem {
	text-decoration: underline;
}
    chpater1-3color: HEX (16진수로 RGB; Red Green Blue가 표현된 값)글꼴 font-family크기 font-size기타 스타일링 
    굵기: font-weight
밑줄, 가로줄: text-decoration
자간: letter-spacing
행간: line-height
    정렬 text-align 
    세로정렬
vertical-align
* 부모 요소의 display: table-cell 이어야 한다.
정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가, 글자 높이보다 큰 경우에만 적용할 수 있다.
    chapter1-4절대 단위 (px, pt) 와 상대 단위 (%, em, rem, ch, vw, vh 등)
    1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 → px
    • 픽셀은 모바일 기기처럼 작은 화면이면서, 동시에 고해상도인 경우에도 적합하지 않습니다.
    • 기본적으로 고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일(upscale) 되기 때문에, 뚜렷하지 못한 형태로 출력되는 경우도 있습니다.
    • 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리합니다.
    1. 일반적인 경우 → rem
    • 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리합니다
    • em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵습니다. 이에 비해 rem 은 root의 글자 크기에 따라서만 상대적으로 변합니다.
    화면 사이즈를 정할 때
    1. 반응형 웹(responsive web) 에서 기준점을 만들때
    • 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트, 스마트폰에서 세로 모드와 가로 모드, 테블릿
    ex) iPhone 12 Pro Max의 너비는 414px
    1. 화면 너비나 높이에 따라 상대적인 크기가 중요한 경우
    • vw, vh를 사용
    • viewport width와 viewport hight (웹사이트에서 보이는 영역 “viewport”)
    • 1vw는 보이는 영역 너비의 1/100을, 1vh 는 보이는 영역 높이의 1/100을 뜻
    • 참고로 <body>태그에서의 %는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤 했을 때 보이는 영역까지 포함했을 때 비율입니다
    • 예시 사이트https://www.krause.studio/#one
    • https://redredefined.preciosacomponents.com/
    • https://www.tesla.com/
    chapter2-1박스모델의 기초
    • block 요소의 대표적인 예는 <div>, <p> 입니다.
    • inline 요소의 대표적인 예는 <span>입니다.
    border (테두리)margin (바깥여백)박스 크기 측정 기준여백과 테두리 두께를 포함해서 박스 크기를 계산하게 만드는 것
    • 전체 셀렉터
    • 태그 셀렉터
    • ID셀렉터
    • class 셀렉터
    • attribute 셀렉터
    자식/후손/형제 셀렉터
    • 자식 셀렉터
    header > p { }

<header>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
</header>
    • 후손 셀렉터
    header p {}

<header>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
</header>
    • 형제 셀렉터
    section ~ p { }

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
</header>
    • 인접 셀렉터
    section + p { }

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p>
	<p></p>
</header>
    기타 셀렉터
    • 가상클래스
    a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */
    • UI 요소 상태 셀렉터
    input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */
    • 구조 가상 클래스 셀렉터
    p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }
    • 부정 셀렉터
    input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }
    • 정합성 확인 셀렉터UX : user experiencechapter1-1 CSS와 프론트엔드 개발
      • 컴포넌트 기능별로 묶어서 제작
      • 화면의 구성이나 배치 (레이아웃 디자인)
      • 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 등
      • 정렬이나 배색에 대한 감각
      • UX에 대하여 고민해 보고, UX가 잘 적용된 웹이나 앱을 분석해 본 경험
      chapter1-2 CSS따라하기
      • CSS 따라하기
      • body { margin: 0; padding: 0; background: #fff; color: #4a4a4a; } header, footer { font-size: large; text-align: center; padding: 0.3em 0; background-color: #4a4a4a; color: #f9f9f9; } nav { background: #eee; } main { background: #f9f9f9; } aside { background: #eee; }
      • CSS 내용분해
      • 텍스트의 가운데 정렬을 하기 위한 속성은 무엇인가요?
      • 글자 색을 바꾸기 위한 속성은 무엇인가요?
      • 배경 색을 바꾸기 위한 속성은 무엇인가요?
      • background 속성과 background-color 속성은 어떻게 다른가요?
      • em의 의미는 무엇인가요?
      CSS 파일 추가CSS 스타일 적용할 수 있는 3가지 방법
      • 인라인
      • <nav style="background: #eee; color: blue">...</nav>
      • 내부 스타일 시트
      • CSS파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 <sytle> 요소 내에 작성
      • 외부 스타일 시트
      • <link rel="stylesheet" href="index.css" /> <link rel="stylesheet" href="layout.css" />
      Id (#) VS Class (.) 
      <ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">Mac</li>
  <li class="menu-item">iPhone</li>
  <li class="menu-item">iPad</li>
</ul>

.menu-tiem {
	text-decoration: underline;
}
      chpater1-3color: HEX (16진수로 RGB; Red Green Blue가 표현된 값)글꼴 font-family크기 font-size기타 스타일링 
      굵기: font-weight
밑줄, 가로줄: text-decoration
자간: letter-spacing
행간: line-height
      정렬 text-align 
      세로정렬
vertical-align
* 부모 요소의 display: table-cell 이어야 한다.
정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가, 글자 높이보다 큰 경우에만 적용할 수 있다.
      chapter1-4절대 단위 (px, pt) 와 상대 단위 (%, em, rem, ch, vw, vh 등)
      1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 → px
      • 픽셀은 모바일 기기처럼 작은 화면이면서, 동시에 고해상도인 경우에도 적합하지 않습니다.
      • 기본적으로 고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일(upscale) 되기 때문에, 뚜렷하지 못한 형태로 출력되는 경우도 있습니다.
      • 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리합니다.
      1. 일반적인 경우 → rem
      • 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리합니다
      • em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵습니다. 이에 비해 rem 은 root의 글자 크기에 따라서만 상대적으로 변합니다.
      화면 사이즈를 정할 때
      1. 반응형 웹(responsive web) 에서 기준점을 만들때
      • 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트, 스마트폰에서 세로 모드와 가로 모드, 테블릿
      ex) iPhone 12 Pro Max의 너비는 414px
      1. 화면 너비나 높이에 따라 상대적인 크기가 중요한 경우
      • vw, vh를 사용
      • viewport width와 viewport hight (웹사이트에서 보이는 영역 “viewport”)
      • 1vw는 보이는 영역 너비의 1/100을, 1vh 는 보이는 영역 높이의 1/100을 뜻
      • 참고로 <body>태그에서의 %는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤 했을 때 보이는 영역까지 포함했을 때 비율입니다
      • 예시 사이트https://www.krause.studio/#one
      • https://redredefined.preciosacomponents.com/
      • https://www.tesla.com/
      chapter2-1박스모델의 기초
      • block 요소의 대표적인 예는 <div>, <p> 입니다.
      • inline 요소의 대표적인 예는 <span>입니다.
      border (테두리)margin (바깥여백)박스 크기 측정 기준여백과 테두리 두께를 포함해서 박스 크기를 계산하게 만드는 것
      • 전체 셀렉터
      • 태그 셀렉터
      • ID셀렉터
      • class 셀렉터
      • attribute 셀렉터
      자식/후손/형제 셀렉터
      • 자식 셀렉터
      header > p { }

<header>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
</header>
      • 후손 셀렉터
      header p {}

<header>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
</header>
      • 형제 셀렉터
      section ~ p { }

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
</header>
      • 인접 셀렉터
      section + p { }

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p>
	<p></p>
</header>
      기타 셀렉터
      • 가상클래스
      a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */
      • UI 요소 상태 셀렉터
      input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */
      • 구조 가상 클래스 셀렉터
      p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }
      • 부정 셀렉터
      input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }
      • 정합성 확인 셀렉터UX : user experiencechapter1-1 CSS와 프론트엔드 개발
        • 컴포넌트 기능별로 묶어서 제작
        • 화면의 구성이나 배치 (레이아웃 디자인)
        • 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 등
        • 정렬이나 배색에 대한 감각
        • UX에 대하여 고민해 보고, UX가 잘 적용된 웹이나 앱을 분석해 본 경험
        chapter1-2 CSS따라하기
        • CSS 따라하기
        • body { margin: 0; padding: 0; background: #fff; color: #4a4a4a; } header, footer { font-size: large; text-align: center; padding: 0.3em 0; background-color: #4a4a4a; color: #f9f9f9; } nav { background: #eee; } main { background: #f9f9f9; } aside { background: #eee; }
        • CSS 내용분해
        • 텍스트의 가운데 정렬을 하기 위한 속성은 무엇인가요?
        • 글자 색을 바꾸기 위한 속성은 무엇인가요?
        • 배경 색을 바꾸기 위한 속성은 무엇인가요?
        • background 속성과 background-color 속성은 어떻게 다른가요?
        • em의 의미는 무엇인가요?
        CSS 파일 추가CSS 스타일 적용할 수 있는 3가지 방법
        • 인라인
        • <nav style="background: #eee; color: blue">...</nav>
        • 내부 스타일 시트
        • CSS파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 <sytle> 요소 내에 작성
        • 외부 스타일 시트
        • <link rel="stylesheet" href="index.css" /> <link rel="stylesheet" href="layout.css" />
        Id (#) VS Class (.) 
        <ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">Mac</li>
  <li class="menu-item">iPhone</li>
  <li class="menu-item">iPad</li>
</ul>

.menu-tiem {
	text-decoration: underline;
}
        chpater1-3color: HEX (16진수로 RGB; Red Green Blue가 표현된 값)글꼴 font-family크기 font-size기타 스타일링 
        굵기: font-weight
밑줄, 가로줄: text-decoration
자간: letter-spacing
행간: line-height
        정렬 text-align 
        세로정렬
vertical-align
* 부모 요소의 display: table-cell 이어야 한다.
정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가, 글자 높이보다 큰 경우에만 적용할 수 있다.
        chapter1-4절대 단위 (px, pt) 와 상대 단위 (%, em, rem, ch, vw, vh 등)
        1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 → px
        • 픽셀은 모바일 기기처럼 작은 화면이면서, 동시에 고해상도인 경우에도 적합하지 않습니다.
        • 기본적으로 고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일(upscale) 되기 때문에, 뚜렷하지 못한 형태로 출력되는 경우도 있습니다.
        • 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리합니다.
        1. 일반적인 경우 → rem
        • 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리합니다
        • em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵습니다. 이에 비해 rem 은 root의 글자 크기에 따라서만 상대적으로 변합니다.
        화면 사이즈를 정할 때
        1. 반응형 웹(responsive web) 에서 기준점을 만들때
        • 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트, 스마트폰에서 세로 모드와 가로 모드, 테블릿
        ex) iPhone 12 Pro Max의 너비는 414px
        1. 화면 너비나 높이에 따라 상대적인 크기가 중요한 경우
        • vw, vh를 사용
        • viewport width와 viewport hight (웹사이트에서 보이는 영역 “viewport”)
        • 1vw는 보이는 영역 너비의 1/100을, 1vh 는 보이는 영역 높이의 1/100을 뜻
        • 참고로 <body>태그에서의 %는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤 했을 때 보이는 영역까지 포함했을 때 비율입니다
        • 예시 사이트https://www.krause.studio/#one
        • https://redredefined.preciosacomponents.com/
        • https://www.tesla.com/
        chapter2-1박스모델의 기초
        • block 요소의 대표적인 예는 <div>, <p> 입니다.
        • inline 요소의 대표적인 예는 <span>입니다.
        border (테두리)margin (바깥여백)박스 크기 측정 기준여백과 테두리 두께를 포함해서 박스 크기를 계산하게 만드는 것
        • 전체 셀렉터
        • 태그 셀렉터
        • ID셀렉터
        • class 셀렉터
        • attribute 셀렉터
        자식/후손/형제 셀렉터
        • 자식 셀렉터
        header > p { }

<header>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
</header>
        • 후손 셀렉터
        header p {}

<header>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
</header>
        • 형제 셀렉터
        section ~ p { }

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
</header>
        • 인접 셀렉터
        section + p { }

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p>
	<p></p>
</header>
        기타 셀렉터
        • 가상클래스
        a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */
        • UI 요소 상태 셀렉터
        input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */
        • 구조 가상 클래스 셀렉터
        p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }
        • 부정 셀렉터
        input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }
        • 정합성 확인 셀렉터UX : user experiencechapter1-1 CSS와 프론트엔드 개발
          • 컴포넌트 기능별로 묶어서 제작
          • 화면의 구성이나 배치 (레이아웃 디자인)
          • 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 등
          • 정렬이나 배색에 대한 감각
          • UX에 대하여 고민해 보고, UX가 잘 적용된 웹이나 앱을 분석해 본 경험
          chapter1-2 CSS따라하기
          • CSS 따라하기
          • body { margin: 0; padding: 0; background: #fff; color: #4a4a4a; } header, footer { font-size: large; text-align: center; padding: 0.3em 0; background-color: #4a4a4a; color: #f9f9f9; } nav { background: #eee; } main { background: #f9f9f9; } aside { background: #eee; }
          • CSS 내용분해
          • 텍스트의 가운데 정렬을 하기 위한 속성은 무엇인가요?
          • 글자 색을 바꾸기 위한 속성은 무엇인가요?
          • 배경 색을 바꾸기 위한 속성은 무엇인가요?
          • background 속성과 background-color 속성은 어떻게 다른가요?
          • em의 의미는 무엇인가요?
          CSS 파일 추가CSS 스타일 적용할 수 있는 3가지 방법
          • 인라인
          • <nav style="background: #eee; color: blue">...</nav>
          • 내부 스타일 시트
          • CSS파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 <sytle> 요소 내에 작성
          • 외부 스타일 시트
          • <link rel="stylesheet" href="index.css" /> <link rel="stylesheet" href="layout.css" />
          Id (#) VS Class (.) 
          <ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">Mac</li>
  <li class="menu-item">iPhone</li>
  <li class="menu-item">iPad</li>
</ul>

.menu-tiem {
	text-decoration: underline;
}
          chpater1-3color: HEX (16진수로 RGB; Red Green Blue가 표현된 값)글꼴 font-family크기 font-size기타 스타일링 
          굵기: font-weight
밑줄, 가로줄: text-decoration
자간: letter-spacing
행간: line-height
          정렬 text-align 
          세로정렬
vertical-align
* 부모 요소의 display: table-cell 이어야 한다.
정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가, 글자 높이보다 큰 경우에만 적용할 수 있다.
          chapter1-4절대 단위 (px, pt) 와 상대 단위 (%, em, rem, ch, vw, vh 등)
          1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 → px
          • 픽셀은 모바일 기기처럼 작은 화면이면서, 동시에 고해상도인 경우에도 적합하지 않습니다.
          • 기본적으로 고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일(upscale) 되기 때문에, 뚜렷하지 못한 형태로 출력되는 경우도 있습니다.
          • 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리합니다.
          1. 일반적인 경우 → rem
          • 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리합니다
          • em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵습니다. 이에 비해 rem 은 root의 글자 크기에 따라서만 상대적으로 변합니다.
          화면 사이즈를 정할 때
          1. 반응형 웹(responsive web) 에서 기준점을 만들때
          • 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트, 스마트폰에서 세로 모드와 가로 모드, 테블릿
          ex) iPhone 12 Pro Max의 너비는 414px
          1. 화면 너비나 높이에 따라 상대적인 크기가 중요한 경우
          • vw, vh를 사용
          • viewport width와 viewport hight (웹사이트에서 보이는 영역 “viewport”)
          • 1vw는 보이는 영역 너비의 1/100을, 1vh 는 보이는 영역 높이의 1/100을 뜻
          • 참고로 <body>태그에서의 %는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤 했을 때 보이는 영역까지 포함했을 때 비율입니다
          • 예시 사이트https://www.krause.studio/#one
          • https://redredefined.preciosacomponents.com/
          • https://www.tesla.com/
          chapter2-1박스모델의 기초
          • block 요소의 대표적인 예는 <div>, <p> 입니다.
          • inline 요소의 대표적인 예는 <span>입니다.
          border (테두리)margin (바깥여백)박스 크기 측정 기준여백과 테두리 두께를 포함해서 박스 크기를 계산하게 만드는 것
          • 전체 셀렉터
          • 태그 셀렉터
          • ID셀렉터
          • class 셀렉터
          • attribute 셀렉터
          자식/후손/형제 셀렉터
          • 자식 셀렉터
          header > p { }

<header>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
</header>
          • 후손 셀렉터
          header p {}

<header>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
</header>
          • 형제 셀렉터
          section ~ p { }

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
</header>
          • 인접 셀렉터
          section + p { }

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p>
	<p></p>
</header>
          기타 셀렉터
          • 가상클래스
          a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */
          • UI 요소 상태 셀렉터
          input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */
          • 구조 가상 클래스 셀렉터
          p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }
          • 부정 셀렉터
          input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }
          • 정합성 확인 셀렉터UX : user experiencechapter1-1 CSS와 프론트엔드 개발
            • 컴포넌트 기능별로 묶어서 제작
            • 화면의 구성이나 배치 (레이아웃 디자인)
            • 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 등
            • 정렬이나 배색에 대한 감각
            • UX에 대하여 고민해 보고, UX가 잘 적용된 웹이나 앱을 분석해 본 경험
            chapter1-2 CSS따라하기
            • CSS 따라하기
            • body { margin: 0; padding: 0; background: #fff; color: #4a4a4a; } header, footer { font-size: large; text-align: center; padding: 0.3em 0; background-color: #4a4a4a; color: #f9f9f9; } nav { background: #eee; } main { background: #f9f9f9; } aside { background: #eee; }
            • CSS 내용분해
            • 텍스트의 가운데 정렬을 하기 위한 속성은 무엇인가요?
            • 글자 색을 바꾸기 위한 속성은 무엇인가요?
            • 배경 색을 바꾸기 위한 속성은 무엇인가요?
            • background 속성과 background-color 속성은 어떻게 다른가요?
            • em의 의미는 무엇인가요?
            CSS 파일 추가CSS 스타일 적용할 수 있는 3가지 방법
            • 인라인
            • <nav style="background: #eee; color: blue">...</nav>
            • 내부 스타일 시트
            • CSS파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 <sytle> 요소 내에 작성
            • 외부 스타일 시트
            • <link rel="stylesheet" href="index.css" /> <link rel="stylesheet" href="layout.css" />
            Id (#) VS Class (.) 
            <ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">Mac</li>
  <li class="menu-item">iPhone</li>
  <li class="menu-item">iPad</li>
</ul>

.menu-tiem {
	text-decoration: underline;
}
            chpater1-3color: HEX (16진수로 RGB; Red Green Blue가 표현된 값)글꼴 font-family크기 font-size기타 스타일링 
            굵기: font-weight
밑줄, 가로줄: text-decoration
자간: letter-spacing
행간: line-height
            정렬 text-align 
            세로정렬
vertical-align
* 부모 요소의 display: table-cell 이어야 한다.
정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가, 글자 높이보다 큰 경우에만 적용할 수 있다.
            chapter1-4절대 단위 (px, pt) 와 상대 단위 (%, em, rem, ch, vw, vh 등)
            1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 → px
            • 픽셀은 모바일 기기처럼 작은 화면이면서, 동시에 고해상도인 경우에도 적합하지 않습니다.
            • 기본적으로 고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일(upscale) 되기 때문에, 뚜렷하지 못한 형태로 출력되는 경우도 있습니다.
            • 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리합니다.
            1. 일반적인 경우 → rem
            • 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리합니다
            • em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵습니다. 이에 비해 rem 은 root의 글자 크기에 따라서만 상대적으로 변합니다.
            화면 사이즈를 정할 때
            1. 반응형 웹(responsive web) 에서 기준점을 만들때
            • 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트, 스마트폰에서 세로 모드와 가로 모드, 테블릿
            ex) iPhone 12 Pro Max의 너비는 414px
            1. 화면 너비나 높이에 따라 상대적인 크기가 중요한 경우
            • vw, vh를 사용
            • viewport width와 viewport hight (웹사이트에서 보이는 영역 “viewport”)
            • 1vw는 보이는 영역 너비의 1/100을, 1vh 는 보이는 영역 높이의 1/100을 뜻
            • 참고로 <body>태그에서의 %는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤 했을 때 보이는 영역까지 포함했을 때 비율입니다
            • 예시 사이트https://www.krause.studio/#one
            • https://redredefined.preciosacomponents.com/
            • https://www.tesla.com/
            chapter2-1박스모델의 기초
            • block 요소의 대표적인 예는 <div>, <p> 입니다.
            • inline 요소의 대표적인 예는 <span>입니다.
            border (테두리)margin (바깥여백)박스 크기 측정 기준여백과 테두리 두께를 포함해서 박스 크기를 계산하게 만드는 것
            • 전체 셀렉터
            • 태그 셀렉터
            • ID셀렉터
            • class 셀렉터
            • attribute 셀렉터
            자식/후손/형제 셀렉터
            • 자식 셀렉터
            header > p { }

<header>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
</header>
            • 후손 셀렉터
            header p {}

<header>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
</header>
            • 형제 셀렉터
            section ~ p { }

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
</header>
            • 인접 셀렉터
            section + p { }

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p>
	<p></p>
</header>
            기타 셀렉터
            • 가상클래스
            a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */
            • UI 요소 상태 셀렉터
            input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */
            • 구조 가상 클래스 셀렉터
            p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }
            • 부정 셀렉터
            input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }
            • 정합성 확인 셀렉터UX : user experiencechapter1-1 CSS와 프론트엔드 개발
              • 컴포넌트 기능별로 묶어서 제작
              • 화면의 구성이나 배치 (레이아웃 디자인)
              • 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 등
              • 정렬이나 배색에 대한 감각
              • UX에 대하여 고민해 보고, UX가 잘 적용된 웹이나 앱을 분석해 본 경험
              chapter1-2 CSS따라하기
              • CSS 따라하기
              • body { margin: 0; padding: 0; background: #fff; color: #4a4a4a; } header, footer { font-size: large; text-align: center; padding: 0.3em 0; background-color: #4a4a4a; color: #f9f9f9; } nav { background: #eee; } main { background: #f9f9f9; } aside { background: #eee; }
              • CSS 내용분해
              • 텍스트의 가운데 정렬을 하기 위한 속성은 무엇인가요?
              • 글자 색을 바꾸기 위한 속성은 무엇인가요?
              • 배경 색을 바꾸기 위한 속성은 무엇인가요?
              • background 속성과 background-color 속성은 어떻게 다른가요?
              • em의 의미는 무엇인가요?
              CSS 파일 추가CSS 스타일 적용할 수 있는 3가지 방법
              • 인라인
              • <nav style="background: #eee; color: blue">...</nav>
              • 내부 스타일 시트
              • CSS파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 <sytle> 요소 내에 작성
              • 외부 스타일 시트
              • <link rel="stylesheet" href="index.css" /> <link rel="stylesheet" href="layout.css" />
              Id (#) VS Class (.) 
              <ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">Mac</li>
  <li class="menu-item">iPhone</li>
  <li class="menu-item">iPad</li>
</ul>

.menu-tiem {
	text-decoration: underline;
}
              chpater1-3color: HEX (16진수로 RGB; Red Green Blue가 표현된 값)글꼴 font-family크기 font-size기타 스타일링 
              굵기: font-weight
밑줄, 가로줄: text-decoration
자간: letter-spacing
행간: line-height
              정렬 text-align 
              세로정렬
vertical-align
* 부모 요소의 display: table-cell 이어야 한다.
정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가, 글자 높이보다 큰 경우에만 적용할 수 있다.
              chapter1-4절대 단위 (px, pt) 와 상대 단위 (%, em, rem, ch, vw, vh 등)
              1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 → px
              • 픽셀은 모바일 기기처럼 작은 화면이면서, 동시에 고해상도인 경우에도 적합하지 않습니다.
              • 기본적으로 고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일(upscale) 되기 때문에, 뚜렷하지 못한 형태로 출력되는 경우도 있습니다.
              • 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리합니다.
              1. 일반적인 경우 → rem
              • 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리합니다
              • em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵습니다. 이에 비해 rem 은 root의 글자 크기에 따라서만 상대적으로 변합니다.
              화면 사이즈를 정할 때
              1. 반응형 웹(responsive web) 에서 기준점을 만들때
              • 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트, 스마트폰에서 세로 모드와 가로 모드, 테블릿
              ex) iPhone 12 Pro Max의 너비는 414px
              1. 화면 너비나 높이에 따라 상대적인 크기가 중요한 경우
              • vw, vh를 사용
              • viewport width와 viewport hight (웹사이트에서 보이는 영역 “viewport”)
              • 1vw는 보이는 영역 너비의 1/100을, 1vh 는 보이는 영역 높이의 1/100을 뜻
              • 참고로 <body>태그에서의 %는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤 했을 때 보이는 영역까지 포함했을 때 비율입니다
              • 예시 사이트https://www.krause.studio/#one
              • https://redredefined.preciosacomponents.com/
              • https://www.tesla.com/
              chapter2-1박스모델의 기초
              • block 요소의 대표적인 예는 <div>, <p> 입니다.
              • inline 요소의 대표적인 예는 <span>입니다.
              border (테두리)margin (바깥여백)박스 크기 측정 기준여백과 테두리 두께를 포함해서 박스 크기를 계산하게 만드는 것
              • 전체 셀렉터
              • 태그 셀렉터
              • ID셀렉터
              • class 셀렉터
              • attribute 셀렉터
              자식/후손/형제 셀렉터
              • 자식 셀렉터
              header > p { }

<header>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
</header>
              • 후손 셀렉터
              header p {}

<header>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
	<p><!-- 선택 -->
		<span>
			<p><!-- !!선택!! -->
			</p>
		</span>
	</p>
</header>
              • 형제 셀렉터
              section ~ p { }

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
	<p></p> <!-- 선택 -->
</header>
              • 인접 셀렉터
              section + p { }

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p>
	<p></p>
</header>
              기타 셀렉터
              • 가상클래스
              a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */
              • UI 요소 상태 셀렉터
              input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */
              • 구조 가상 클래스 셀렉터
              p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }
              • 부정 셀렉터
              input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }
              • 정합성 확인 셀렉터
            • 기본셀렉터
            • chapter3-1 CSS selector 연습
            • * { box-sizing: border-box; } 모든 박스에서 여백과 테두리를 포함한 크기로 계산된다.
            • 레이아웃 디자인을 쉽게 하는 방법
            • p { height: 40px; overflow: auto; } overflow-x 속성과 overflow-y 속성ㅇㄹ 이용하면 두 방향 모두 지정할 수 있다.
            • 박스를 벗어나는 콘텐츠 처리
            • 콘텐츠와 테두리 사이의 간격
            • padding (안쪽여백)
            • p { margin: 10px 20px 30px 40px; } top, right, bottom, left로 시계방향
            • p { border: 1px solid red; } 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color) border-style mdn
            • 박스를 구성하는 요소
            • 줄 바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)
            • 글꼴 사이즈를 정할 떄
            • 가로정렬 text-align: letf right center justify
            • w3school, mdn을 통해 확인 가능
            • .title { font-size: 24px; }
            • .emphasize { font-family: "SF Pro KR", "MalgunGothic", "Verdana"; } link 를 사용하여 간단하게 embed 할 수 있다.
            • .red { color: #ff0000; } .box { **color**: #155724; /* 글자 색상 */ **background-color**: #d4edda; /* 배경 색상 */ **border-color**: #c3e6cb; /* 테두리 색상 */ }
            • 색상 color
            • <h4 id ="navigation-title">This is the navigation section.</h4> #navigation-title { color: red; }
            • <link rel="stylesheet" href="index.css" />
            • For front-end developer
            • UI : user interface
          • 기본셀렉터
          • chapter3-1 CSS selector 연습
          • * { box-sizing: border-box; } 모든 박스에서 여백과 테두리를 포함한 크기로 계산된다.
          • 레이아웃 디자인을 쉽게 하는 방법
          • p { height: 40px; overflow: auto; } overflow-x 속성과 overflow-y 속성ㅇㄹ 이용하면 두 방향 모두 지정할 수 있다.
          • 박스를 벗어나는 콘텐츠 처리
          • 콘텐츠와 테두리 사이의 간격
          • padding (안쪽여백)
          • p { margin: 10px 20px 30px 40px; } top, right, bottom, left로 시계방향
          • p { border: 1px solid red; } 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color) border-style mdn
          • 박스를 구성하는 요소
          • 줄 바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)
          • 글꼴 사이즈를 정할 떄
          • 가로정렬 text-align: letf right center justify
          • w3school, mdn을 통해 확인 가능
          • .title { font-size: 24px; }
          • .emphasize { font-family: "SF Pro KR", "MalgunGothic", "Verdana"; } link 를 사용하여 간단하게 embed 할 수 있다.
          • .red { color: #ff0000; } .box { **color**: #155724; /* 글자 색상 */ **background-color**: #d4edda; /* 배경 색상 */ **border-color**: #c3e6cb; /* 테두리 색상 */ }
          • 색상 color
          • <h4 id ="navigation-title">This is the navigation section.</h4> #navigation-title { color: red; }
          • <link rel="stylesheet" href="index.css" />
          • For front-end developer
          • UI : user interface
        • 기본셀렉터
        • chapter3-1 CSS selector 연습
        • * { box-sizing: border-box; } 모든 박스에서 여백과 테두리를 포함한 크기로 계산된다.
        • 레이아웃 디자인을 쉽게 하는 방법
        • p { height: 40px; overflow: auto; } overflow-x 속성과 overflow-y 속성ㅇㄹ 이용하면 두 방향 모두 지정할 수 있다.
        • 박스를 벗어나는 콘텐츠 처리
        • 콘텐츠와 테두리 사이의 간격
        • padding (안쪽여백)
        • p { margin: 10px 20px 30px 40px; } top, right, bottom, left로 시계방향
        • p { border: 1px solid red; } 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color) border-style mdn
        • 박스를 구성하는 요소
        • 줄 바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)
        • 글꼴 사이즈를 정할 떄
        • 가로정렬 text-align: letf right center justify
        • w3school, mdn을 통해 확인 가능
        • .title { font-size: 24px; }
        • .emphasize { font-family: "SF Pro KR", "MalgunGothic", "Verdana"; } link 를 사용하여 간단하게 embed 할 수 있다.
        • .red { color: #ff0000; } .box { **color**: #155724; /* 글자 색상 */ **background-color**: #d4edda; /* 배경 색상 */ **border-color**: #c3e6cb; /* 테두리 색상 */ }
        • 색상 color
        • <h4 id ="navigation-title">This is the navigation section.</h4> #navigation-title { color: red; }
        • <link rel="stylesheet" href="index.css" />
        • For front-end developer
        • UI : user interface
      • 기본셀렉터
      • chapter3-1 CSS selector 연습
      • * { box-sizing: border-box; } 모든 박스에서 여백과 테두리를 포함한 크기로 계산된다.
      • 레이아웃 디자인을 쉽게 하는 방법
      • p { height: 40px; overflow: auto; } overflow-x 속성과 overflow-y 속성ㅇㄹ 이용하면 두 방향 모두 지정할 수 있다.
      • 박스를 벗어나는 콘텐츠 처리
      • 콘텐츠와 테두리 사이의 간격
      • padding (안쪽여백)
      • p { margin: 10px 20px 30px 40px; } top, right, bottom, left로 시계방향
      • p { border: 1px solid red; } 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color) border-style mdn
      • 박스를 구성하는 요소
      • 줄 바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)
      • 글꼴 사이즈를 정할 떄
      • 가로정렬 text-align: letf right center justify
      • w3school, mdn을 통해 확인 가능
      • .title { font-size: 24px; }
      • .emphasize { font-family: "SF Pro KR", "MalgunGothic", "Verdana"; } link 를 사용하여 간단하게 embed 할 수 있다.
      • .red { color: #ff0000; } .box { **color**: #155724; /* 글자 색상 */ **background-color**: #d4edda; /* 배경 색상 */ **border-color**: #c3e6cb; /* 테두리 색상 */ }
      • 색상 color
      • <h4 id ="navigation-title">This is the navigation section.</h4> #navigation-title { color: red; }
      • <link rel="stylesheet" href="index.css" />
      • For front-end developer
      • UI : user interface
    • 기본셀렉터
    • chapter3-1 CSS selector 연습
    • * { box-sizing: border-box; } 모든 박스에서 여백과 테두리를 포함한 크기로 계산된다.
    • 레이아웃 디자인을 쉽게 하는 방법
    • p { height: 40px; overflow: auto; } overflow-x 속성과 overflow-y 속성ㅇㄹ 이용하면 두 방향 모두 지정할 수 있다.
    • 박스를 벗어나는 콘텐츠 처리
    • 콘텐츠와 테두리 사이의 간격
    • padding (안쪽여백)
    • p { margin: 10px 20px 30px 40px; } top, right, bottom, left로 시계방향
    • p { border: 1px solid red; } 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color) border-style mdn
    • 박스를 구성하는 요소
    • 줄 바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)
    • 글꼴 사이즈를 정할 떄
    • 가로정렬 text-align: letf right center justify
    • w3school, mdn을 통해 확인 가능
    • .title { font-size: 24px; }
    • .emphasize { font-family: "SF Pro KR", "MalgunGothic", "Verdana"; } link 를 사용하여 간단하게 embed 할 수 있다.
    • .red { color: #ff0000; } .box { **color**: #155724; /* 글자 색상 */ **background-color**: #d4edda; /* 배경 색상 */ **border-color**: #c3e6cb; /* 테두리 색상 */ }
    • 색상 color
    • <h4 id ="navigation-title">This is the navigation section.</h4> #navigation-title { color: red; }
    • <link rel="stylesheet" href="index.css" />
    • For front-end developer
    • UI : user interface
  • 기본셀렉터
  • chapter3-1 CSS selector 연습
  • * { box-sizing: border-box; } 모든 박스에서 여백과 테두리를 포함한 크기로 계산된다.
  • 레이아웃 디자인을 쉽게 하는 방법
  • p { height: 40px; overflow: auto; } overflow-x 속성과 overflow-y 속성ㅇㄹ 이용하면 두 방향 모두 지정할 수 있다.
  • 박스를 벗어나는 콘텐츠 처리
  • 콘텐츠와 테두리 사이의 간격
  • padding (안쪽여백)
  • p { margin: 10px 20px 30px 40px; } top, right, bottom, left로 시계방향
  • p { border: 1px solid red; } 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color) border-style mdn
  • 박스를 구성하는 요소
  • 줄 바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)
  • 글꼴 사이즈를 정할 떄
  • 가로정렬 text-align: letf right center justify
  • w3school, mdn을 통해 확인 가능
  • .title { font-size: 24px; }
  • .emphasize { font-family: "SF Pro KR", "MalgunGothic", "Verdana"; } link 를 사용하여 간단하게 embed 할 수 있다.
  • .red { color: #ff0000; } .box { **color**: #155724; /* 글자 색상 */ **background-color**: #d4edda; /* 배경 색상 */ **border-color**: #c3e6cb; /* 테두리 색상 */ }
  • 색상 color
  • <h4 id ="navigation-title">This is the navigation section.</h4> #navigation-title { color: red; }
  • <link rel="stylesheet" href="index.css" />
  • For front-end developer
  • UI : user interface

'Codestates 부트캠프 > Section01 - TIL' 카테고리의 다른 글

[JavaScript] Koans  (0) 2022.07.13
TIL- 원시 자료형과 참조 자료형  (0) 2022.07.11
Unit2. [JavaScript] 기초 - 변수, 타입, 함수  (0) 2022.06.29
Unit2. [JavaScript] 기초  (0) 2022.06.24
Unit1- Learn how to learn & 다짐  (0) 2022.06.24
'Codestates 부트캠프/Section01 - TIL' Related Articles more