[코드스테이츠 FE 45기] _2023.04.13

[코드스테이츠 FE 45기] _2023.04.13 _ Day 3

프론트앤드 부트캠프/Day

by 코린’s 2023. 4. 13. 11:49

728x90

오늘은 Day 3

2023년 04월 13일

오늘도 오전 9시부터 5시 전 까지는 자습 시간이다.

오늘도 자습을 시작해 보자!!

화이팅!!

9 : 00 ~ 17:00

자습

Unit3 [CSS] 기초

Chapter1. CSS 기초

Chater2. 박스모델

Chapter3. CSS Selector

Chapter1. CSS 기초

CSS (Cascading Style Sheets)

HTML이나 XML 같은 마크업 언어의 표현을 꾸며주는 스타일 시트 언어

HTML이나 XML 같은 마크업 언어의 표현을 꾸며주는 스타일 시트 언어입니다. CSS는 웹 문서의 디자인 요소들을 지정하고 제어하기 위한 규칙 집합으로, 웹 사이트나 애플리케이션의 레이아웃, 색상, 폰트, 배경, 그림자, 애니메이션 등 다양한 스타일링 요소들을 다루기 위해 사용됩니다.

CSS는 HTML과 분리된 파일로 작성될 수 있으며, 이렇게 분리된 CSS 파일은 웹 페이지의 로딩 속도를 향상시키고 유지보수성을 높이는 장점이 있습니다. 또한, CSS는 계층 구조를 갖는 스타일 우선순위 개념을 가지고 있어서, 스타일 우선순위에 따라 여러 개의 스타일 규칙이 충돌할 경우에도 적용 순서에 따라 우선순위가 결정되므로, 원하는 디자인을 쉽게 구현할 수 있습니다.

사용자 인터페이스(UI; user interface)

사용자와 컴퓨터 혹은 디지털 기기 사이의 상호작용을 위한 인터페이스

사용자와 컴퓨터 혹은 디지털 기기 사이의 상호작용을 위한 인터페이스를 일컫습니다. 쉽게 말해, 사용자가 컴퓨터 혹은 디지털 기기를 조작할 수 있는 화면, 버튼, 아이콘, 메뉴 등을 모두 포함하는 것입니다.

UI는 사용자가 디지털 기기를 편리하고 쉽게 사용할 수 있도록 디자인되어야 합니다. 이를 위해서는 사용자의 편의성, 직관성, 미적 감각 등 다양한 측면을 고려해야 합니다. 따라서 UI 디자이너는 사용자의 니즈와 요구를 파악하고, 이를 바탕으로 UI를 설계하고 구현해야 합니다.

UI는 디지털 기기를 사용하는 모든 사용자에게 중요한 역할을 합니다. 사용자들이 직관적이고 효율적인 UI를 경험할 수록, 사용성과 만족도가 높아지며, 디지털 기기를 사용하는 활동도 더욱 원활하게 수행할 수 있습니다.

좋은 사용자 경험(UX; user experience)

사용자가 제품이나 서비스를 이용하면서 느끼는 전반적인 경험을 의미합니다. UX는 제품이나 서비스를 사용하는 과정에서 사용자가 느끼는 감정, 행동, 인식, 인식 등 모든 측면을 다룹니다.

UX 디자인은 사용자가 제품이나 서비스를 이용하는 과정에서 만나는 모든 요소들을 디자인하는 것입니다. 제품이나 서비스의 디자인, 레이아웃, 색상, 아이콘, 버튼, 텍스트 등 모든 디자인 요소들이 사용자의 경험에 영향을 미치므로, UX 디자이너는 이 모든 요소들을 고려해야 합니다.

UX 디자인은 사용자가 쉽게 사용할 수 있고, 효율적으로 목적을 달성할 수 있도록 하는 것을 목표로 합니다. 따라서 UX 디자이너는 사용자가 어떤 니즈와 목적을 가지고 제품이나 서비스를 이용하는지 파악하고, 이를 바탕으로 사용자가 만족할 수 있는 경험을 제공하는 디자인을 만들어야 합니다.

