HTML STUdY
1강
1. Web이란?
사전적 의미로는 거미줄이라고 한다.
( 전 세계의 컴퓨터들을 연결하여 정보를 공유하는데 목적을 두고 있다. )
1개 이상의 사이트가 연결되어 있는 인터넷 서비스의 한가지 형태를 말한다.
도메인
= 프로토콜 + IP + PORT + Information path
프로토콜 : 네트워크상에서 약속한 통신규약
( 종류 : http, ftp, smtp, pop, dhcp )
IP : 네트워크상에서 컴퓨터를 식별할 수 있는 주소
DNS : IP 주소를 인간이 쉽게 외우도록 맵핑한 문자열
Port : IP 주소가 컴퓨터를 식별할수있게 해준다면, Port번호는 해당컴퓨터의 구동되고 있는
프로그램을 구분할 수 잇는 번호
2. HTML이란?
Hyper Text Markup Language의 약자로 웹 문서를 기술하는 언어
웹문서를 표현하기 위해 태그들로 구성되어 있다.
3. CSS이란?
Cascading Style Sheets의 약자로 HTML문서를 디자인적으로 예쁘게 만들어
정보 전달을 좀더 효율적으로 하기 위해 만들어진 문서
HTML은 정보를 가지고 있고, CSS는화면상의 레이아웃 등을 컨트롤 하는 문서
1. 태그란?
HTML 태그들은 기본적으로 시작 태그와 종료태그가 쌍을 이루고 있다.
Ex) <div> </div>
HTML은 태그로 구성되어 있다.
태그에는 이름과 속성이 있다.
( 태그 = 이름 + 속성 + 값 )
H1 : 글씨 크기 태그
P : 문단을 구성하기 위한 태그
Br : 줄바꿈 태그
A : 페이지를 이동하고 싶을때 쓰는 태그
I : 글씨 기울임 태그
Sup : 위쪽으로 글씨 작게 해주는 태그
Ins : 글씨 밑줄 태그
Del : 글씨 가운데 줄 그어지는 태그
1. 리스트 태그 ( ul, li, ol )
Ul : 점으로 리스트를 나타내는 리스트 태그
Li : 리스트를 나타내는 하나하나의 아이템 태그
Ol : 앞에 숫자가 매겨 지는 리스트 태그
Dl : 리스트 타입의 문서 레이아웃을 생성
Dt : 리스트의 상단 타이틀 역할을 함
Dd : 리스트 아이템을 만들때 사용
2. 표를 나타내는 태그
Table : 표형식의 레이아웃을 만드는 태그
Tr : 하나하나의 행을 나타낸다
Tb : 하나하나의 열을 나타낸다
Rowspan : 행을 합쳐주는 태그
Colspan : 열을 합쳐주는 태그
3. 이미지를 나타내는 태그
Img : 웹사이트에서 이미지를 출력해 주는 태그
( ex) Img src="경로" )
Alt : 해당 경로에 이미지가 없는 경우 글 문구를 나타내주는 태그
4. 사운드를 출력하는 태그
Audio : 웹사이트에서 사운드를 출력해 주는 태그
Ex) audio src="경로"
Controls : 컨트롤러가 보이게 할 수 있는 태그
Autoplay : 자동 실행 시키는 태그
Loop : 반복시키는 태그
Ex) controls="controls"
( 태그를 실행 시키고 싶다면 그대로 값을 넣어주면 된다. )
1. Video : 동영상을 출력하는 태그
Ex) 방법은 두가지가 있다.
<video controls="controls">
<source src="1.mp4" type="video/mp4" />
</video>
<video src="1.mp4" type="video/mp4"controls="controls" >
</video>
한번에 작성을 하거나 나누어서 작성하는 방법이 있다.
2. Form 태그
Action : 서버쪽의 주소를 적어주는 태그
Method : 정보가 가는 방식을 정하는 태그
get방식 ( 도메인 주소 뒤에 내가 입력한 값이 붙어서 서버로 전송 되는 방식 )
post방식 ( 정보가 암호화가 되어서 서버로 가는 방식 )
Input type을 적어서 각 속성에 맞는 방식을 사용한다.
( Text, password, radio, checkbox, file )
Name : 각 속성에 따른 이름을 정하여 준다.
Radio, chechbox = name이 같다. value를 다르게 주어서 구분한다.
Textarea : 자기소개 같은 긴 글을 작성할때 사용함
Select : 드롭다운으로 선택할 수 있는 태그
Option : 하나하나의 아이템 태그
( select에 multiple 속성을 넣을 경우 다중 선택가능 )
3. 레이아웃 구성 태그
Div : block으로 잡히는 태그
Span : line으로 잡히는 태그
Table의 한계를 느껴 나온 Div태그
1. Div태그를 이용한 방법
Div 기본 속성은 블럭이다.
거의 홈페이지는 Div를 4개를 사용하여
헤더, 메뉴, 본문, 포터(회사 정보가 들어가는 부분)
이렇게 나뉘어서 만들어진다.
2. 시멘틱(semantic)을 이용한 레이아웃
Header, Nav, Section, Footer
이렇게 네가지로 나뉘어서 작성을 한다.
Div를 사용하지 않고 네가지의 태그를 사용하여 첫번째 방법과 같이
사용을 한다.
CSS : 특정 레이아웃의 모양을 준다거나 속성 값을 주어 변경하는 것
선택자란?
특정 태그를 선택하여, 해당 태그의 속성을 변경하는 목적으로 사용 된다.
html문서에 같이 녹여져 있을 수도 있고 css 언어를 별도로 뽑아서
html에 링크를 걸어서 사용할 수도 있다.
Head 태그 안에 style태그를 만들고 그안에 선택자와 속성값을 넣어서
사용 할 수 있다.
Tag선택자란?
특정태그를 선택하여 CSS속성을 적용함.
전체 속성을 주고 특정 태그를 사용하여
개별적으로 속성을 주어 혼합하여 사용 할 수가 있다.
Id(#)와 class(.)
태그의 id와 class를 이용하여 CSS속성을 설정 할 수 있음
id를 이용하여 header,content,footer을 나눠준다.
div를 두개 사용하면 block형태이기에 바로 밑으로 나와야되지만
Float:left를 사용하면 공간이 있을때 div 두개가 옆으로 두개 붙어서 나온다
대신 겉에 감싸는 div에는 overflow:hidden을 줘야된다.
Tag, id, class 혼합 사용
Tag, id, class를 혼합하여 CSS에서 속성을 설정 할 수 있음
예를 들어 ul안에 li에 class="menu" 인 것들에 대해서 속성을 주려면
Ul li.menu{
}
이런식으로 전체적으로 속성값을 줄 수 가 있다.
속성 선택자
Tag의 속성을 선택하여 CSS의 속성을 설정 할 수 있음
예를 들어 input에 속성을 주려면
Input{ } 을 주면 되지만
input안에 text나 password같은 타입을 각각 주려면
Input[type=text]{ } 이런식으로 주려고 하는 타입에
속성값을 줄 수 가 있음
대괄호를 이용하여 구분지을 수가 있음
후손 및 자손 선택자
Tag의 속성을 선택하여 CSS의 속성을 설정 할 수 있음
예를 들어 div li { }를 보면
div안에 모든 li들을 선택한 것을 의미한다.
이것을 후손 선택자라고 한다.
예를 들어 div >h1 { }를 보면
div안에 바로 밑에 있는 것을 표현 할때는 > 이렇게 표현해 준다.
그러면 div안에 모든 h1이 아닌 바로 밑에 있는 h1만 선택하여 준다.
이것을 자손 선택자라고 한다.
동위 선택자
태그의 동등한 위치를 판단하여 CSS 속성을 설정 할 수 있음
동위 선택자( +, ~ )
예를들어 h3이랑 div가 같은 위치에 있을때
H3~div{ } 를 사용하면 h3과 div가 같은 위치에 있으면 전부 선택이 되어
속성값들이 적용이 된다.
H3+div{ } 를 사용하면 동등한 위치에서 바로 아래에 있는 div만 선택이
되어 속성값들을 적용 하게 된다.
이러한 방법도 있지만
Id="title"을 준 상태에서도 사용이 가능하다.
예를 들어 #title~div를 사용하면 title과 동등한 div들에게 속성 값을
적용 할 수가 있다.
반응 선택자
마우스의 반응에 따른 속성을 설정 할 수 있음
예를 들어 li:hover{ color:blue; } 라고 속성값을 주게 되면
li에 마우스를 올리게 되면 파란색으로 글씨가 바뀌는 것을
볼수가 있음
Margin: 0 0 0 0; 이렇게 값을 주면 순서대로
위 오른쪽 아래 왼쪽 이런식으로 값을 주는것이 된다.
상태 선택자
상태에 따라서 CSS 속성이 변하는 설정을 할 수 있음
Focus, enabled,disabled가 있으며
예를 들어 input : focus{ } 이렇게 사용을 할 수가 있다.
구조 선택자
구조에 따라서 CSS속성이 변하는 설정을 할 수 있음
Li:nth-child(2n+1){ } 이렇게 사용되는데 n=0이라서
1번째부터 값이 들어간다.
Li:firtst-child, li:last-child는 처음과 끝을 지정하는 것이다.
Border-radius는 테두리의 둥근값을 주는 것으로
Border-radius: 0 0 0 0; 이렇게 주면
좌상단 우상단 우하단 좌하단 이런식으로 값을 줄 수가 있음
Li:first-of-type, li:last-of-type 라고도 표현을 할 수가 있음
Float:left 속성을 위쪽에서 주었을 경우
그대로 그값이 남아서 밑에도 적용이 될 수 있기 때문에
Float:left가 없이 깔끔하게 사용하기 위해
Clear:both;를 사용하여 깔끔하게 정리하고 자리를 배치 하면 된다,
문자 선택자, 링크 선택자, 부정 선택자
문자 선택자
특정 문자 또는 문자열을 선택하여 CSS속성을 설정 할 수 있다.
first-letter or first-line 같은 것이다.
first-letter 첫번째 글자 예를들어 2012면 2가 된다.
first-line 다음 행으로 넘어가기 전의 그줄이다. 2012면 2012 전부 됨.
링크 선택자
문서에서 링크 되어 있는 문자를 선택하여 CSS속성을 설정 할 수 있다.
#content a:after{
content: '='attr(hred);
}
를 사용하면 a를 뒤에 붙인다는 뜻이다.
content 뒤에 위의 내용 즉 하이퍼링크를 붙여준다.
부정 선택자
나를 제외한 모든 태그에 CSS 속성을 적용한다.
#content li:not(.fa){
backgroud:black;
}
li에서 class가 fa가 아닌것들에 대해 색깔을 black을 준다는 것이다.
CSS3 단위
CSS3에서 자주 사용되는 단위
px과 % , em 을 사용한다.
기본 16px을 가지고 있고 em으로 환산하면 1.0em이다
font-size: 3가지를 뒤에 줄 수 있는데 ( 16px; , 50%, 1.0em )
이렇게 줄수가 있다.
url() 속성
background-img 속성의 속성값으로 많이 사용된다.
이경우 배경의 이미지 경로를 나타 낸다.
background-image:url('경로');
중요한 속성
display 속성
화면에 어떻게 보이는지를 설정하는 속성이다.
다양한 속성값이 있다.
block => div ( div를 쌓아가면 다음 행으로 자동으로 내려간다.)
inline => span ( 별도의 p, div, li를 주지 않으면 옆으로 붙여간다.)
inline-block 옆으로 정렬이 되기도 하지만 블럭이 가지고 있는 높이의
속성의 값을 가지고 있는 것이다.
inline 속성을 주면 높이 값이 들어가지 않는다.(상 하 값이 적용 안됨)
visibilty 속성
display 속성의 none속성값과 비교
display에 none을 두면 아예 사라지지만
visibilty에 hidden을 두면 자리는 그대로 가지고 있지만
보이지만 않을 뿐이다.
opacity속성
투명도를 조절하는 속성이다.
opacity:0.4;
이런식으로 값을 주어서 투명도를 조절해 준다.
margin 및 padding 속성
margin
바깥으로 주는 속성은 margin으로 여백을 준다.
padding
안으로 주는 속성으로 padding으로 여백을 준다.
box-sizing속성
box-sizing속성을 이용하면 전체 사이즈의 크기를 변경할 수 있다.
높이 너비 크기를 준거에 border값을 주면
border값만큼 사이즈가 늘어나게 된다.
하지만 box-sizing : berder-box;
를 주면 박스 안에 태두리가 들어간다. 박스 사이즈 밖에
테두리가 설정되지 않는다.
border의 속성
width, style, color의 속성을 주는데
이것을 border: 크기 속성 컬러
이런식으로 사용을 한다.
background-img 속성
이미지를 불러 왔을때 size속성에 %를 주면 크기가 줄어든다.
줄어든 상태에서 나열이 된다.
repeat속성을 사용하여서 no-repeat;를 주면
한번만 이미지가 나오게 된다.
사용하지 않으면 자동으로 반복으로 나오게 된다.
font-family, font-size속성
글꼴 및 폰트 사이즈 관련 속성
font-family: 글꼴, 글꼴, 글꼴;
이렇게 여러가지를 주는 이유는 내가 개발한 것에 글꼴이
사용자가 없을 경우 1 2 3 순위로 적용하도록 하게 하기 위해서
여러가지의 글꼴을 미리 설정하여 준다.
style, weight, line-height속성
font의 style을 적용시킬 수있다.
weight는 bold나 수치를 줌으로써 두껍게 할 수 있다.
line-height는 행간격을 조절하는 속성이다.
height와 line-height를 같이주면
박스안에 글자를 세로(높이)가운데 정렬 시킬수가 있다.
position속성
absolute속성값을 줌으로써 위치를 설정할 수 있다.
왼쪽위를 기준으로 absolute를 주고 그상태에서 top과 left를 줌으로써
박스를 가져다가 놓을 위치를 잡아 줄 수 있다.
static속성
기본적으로 absolute를 주지 않으면 static속성을 가지고
block형태로 떨어져서 밑으로 쌓여져서 간다.
relative속성
바로 위의 박스에 영향을 받는 것이다.
z-index:값;
깊이를 주는 것으로 겹칠때 어떤것을 더 위로 올려 보여줄 것인지
설정 할 수 있는 속성이다.
Float 속성
Positon 속성과 함께 요소의 위치를 설정하기 위한 속성입니다.
Div를 두개를 썼을때 두개를 float:left를 주면 공간이 있다면
옆으로 두개가 붙어서 생성이 된다.
대신 앞 강의에서 써놨던거 처럼 이 두개의 div를 묶고있는 div에는
Overflow:hidden을 주어야 값이 먹힌다.
Float:right를 줄때는 첫번째 right를 준 div가 오른쪽에 붙고 다음
div가 붙는다. 즉 div2 div1 이렇게 붙는다.
첫 div에 margin: 0, auto;를 줄어서 가운데 정렬을 시킬수가 있다.
안의 글자를 가로 세로 가운데 놓기 위해
height와 같은 값을 line-height를 같게 준다.
Gradient 속성
2가지 이상의 색을 표현할때 사용되는 속성
사이트에서 원하는 색상을 조합해서 사용 할 수가 있다.
그라데이션을 넣을때 background 뒤에 밴터프리픽스를 넣어주어야 한다.
사이트에서 나온 값을 복사하여서 그대로 붙여놓고 사용하면 된다.
그러면 원하는 그라데이션 색을 배경으로 줄수가 있다.
웹 페이지 개요
다양한 웹사이트를 경험하고 있다.
하지만 수많은 웹사이트의 레이아웃도 전체적으로 거의 비슷한 레이아웃을
가지고 있다.
기본적으로 배너가 들어가는 헤더 부분
컨텐츠가 들어가는 중간부분
회사의 내용이 들어가는 푸터 부분
이렇게 3가지로 크게 나뉘어 질수가 있다.
Yahoo 홈페이지를 통한 예시
body로 전체적으로 폰트와 margin:0;을 준다.
header를 만들고 역시 이곳도 margin:0을 줌으로써
불필요한 간격을 없애준다.
그리고 width:99%로 잡아준다.
반복이 되는 메뉴들은 대부분
Ul li // ol li 로 만들어 준다.
Content 에서 여러개의 div를 사용해서 만들게 된다.
그렇게 될때에는 구조 선택자로 사용하여
하나씩 속성 값을 준다. Nth-child(1)부터 하나씩 숫자를
늘려가면서 값을 넣어준다.
이렇게 큰덩어리를 먼저 만들어 놓고 그안에 원하는 것을
만들어서 주면 된다.
일반적인 쇼핑몰 레이아웃
Gnb 와 lnb로 이루어져 있다.
gnb는 최상위 메뉴이고
lnb는 중간 메뉴바 이다.
기본적으로 모든 태그에 대해서
속성값을 0으로 줘서 초기화 해준다.
예를 들어 * { margin:0; padding:0; }
이런식으로 정리하기도 한다.
하이퍼링크를 할때는 li 목록에 속성을 주는 것이 아니라
A 태그에 속성 값을 주는데 display:block을 주고
페딩을 줌으로써 마우스를 가져 놓았을때
손가락 모양이 글씨위에 놓은게 아닌 근처에 갔을때
나타날수 있게 해주는 방법이다.
Box-sizing : border-box;를 줘서 선 테두리를
안쪽으로 주면 딱맞게 설정이 가능하다.
웹폰트
인터넷만 연결되어 있다면, 다양한 폰트를 웹사이트 방문자에게 제공할 수 있도록
고안된 폰트가 웹폰트 이다.
시작할때는 style 안에
가장 먼저 * { margin:0; padding:0 }을 주면서 시작을 한다.
Float:left 속성을 주기 전에는 그 위에 부모에 overflow:hidden을
주어서 초기화 시킨다음에 준다.
하이퍼링크를 주기 위해서는
<a href="#none">목차</a>
이거에 다른 값은 a 에다가 값을 넣어주면 적용이 된다.
구글에서 지원하는 글꼴의 주소를 가지고 와서
하이퍼 링크를 통해서 적용 시킨다.
대신 네트워크가 된다는 가정하에 사용 할 수가 있다.
스마트폰 레이아웃 보기1
Viewport
웹브라우저의 html 문서에 특정한 정보를 나타내기 위한 태그로 meta태그가 있다.
모바일 웹브라우저에서는 브라우저의 화면 설정과
관련된 정보를 제공하기 위한 방법 뷰포트 meta 태그를 사용한다.
뷰포트 속성들
Width : 너비
Height: 높이
Initial-scale : 초기 확대 비율
User-scalable : 확대 및 축소 가능 여부
Minimum-scale : 최소 비율
Maximum-scale : 최대 비율
Width = device-width : width는 디바이스의 가로 싸이지를 그대로 가져간다는 뜻이다.
Initial-scale = 1.0 : 화면 처음 사이즈를 설정한다.
User-scalable = no : 손가락으로 화면 사이즈 조절 가능 여부를 적어준다.
이러한 것을 맨위에 meta 태그로 작성하고 시작을 해야 된다.
Zpat.info => 무료 호스팅 사이트 주소
Header 제작
toggle을 사용하여 메뉴를 숨기고 꺼내는 기능을 사용한다.
Display : none;으로 처음에 안보이게 한다.
토글을 선택할때는
Toggle:checked => 토클이 체크가 되어 있을때는 display:bolck;으로 보이게 한다.
토글을 사용하기에 누르는 버튼에 다가
For=="toggle" onclick="" 이렇게 준다.
모바일 헤더는 토글과 라벨을 이용해서 작업하는 부분이라서 힘들고 어렵다.
스마트폰 레이아웃 보기2
html에서는 content라 명을 하지만 스마트폰에서는
section이라고 명을 하여 내용을 넣어주는 부분을 만들어준다.
Background-repeat을 사용하여 배경을 이미지로 넣었을때
반복되지 않게 만든다.
Background-position-x:-600px;
배경 이미지를 x축을 기준으로 이동시켜주는 방법이다.
Id 값안에 class가 있을때 속성 값을 주려면
#id값 .class값 {} 이렇게 주면 된다.
스마트폰 레이아웃 보기3
FTP서버를 이용하여 스마트폰에서 보이는 자료를 올려주고
업,다운로드를 이용하여 수정할때마다 즉시 고쳐준다.
강의에서는 파일질라를 사용함.
앱페이지를 만들때도 초기화 코드를 이용하여
처음에 설정을 하고 시작 하면 된다.
Display:inline-block은 inline이면서 block의 속성을 가진 것을 뜻한다.
absolute를 주려면 바로 위에 감싸고 있는 태그에
relative를 먼저 준다.
relative를 기준으로 거기서 좌우 px만큼 거리를 떨어 뜨릴수가 있다.
a태그에 이미지를 줄 때 사용 하면 된다.
White-space:nowrap; overflow:hidden; text-flow:ellipsis;
내용이 폭보다 길때는 점점점.. 처리를 해주는 속성이다.
테블릿 레이아웃
헤더 제작 및 네비 제작
Min-width 값을 주면 최소값을 지정해 주기 때문에 웹페이지를 줄여도 내려가거나 겹치지 않는다.
Line-height를 이용하여 text 중앙 정렬 시키기
링크 영역을 확장하기 위해서 display : block을 준다.
레이아웃이 깨지기 않기 위해서 배너를 만들때 min-width값을 주는것을 기억하기
태블릿 레이아웃
컨텐츠 부분의 내용을 작성하는 방법
전체에 width값을 100%으로 주고 시작을 한다.
왼쪽 div에서 width 250px을 사용하기에 컨텐츠에서 margin-right: -250으로 안쪽으로 내용물을
땡겨 100%을 맞추는 방법이 있다.
비율을 이용하여 만들어서 사용해야 된다.
그런데 글자가 브라우저 밖으로 나가게 하지 않게 하기 위해서 다시
Padding-right:250px을 준다. 그러면 글자가 나가는 것을 막아줄 수 있다.
이미지에도 float:left를 주면 그다음 태그가 바로 옆으로 붙어준다.
li안에 이미지들을 넣고 마지막 li에 div를 넣어서
4개가 수평구조로 내용이 나오게 하는 방법을 사용함.
대신 ul에서 overflow:hidden을주고
li값이 float:left를 주면 수평이 된다.
이미지들이 가지고있는 width 값 만큼 글자div에 margin-right: - width값을 준다
페이지를 줄였을때 글자가 밖으로 튕겨나가 안보이게 하는 것을 방지하기 위해서 그렇게
주는 것이다. 브라우저가 넓을때는 상관이 없지만 좁을때는 문제가 되기 때문이다.
푸터에서는 글자를 가운데 정렬하기위해
Text-align : center을 줄어서 가운데 정렬을 하고
위와 아래의 간격은 padding을 이용하여 알맞게 준다.
고정 바에 대한 강의
Position : fixed를 주어서 어디서든 고정되게 설정을 한다.
여기에 속성으로는 top left right height를 줌으로써 고정될 높이를
지정하여 준다.
중점 내용으로는 많은 ul li가 있기 때문에 > 이걸 이용하여 css을 주어야
여기저기 속성값들이 먹히지 않는다.
A herf의 target속성에는 blank => 새로운 창이 뜨는 속성
Selft => 내가 보고있는 창에서 링크 창이 뜨는것
Top => 나를 감싸고 있는 프레임에서 떠주는 것
Parent => 내 부모 프레임에 떠주는 것
Css 변형
변형 기본
html태그 요소의 속성(형태, 색상) 등이 변경될 때, CSS3 변형 속성을 적용하여 변화하는 단계에
움직임(애니메이션)을 적용 할 수 있다.
Transition-duration: 3s
변형되는 시간을 주는 속성이다.
Hover 마우스 올렸을 시
Active 마우스로 클릭하였을 시
Border-radius를 주면 테두리에 둥근 모양을 px단위로 줄수있다.
Transition-delay : 2s 마우스를 대고 2초 뒤에 변형이 되게 하는것
Transition-timing-function : ease-in/out => 점점 빠르게/느리게 하는 효과를 준다.
애니메이션
키프레임과 애니메이션 속성 알아보기
키프레임을 이용한 애니메이션
@keyframes ani1{
From{width:100px;}
To{width:500px;}
}
width가 100에서 500으로 늘어나는 애니메이션
@keyframes ani1{
From{ left:0px; top:110px;
Transform:rotate(0deg);}
To{ left:500px; top:610px;
Transform:rotate(360deg);}
}
왼쪽에서 오른쪽 밑으로 360도 회전하면서 내려오는 애니메이션
Animation-name:
Animation-duration:2s;
Animation-iteration-count:infinte;
Animation-directio:alternate;
속성에는 위의 4가지가 있다
밴더프리픽스 태그는 모든 브라우저에서 볼수 있게 해주는 태그이다.
스타일에 매번 태그를 넣어줘야되는데 그러면 코드가 많아지기 때문에
Prefixfree.min.js라는 파일을 다운받고 폴더에 넣어서 링크걸어 불러와서 사용하면 된다.
CSS 변환 ( transform )
변환 속성
과거 javascript에서만 구현이 가능한 변환 기능을 이제는 css3에서도 구현이 가능하다.
Translate(x,y) 이동
Scale 크기
Skew 기울기
Rotate 회전
Transform : scale, skew, rotate 등 한번에 속성을 줄수가 있다.
From {
}
To {
Transform : scale, skew, rotate
}
위와 같이 주면 된다.
CSS3 규칙
Css 파일 분리
@import 규칙
@media 규칙
Css 파일 분리
CSS를 html 문서에서 분리하여 별도로 관리할 수 있습니다.
<link rel="stylesheet" href="title.css" />
이러한 링크 방법으로 여러개로 나누어서 분리할 수 있다.
@import 규칙
CSS3에서 '@' 시작하는 키워드들을 규칙이라고 합니다.
이전에 @keyframe 규칙을 살펴본 적이있다.
1.link를 대신 할 수 있습니다.
2.<style> 태그 내부에 위치해야 합니다.
3.<style> 태그 상단에 위치해야 합니다.
link와 @import의 다른점은 style태그 안에 있냐 없냐이다.
link는 밖에 있어야된다.
<link rel="stylesheet" href="title.css" />
이것을
<style>
@import url('title.css');
</style>
이렇게 사용 할 수 있다.
@media 규칙
link태그에 media 속성을 이용하여 상황에 따른 CSS를 적용 할 수 있다.
미디어 종류
All , aural , braille , handheld , print , projection , screen , tv , embossed
<link rel="stylesheet" href="print.css" media="print" />
브라우저에 사용하다가 print를 할때는 위의 링크를 사용한다고 지정하여 쓸수 있다.
반응형 웹
Media 규칙을 이용하여 반응형 웹을 만든다
@media 규칙
link태그에 media 속성을 이용하여 상황에 따른 CSS를 적용 할 수 있다.
@media screen and (max-width:767px;){
#wrap { width:100%; }
#content_wrap #content p { font-size:3em; font-weight:blod; }
}
위와 같은 방법으로 width 사이즈가 변경될때
다른 속성들을 주면서 반응형 웹을 만들수 있다.
스마트 폰 , 테블릿 , pc 이렇게 여러 종류로 속성값들을 줄 수 있다.
그리드 레이아웃 -1
플러그인을 이용한 그리드 시스템
전체적인 레이아웃을 개발자가 청므부터 만들어야 했다.
수고를 조금 줄여주고자 개발된 플러그인이 잇다.
몇가지 계산과 규칙만 알고 있다면 개발자는 쉡게 전체
레이아웃을 만들수 있다.
다운 받는 사이트 주소
Column grid와 width 값을 주어
전체 width 값, 실제 사용되는 width값 등을
눈으로 보고 작성할 수 있다.
나눠진 column들을 이용하여 합쳐서 필요한 부분을
사용하여 준다.
사용방법에 대해서는 여러번 강의를 봐야 될듯
그리드 레이아웃 -2
가변형 그리드 시스템 제작
28강 처럼 width를 딱 정해서 몇 px로 정하는게 아닌
%로 줄이거나 늘리고 할때 값이 자동으로 변해서 맞춰지게
하는 그리드 이다.
간격을 %로 계산을 하여 width에 80%면 각 간격을 2%로 주고
나뉜 칸에 계산을 해서 더해주면 된다.
그리드가 실제 10개를 나누면 하나당 10%가 아닌 하나당8%로
나눠주고 간격을 2%로 해서 작성을 해주면된다.
Margin-left : 2%; 이런식으로 값을 줄수가 있다.
웹문서 제작 팁
웹문서를 제작하면서 반드시 알아야할
내용은 아니지만 알고 있으면 편해지는 툴
편집툴
하위 버전 브라우저 테스트 툴
많은 양의 더미 텍스가 필요한 경우
단위 변환
전체적인 레이아웃을 제작할 때
필요한 가상 이미지
W3C (월드와이드 웹 컨소시엄, 활동사항, 기술동향 등의 정보 제공)
다양한 디바이스 환경에 어울리는 미디어쿼리
웹 접근선 관련 권고되는 사항
W3schools
Html 정보 사이트로 html, xml, 브라우저, 서버 스크립트에 대한
정보 제공
색상 정보 제공 ( colorpicker.com )