코드스테이츠 Full 30기 Section #1 6일
Javascript >>> HTML, CSS
오늘 할 일😊📅
- CSS 기본 문법 개념
- CSS >>> HTML 어떻게 적용하는지?
- 블로그 업로드 velog, tistory
- 운동 1시간 이상!
CSS?
CSS는 웹 스타일링을 위한 툴 입니다.
사용하는 이유는 크게 레이아웃 디자인(위치, 배치)과 텍스트 강조 등을 위함 입니다.
이를 적절히 사용하여 사용자에게 양질의 컨텐츠 혹은 UI를 제공할 수 있습니다.
UX (User Exprienece)
사용자가 컴퓨터, 웹사이트 등 기기를 이용하면서 직접적/간접적으로 경험하는 모든 것을 말한다.
예를 들어 모바일 디바이스에 대한 경험이라면, 디바이스를 매장에서 구매할 때 느낌, 집에서 포장 박스를 개봉 할때 느낌, 어플리케이션을 설치할 때 느낌, 불편함, 편리함 등 사용자가 느끼는 행동, 느낌, 감정을 UX라고 합니다.
UI (User Interface)
사용자(cliet)와 컴퓨터가 직접적으로 요청, 응답하는 부분으로 이벤트 발생시 작업을 하는 기능을 담당합니다.
디스플레이 화면, 키보드 등 디자인 요소 뿐만 아니라 기술적인 요소까지 포함하는 의미 입니다.
Ex) Botten, APP 아이콘, 문자, 색상 등
UX VS UI
UX는 UI를 이용하는 사용자의 경험/니즈 등을 분석하고 보안하는 것이 중점
UI는 UX를 기반으로 시각적, 기술적인 요소에 중점을 둔다.
UX와 UI는 아주 긴밀한 상호 작용을 하는데,
UX 사용자 니즈/경험 파악 >> UI 구현 및 업그레이드 >> UX 사용자 만족도 증가 >>> UI 업그레이드
항상 상호 작용한다.
CSS 기본 문법
selector {
선언 : 내용;
선언 : 내용;
color : blue;
}css스타일은 크게 3가지 방법으로 적용 할 수 있습니다.
- 인라인 스타일 >>> html 내부에서 같은 라인에서 적용하는 스타일
- 내부 스타일 시트 >>> css파일 안에 작성 내용을 별도로 구별하지 않고, style 태그 내에 작성하는 스타일
- 외부 스타일 시트 >>> css파일에 각각 컨텐츠의 스타일을 만드는 방법
타겟팅 하는 법
html 내부에 원하는 부분을 id로 CSS를 따로 만들고 타겟팅 할 수 있다.
ID VS CLASS
ID : 문서 안에 단 하나의 요소만 적용할 수 있는 유일한 이름으로 하는게 바람직 합니다.
#으로 네이밍을 해준다.
Class : css를 여러 부분에 적용하기 위해서 class를 사용하는게 바람직 합니다.
.으로 네이밍을 해준다.
Class 활용 : class 부분 뒤에 더 이름을 붙여 스타일링을 더 할 수 있습니다.
많이 쓰는 것
-
color : 색상을 설정
-
font-family : 텍스트 폰트 설정
-
단위 알 것!
-
더 많은 자료는 w3school, mdn을 활용하자
오늘 완료 한 일 ☑️💯
- CSS 개념정리
- 과제 제출!
주의 할 일❗️
- 프로그래머스 lv1 풀어봤는데 아직 부족하다... 더 많이 풀어보도록!
- JS 웹 반응형 계산기를 만들었는데, 어색하다고 처음 멍 때린게 컷다! 새로운 것일 수록 어떻게 돌아가고 어떻게 짜야하는지 좀더 공부할것!
DONE! 😃
