[CSS] CSS기초

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 

---

CSS기초

CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일 시트 언어입니다.

 

웹 디자이너가 존재하지만, 개발자도 CSS를 사용하여 화면의 구성이나 배치, 타이포그래피 등을 다뤄 대략적인 디자인은 할줄 알아야 소통이 가능하고 일이 수월해진다.

 

UI

interface - 컴퓨터가 교류하기 위한 연결고리

컴퓨터에 깊게 알지 못하는 사용자가 블로그 글을 포스팅하는데, 아무런 공부도 없이 html로 작성을 한다고 하면 작성을 포기할 것이다. 티스토리나 네이버 블로그를 보면 폰트, 색상, 이미지삽입 등등여러기능을 사용자가 알기 쉽게 위치해있고, 임시저장, 완료와 같은 버튼으로 누가봐도 용도를 알수 있게 디자인 되어있다.

이와 같이 사용자에게 친화적인 인터페이스를 user interface 즉 UI라 부른다.

 

UX

user expeience는 사용자가 어떠한 서비스/ 제품을 직간접적으로 이용하면서 느끼는 종합적인 만족을 의미합니다.

 

만약 디자인이 잘되어 있는 카카오톡을 생각해보자

사용자가 사용하기에 좋은 디자인과 버튼의 배치가 되어있다.

이런 경우 좋은 ui이고, 사용자는 만족감을 느꼈기 때문에 좋은 ux이다.

 

반대로 디자인이 엉망인 메신저 앱이 있다 생각해보자

보내기 버든이 너무 작아서 잘 눌리지 않고, 상대방 메세지 백그라운드 컬러와, 메세지글자 색이 거의 동일해 보이지가 않는다면 나쁜 ui이고, 사용자는 불편했기에 나쁜 ux이다.

 

그럼 좋은 ui는 항상 좋은 ux일까? 그건 또 아니다.

 

또다른 디자인이 너무 예쁜 메신저 앱이 있다고 가정하자. 친구 정민이에게 급하게 연락을 하려고 메세지를 보냈는데, 메세지가 3년뒤에 도착했다고 하자.

아마 메세지가 도착하기 전에 만나서 서로 왜 연락을 안하냐고 싸웠을 것이고, 사용자는 나쁜 경험을 했을것이다.

이런경우 ui는 만족하지만, ux는 나쁘다.

 

웹 제작 역량 

• 컴포넌트 기능 별로 묶어서 제작
• 화면 구성이나 배치
• 굵은 글씨와 같은 타이포그래피와 폰트 색상 적용하는일 등등..

css문법 구성

css파일추가

<link>요소는 html파일과 다른 파일을 견결할때 사용한다.
link의 rel은 연결하고자 하는 파일의 역할이나 특징을 나타낸다.
css는 style sheet이므로 rel에 stylesheet를 입력한다.
href에는 a태그와 마찬가지로 경로를 입력하는데 css파일 위치를 적어주면 된다,
같은 폴더이면 파일이름만 아니라면 절대 또는 상대 경로를 입력한다.

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

다음과 같이 작성하면 stylesheet모드로 index.css로 접근한다.

 

기본적인 셀렉터

 

h4요소에 색상을 적용시키고 싶다면

h4 {
  color: red;
}

 

id가 navigation-title을 가진 태그에 적용시킬때

#navigation-title {
color: red;
}

class라면

.navigation-title {
color: red;
}

 

 

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

다음코드는 id가 유일하게 적용되지 않아 옳지 않다. id가 아닌 class로 적어야 적절하다

 

id

• #으로 선택
• 한 문서에 단 하나의 요소에만 적용
• 특정 요소에 이름을 붙이는데 사용

class

• .으로 선택
• 동일한 값을 갖는 요소 많음
• 스타일 분류에 사용

여러 class를 하나의 요소에 적용해보겠습니다. 여러 class를 하나의 요소에 적용하기 위해서는,
 띄어쓰기로 적용하려는 class들의 이름을 구분합니다. 

.selected {
  font-weight: bold;
  color: #009999;
}

다음 class는 'selected', 'menu selected', 'main selected'와 같은 형식에 전부 영향을 준다.

---

폰트의 사용과 웹 폰트 사용 폰트의 정대/상대크기는 아래를 참고해주세요 

 

폰트

https://leewang31.tistory.com/entry/CSS-%EA%B8%B0%EB%B3%B8%EB%B6%80%ED%84%B0-%ED%99%9C%EC%9A%A9%EA%B9%8C%EC%A7%80-Font?category=1039616 

CSS 기본부터 활용까지 - Font

웹폰트

https://leewang31.tistory.com/entry/CSS-%EA%B8%B0%EB%B3%B8%EB%B6%80%ED%84%B0-%ED%99%9C%EC%9A%A9%EA%B9%8C%EC%A7%80-%EC%9B%B9%ED%8F%B0%ED%8A%B8-%EA%B5%AC%EA%B8%80-%EC%9B%B9%ED%8F%B0%ED%8A%B8-%EC%82%AC%EC%9A%A9?category=1039616 

CSS 기본부터 활용까지 - 웹폰트 (구글 웹폰트 사용)

 

폰트 상대/절대크기

https://leewang31.tistory.com/entry/CSS-%EA%B8%B0%EB%B3%B8%EB%B6%80%ED%84%B0-%ED%99%9C%EC%9A%A9%EA%B9%8C%EC%A7%80-%ED%81%AC%EA%B8%B0-font-size?category=1039616 

CSS 기본부터 활용까지 - 크기 : font-size