학습내용
1. CSS를 입력하는 3가지 방법
1) HTML Head 부분에 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>- body영역의 h1태그를 CSS로 표현하기 위해서,
head 영역에서 style 태그 안에 CSS로 표현할 h1태그를 지정해 준다. - style 태그는 중괄호{}로 작성
head에서 CSS 태그를 구성하는 방법
<head> <style> 디자인할 태그를 지정 { 속성: 속성값; } </style> </head>
2) 해당 태그 안에 직접 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1 style="background-color: pink;">Hello World</h1>
</body>
</html>3) CSS 파일을 따로 만들어 연동
위의 두가지 방법은 한 파일에 html과 css가 혼재되어 있어서, 나중에 수정하기 쉽지 않다. html과 CSS파일을 따로 만들어서 (확장자 .css 반드시 입력하고 저장할 것) link 태그로 두 파일을 연동시켜 사용하는 것이 일반적이다.
<link rel="stylesheet" type="text/css" href="style.css">
- html 안에 link태그를 작성한다.
- rel : 연동되는 파일의 타입
- type : 연동되는 파일이 어떤 언어로 작성되었는지 표기
- href : 연동되는 파일이름.확장자명
2. 부모태그, 자식태그, 형제태그를 이용한 CSS적용
<header>
<h1>header h1</h1>
<p>header p</p>
</header>
<footer>
<h1>footer h1</h1>
<p>footer p</p>
</footer>
html에서 태그를 사용하다보면, 어떤 태그안에 속한 태그와 동등한 위치의 태그가 있다.
위의 경우에서, header와 footer태그는 h1와 p태그의 부모태그이고, h1와 p태그는 각각 header와 footer태그의 자식태그이다.
h1태그와 p태그는 형제태그이며, header태그와 footer태그도 형제태그이다.
CSS에서 부모태그를 지정하여 스타일을 작성하면, 그에 속해 있는 자식태그들에 모두 적용된다.
header { color: red; }
단, 아래의 경우에는 자식태그마다 개별적용된다.
1) 부모태그에 css스타일이 적용되어 있더라도 자식태그를 직접 지정하여 스타일을 작성하는 경우
header {
color: red;
}
h1 {
color: blue;
}
p {
color: green;
}
2) 원래 설정된 값이 있는 html태그의 경우에는 원래 설정이 우선된다.
<header>
<h1>header h1</h1>
<p>header p</p>
<a href="#"></a>
</header>
<footer>
<h1>footer h1</h1>
<p>footer p</p>
</footer>위의 css코드 그대로 html에 a태그를 추가했다.
a태그는 원래 파란색 밑줄이 있는 설정이기 때문에 head 태그의 글자색 red의 적용을 상속받지 않는다.
더욱 디테일하게 스타일을 적용하기 위해서는 부모태그와 자식태그를 함께 지정하면 된다.
header h1 { color: blue; } footer p { color: green; }
여러 개의 태그를 콤마(,)로 연결해서 스타일 지정도 가능
header h1, footer h1 { color: blue; } header p, footer p { color: green; }
3. attribute 선택자
태그의 속성을 이용해 선택하는 속성 선택자. 크게 4가지를 많이 사용한다.
html 코드
<h1>Hello World</h1>
<h2 id="test1">Nice to meet you</h2>
<h3 class="test2">Welcome</h3>
<input type="text" placeholder="이름">
<input type="password" placeholder="비밀번호">css코드
h1 {
color: red;
}
#test1 {
color: blue;
}
.test2 {
color: green;
}
input[type="text"] {
border: solid 10px red;
}
input[type="password"] {
border: solid 10px blue;
}- 태그 안에 id와 class를 지정하여 스타일을 적용할 수 있다.
- id는 #을, class는 .을 붙인다.
- 같은 태그가 여러개 사용되었을때, 같은 태그 전체가 아닌 id나 class로 지정하여 스타일을 적용할 수 있다.
id와 class의 차이점
html <h2 id="color-1">ID 선택자</h2> <h3 class="bg-1 font-size-1"></h3> <!-- id는 이름값이기 때문에 하나만 설정할 수 있다. --> <!-- class는 별명. 띄어쓰기를 통해 여러개를 작성할 수 있고, css에서 각 class명에 설정된 값들은 통합되어 나타난다. --> <h4 id="color-2 font-style-2">ID선택자2</h4> <!-- id를 class처럼 여러개를 사용할 경우 모두 적용되지 않는다. -->css .bg-1 { background-color: red; } .font-size-1 { font-size: 50px; } #color-1 { color: red; } /* 잘못된 id선택자↓↓↓↓↓ 모두 적용되지 않는다.*/ #color-2 { color: red; } #font-size-2 { color: 45px; }
- id는 이름값이기 때문에 하나만 설정할 수 있다. 문서안에서도 하나만 사용해야 한다.
- class는 별명. 띄어쓰기를 통해 여러개를 작성할 수 있고, css에서 각 class명에 설정된 값들은 통합되어 나타난다.
- id를 class처럼 여러개를 사용할 경우 모두 적용되지 않는다.
4. Cascading
css 코딩의 우선순위. 원본코드를 유지한 채 덮어쓰기 위해서 사용
html
<h1 style="color: gray;" id="color-2" class="color-1">Hello World</h1>1) 같은 css 스타일이 tag로 지정되어 있을때 : 마지막에 작성된 코드를 기준으로 적용된다.
h1 {
color: red;
}
h1 {
color: blue;
}뒤에 작성된 blue가 적용됨
2) tag와 class로 지정되어 있는 경우: 태그보다 class가 우선 적용된다.
.color-1 {
color: green;
}
h1 {
color: red;
}
h1 {
color: blue;
}class로 지정된 green으로 적용된다.
3) tag, class, id로 지정되어 있는 경우 : tag, class 보다 id가 우선 적용된다.
#color-2 {
color: pink;
}
.color-1 {
color: green;
}
h1 {
color: red;
}
h1 {
color: blue;
}id로 지정된 pink로 지정된다.
4) html에 직접 스타일이 지정된 경우 : css파일에 따로 작성된 것 보다 우선된다.
<h1 style="color: gray;" id="color-2" class="color-1">Hello World</h1>html에 직접 지정되어 있는 gray로 우선 적용된다.
같은 지정이라도 더 자세하게 지정된 css가 우선 적용된다.
<header id="intro"> <div class="container"> <h1>header h1</h1> </div> </header>위의 html에서는 다음의 순서대로 css가 우선 적용된다.
#intro .container h1 { color: pink; } #intro div h1 { color: green; } #intro h1 { color: blue; } header h1 { color: red; }
5. 공간지정에 대한 디자인
<div>
<h1>Nice</h1>
</div>
위의 html에 대해서 다음의 공간을 css로 디자인한다.
div {
width :100%;
height : 300px;
min-width : 600px;
max-width : 800px;
border: 10px red solid;
border-radius: 50px;
background-color: yellow;
}
- widht : px이 아닌 %로 지정할 경우, 부모태그의 크기에 비례하여 나타남
- min-width : 브라우저의 창 크기를 줄여도 최소한의 크기를 유지할 수 있도록 최소 크기를 지정
- max-width : 브라우저 창 크기를 키워도 나타낼 수 있는 최대 크기를 지정
- border-radius : 공간 경계선의 끝을 라운딩하여 표현
6. 글자 디자인
<div>
<h1>Nice</h1>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
</ul>
</div>위의 html에서 글자 디자인을 위한 css코드
div {
color : rgb(123,111,31)
font-size: 80px;
font-style: initial;
font-family: 'Noto Sans KR', sans-serif;
font-weight: 300;
text-decoration: line-through;
text-align: right;
background-color: pink;
}
ul {
list-style: none;
}
/* sans-serif 는 모든 브라우저에서 사용가능하므로 맨 마지막에 항상 넣어주는 것이 좋다. */- color : 색상명, 색상코드, rgb 사용할 수 있다.
- font-family : 브라우저마다 사용할 수 있는 폰트가 정해져 있다. 첫번째 폰트가 사용불가하면 그 다음 폰트가 적용된다.
- 새로운 폰트 적용방법은
- font-weight : 폰트 크기
- text-decoration : under-line (밑줄), line- through가 많이 사용됨. a태그에서 자동으로 생성되는 설정인 밑줄을 없애고 싶다면 none을 입력하면 된다.
- text-align : 글자의 위치를 지정한다. 여기서는 부모태그가 h1이므로, h1의 영역에서만 right, left, center로 움직일 수 있다.
- list-style : ul태그에서 자동으로 생성되는 점을 없애고 싶다면 none을 입력하면 된다.
7. background 속성
<div id="bg"></div>html에서 background 이미지를 넣을 공간을 만든다
#bg {
width: 256px;
height: 256px;
background-color: yellow;
background-image: url(파일명.확장자);
background-repeat: no-repeat;
background-position: top left;
}- background-image : background 공간에 넣을 이미지. 공간보다 이미지의 크기가 작은 경우 바둑판식으로 채워진다.
- background-repeat : 바둑판식으로 채워지는 이미지를 조절할 수 있다. repeat-x, repeat-y, repeat, no-repeat 중 하나를 선택하면 된다.
- background-position : 반복하지 않는 경우, 이미지가 들어갈 위치를 지정할 수 있다.
html의 img태그와 css의 background-image의 차이점
- html의 img태그 : width와 height값을 바꾸어도 비율이 깨질뿐 전체 이미지가 나타난다
- background-image : background 영역으로 지정한 공간보다 이미지가 클 경우, 잘려서 나온다. 공간이 이미지보다 크면 바둑판식으로 반복됨.
- 네이버로고와 같은 정보를 갖고있는 이미지는 html에서 img태그를 이용하여 넣어야한다.
궁금한 점
link 태그를 반드시 head 영역에 넣어야만 하는지 궁금하다
해결방법
팀즈의 질의응답에 게재 (오늘 너무 시간이 늦어서 내일아침에 올릴 예정)
