Web_02 CSS

02
CSS
본 교육자료는 팀 에어 내의 팀원 교육용으로 제작되었음을 알려드립니다. 팀에어 팀원 외 허락을 받지 않은 사람의 무단도용을 일체 금합니다.

HTML CSS JavaScript
+
Back-End
Front-End

인생은 항상
너 맘대로 되지 않는다.
- 노장 디발자 이찬희 옹 (1998 - )
들어가기 전에 보고 가는 CSS를 통한 교훈

Cascading Style Sheets= 꾸며주는 놈

C언어 떠올리면 되요
{ - ; }

object {
property: value;
}
Tag, Id(#), Class(.)

Word = Code
고등학교 조금 안되는 영어실력만 갖고 있으면 되요

상속관계
모르면 삽질 많이 함

나 동생
아빠 삼촌고모큰아빠 작은아빠
할머니 할아버지
흔한 가족관계도

나 동생
아빠 삼촌고모큰아빠 작은아빠
할머니 할아버지
누구의 관점으로 볼것인가?
id (#)
Class(.) -> 엄마 아빠의 아들
할아버지 할머니의 손자

NAME :selector {
property: value;
property-option: value;
}
1
2
3
4
태그 또는 #id이름 또는 .class이름 적고
선택자 필요하면 (순서나 동작 관련) 붙이고
중괄호 열고
CSS 속성들에 대해서 입력하고 세미콜론
중괄호 닫고
<link href=“stylesheet” href=“주소”>
<style> CSS 내용</style>
1
2
HTML에서 둘중 하나 선택해서
<head> 태그 안에 입력
(웬만하면 1번 추천)

NAME
property
property-option
}
1
2
3
4
태그 또는 #id이름 또는 .class
선택자 필요하면 (
중괄호 열고
CSS
중괄호 닫고
<
<
1
2
HTML에서
<head
(웬만하면 1번 추천)
백코딩이여일견
백번의 코딩이 한번 보는 것보다 훨 낫다.

text -align
-decoration
background -color
-size
-position
font -size
-weight
-family
property -option
기본적으로 알아둬야 할
property 들이다.
이것들은 꼭 외워두도록.

width
height
top/bottom
left/right
px
pt
%
em
auto …
color #COLORCODE
rgb
rgba(Alpha)
Color Name(Red, Blue…)
align left
center
right
display inline
inline-block
block
Value
분류기준이 property 일 경우,
아니면 property의 특징에 해당될 때
입력할 수 있는 것들

padding / margin
position
display

padding과 margin 여백의 미 의 차이점
margin
바람을 막아주는 영역을 넓혀줌
(밀어낸다)
padding
솜의 부피가 늘어나 온도가 높아진다
(불어난다)

fixed
position
absolute
스크롤 했을 때 지정한 객체가
움직이냐 안움직이느냐에 따라서 나뉨

display
inline block inline-block
같은 줄에 나란히 각각 다르게 따로 분리 같은 줄에 나란히 놓되
각각 다른 녀석으로 처리.

CSS 방향 설정할 때
시계방향으로 입력한다 (위/오른쪽/아래/왼쪽)
만약 위 = 아래 이고 왼쪽 = 오른쪽이면 2개로 생략
ex) margin: 0 00 000 0000;

자기소개 사이트
완성 해오기
파일 업로드는 서버에 업로드하고,
주소랑 인증샷 찍어서 에어 밴드에.
기간은 수업끝난 날부터 6일 뒤 오후 11시 59분 까지
숙제 1

숙제 2
http://duckduckgo.com (덕덕고)
메인 + 검색결과 화면 만들어오기, 숙제 1과 똑같이.

GET READY
FOR THE
NEXT
LECTURE
(feat. 장문석쌤)

03
Front-end Advance
본 교육자료는 팀 에어 내의 팀원 교육용으로 제작되었음을 알려드립니다. 팀에어 팀원 외 허락을 받지 않은 사람의 무단도용을 일체 금합니다.

Web_02 CSS

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (8)

Web_02 CSS