웹디자인 14:00~~
여행을 좋아하는 사람들 + mbti
1.처음 회원가입할때 mbti 입력
2.가고싶은 여행지
3.캐릭터 p, j
4.지도 동선
5.익스트림 스포츠 및 미션
- 익스트림 스포츠 일러스트 사진, 미션창
6.다녀온 사람들 후기
7.숙소 예약 창
8.항공권 예약창
코딩 16:00~~
블록 : 박스 너비, 높이
위에서 아래 채우기
인라인 : 글자 좌우
인라인-블록 : 좌우
너비 높이 지정
display : 변경이 가능
none : 화면에 표시되지 않는다.
flex : 박스
내부에 있는 자식요소를 아이템 배치
효율적으로 정렬
gird
내부에 있는 자식요소를 아이템 배치
효율적으로 정렬
2차원 3*4
inline - flex
내부 자식요소가
인라인처럼 배치
inline - grid
내부 자식요소가
인라인처럼 배치
많이 쓰는데, 어려운 것들 위주로
정리를 해주는게 좋다.
border
테두리 영역
크기, 종류, 색
보더의 색
거의 유사
1개로 사용 모두
2개 상하 / 좌우
3개 상/ 좌,우/하
4개 상/우/하/좌
박스모델
사각형 형태로 태그들이
영역 차지하고 있다.
박스라고 표현한다.
-콘텐츠 영역
실제 콘텐츠를 포함
너비와 높이가 기본
-안쪽 여백
padding Area
콘텐츠와 테두리 사이의 내부여백
-경계선 border
-바깥쪽 여백
Margin
경계선~ 콘텐츠 영역
박스의 실제크기
바깥쪽 여백은 간격
박스모델
실제 크기(콘텐츠, 안쪽여백, 경계선)
모델 변경
box-sizing요소의 너비와 높이를 계산content-box 기본값border-box콘텐츠, 안쪽여백, 테두리 포함
웹 페이지 border X
image 기본형태반복속성을 갖고 있다.
repeat(반복)no-repeat(반복 안함)
line-height글자의 줄높이줄 수 간격을 조정
vertical-align기준을 잡아준다
float문서의 일반적 흐름에서 제외 되어자신을 포함하는 컨테이너 왼쪽 오른쪽 배치
문서의 흐름 여러 요소를 만들면 먼저 만든것 부터 차례대로 배치된다.
position문서상의 요소를 배치 방법을 정의position 있으면top, bottom right, left위치를 변경할 수 있다.
static 정적: 기본값일반 문서 흐름에 따라 배치
relative 상대적문서 흐름에 따라 배치상하 좌우 위치값에 따라서 offset 적용apsoulte 절대적흐름에서 제거가장 가까운 position 속성을 지정해준 곳을 상대적으로 적용
fixed 결정된지정 위치 고정/ 흐름제거
absolute부모의 postion 속성이 없으면 브라우저 화면 기준으로 있으면 그쪽 기준으로 이동
position 속성꼭필요할때만 사용해야 한다.