좋은 UX는 사용자들이 제품이나 서비스를 이용하는 과정에서 만족도와 편의성을 높여줍니다. 따라서 UX 디자인은 제품이나 서비스의 성공에 큰 역할을 합니다.

CSS 적용 방법 3가지

1. Inline Style

: HTML 요소에 직접 스타일을 적용하는 방법입니다. HTML 태그 안에 style 속성을 사용하여 스타일을 지정합니다.

예시 코드

<p style="color: red; font-size: 16px;">이 텍스트는 빨간색으로 크기가 16px인 글자입니다.</p>

2. Internal Style Sheet

: HTML 문서 내에 스타일 시트를 포함시키는 방법입니다. HTML 문서의 head 요소 안에 style 태그를 사용하여 스타일을 정의합니다.

예시 코드

<head>
  <style>
    p {
      color: red;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>이 텍스트는 빨간색으로 크기가 16px인 글자입니다.</p>
</body>

3. External Style Sheet

: HTML 문서 외부에 스타일 시트 파일을 작성하고, HTML 문서에서 이 파일을 참조하는 방법입니다. 외부 스타일 시트 파일은 .css 확장자를 가지며, HTML 문서의 head 요소 안에 link 태그를 사용하여 파일을 연결합니다.

예시 코드

HTML파일

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <p>이 텍스트는 빨간색으로 크기가 16px인 글자입니다.</p>
</body>

CSS 파일 (style.css)

p {
  color: red;
  font-size: 16px;
}

이 외에도 CSS를 적용하는 방법은 다양합니다. 예를 들어, CSS 프레임워크를 사용하거나, CSS 전처리기를 사용하는 방법도 있습니다. 하지만 이러한 방법들도 결국에는 위의 기본적인 방법들을 발전시킨 것이므로, 기본적인 CSS 적용 방법을 충분히 이해하고 있어야 합니다.

CSS 스타일 시트 내에서 id와 class를 사용하여 스타일을 적용하는 방법

1. id로 스타일 적용하기

id 선택자는 문서 내에서 유일한 요소에 대해서만 스타일을 적용합니다.
id 선택자는 "#" 문자를 사용하여 정의하며, id 속성 값으로 지정한 이름을 사용합니다.

예시

#my-id {
  color: red;
  font-size: 16px;
}

위의 예시에서 "#my-id"는 id 선택자이며, id 속성 값으로 "my-id"를 가진 요소에 대해서 빨간색 글씨체 크기 16px로 스타일을 적용합니다.

2. class로 스타일 적용하기

class 선택자는 문서 내에서 여러 개의 요소에 대해서 스타일을 적용합니다.
class 선택자는 "." 문자를 사용하여 정의하며, class 속성 값으로 지정한 이름을 사용합니다.

.my-class {
  color: blue;
  font-size: 14px;
}

위의 예시에서 ".my-class"는 class 선택자이며, class 속성 값으로 "my-class"를 가진 모든 요소에 대해서 파란색 글씨체 크기 14px로 스타일을 적용합니다.

Point

id와 class 선택자 모두 매우 유용한 선택자이며, 적절하게 사용하면 HTML 요소들에 다양한 스타일을 적용할 수 있습니다.

그러나, id 선택자는 문서 내에서 유일해야 하므로, 가능하면 class 선택자를 사용하는 것이 좋습니다.

또한, 선택자를 사용할 때에는, 선택자의 중첩을 최소화하는 것이 좋습니다.

CSS 의 요소에 대해 알아봅시다~!

CSS는 HTML 요소에 스타일을 적용하기 위한 스타일 시트 언어입니다. 이를 위해 CSS는 다양한 요소를 사용합니다.

더보기를 눌러주세용 ~

1. 선택자 (Selector)

