오늘은 CSS에 대해서 공부하였다.

CSS란

css는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다.
작성한 HTML파일에 CSS를 추가하면 더 보기 좋고, 근사한 페이지가 된다.
또한 사용자가 사용하기 편리해진다.

좋은 디자인과 나쁜 디자인

좋은 디자인

깔끔하고 보기 좋다.

나쁜 디자인

복잡하고 무엇을 의미하는지 잘 모르겠다.

css 사용 방법

HTML파일에서 사용했던 태그들을 이용하여 {}로 묶어서 사용한다.
body는 셀렉터(Selector), {}는 선언 블록(Declaration block), 그 안 내용은 선언이라고 부른다.

#index.css

body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #4a4a4a;
}
header, footer {
  font-size: large;
  text-align: center;
  background-color: #4a4a4a;
}
nav {
  background: #eee;
}
main {
  background: #f9f9f9;
}
aside {
  background: #eee;
}

위에 css 작성을 마쳤으면, HTML 파일에 아래 코드를 추가한다.

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

기본적인 셀렉터

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

id값을 test로 설정

#index.html

<h1 id="test">TEST</h1>

#id값 {}으로 원하는 디자인 선언하기

#index.css

#test{
	color:black;
}

class로 스타일 붙여서 스타일링 적용

id값은 고유한 값을 설정할 때 사용하기 때문에 아래와 같이 여러 요소에 적용하기 위해서는 class를 사용해야한다.

<ul>
  <li class="menu">Home</li>
  <li class="menu">Mac</li>
  <li class="menu">iPhone</li>
  <li class="menu">iPad</li>
</ul>

.class값으로 적용

.menu{
  text-decoration: underline;
}

여러 개의 class 사용

<li class="menu select">Home</li>

이런 식으로 띄어쓰기를 이용해 작성하고, 똑같이 class값을 이용해서 스타일링을 적용하면 된다.

줄 바꿈이 되는 박스(block)vs 옆으로 붙는 박스(inline)

줄 바꿈이 되는 요소는: <h1>,<p>
줄 바꿈이 안되는 요소는: <span>

개발자 도구를 통해 블록 요소를 확인할 수 있다.

박스를 벗어나는 콘텐츠 처리

박스의 크기를 벗어나는 콘텐츠를 처리하려면, 박스 크기를 넘는 콘텐츠를 표시하지 않거나 스크롤을 추가하는 방법이 있다.

#표시하지 않는 경우
p{
	height:50px;
    overflow:hidden;
}

#스크롤하는 경우
p{
	height:50px;
    overflow:auto;
}

기본 셀렉터

전체 셀렉터

*{}

태그 셀렉터

h1{}
p{}
div{}

id 셀렉터

#id값{}

class 셀렉터

.class값{}

attribute 셀렉터

a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

자식/후손/형제 셀렉터

<header>
	<p>
		<span>
			<p>
			</p>
		</span>
	</p>
	<p>
		<span>
			<p>
			</p>
		</span>
	</p>
    <section></section>
    <p></p>
    <p></p>
</header>

자식 셀렉터

header > p { }

첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택한다.
다른 내부 요소의 자식 요소는 선택되지 않는다.

후손 셀렉터

header p {}

첫 번째로 입력한 요소의 후손을 선택한다.
자식의 자식 요소까지 포함한다.

형제 셀렉터

section ~ p { }

같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택한다.