CSS 기초

CSS는 Cascading Style Sheets의 약자로 HTML과 같은 마크업 언어가 표현되는 방법을 결정합니다. HTML이 웹 페이지의 구조를 담당한다면, CSS는 구조의 외부와 내부를 꾸미는 역할을 담당합니다.

CSS는 스타일링을 위한 도구입니다. 일반 사용자를 대상으로 하는 어플리케이션은, UI(User Interface)가 없으면 소용이 없습니다. 좋은 프론트엔드 개발자가 되려면 레이아웃 디자인과 타이포그래피 정도는 다룰 수 있어야 합니다.

CSS문법 구조

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

CSS 파일 추가

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

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

CSS를 별도의 파일로 분리하지 않고, HTML 태그에 직접 CSS 속성을 추가하는 방법도 있습니다. 그러나 하나에 집중하기 위해 파일이나 구간을 구분하는 관심사 분리 측면에서 권장하지 않습니다. 관심사 분리를 여기에 적용하면 HTML 파일에서는 웹 페이지의 구조만 신경쓰고, CSS 파일에서는 디자인만 신경쓸 수 있도록 구현하는 걸 말합니다. 가끔은 파일로 굳이 구분하지 않아도 될만큼 적은 CSS를 사용하는 경우도 있습니다. 이런 특수한 경우를 위해, 직접 CSS 속성을 추가하는 방법은 3가지가 있습니다.
그 방법은 같은 줄에서 스타일을 적용하는 인라인 스타일, CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 style태그 내에 작성하는 내부 스타일 시트, 그리고 앞서 설명한 외부 스타일 시트입니다. 아래의 예제는 세 가지 방법 중 인라인 스타일에 해당합니다.

<nav style="background: #eee; color: blue">...</nav>

기본적인 셀렉터 (selector)

id로 이름 붙여서 스타일링 적용하기

요소를 정확하게 선택하기 위해서는 이 엘리먼트에 id를 붙여서 해결할 수 있습니다. 이름을 붙일 때에는 가능한 의미를 담아서 구분할 수 있도록 합니다. id가 있는 요소를 선택할 때에는 #기호를 이용합니다. id는 하나의 문서에서 한 요소에만 사용해야 합니다.

<h4 id="navigation-title">This is the navigation section.</h4>

[코드] h4 요소에 id를 붙인다.

#navigation-title {
  color: red;
}

[코드] id로 요소를 선택해 스타일링한다.

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

id와 유사하게 특정 요소에 class를 지정하는 방법도 있습니다.
id는 한 문서에서 한 번만 사용할 수 있습니다. 이 예제는 id를 잘못 사용한 예제입니다. id는 문서 내에 단 하나의 요소에만 적용할 수 있는 유일한 이름이어야 합니다.

<!-- 잘못된 예제 -->
<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>

동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해서 class를 사용합니다. navigation section의 모든 li요소에 동일한 class를 추가하면, 동일한 스타일을 여러 엘리먼트에 적용할 수 있습니다. 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>

[코드] 여러 요소에 같은 스타일링을 적용하기 위해서는 class를 사용한다.

.menu-item {
  text-decoration: underline;
}

[코드] class menu-item을 선택하여 밑줄을 적용한다.

id와 class의 차이점

Sprint - querySelector 과제 제출하기

document.querySelector는 웹 페이지의 특정 요소를 선택하여 부를 수 있습니다.
textContent를 이용해 선택한 엘리먼트의 Content를 조회, 변경할 수 있습니다.

document.querySelector('#id or .class').textContent = 변경할 내용;

id 혹은 class의 tag와 tag사이 즉 컨텐츠의 내용을 변경할 내용으로 바꿉니다.

Sprint - JavaScript Calculator

느낀 점 : 스프린트 과제로서 계산기 만들기를 페어 프로그래밍으로 했는데 html과 css등을 처음 접해서 그런지 정신이 없고 정말 어려웠다. 그리고 과제 제출도 Github를 이용해서 내야했는데 Github 또한 처음 이용해서 얼을 많이 탔다. 하지만 페어님을 또 잘하시는 분으로 잘 만나서 다행히 잘 해결 할 수 있었다. 사실 css는 건들지 않았고, 위의 스프린트 querySelector 과제에서 얻었던 내용을 그대로 쓰는 것이 포인트였다. Advanced 문제까지 해결은 했는데 Nightmare 도전은 할까 말까 페어와 고민중이다. 아마 안 할 것 같다

페어님에게 도움만 받다보니 미안한 감정도 생기는데 이런 감정들은 좋지 않다고 하였다. 초반부인데 벌써부터 머리가 아프다니 나중엔 얼마나 어려운게 나올까 걱정되긴 하지만 페어에게 미안한 감정이 들지 않게라도 열심히 해야겠다.