- 스타일을 적용할 HTML 요소를 선택하기 위해 사용합니다.

태그 선택자 : p (모든 p 태그)
클래스 선택자 : .my-class (class 속성 값이 "my-class"인 모든 요소)
ID 선택자 : #my-id (id 속성 값이 "my-id"인 요소)

2. 속성 (Property)

- HTML 요소에 적용할 스타일 속성을 정의합니다.

color : 글자 색상을 지정합니다.
font-size : 글자 크기를 지정합니다.
background-color : 요소의 배경색을 지정합니다.

3. 값 (Value)

- 속성에 대한 실제 값입니다.

속성에 대한 실제 값입니다.
예시:
- color: red; : 글자 색상을 빨간색으로 지정합니다.
- font-size: 16px; : 글자 크기를 16px로 지정합니다.
- background-color: #ffffff; : 요소의 배경색을 흰색으로 지정합니다.

4. 단위 (Unit)

- 속성에 대한 값을 나타내는 단위입니다.

속성에 대한 값을 나타내는 단위입니다.
예시:
- font-size: 16px; : px(픽셀) 단위로 글자 크기를 지정합니다.
- width: 50%; : % 단위로 요소의 너비를 지정합니다.
- padding: 10px 20px; : px(픽셀) 단위로 상하 좌우 패딩 값을 지정합니다.

5. 박스 모델 (Box Model)

- HTML 요소를 사각형 박스로 취급하고, 이 박스의 여백, 테두리, 내용 등을 다루는 방식입니다.

HTML 요소를 사각형 박스로 취급하고, 이 박스의 여백, 테두리, 내용 등을 다루는 방식입니다.
예시:
- width : 요소의 너비를 지정합니다.
- height : 요소의 높이를 지정합니다.
- padding : 요소 내부의 여백을 지정합니다.
- border : 요소의 테두리를 지정합니다.
- margin : 요소 외부의 여백을 지정합니다.

6. 레이아웃 (Layout)

- HTML 요소들의 배치 방식과 관련된 스타일입니다.

HTML 요소들의 배치 방식과 관련된 스타일입니다.
예시:
- position : 요소의 위치를 지정합니다.
- display : 요소의 표시 방식을 지정합니다.
- float : 요소를 왼쪽이나 오른쪽으로 떠 있게 만듭니다.
- clear : float으로 인해 뒤쪽에 위치한 요소에 영향을 주는 것을 방지합니다.

7. 가상 클래스 (Pseudo-class)

- 특정 상황에서 HTML 요소에 스타일을 적용하기 위한 클래스입니다.

특정 상황에서 HTML 요소에 스타일을 적용하기 위한 클래스입니다.
예시:
- :hover : 마우스 커서가 요소 위로 올라갔을 때 적용됩니다.
- :active : 요소가 활성화된 상태일 때 적용됩니다.
- :nth-child : 요소의 자식 중 특정 순서에 해당하는 요소에 적용됩니다.

8. 가상 요소 (Pseudo-element)

- HTML 요소의 특정 부분에 스타일을 적용하기 위한 요소입니다.

HTML 요소의 특정 부분에 스타일을 적용하기 위한 요소입니다.
예시:
- ::before : 요소의 내부의 가장 앞 부분에 새로운 요소를 생성합니다.
- ::after : 요소의 내부의 가장 뒷 부분에 새로운 요소를 생성합니다.
- ::first-letter : 요소의 첫 글자에 스타일을 적용합니다.
- ::first-line : 요소의 첫 줄에 스타일을 적용합니다.

Chater2. 박스모델

CSS 박스 모델은 웹 페이지에서 요소의 크기와 위치를 결정하는 데 사용되는 모델입니다.

각 요소는 사각형 박스로 표시되며, 이 박스는 내부 콘텐츠와 테두리, 여백 등의 다양한 구성 요소로 구성됩니다.

박스 모델의 구성 요소는 다음과 같습니다.

