.png)
UX와 UI
UX : User Experience - 유저 경험에 의한 디자인(ex. 오른손잡이)
UI : User Interface - 사용자가 사용할 시각적인 인터페이스
글씨 색상
1. <h1 style="color: red;">제목</h1> : html 속성에 직접 삽입
2. style 속성 생성 - <style>h2{ color: yellow;} </style>
3. 외부에 css 파일 작성후 링크 2번 혹은 3번으로 주로 사용
CSS 적용
구조 : p{ color : red; }
CSS 선택자 : p
CSS 상속: { }
세부 선택자 가능 : div p{ } - div 안의 p만 적용
Class & ID
class는 여러개 존재할 때 사용 , style에서는 .class로 지정
id는 1개만 존재할 때 , style에서는 #class로 지정
다양한 Style
바탕색 : background_color
문자 배치 : text-align
이미지 삽입 : background-image
background_repeat : no-repeat - 여백 사진 반복 x
background-position - 위치
background-size : cover - 사진에 맞게 박스 조절
border-radiuse : 0~50% - 박스 꼭짓점을 둥글게
Border/Margin/Padding
border : 박스 생성
padding : 박스 안쪽 여백 (박스가 커짐)
margin : 박스 바깥쪽 여백
세가지 속성 모두 top/bottom/left/right로 개별 지정 가능
2가지 사용시 상하 / 좌우 , 4가지 사용시 상 / 우 / 하 /좌 순서로 사용
ex) border : 5px(상하) 10px(좌우) ex) border : 5px(상) , 6px(우), 7px(하)
Block & Inline
block : 가로 전체차지, 크기 지정 가능 - div , h1
inline : 쓰인 영역만 차지, 크기 지정 불가능, 콘텐츠 크기에 맞게 크기 설정 - span , a
inline-block : 쓰인 영역만 차지하나 크기 변경 가능 - button, input
Block 정렬
margin-left : auto; - 오른쪽 끝
margin-right : auto - 왼쪽 끝
margin : 0 auto - 가운데
Inline 가운데 정렬
정렬하고자 하는 자식의 부모에 text-align:center을 준다.
Display
display : 해당 태그가 화면에 어떻게 나올지 정의하는 프로퍼티(css)
display : none - 안보이게 했다가 필요시 보이게 하기 위해
Flex
flex : 메인축을 기준으로 정렬 , flex-container : 부모요소 / flex-item : 자식요소
flex-direction:
row(기본값) 요소들을 row로 정렬
column 요소들을 column으로 정렬
row-reverse row의 반대, 즉 오른쪽에서 왼쪽으로 정렬
coulmn-reverse column의 반대, 즉 위에서 아래로 정렬align-items: 수직축을 방향으로 아이템을 정렬
center 요소들을 컨테이너의 세로선 상의 가운데 정렬
flex-start(기본값) 요소들을 컨테이너의 꼭대기로 정렬
flex-end 요소들을 컨테이너의 바닥으로 정렬
baseline 요소들을 컨테이너의 시작위치에 정렬
stretch 요소들을 컨테이너에 맞도록 늘림justify-content: 주축 방향으로 아이템으로 정렬
flex-start(기본값) 요소들을 컨테이너의 왼쪽으로 정렬
flex-end 요소들을 컨테이너의 오른쪽으로 정렬
center 요소들을 컨테이너의 가운데로 정렬
space-around 요소들 "주위"에 동일한 간격을 둠
space-between 요소들 "사이에" 동일한 간격을 둠flex-wrap : wrap 자동으로 알맞게 정렬(크기 보존), 부모가 담을 공간이 부족할 때 줄바꿈을 하게 됨
Position
position : static - 기본값
position : relative
position : absolute - 자신의 가장 가까운 부모중, static이 아닌 "부모를 찾아간다" , 요소는 inline-block으로 변경된다.
