오늘의 강의 내용
css언어를 작성할때는 먼저 디자인할 코드를 작성해준다
css언어는 모두 중괄로{} 안에다 작성한다
<head>
<meta charset="utf-8">
<style>
h1 {
color: red;
}
</style>
</head>
위 css언어를 이용한 첫 예제를 보면 color을 css의 속성이라 하고, red 는 속성값이라 한다. 그리고 반드시 문법을 마치면 ;를 붙여야 한다. 그러치 않으면 후에 작업에 지장을 미친다.
<body>
<h1 style="background-color: pink;">Hello World</h1>
</body>.png)
또다른 방법으로는 위와 같이 태그 안에 속성을 넣어서 하는 방법이 있다.
- 그러나 위에 두방법에는 치명적인 단점이 있다. 코드 분량이 1000줄, 2000줄, html언어와 css언어가 같이 혼재 되있다면
가독성이 떨어진다.
그래서 실무작업에서는 css언어와 html언어를 분리하여 연동시켜
사용한다.
연동 시킬때 필요한 태그가 바로 link 태그 이다
<link rel="stylesheet" type="text/css" href="style.css">위에 rel은 연동되는 파일의 타입을, type은 어떤언어로 구성되어 있는지, href는 연동되어 있는 파일의 경로를 나타낸다.
- sublime txt 팁! 상단 메뉴 view에 layout안에 columns2
를 하고 옮기고 싶은 탭을 드래그 하면 분할하면이 된다
<header> //부모태그
<ul> //자식태그
<li></li>
<li></li>// 형제태그
<li></li>
</ul>
</header>
위에 소스코드는 기본적인 html 구조를 나타낸 모습이다.
소스코드의 구조를 보듯이 태그에도 상.하 관계가 존재한다.
<!-- style 속성 > id > class > tag -->위에 소스코드는 상.하 관계에 따른 간단한 예시이다.
style 속성 가 id 속성의 상위 속성이고, id 속성는 class 속성에 대해서 상위속성이다, 그리고 class속성는 여타 기본적인
color속성보다 상위태그이다.
*id속성 : 아름이라 생각, 태그 안에 한번만 사용 가능하다.
*class속성 : 별명이라 생각, 여러개의 속성값을 복수로 가지고 사용이 가능하다.
CSS언어 소스코드의 다양한 속성
우선 html언어를 css언어로 나타낼때 다르게 표시하는 속성들이 존재 한다는것을 기억하고 있어야한다.
-
border: 테두리를 나타낼때 사용하는 속성
-
background-color: 뒷배경의 색을 나타내는 속성
-
wigth : 공간의 크기를 설정 , 가로폭
-
heigth : 공간의 크기를 설정 , 세로폭
-
min,max wigth : %를 가지고 있는 속성값에 사용. 최소값, 최대값 가로폭에 한하여
-
min,max heigth : %를 가지고 있는 속성값에 사용. 최소값, 최대값 세로폭에 한하여
-
border-radius : 테두리 각 모서리의 곡면을 설정
-
font-size : 글자의 크기 설정
-
font-style : 글자의 스타일 설정
-
font-family : 글자의 서체를 설정, 복수로 설정가능 웹브라우저 의 사용 유무에 따라
-
font-weight : 글자의 굵기를 설정
-
text-decoration : 글자의 밑줄을 적용
-
text-align : 글자의 위치를 이동, 주의점 태그의 영역의 안에서만 이동이 가능
-
list-style : ul태그작성시에 글자앞에 점을 제거
-
opacity : 투명도의 영향을 미치는 속성, 0~1사이의 값으로 만 지정 가능
강의후 소감
오늘은 css언어에 대하여 중점적으로 배웠다. 그전까지 접해본적이 없어 생소했고, 신기했다. 그런데 강의진도가 내생각 과 달리
상당히 빠르게 느껴져 용량초과? 라는 느낌이 들어 복습 또 복습이 살길이라 생각했다.