콘텐츠 영역 (Content Area): 요소 내부에 있는 실제 콘텐츠를 포함하는 영역입니다.
패딩 영역 (Padding Area): 콘텐츠 영역 주위의 패딩으로, 콘텐츠와 테두리 사이의 공간입니다.
테두리 영역 (Border Area): 패딩 영역 주위에 있는 테두리입니다.
마진 영역 (Margin Area): 테두리 외부의 공간으로, 다른 요소와의 간격을 조절하는 데 사용됩니다.

이러한 영역은 서로 겹쳐 있으며, 각각의 영역은 CSS 속성을 사용하여 스타일링할 수 있습니다.

박스 모델은 요소의 크기와 위치를 계산할 때 매우 중요합니다.

이 모델을 사용하면 개발자는 요소의 콘텐츠와 구성 요소의 크기를 제어할 수 있으며, 이를 통해 웹 페이지의 레이아웃을 조정할 수 있습니다.

박스모델 예시

CSS 박스 모델은 웹 디자인에서 박스의 크기와 위치, 여백 등을 다루는 모델입니다.

이 모델은 박스의 크기를 결정하는 요소들을 각각의 레이어로 나누어 다루며, 이 레이어들은 순서대로 계산되어 최종적인 박스 크기와 위치를 결정합니다.

아래는 CSS 박스 모델의 예시입니다.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Box Model Example</title>
	<style>
		div {
			background-color: #f2f2f2;
			border: 1px solid black;
			padding: 20px;
			margin: 20px;
			width: 200px;
			height: 200px;
		}
	</style>
</head>
<body>
	<div>
		<p>This is an example of the CSS box model.</p>
	</div>
</body>
</html>

위 예시에서는 div 요소에 대해 background-color, border, padding, margin, width, height 등의 속성을 설정하였습니다. 이들 속성은 각각 박스 모델의 레이어들에 대응되며, 이를 통해 박스의 크기와 위치, 여백 등을 다양하게 제어할 수 있습니다.

예를 들어 width와 height 속성은 박스의 크기를 결정하며, padding 속성은 내부 여백을 설정하며, margin 속성은 외부 여백을 설정합니다. 또한 border 속성은 박스 주변의 경계선을 설정합니다.

위 예시에서는 div 요소를 생성하고, 이에 대해 위와 같은 속성을 설정하여 박스 모델을 적용하였습니다. 이를 브라우저에서 열어보면, div 요소가 지정한 크기와 여백, 경계선 등을 갖는 박스로 출력되는 것을 확인할 수 있습니다.

CSS에서는 박스 모델에 따라, 줄 바꿈이 되는(block) 박스와 옆으로 붙는(inline, inline-block) 박스가 있습니다.

줄 바꿈이 되는(block) 박스는 새로운 줄에서 시작하며, 자신의 너비와 높이를 설정할 수 있습니다.

이러한 특징으로 인해 주로 레이아웃을 만들 때 사용됩니다.

줄 바꿈이 되는 요소: <h1>, <p>,<div>
줄 바꿈이 되지 않는 요소: <span>

Chapter3. CSS Selector

- CSS Selector(선택자)

: 요소들에 스타일을 적용하기 위해 사용되는 패턴이나 규칙을 말합니다.

선택자는 스타일 규칙이 적용될 HTML 요소를 선택하는 데 사용됩니다.

타입 선택자

요소의 태그 이름으로 선택하는 선택자입니다.
예를 들어, p 선택자는 모든 p 태그를 선택합니다.

p {
  color: blue;
}

클래스 선택자

요소의 클래스 이름으로 선택하는 선택자입니다.
예를 들어, .red 선택자는 클래스 이름이 "red"인 요소들을 선택합니다.

.red {
  color: red;
}

아이디 선택자

요소의 아이디로 선택하는 선택자입니다.
예를 들어, #header 선택자는 아이디가 "header"인 요소를 선택합니다.

