css 기초 - 1

ch – CSS 기초

CSS는 Cascading Style Sheets의 약자로 HTML과 같은 마크업 언어가 표현되는 방법을 결정
→ CSS는 구조의 외부와 내부를 꾸미는 역할

 

• 학습 목표

  CSS의 사용목적 이해
  프론트엔드 개발자의 기초소양
  CSS의 기본문법과 구조
  → 직접 html 안에 css를 정의하는 것을 권장하지 않는 것을 이해
  id 및 class와 관련된 selector 규칙
  CSS에서 쓰이는 단위(2가지 구분)
  → 각 단위가 적합한 경우를 구분
  CSS 박스 모델
  → width, height
  → margin, padding, border
    → 박스 크기를 측정하는 2가지 기준의 차이 이해
  MDN, w3school 같은 레퍼런스 사이트를 통한 검색과 이용법

   

---

CSS 소개

CSS는 스타일링을 위한 도구

• 콘텐츠의 배치와 위치(레이아웃 디자인)
• 텍스트 강조, 밑줄 등 최소한의 타이포그래피

→ 더 나은 사용자 경험(UX, User Experience)를 제공

CSS에 대한 오해

CSS는 디자이너의 영역이 아니다. 개발자의 기본적인 소양 이다
일반 사용자를 대상으로 하는 어플은 사용자 인터페이스(UI)가 있어야 함
 

UI는 사람과 컴퓨터 프로그램이 소통할 수 있도록 만들어진 요소
→ 아무리 훌륭한 내부 기능이 있어도 Ui가 없으면 쓸모없는 어플
 

UX도 고려해야 한다. 여러 기능을 한 화면에 덕지덕지 붙여놓기 보단
깔끔하게 리디자인하는 것
→ Ux를 고려하여 디자인하는 것은 디자인을 몰라도 된다!
→ 검색으로 무료 아이콘(검색: free app icon) 찾거나, CSS 도형은 쉽게 제작 가능
 

프론트엔드 개발자
→ 크롬과 같은 브라우저에 보이는 부분: Front-end
→ 레이아웃 디자인, 타이포그래피 정도는 다룰 줄 알아야 함
→ 화면의 구성과 배치(레이아웃 디자인)
→ 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 등
→ 프론트엔드 개발자가 아니더라도 개발자라 한다면 최소한의 UI 제작은 가능해야 함!
 

CSS는 어렵다?

CSS는 웹 개발자가 배우기 가장 쉬우면서 동시에 가장 어려운 언어이긴 하다
→ 배우는 것은 쉽지만, 대형 프로젝트에서 CSS를 의미있게 구성하는 일이 어렵기 때문

---

CSS 따라하기

index.html , index.css 파일 만들어서 따라 해보기

• 시맨틱 태그?
  <header> <main> <nav> <aside> <foooter>이런 태그들
  → 사실 <div> 태그와 같은 의미
  → 부르는 이름만이 다를 뿐임
  → 이렇게 이름에 의미를 붙여 부르는 태그; 시맨틱 태그
  → 이 태그의 영역이 어떤 역할을 하는지 개발자가 쉽게 파악하도록 돕는 거

CSS 내용 분해하기

CSS의 문법 구성

body{    //선언 블록(declaration block)
    color:red;    //선언(declaration)
    font-size:30px;    // ;은 선언 구분자
    //속성명(property)    //속성값(value)
    }

---

background-color vs background?

background-color는 색상만 지정할 수 있다
background는 색상 뿐만 아니라 다른 옵션(image, repeat, attachment, ...)을 지정해 사용 가능하다.

em과 rem?

폰트나 마진, 패딩 등의 크기를 지정할 때 정확한 px로 지정할 수도 있지만
상대적인 값을 표현 해주는 단위인 rem, em도 사용 가능

rem은 기준이 되는 값을 지정된 배수로 변환해 표현한 크기를 의미
→ 보통 기준값은 최상위 요소(html 태그)에서 지정된 font-size값을 의미

em 또한 기준이 되는값을 지정된 배수로 변환해 표현한 크기를 의미
→ 단, 기준값은 현재 스타일 지정 요소*의 font-size값을 의미
(단 현재 요소의 값이 지정되지 않았다면 *부모 요소의 값을 상속 받아 기준 삼음)

→ 즉, rem과 em의 차이는 기준값의 차이
→ rem: 기준값; 최상위 태그의 font-size값
→ em: 기준값; 현재 요소의 font-size값

margin vs padding?

Margin 속성은 어떤 요소의 네방향 “바깥 여백” 영역 값을 설정하는 것
→ margin-top, margin-right, margin-bottom, margin-left의 단축 속성임

