CSS
1. 글자색과 배경색 변환
index.html
<head>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1{
color : red;
}
</style>
</head>● CSS 에서는 { } (중괄호)를 사용한다.
style 내에서의 color는 '속성'을 의미하고, red는 '속성값'을 의미한다.
속성과 속성값을 입력한 후에는 마지막에 ;(세미콜론) 를 넣어 마무리한다.
<body>
<body>
<h1 style="background-color: pink;">Hello World</h1>
</body>
</html>● 태그 내에서도 style 속성을 추가해서 CSS 문법 작성도 가능하다.
여기서도 마찬가지로 마지막에 ; 을 넣어서 마무리해야한다.
결과
2. 각각의 html, CSS 파일 생성 및 style 적용
※ html언어와 CSS 언어가 혼재된 이 방식은 코드 내용이 많을 경우, 가독성이 떨어지는 큰 단점이 존재함. 그렇기에 html 문서와 CSS 문서를 별개로 만들어 연동하는 방식을 사용한다.
● link 태그를 사용하여 CSS 파일을 연동할 수 있게 한다.
● link rel="stylesheet" : 연동되는 링크의 타입(예-stylesheet)을 알려준다.
● link type="text/css" : 연동되는 타입의 구성을 알려준다.
● link href="" : 연동될 파일의 경로를 입력한다.
※ view - Editor layout - two colums 를 통해 두 파일의 내용을 동시에 볼 수 있다.
※ 변동사항이 있을 경우 html 과 CSS 파일 둘 다 저장해야 한다.
● 정상적으로 입력 및 저장하면 index.html의 'Hello World'의 글자 크기가 80px로 변한 것을 확인할 수 있다.
코드
3. header와 footer에 style 적용하기
● html 문법에서 태그와 태그 사이에 관계를 이해할 필요가 있다.
예시)
ul 기준에서 header 는 부모태그
ul 기준에서 li 는 자식태그
li 기준에서 다른 li 는 형제태그 : 서로 포함관계가 아니기 때문이다.
header 기준에서 div 는 형제태그
header_footer.css
1) 각각의 태그에 style 적용
header {
color : red;
}
h1 {
color : blue;
}
p {
color : green;
}2) 더 세밀하게 스타일을 적용하는 경우
예시 1)
header h1 {
color : blue;
}
header p {
color : green;
}
footer h1 {
color: blue;
}
footer p {
color: green;
}예시 2)
header h1,
footer h1 {
color : blue;
}
header p,
footer p {
color : green;
}코드
4. Selector(선택자)
● type 선택자 : 태크 type에 접근하여 스타일을 적용한다.
● id 선택자 : 태그에 id를 부여하여 특정시킨다. css에서 접근시 # 을 사용한다.
● class 선택자 : 태그에 별명을 부여하여 특정시킨다. css에서 접근시 .(콤마)를 사용한다.
※ 여러 개의 같은 태그에 다른 스타일을 적용하기 위해 id나 class를 사용한다.
● attribute(속성) 선택자 : html 타입 속성 값을 가지고 스타일을 적용한다.
코드
5. id와 class의 차이점
● id는 속성값으로 한가지만 가질 수 있다.
● id는 한 문서에서 하나만 존재해야 한다. id="color-1"이 두 개 이상 존재하면 안된다.
● class는 속성값으로 여러가지 별명을 가질 수 있다.
코드
6. id와 class를 이용한 부모자식관계 코드
● 위에서 배운 id와 class를 이용한 부모자식관계 코드를 만들어본다.
코드
7. Cascading(우선순위)
● CSS에서 원본 코드를 유지한 상태에서, 새로운 CSS 코드를 추가하는 방식으로 디자인을 덮어씌울 때 사용함
● 우선순위 : style 속성 > id > class > tag
● 디테일하게 작성할수록 우선순위가 높아진다.
코드
8. CSS의 여러가지 속성
코드
● width, height : 공간을 만들 때 사용한다. 기본은 투명
width, height에 숫자값+px을 입력하면 고정값(크기 유지)
● width, height에 %값을 입력하면 가변값(크기 변환)이 된다.
가변값을 쓰기 위해서는 기준점을 알아둘 필요가 있다.
● 현재 <body> 태그는 브라우저의 크기와 동일하다.
즉 <div>의 부모태그의 영향을 받는다.
● max-width 는 늘어날 수 있는 상한값을 정한다.
min-width 는 줄어들 수 있는 하한값을 정한다.
※ min,max-height 로도 똑같이 적용 가능함
● border 은 테두리를 만드는 속성
solid 는 선의 종류, 10px 선의 굵기, red는 선의 색깔
※ 순서는 바뀌어도 무방하다.
● 테두리의 모서리를 원형으로 부드럽게 할 때는 border-radius
● font-size : 폰트 크기
font-style : 폰트 스타일
font-family : 폰트 서체, 여러 종류의 폰트를 입력하면 앞에서부터 가능한 폰트를 먼저 적용한다. 서체 적용할 때, 마지막에 sans-serif(모든 브라우저에 적용 가능)를 적는 것이 좋다.
font-weight : 폰트 굵기
● text-decoration : 밑줄 적용, none는 없음
● text-align : 글자 정렬 위치 변경
※ 주의점 : 작성 태그 영역 내에서 움직인다.
● list-style : <li>태그 사용시 나오는 앞의 점 표시를 생성하거나 없애는 속성
● opacity : (0~1 사이 값) 투명도에 영향을 줌
9. background 이미지 속성
코드
● 배경색 넣기, 배경 이미지 넣기
배경 이미지 넣기에서 이미지의 크기가 배경보다 작으면 자동으로 반복해서 채워넣는게 기본설정이다.
● background-repeat 속성값: repeat-x, repeat-y, repeat, no-repeat
● background-position: 배경 이미지 위치 변경
○ html.img 태그와 css.background-image 속성의 차이점
● img 태그는 이미지와 크기 설정이 다르면 비율은 깨져도 이미지가 잘리지 않지만 background-img 속성은 이미지가 잘린다.
● 정보를 담고 있는 이미지의 경우 html.img 태그를 사용해야 한다.
● background-img 는 alt가 없어서 정보를 담을 수 없다.
어려웠던 점
짧은 시간동안에 알아야할 태그나 속성 등이 매우 많아서, 이를 어떤 상황에 적용시켜야 하는지 판단하기가 어려웠습니다.
해결방법
강의를 보고 따라하기에 어려운 점은 없었습니다.
학습 소감
CSS를 통해서 html을 매우 다양하게 꾸밀 수 있다는 점을 알게되어서 좋았습니다. 다양한 태그와 CSS 속성을 어떻게, 어디에서 사용해야 하는지 아직까지 헷갈리는 점이 많습니다.
강의 시간보다 일지를 쓰는데 소요되는 시간이 너무 많이 걸려서, 이를 어떻게 고쳐야 할지 고민해야겠습니다.
