DAY 006. 코드스테이츠 2주차 - CSS (CSS란?)

슈레더·2021년 6월 21일
0

코드스테이츠

목록 보기
6/25
post-thumbnail

1주일이 천천히 갈 줄 알았는데 어느덧 2주 차가 되었다.
기초 위주로 배우고 있지만 제대로 공부하고 있는지 모르겠다.
기초가 제일 중요하다고 하는데 뭔가 지나치는 부분이 있을까 봐 살짝 불안하다.
CSS는 어렵지만, 과제가 재밌다. 직접 디자인이 바뀌는 걸 실시간으로 확인할 수 있어서
시간도 빨리 가고 지루한 느낌이 들지 않았다.
아직 기초밖에 배우지 않았지만, 이것도 기초를 탄탄히 해야 다음 과정도 수월하게 넘어갈 수
있을 듯싶다.

CSS

CSS란?

CSS는 Cascading Style Sheets의 약자로, HTML, XHTML, XML같은
문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어이다.

CSS의 기본 구조

CSS 파일을 HTML 파일에 연결할 때에는, html문서의 link 태그 안에서 href 속성을 통해 파일을 연결한다.
link 태그는 HTML 파일과 다른 파일을 연결하는 목적으로 사용한다.
CSS(Cascading Style Sheet)는 Style sheet이므로 rel속성에 stylesheet을 추가한다.
href속성에는 파일의 위치를 추가해야 한다.

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.container {
  display: flex;
  flex: 1;
}
main {
  flex: 1;
  padding: 0 20px;
}
nav {
  flex: 0 0 180px;
  padding: 0 10px;
}
aside {
  flex: 0 0 130px;
  padding: 0 10px;
}

CSS 속성 추가 방법

CSS파일 속성 추가는 크게 3가지 방법이 있다.

1. 외부 스타일 시트

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

html문서의 link 태그 안에서 href 속성을 통해 파일을 연결한다.
link 태그는 HTML 파일과 다른 파일을 연결하는 목적으로 사용한다.
CSS(Cascading Style Sheet)는 Style sheet이므로 rel속성에 stylesheet을 추가한다.
href속성에는 파일의 위치를 추가해야 한다.

2. 내부 스타일 시트

<style>
  h1 {
    color: blue;
  }
</style>

html문서의 style 태그 안에서 CSS 속성을 정의한다.

3. 인라인 스타일

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

태그 내부에 style 속성으로 CSS 속성를 정의한다.

기본 셀렉터

1. 태그에 스타일링 적용하기

h4 {
  color: red;
}

h4 태그의 색상을 변경

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

<h4 id="navigation-title">This is the navigation section.</h4>
#navigation-title {
  color: red;
}

3. 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>
.menu-item {
  text-decoration: underline;
}

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

<li class="menu-item selected">Home</li>
.selected {
  font-weight: bold;
  color: #009999;
}

id와 class의 차이점

idclass
#으로 선택.으로 선택
한 문서에 단 하나의 요소에만 적용동일한 값을 갖는 요소 많음
특정 요소에 이름을 붙이는 데 사용스타일의 분류(classification)에 사용

CSS 레퍼런스

W3Schools

MDN

profile
shreder0804

0개의 댓글