CSS AG

Achievement Goals
(1) CSS의 사용목적을 이해할 수 있다.
CSS는 스타일링을 위한 도구입니다

-콘텐츠의 배치와 위치 (레이아웃 디자인)
-텍스트를 강조하거나 밑줄을 치는 등, 최소한의 타이포그래피 (Typography)

위의 요소를 갖추고 있으면 더 나은 사용자 경험(UX, User expirenece)을 제공할 수 있습니다. CSS는 기존 웹 페이지에 다른 CSS 파일을 적용해 활자 매체로 출판을 할 수도 있거나, 색약이나 장애인이 웹 페이지를 이용할 때 도움을 줄 수도 있습니다.

(2)프론트엔드 개발자의 기초소양에 대해 이해할 수 있다.
사용자가 웹 서비스를 이용할 때, 크롬과 같은 브라우저에 보이는 부분을 프론트엔드(앞 단, Front-end)라고 합니다. 그리고 프론트엔드를 개발하는, 프론트엔드 개발자는 레이아웃 디자인과 타이포그래피 정도는 다룰 수 있어야 합니다.

-화면의 구성이나 배치 (레이아웃 디자인)
-굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 등

그리고 아래의 내용은 프론트엔드 개발자에게 있으면 좋고, 없어도 크게 상관없는 부분입니다.

-정렬이나 배색에 대한 감각
-UX에 대하여 고민해보고, UX가 잘 적용된 웹이나 앱을 분석해본 경험

(3)CSS의 기본 문법과 구조를 이해할 수 있다.
-CSS는 스타일링 도구이므로, 독립적으로 기능하지 않습니다. 반드시 HTML이 있어야만 동작할 수 있습니다. ex)index.html,index.css

-문법구조-

셀렉터는 태그이름이나 id, 또는 클래스를 선택합니다.
셀렉터로 특정 요소를 선택했다면,
중괄호 안에서 이 요소에 적용할 내용을 작성합니다.
요소에 적용할 수 있는 내용을 속성이라고 합니다.
색상, 글자크기 등 다양한 속성이 있습니다.
속성에 적용할 적절한 값을 입력하여 스타일을 표현합니다.
그림에 나타나있는 color: red;는 이 요소의 색상을 빨간색으로 스타일링합니다.
속성과 값의 끝에는 세미콜론(;)을 붙여 속성끼리 구분합니다.
하나의 속성만 존재할 때에는 세미콜론을 붙이지 않아도 무방하지만,
속성과 값을 작성한 다음 세미콜론을 적는 습관을 들이는 것이 좋습니다.

-질문-

가운데 정렬 속성
//A{
text align:center;
}

글자색 바꾸기 속성
//A{
color:red;
}

배경색 바꾸기 속성
//A{
background-color:#e78e52;
}

background속성과 background-color속성은 어떻게 다른가요?
-background-color는 색깔만 정할수 있지만, backgroud속성은 다양한 옵션들을 정할수 있습니다.
옵션의 종류는- color/image/repeat/attachment/position 추가로 부여

결론 background가 더 큰 개념이다.

(4)CSS를 HTML에 적용하는 방법에 대해서 이해할 수 있다.

CSS 파일을 HTML 파일에 연결할 떄에는,
link 태그 안에서 href 속성을 통해 파일을 연결합니다.

link 태그의 rel은 연결하고자하는 파일의 역할이나 특징을 나타냅니다.
CSS(Cascading Style Sheet)는 Style sheet이므로 rel속성에 stylesheet을 추가합니다. href속성에는 파일의 위치를 추가해야 합니다.
지금 작성한 두 파일은 한 폴더 내에 있으므로 파일이름만 입력합니다.
다른 폴더에 파일이 존재하는 경우, 절대경로 또는 상대경로를 입력해 원하는 파일을 찾아 연결할 수 있습니다.

(5)직접 HTML 안에 CSS를 정의하는 것을 권장하지 않는 이유를 이해할 수 있다.

"관심사분리"라는 측면에서 같이 쓰는것을 추천하지 않지만, 가끔은 다른 파일로 구분되지 않아도 될 적은 양의 CSS가 있을 경우 한파일로 할수도 있습니다.