#header {
  background-color: gray;
}

자식 선택자

부모 요소의 하위 요소를 선택하는 선택자입니다.
예를 들어, ul li 선택자는 ul 태그의 자식인 li 태그를 선택합니다.

ul > li {
  list-style-type: circle;
}

자손 선택자

부모 요소의 모든 하위 요소를 선택하는 선택자입니다.
예를 들어, ul li 선택자는 ul 태그의 모든 하위 li 태그를 선택합니다.

ul li {
  font-size: 18px;
}

인접 형제 선택자

형제 요소 중에서 다음에 오는 요소를 선택하는 선택자입니다.
예를 들어, h1 + p 선택자는 h1 태그 바로 뒤에 오는 p 태그를 선택합니다.

h1 + p {
  font-weight: bold;
}

일반 형제 선택자

형제 요소 중에서 다음에 오는 모든 요소를 선택하는 선택자입니다.
예를 들어, h1 ~ p 선택자는 h1 태그 뒤에 오는 모든 p 태그를 선택합니다.

h1 ~ p {
  margin-top: 20px;
}

이 외에도 많은 Selector(선택자) 가 있다.

더보기를 눌러주세용 ~

속성 선택자

a[href="https://www.example.com"] {
  color: blue;
}

위 코드는 href 속성 값이 https://www.example.com인 a 태그에 color 속성을 blue로 설정하는 예시입니다.

가상 클래스 선택자

a:hover {
  color: red;
}

input:focus {
  border: 2px solid blue;
}

위 코드는 각각 a 태그가 마우스로 호버됐을 때와 input 요소가 포커스를 받았을 때에 각각 color와 border 속성을 설정하는 예시입니다.

가상 요소 선택자

p::before {
  content: "Chapter: ";
  font-weight: bold;
}

p::after {
  content: ".";
}

위 코드는 p 태그의 내용 앞과 뒤에 각각 "Chapter: "와 "."을 추가하는 예시입니다. 이 때 ::before와 ::after가 가상 요소 선택자입니다.

그룹 선택자

h1, h2, h3 {
  font-weight: bold;
}

위 코드는 h1, h2, h3 태그에 모두 font-weight 속성을 bold로 설정하는 예시입니다. 이를 그룹 선택자라고 합니다.

728x90

'프론트앤드 부트캠프 > Day' 카테고리의 다른 글

[코드스테이츠 FE 45기] _2023.04.18 _ Day 6 (0)	2023.04.18
[코드스테이츠 FE 45기] _2023.04.17 _ Day 5 (0)	2023.04.17
[코드스테이츠 FE 45기] _2023.04.14 _ Day 4 (0)	2023.04.15
[코드스테이츠 FE 45기] _2023.04.12 _ Day 2 (0)	2023.04.12
[코드스테이츠 FE 45기] _2023.04.11 _ Day 1 (1)	2023.04.11

코딩하는 짱구

고정 헤더 영역

메뉴 레이어

메뉴 리스트

검색 레이어

검색 영역

상세 컨텐츠

본문 제목

본문

9 : 00 ~ 17:00

자습

Unit3 [CSS] 기초

목차

Chapter1. CSS 기초

Chater2. 박스모델

Chapter3. CSS Selector

Chapter1. CSS 기초

CSS (Cascading Style Sheets)

사용자 인터페이스(UI; user interface)

좋은 사용자 경험(UX; user experience)

CSS 적용 방법 3가지

1. Inline Style

2. Internal Style Sheet

3. External Style Sheet

CSS 스타일 시트 내에서 id와 class를 사용하여 스타일을 적용하는 방법

2. class로 스타일 적용하기

CSS 의 요소에 대해 알아봅시다~!

Chater2. 박스모델

Chapter3. CSS Selector

'프론트앤드 부트캠프 > Day' 카테고리의 다른 글

관련글 더보기

추가 정보

인기글

최신글

티스토리툴바