Dev.note(web) 21.06.30

CSS


시작 전 설정

".css" 코드를 작성. C 코드의 헤더(.h) 파일처럼 작용하는 듯.
css 코드는 메인 html코드와 동시 작업하는게 수월하기 때문에 아래와 같이 두 코드를 한화면에 동시에 띄우도록 해준다.


css코드에서는 주석을 /* ~ */ 으로 표현한다.
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>

head 태그에서 위와 같이 css 코드를 참조한다.

css 코드에선 본문에 있는 태그들의 style, ID, class 등 을 선택하여 형식을 바꿀 수 있으며, ID 는 이름을 상징하여, 하나의 태그에 한 개만, 전체 코드에서 중복으로 사용 불가능하다. class 는 별명을 상징하여, 하나의 태그에 여러개 설정 가능하며 전체 코드에서 중복으로 사용 가능하다.

<h2 id="color-1 font-style-1">ID 선택자</h2>
(불가능)
<h3 class="bg-1 font-size-1">Class 
(가능)

이 때 각각의 우선순위에는 다음 규칙이 적용된다.

0. style, ID, class 옵션과 css 에서 변형

(html)
<h1>Hello World</h1>
<h2 id="test1">Nice to meet you</h2>
<h3 class="test2">Welcome</h3>
<h4 style="color : pink;">Hello World</h4>
(css)
h1 {
	color: red;
}
#test1 {
	color:  blue;
}
.test2 {
	color: green;
}

Hello World

Hello World

Hello World

Hello World

1. 부모 태그에 적용된 것은 자식 태그에도 적용된다.

(html)
<header>
	<h1>header h1</h1>
	<p>header p</p>
</header>
(css)
header {
	color : red;
}

header h1

header p

2. 부모 태그와 자식 태그를 따로 설정할 경우 둘 다 적용된다.

(html)
<header>
	<h1>header h1</h1>
	<p>header p</p>
</header>
<footer>
	<h1>footer h1</h1>
	<p>footer p</p>
</footer>
(css)
header {
	color : red;
}
footer h1 {
	color : blue;
}
header p {
	color : green;
}

header h1

header p

footer h1

footer p

3. 같은 태그는 나중의 것만 적용된다.

(html)
<h1>Hello World</h1>
(css)
h1 {
	color: red;
}
h1 {
	color: blue;
}

Hello World

4. style > ID > class > 태그 의 우선순위

(html)
<h1 style="color: gray;" id="color-2" class="color-1">Hello World</h1>
<h1 id="color-3" class="color-1">Hello World</h1>
<h1 class="color-1">Hello World</h1>
<h1>Hello World</h1>
(css)
#color-2, #color-3 {
	color:  pink;
}
.color-1{
	color: green;
}
h1 {
	color: red;
}

Hello World

Hello World

Hello World

Hello World

5. 좀 더 디테일하게 작성한 옵션이 적용된다.

부모태그 자식태그 > 자식태그
클래스 태그 > 태그

와 같이 태그의 정보가 더 많은 옵션이 적용된다.

(html)
<header id="intro">
	<div class="container">
		<h1>header h1</h1>
	</div>
</header>
(css)
#intro div h1 {
	color: green;
}
#intro h1 {
	color:  blue;
}

header h1


* div 태그를 이용한 레이아웃 예제 1

(html)
<div>
	<h1>Nice</h1>
	<a href="#">네이버</a>
	<ul>
		<li>메뉴1</li>
		<li>메뉴2</li>
	</ul>
</div> 
(css)
div {
	width: 100%;
	height: 300px;
	min-width: 600px;
	max-width: 800px;

	border: 10px red solid;
	border-radius: 10px;

	background-color: yellow;

	opacity: 0.5;
}
h1 {
	color: rgb(123,111,21);
	font-size: 80px;
	font-style: initial;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 300;
	text-decoration: line-through;
	text-align: center;

	background-color: pink;
}
a {
	text-decoration: none;
}
ul {
	list-style: none;
}

width, height 의 크기를 px(픽셀)로 고정값을 줄 수 있으며,
% 로 창의 높낮이 대비 비율을 정할 수도 있다.
border 로는 테두리 윤곽선을 설정, background 로 배경을 설정가능하며,
opacity 로 레이아웃 전체의 투명도(0 ~ 1 : 1 ~ 100%)를 정할 수도 있다.

font 로 글자의 각종옵션을 정할 수 있고, text 로 밑줄(underline), 취소선(line-through) 등을 넣을 수도 있다.
font-family가 여러 개 지정되있을 때 앞의 것이 적용 불가능할 경우 다음 것을 차선으로 사용하게 되는데, 일부 브라우저에서는 폰트가 정상 적용 되지 않을 수 있으므로 마지막은 무조건 sans-serif로 하는것이 좋다(고 한다).
특히, none 옵션으로 하이퍼링크를 생성시 자동으로 생기는 밑줄이나 리스트(li)에서 자동으로 생기는 번호/점 표시 등을 제거할 수도 있다.


* div 태그를 이용한 레이아웃 예제 2

(html)
<div id="bg"></div>
(css)
#bg {
	width: 500px;
	height: 300px;
	background-color: yellow;
	background-image: url(icon.png);
	background-repeat: no-repeat;
	background-position: center center;
}

background-image: url(icon.png); 와 같이 css 코드에서 그림을 직접 삽입할 수 있고, html 코드에 아무 옵션 없이 css 코드에서의 옵션만으로 그림과 배경 레이아웃의 옵션을 정할 수 있다.


어려웠던 점

C 언어에서는 헤더에서 직접 세부항목을 변경하는 경험이 없었다. css 코드를 헤더코드로 생각하니 생소한 방식이었고 적응하기가 어려웠다.

해결 방법

많은 반복이 답인 것 같다. 태그를 완성하기 전 tab을 눌러 여러가지 옵션을 살펴보고 이것저것 더하고 빼보는 경험이 필요할 것 같다.

학습 소감

레이아웃 예제를 만들어보며 어느 정도 구조가 잡혀가는 모습이다. 물론 아직 기초에 불과하지만, 기본적인 형태조차 없었던 1~2 일차에 비하면 집을 짓기 위해 다진 땅에 벽돌 하나를 놓은 느낌이다.

진행한 코드 링크

오늘 진행한 자세한 코드는 내 github 링크 에 업로드 되었다.

좋은 웹페이지 즐겨찾기