주석
<!--여기 내용은 주석처리됩니다.-->
인라인요소
순수한 인라인요소
span
인라인 블록요소
<img><input>
인라인 요소에서 불가능한
width, height, margin, padding, bording 지정 가능
<div>
<dl>
<dt> 용어란? 블록요소 사용불가
<dd> 용어에 대한 설명 - 블록 요소 및 인라인 요소 포함
input -type-text
<div id ="header">
<div id ="nav">
<div id ="article"> 하나만 있어도 사이트가 되는 컨텐츠, 구분이 명확하여 별도로 분리가 되어도 문제 없는 영역
<div class ="section01">독립적으로 쓰이기에는 좀 애매할 때
<div class ="section02">
<div class ="aside">
<div class ="figure">이미지와 이미지 아래 코멘트가 달린 형태
<div class ="figcaption">
<div id ="footer">
<div> 아무것도 의미가 없을 때 사용, 활용도 높음
절대경로와 상대경로
절대경로 : 특정 소스의 바뀌지 않는 고유의 경로
상대경로
1. 호출 문서를 기준으로 특정 소스의 경로를 인식
index.html → img 폴더 → minion02.jpg
<img src="img/minion02.jpg" alt"미니언즈"/>
; img 폴더 안에 minion02.jpg 파일이 있다.
2. common.css → css폴더 → img폴더 → minion02.jpg
img{background:url("../img/minion02.jpg") norepeat left top;}
코딩 프로그램
메모장 → editplus → brackets → webstorm
brackets : 어도비 사에서 나온 하드코딩용 무료 툴
장점 : 확장성, 가벼운폄, 수많은 플러그인 직접 설치해야 함. 실시간 브라우저를 볼 수 있다.
webstorm : 모두 기능이 내장되어 있어서 무거움 코드 오류에 대해 세세하게 찾아준다.
실시간 기능이 없지만 자동 완성기능이 훌륭함 유료
드림위버 사용 GUI 코드로 입력 금지
Alt = F2 : 브라우저 보기
Tab키 사용하여 들여쓰기 space 4번 효과
Shift Tab : 내어쓰기
F5 새로고침
: 콜론
; 세미콜론
{중괄호}
[대괄호]
img 태그는 하단 라인을 기준으로 쌓인다.
<form>
<input>
value"기본값"
</form>
input 태그는 form 태그로 감싸야함. 실제로 개발자의 영역에서 많이 사용됨
CSS
P {color:red;margin:10px;}
선택자 {속성:속성값;선언}
selector{
속성:속성값;
속성:속성값;
}
CSS 선언방식
1. 인라인방식
HTML 문서 내 요소에 직접 스타일을 적용하는 방법
<p style="color:blue;">
2. 내장방식
<head>
<style type="text/css">
p{color:blue"}
</head>
3. 링크방식
<head>
<link rel="stylesheet" type="text/css">
</head>
4. @import 방식
스타일 시트의 상속
상속이란? 하나의 태그가 다른 태그를 포함할 경우 그 포함된 태그는 포함하는 태그 스타일의 영향을 받는다. 이를 스타일 시트의 속성을 상속받았다고 한다.
h1{
font-size:16pt;
fonft-weight:normal;
color:green;
}
h2{
font-size:9pt;
fonnt-weight:normal;
}
h1은 초록색 글씨에 16pt, 굵기는 보통
h2는 글자색 지정하지 않아도 h1의 초록색 글자는 상속되고 글자 크기는 지정한대로 9pt이다.
h2를 벗어나면 다시 h1의 속성을 가지므로 글자 크기는 16pt가 된다.
독립적으로 적용되는 스타일 시트
상속을 무시한 독립적 스타일 시트
'자기 계발 > CSS와 JAVA, HTML' 카테고리의 다른 글
| 선택자 조합 (0) | 2015.12.10 |
|---|---|
| CSS 선택자 (0) | 2015.12.10 |
| 웹표준 퍼블리싱 이론 수업 첫째날 (2) | 2015.12.08 |
| Flash 플래쉬 소개 (0) | 2015.10.10 |
| 링크 지정 스타일 시트 (0) | 2013.01.03 |