1019 html 마크업(markup) 및 콘텐츠 블럭, CSS 초기
* 코딩 순서
1. 내용 작성
2. 마크업
3. 콘텐츠 블럭
4. CSS 초기화
5. CSS 작성
6. 스크립트 적용
7. 프로그래밍 적용
8. 표준/접근성 검사
9. 수정/보완
1. 내용 작성
내용을 잘 묶어주는 것이기 때문에 듣는 사람에게도 중요함.
★★전체 코딩 단계에서 가장 중요(접근성)
하지만 다음 페이지에 있는 내용을 그대로 긁어와서
미리보기를 하면 보기가 어렵기 때문에
태그를 이용해서 똑같이 만들어주는 작업을 하면 된다.
2. 마크업(실무에선 코딩이라고 함) : 용도나 목적에 맞는 태그 작성
- markup : 해석하다, 의미를 부여하다.
이런 식으로 마크업을 하면
미리보기를 했을 때
다음 메인페이지의 CSS를 제거한 것과
거의 똑같이 만들 수 있다.
(맨 오른쪽이 찐다음)
3. 콘텐츠 블럭
- 모든 태그는 블럭 안에 담겨야 되는데 div 같은 태그 사용하면 됨
- 콘텐츠 블럭에 대한 제목이 h 태그인 것.
(볼 수 있는 사람들을 위한 것)
4. CSS 초기화
5. CSS 작성
6. 스크립트 적용
7. 프로그래밍 적용
8. 표준/접근성 검사
9. 수정/보완
* CSS (Cascading Style Sheet)
웹 페이지의 표현(디자인)을 나타내는 언어
< A B = "C" B = "C" ... ?
selector (선택자, 효과를 적용할 대상 선택)
{ property(어떤 효과) : value(얼만큼) ; B : C ; }
selector { property : value ; property : value ; ... }
- 모든 프로그래밍 언어가 구조가 기본적으로 다 비슷할 수밖에 없음
- html은 안 되지만 css는 중간에 띄어쓰기, 엔터 눌러도 상관 없음.
- css는 내용을 만드는 언어(html)를 꾸미는 것
- 어떤 효과가 있는지 아는 것도 중요
- 효과가 필요한 태그에게 잘 갖다주는 것도 중요!! 효과를 적용할 곳을 선택하는 방법
- selector(선택자) : 효과 적용할 태그를 고르는 자리
- css는 버전이라는 말을 안 하고 레벨이라고 한다.
* 스타일 적용
1. 내부 스타일(인터널 방식)
- <head> 안에 <style> 정의 후 작성
<style type="text/css"
스타일 작성
</style>
<head>
<style type="text"/css> ← 스타일 선언문
selector { property : value }
</style>
"스타일 타입은 텍스트인데
이건 html이 아니고 css야~"
하고 웹에게 알려주는 것
--------------------------------------------
2. inline style
- html 코드 내에 스타일 작성
근데 거의 안 씀.
<a href="#" style="prop:value; prop:value">
============================================
* 외부 스타일 : 스타일 문서 작성(name.css)
selector { property : value } ← name.css 로 저장, 선언문 생략
1. link style
<head> 태그 안에 <link> 태그를 이용하여 적용
<head>
<link rel="stylesheet" type="text/css" href="name.css">
--------------------------------------------
2. import style
<style> 선언문(스타일 선언문) 안에 import를 이용하여 적용
<style type="text/css">
import "name.css";
* 선택자
1. 태그 선택자 (element(tag) selector, 태그 (재)정의 스타일)
- html 태그에 직접 효과 적용
- 해당 태그 작성 시 자동으로 효과 적용
2. 클래스 선택자 (사용자 정의, 우리가 만들어서 쓰는 스타일)
- 중복 가능
.name{효과}
<요소 class="name">
3. 아이디 선택자 (사용자 정의, 우리가 만들어서 쓰는 스타일)
- 중복 불가
#name{효과}
<요소 id="name">
4. 다중 선택자
A, B, C {효과}
ex)
a {color:red}
p {color:red}
div {color:red}
a, p, div {color:red}
여기서 콤마(,)는 더하기 의미다.
★5. 후손 요소 선택자 (descendent selector)
A B {효과}
"A 안쪽에 B 있을 때"
ex)
<a>TEXT</a>
<p><a>TEXT</a><p>
<div><a>TEXT</a></div>
<div><p><a>TEXT</a></p><div>
a {} 네 군데
div {} 네 군데
div > a {} 자식 요소 선택자(div 바로 다음에 a가 오는 곳은 효과 적용해줘~)
div a {} 두 군데(앞쪽에 div가 있는 a는 선택을 하겠다~)
* CSS 폰트 적용
폰트 적용할 때 폰트를 나란히 쓰면
기입한 폰트 모두를 적용한다는 뜻이 아니라,
폰트를 순서대로 적용하고 만약 없으면
기본폰트를 적용하겠다는 뜻이다.
- css 사이즈 구체적으로 써야함.
- 글자색, 배경색, 테두리색 적용할 수 있다.
적용할 땐 색상값을 명확히 써줘야 한다.
색상이름 or 색상코드 (or RGB(A) 세 가지 방법 사용 가능
CSS에서는 주석이 /* */ 이다.
(참고로 html에선 주석이 <!--text-->였다.)
★w3schools.com
여기서 공부할 수 있는데
한번은 들어가서 공부해야 될 거 같긴 한데
사실 안 들어갈 거 같음.
*pseudo class (가상 클래스)
selector:??? pseudo class 가상 클래스
~했을 때
hover 사전적 의미 선회하다, hand over=hover
"처음엔 a 가만히 있다가 a에 마우스를 올리면 꾸며줘~"
외부 스타일시트가 내부 스타일시트보다 나은 이유
1) 내부에 비해 보안성이 있다.
2) 파일 안에 css까지 떠서 용량이 큰 것보다
코드가 더 짧아짐
속도가 빠른 건 외부 스타일시트
따라서 실제로는 외부 스타일시트를 더 많이 씀.
tag한테 적용한 태그는 외부스타일시트로 가능하지만
class는 효과는 따로 적용해야 된다.
*id와 class의 차이
# id=""
이건 css로 사용하지 않음
태그 구분하기 위해 <고유한 이름을 줌>
#이용한 코드는 잘 작성하지 않음
따라서 css에서 스타일을 줄 땐
class 방식으로 쓴다.
꼭 그래야하는 건 아니지만
css에서 .이나 #옆에 있는 건 만들어쓴다.
사용자 정의.
id에 이름을 만들 때는 카멜기법이라고 해서
두 번째 단어를 대문자로 씀!
main + title
id: mainTitle
class
/* 스네이프 기법
class : main_title
Rest in peace Alan Rickman */
※ 정정합니다 ※
알고보니 스네이크(!) 기법이었네요 ^.^;
스네이크 기법
class : main_title
*favicon
favorite icon = favicon
확장자 .ico
일러스트 파일 ico로 변환한 다음에 추가
왕왕 주의사항 : favicon은 로컬테스트 할 때는 안 보임
브라우저에 내 주소 썼을 때만 적용됨.
예습 두 가지
1) 요소, 레벨(css) 조사
2) css 속성 중에서 레이아웃에 관련된 속성들
어떤 것들이 있는지 공부 해올 것