CSS 스타일을 적용할 수 있는 방법은 3가지가 있습니다.
(1)인라인 스타일: 같은 줄에서 스타일을 적용 (html안)

(2)내부스타일 시트: CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 style태그 내에 작성.(html안)

(3)외부스타일 시트: 다른파일로 구분해서 적용.

(6)id 및 class와 관련된 selector 규칙을 이해할 수 있다.

id를 입력해서 적용하는 이유:
-하나의 요소를 선택해서 적용하기 위해서 입니다.

id를 만들고 적용하는 방법:

*id는 하나의 문서에서 한 요소에만 사용되어야합니다.

Class를 입력해서 분류해야 하는 이유:
-이 또한 하나의 요소 혹은 부분요소를 선택해서 적용하기 위해서 입니다.

잘못된사용 - id는 한번만 사용해야 합니다.

하나의 Class를 여러요소에 적용하는 방법:

여러개의 Class를 하나의 요소에 적용하는 방법:

(7) CSS를 이용해 텍스트를 꾸밀 수 있다

(1) 색상

(2) 글꼴

-보다 다양한 글꼴을 사용하기 위해서는 "Google fonts" 검색!!

(3) 크기

(8)CSS에서 쓰이는 단위의 두가지 구분을 이해할 수 있다.

-글꼴의 크기에서 단위가 매우 중요하다.
(1) 절대 단위: px,pt등
(2) 상대 단위: %,em,rem,ch,vw,vh 등

(9)각 단위가 적합한 경우를 구분할 수 있다.

(1)기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우
-px(픽셀)을 사용합니다.

1) 글꼴의 크기를 고정하는 단위이다.(사용자 접근성이 불리하다.)
-사용자가 브라우저의 기본 글꼴을 크기를 더 크게 설정하더라도 커지지 않는다.

2) 모바일기기처럼 작은화면에 적합하지 않고, 동시에 고해상도인 경우에도 적합하지 않다.
-기본적으로 고해상도에서는 1px이 모니터의 한점보다 더 업스케일이되기 때문에, 뚜렷하지 못한 형태로 출력 될수 있다.

->픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우 유리하다.

(2) 일반적인 경우
-rem을 사용합니다.

1)사용자가 설정한 기본 글꼴에 따르기 때문에, 접근성이 유리합니다.
-즉 브라우저의 기본 글자 크기가 1rem이며, 두배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있습니다

2)em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵습니다. 이에 비해 rem은 root의 글자 크기에 따라서만 상대적으로 변합니다.

(3) 반응형 웹에서 기준점을 만들때
-디바이스 크기 별로 CSS 달리 적용! 디바이스 크기를 나누는 기준 보통 px

반응형 웹은 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트를 말합니다. 예를 들어, 데스크탑에서 볼 때, 스마트폰에서 세로 모드로 볼때, 가로 모드로 볼 때, 태블릿으로 볼 때가 각각 다를 수 있겠죠.
이 때에는 디바이스 크기 별로 CSS를 달리 적용해야 합니다.
이 때에, 디바이스 크기를 나누는 기준을 보통 px로 정합니다.
예를 들어 iPhone 12 Pro Max의 너비는 414px 입니다. 보통 450px 미만의 너비를 갖는 디바이스는 스마트폰 세로 모드로 생각해도 좋습니다. 크롬 브라우저에서는 자주 사용하는 디바이스의 너비(width)와 높이(height)별로 실제로 어떻게 보이는지 테스트해볼 수 있습니다.

(4) 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우
-vw vh사용

웹 사이트의 보여지는 영역을 Viewport라고 합니다. vw, vh는 각각 viewport width와 viewport height을 뜻합니다. 화면을 가득 채우며 딱 떨어지게 스크롤되는 사이트를 가끔 본 적이 있을 겁니다. 이런 웹 페이지에서 사용하는 방법이 100vw, 100vh를 사용해 구현한 것입니다. (참고로 //body 태그에서의 %는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤했을 때 보이는 영역까지 포함했을 때에 비율입니다.)

기타 스타일링