이번주 교육
- 스크립트, 깃특강, 자바
프로젝트 시 자바스크립트와 제이쿼리로 디자인 해야 함
디자인 방법 : 전부직접, 탬플릿수정, 부트스트랩수정, 기존사이트 일부발췌
꾸준히 하면 좋을 것
- GIT으로 수업 내용 정리
- 정보처리리기사, SQLD 등 자격증 취득
- 알고리즘 공부
- 파이썬, 코틀린 공부
과제1.
웹페이지의 기본 마진을 없앨 수 있도록 작업하는 방법
: body{margin: 0;}
과제2. 박스모델 + 포지셔닝
#my1{
position: absolute;
width: 55px;
height: 55px;
border: solid #9bd97b 7px;
left: 100px;
top: 50px;
z-index: 1;
}
#my2{
position: absolute;
width: 70px;
height: 70px;
border: solid #e53c14 7px;
left: 30px;
top: 90px;
z-index: 2;
}
#my3{
position: absolute;
width: 90px;
height: 90px;
border: solid #fcdf61 9px;
left: 65px;
top: 130px;
z-index: 3;
}
#my4{
position: absolute;
width: 100px;
height: 100px;
border: solid #0099ff 12px;
left: 154px;
top: 40px;
z-index: 4;
}
#i{
position: absolute;
left: 120px;
top: 180px;
font-family: Arial Black, Helvetica, sans-serif;
font-size: 30pt;
font-weight: bold;
letter-spacing: -5px;
z-index: 5;
}
#m{
position: absolute;
left: 95px;
top: 175px;
font-family: Arial, Helvetica, sans-serif;
font-size: 17pt;
font-weight: bold;
letter-spacing: -2px;
z-index: 6;
}position: 포지셔닝, 밑에서 더 다룰것
letter-spacing: 자간간격
z-index: n(숫자) ->먼저 그려지는 숫자, 숫자가 커질수록 더 위에 그려짐
font-family: Arial, Helvetica, sans-serif;
-> 순서대로 적용됨. 첫번째 없으면 두번째, ..
top
left
-> 위, 옆과의 간격
과제3. 박스모델
box model exam.html에서 외부파일 링크(boxexam.css)
<link rel="stylesheet" type="text/css" href="/clientweb/common/css/boxexam.css">
text-align(텍스트 정렬) :
left(왼쪽 정렬), right(오른쪽 정렬), center(중앙 정렬), justify(양쪽 정렬)
width: 90%; (가로 화면의 90%)
margin-left: auto;
margin-right: auto;(90%로 마진 중앙맞춤)
background-image: url("/clientweb/images/background.gif");
background-repeat: no-repeat;
->백그라운드 이미지 불러와서 패턴 반영x, 1회만
padding: 20px;
->박스 내 컨텐츠 외 여백
margin-left: 30px;
-> 박스 바깥 왼쪽 여백
font-style: italic;
-> 기울기
padding-left: 100px;
-> 패턴과 겹치지 않게 오른쪽으로 이동
5. 박스모델
div, p, span, 시맨틱 태그(header, nav, section 등)으로 박스모델 만들고 속성(width, height, margin, border, padding 등) 적용
boxsizing test css
box-sizing: content-box;
->width는 컨텐츠를 위한 사이즈, border나 padding의 값이 변경되면 사이즈가 변경(사이즈가 가변)
box-sizing: border-box;
-> content, padding, border 사이즈가 모두 고려된 사이즈로 적용box-sizing: content-box로 적용했을 때 실행화면(아래)
flex box
: 박스모델에서 flex를 적용해서 레이아웃을 관리할 수 있다.
css flex test.html 1,3
align-items: 한줄을 기준으로 정렬
align-content: flex컨테이너의 모든 하위 요소에 적용, 여러여러줄의 아이템이 있을 때 의미가 있다.
플렉스 컨테이너의 하위 요소를 묶어서 정렬해준다.
둘의 차이?
이거 다 못봤는데....... 넘졸려서 자야겠다
flex 강의
https://youtu.be/O-QnU5UylSM?feature=shared
6. 포지셔닝
-웹문서를 구성하는 컨텐츠의 위치를 정하고 배치하는 것이 포지셔닝
-웹문서의 레이아웃과 연관이 있는 속성
- 포지셔닝의 종류
상대위치(relative)→원ㄴ래 기본으로 그려져야 하는 자신의 위치를 기준으로 위치가 적용 **절대위치(absolute)** →절대위치를 지정하는 방법 → 문서를 기준으로 위치가 정해지므로 좌표속성에 지정한 값의 위치로 이동 →상위요소를 기준으로 이동한다. →문서를 기준으로 배치가 되므로 윈도우의 해상도와 상관없이 무조건 보인다 **고정위치(fixed)** →앱솔루트처럼 기준위치(top : 0 left : 0)에 좌표 속성에 따라서 이동 →상위요소에 영향을 받지 않고 이동 →윈도우를 기준으로 움직이므로 윈도우를 기준으로 위치값을 계산하고 윈도우의 해상도를 벗어나면 안보임 **정적위치(static)** → 포지션 속성을 설정하지 않았을 때 원래 기본 흐름대로 출력 위→아래 왼뽁→오른쪽으로 배치가 기본 흐름 →좌표속성을 사용할 수 없다.:레프트 바꾸면 이 위치에 따라 같이움직이지만 탑은 변화없음?? →상위요소를 기준으로 움직임
앱솔루트랑 픽스드 비교해서 봐야함
코드랑 나오는거 캡쳐해서 한번에 이해되게 보기 이해잘안됨
픽스드포지션은 화면 스크롤해도 그자리에 있는 막 쇼핑몰 일대일채팅 아이콘같은 느낌
- 자바스크립트, 제이쿼리에선 돔(DOM)이중요함
포지셔닝테스트랑 돔그림
7.플로팅
화면배치
플로팅을 적용하지ㅐ 않는 부분이 플로팅 영향을 받을 수 있으므로 플로팅이 적용되지 않도록 clear해야한다.
플로팅은 문서가 기본으로 흐르는 방향을 제어
플로트:레프트
플로트:라이트
플로트 테스트 문서 보면댐
플로트테스트02 다시해보기…
레이아웃 이그잼 01
플로트 라이트로 적용하면 메뉴가 밑으로 내려감
왜? 문서 순서대로 하느라고 라이트 주니까 4번인 푸터가 올라오고 3번인 메뉴박스가 내려가버림
배치된 순서, 나란히 붙는지, 등등 다 고려해줘야함
플로팅 안된 문서는 원래흐름대로감을 기억해야함
레이아웃 이그잼 03
header에서 width랑 height 둘다 %주면 안붙는걸로 알고있어서요. width 100%를 없ㅇㅐ거나
height를 예를 들어 30px; 이렇게 줘보면 붙을거 같아여
아마 다른 것들도 둘다 %여서 구상하신대로 안될 수도 있는데 그러면 하나를 px로 주시면 되여.
헤더부분에도 float: left; 적용하면 되요...! 저는 그렇게 해결했어요
과제
- 마지막 미션 플렉스적용해서 해보기
- 2 수목원
- 자바스크립트 파일 읽어보기