→ ex) 
/* 네 면 모두 적용 */
margin: 1em;
margin: -3px;

/* 위 | 가로방향 | 아래 */
margin: 1em auto 2em;

/* 전역 값 */
margin: inherit;
margin: initial;
margin: unset;

margin: 10px;               /* 모두 10px */

margin: 10px 3px 30px 5px;  /* 상: 10px */
                            /* 우:  3px */
                              /* 하: 30px */
                            /* 좌:  5px */

margin: auto;               /* 상하: 0 */
                            /* 수평 중앙정렬 */

 

반면에 padding 속성은 특정 요소의 네 방향 “안쪽 여백” 영역을 설정
→ padding-top, padding-right, padding-bottom, padding-left를 포함한 단축 속성

ex) padding: 1em;        //네 면 모두 1em 적용

    /* 위 | 오른쪽 | 아래 | 왼쪽 */
padding: 5px 1em 0 2em;

/* 전역 값 */
padding: inherit;
padding: initial;
padding: unset;

padding: 1em 3px 30px 5px;  /* 상:  1em */
                             /* 우:  3px */
                            /* 하: 30px */
                           /* 좌:  5px */

text-align

해당 속성은 블록 요소나 표의 칸 상자의 “가로 정렬”을 설정.
→ vertical-align과 비슷한 속성이나 세로가 아닌 “가로 방향”으로 동작함

ex)
/* 키워드 값 */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

---

CSS 파일을 HTML에 추가(연동)하기

HTML 파일에서 link 태그 이용하여 그 안에 href 속성을 통해 CSS 파일 연결

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

 

link tag?

Link 태그는 HTML 파일과 다른 파일을 연결할 때 사용
rel 속성은 연결하고자하는 파일의 역할이나 특징
→ CSS는 스타일시트이므로 rel 속성에 stylesheet 속성값
 
href 속성에는 파일의 위치를 추가
→ 절대경로나 상대경로를 입력
 

CSS 스타일 적용하는 방법: 3가지

인라인 스타일: 같은 줄에서 스타일을 적용
내부 스타일 시트: 내용을 별도의 파일로 구분하지 않고 style 태그 내에서 작성
외부 스타일 시트: 해당 스타일 내용을 별도의 파일로 만들어서 적용

“관심사 분리”의 측면에서 HTML 태그에 직접 CSS 속성을 추가하는 방법은 좋지 않다
→ CSS파일은 별도 파일로 분리하여 관리하는게 좋다

ex)    인라인 스타일의 예
<nav style=”background: #eee; color: red”> … </nav>

 

---

기본적인 셀렉터(selector)

id로 이름 붙여서 스타일링 적용하기(#id명)

특정 요소에만 스타일링 적용하려고 할 때 사용 가능

→ ex) nav 하위의 h4 요소에 색상을 변경(index.css 에서)
h4 {
    color: red;
}

→ 허나 이렇게 하면 nav 하위뿐만 아니라 aside 하위의 h4도 변경되어버림
→ 원하는 요소만 정확하게 선택하기 위해서는 이 엘리먼트에 id를 붙이면 됨

# 기호를 사용한다. id는 하나의 문서에서 하나의 요소에만 사용해야 한다
→ id는 하나의 요소에 적용할 수 있는 유일한 이름

 

<h4 id="navigation-title">This is the navigation section.</h4>
// html에서 id 속성을 추가

#navigation-title {    // css 에서 #id명    을 붙여서 사용
  color: red;
}

class로 스타일을 분류하여 적용

 
id와 유사하게 특정 요소에 스타일링을 할 수 있다.
차이점은 id는 문서 내에 단 “하나”의 요소에만 적용할 수 있었는데
class는 동일한 기능을 하는 CSS를 “여러” 요소에 적용할 수 있다

ex) html에서 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>

ex) CSS에서 . 을 이용해서 스타일링
.menu-item {
  text-decoration: underline;
}

 

여러 개의 class를 하나의 엘리먼트에 적용하기

 

위에서는 1개 class → n개의 요소에 적용
그렇다면 n개의 class → 1개의 요소에 적용은?
 
→ html에서 class 속성 값을 설정할때 구분자로 공백을 사용하여 여러 개의 class를 적용 가능
(공백으로 적용하려는 class의 이름을 분리)

ex) html 에서 다중 class 적용
<li class="menu-item selected">Home</li>        <!-- selected 라는 class를 추가해줌 →

ex) CSS에서 요소 스타일링
.selected {        
  font-weight: bold;
  color: #009999;
}

요소를 만들거나, 요소에 스타일링을 적용할 때에는 항상 이름과 목적이 일치하는지 잘 살펴보기