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 링크 에 업로드 되었다.
