github: 자격증X
엑셀, ppt, 워드, 한글, 압축(기본)
위 프로그램들 사용할 수 있을 정도로 익히기
실무에서는 복잡한 것을 단순하게 간결하게 코딩하는 게 중요함
포트폴리오 만들 때
스타일 가이드에 폰트, 행간 뭐 썼는지 넣기
css에서는 태그 안 씀
피그마할 때 디자인 시안
용어 중요
모바일 디자인 우선! 모바일>pc
단점: 디스플레이 크기가 작아서 단순
큰집에서 작은집으로 가면 다 빼야 해
작은 집에서 큰 집으로 가는 건 물건 사면 되니까
플러터: 하이브리드 언어
백엔드 기술과 관련
플러터만 배우면 안드로이드, ios 둘 다 개발 가능
디자인팁: 전체적인 윤곽(글자, 패딩, 마진)>세부디자인
공통적인 거>디테일
border-radius: 20px, 10rem, 50%; 등
거의 모든 태그에 보더, 패딩, 마진 값 줄 수 있음
202쪽 em 단위
기능 늘어나면서(태그 추가되면서)
원래 table 24픽셀했는데
table 30픽셀로 해야될 수도 있어
그러면 자식 태그들 폰트사이즈 그에 따라서 다 바꿔야함
복잡해져..
rem이 편한데(나중에 생긴 단위)
상황에 따라 em단위(상대적)가 유용할 때도 있음
반디집-여기에 풀기(폴더 만들 필요X)
/* 반응형 단위: phone/tablet/pc 시안에 사용
=>ex) 1rem==16px, %, vw(화면가로비율)/vh(화면세로비율) */
.example {
width: 99vw;
height: 40vh;
/* TODO: 배경이미지: 가로/세로 크기 필요 */
background-image: url("../../img/7_7_1_example.jpg");
/* TODO: 배경이미지는 기본적으로 반복됨(화면보다 작으면)
TODO: 반복 멈춤 */
background-repeat: no-repeat;
/* TODO: 가로크기보다 작으면 무리하게 늘여서 이미지 덮음(이미지 훼손 가능) */
background-size: cover;
}height 0(컨텐츠 없어서 auto=0)으로 하고
padding-top: calc(숫자*100%);
퍼센트는 어떤 값이 전체에서 차지하는 비율을 나타내는 데 사용됨
100/100=100%
부모태그에 컨텐츠가 없어서 height에 바로 calc 쓸 수 없음
padding-top(or padding bottom)은 부모태그의 가로값 기준으로 16:9으로 비율(%)로 계산됨
px 반응형 단위 아님
padding-top(위로 늘어남)이나 padding-bottom(아래로 늘어남) 씀
padding-top은 가로크기 기준으로 세로크기를 비율로 계산해줌
16:9=99vw:x
16x=9*99vw
분모가 16
모든 태그에 스타일 속성 있음
link:css 대신에 참고하기(비추천)
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>h3 {color: orange;}</style>
</head>
<body>
<h2 style="color: blue;">제주 감귤</h2>
<h3>오렌지</h3>
</body>헤드에 스타일태그 쓰거나 바디에 스타일 속성 쓰기
예제 따라하고 변형해보기!
저장하기 ctrl s 매우 중요함
% 써야하는 이유는?
디바이스에 따라(다양한 화면 크기에 따라) 이미지 크기가 바뀌어야 해서
width/height 값을 안 주면 auto
<body>
<div class="example">
<img src="../img/7_8_1_example.jpg" alt="선물">
</div>
</body>.example {
/* 가로 */
width: 70rem;
/* TODO: 외곽선: border: 선두께 선종류 선색깔; */
border: 2px solid red;
}
/* TODO: 1) 카드 디자인시 박스크기만큼 이미지 크기 만들기
2) 이미지 가로크기는 %를 이용해야함: 아니면 틀어짐
*/
/* 자식선택자 사용법: 부모선택자 > 자식선택자 {속성:값;} */
.example > img {
/* TODO: 최대 원본크기까지만 늘리기 */
max-width: 100%;
height: auto;
}<p class="test"></p>
.test {
background-color: blueviolet;
height: 100px;
width: 100px;
}
색깔 들어간 정사각형
.test {
background-color: blueviolet;
height: 100px;
}
색깔 들어간 직사각형(가로는 1920 화면 크기)
.test {
background-color: blueviolet;
width: 100px;
}
아무것도 안 생김컨텐츠가 없을 때 height auto(기본값)=0, width auto(기본값)=화면 가로 크기 1920px
<p class="test">컨텐츠 있을 때</p>
.test {
background-color: blueviolet;
}
가로 화면 크기 1920px 세로 글자길이만큼의 직사각형 생김
.test {
background-color: blueviolet;
width: 100px;
}
가로 100px, 세로 글자길이만큼의 사각형 생김
.test {
background-color: blueviolet;
height: 100px;
}
세로 100px, 가로 화면 크기 1920px 사각형 생김컨텐츠 있을 때 가로값, 세로값 수치만큼 생김, 세로 auto는 텍스트 길이(이미지 원본 세로 길이)만큼, 가로 auto는 화면 크기 1920픽셀만큼
정리: 가로 auto는 컨텐츠 유무에 관계없이 화면 크기 1920픽셀만큼
세로 auto는 컨텐츠 없을 때 0, 컨텐츠 있을 때는 텍스트 길이 or 이미지 원본 세로 길이
auto = 가로 세로 중 한쪽 값 정해지면 나머지 하나는 원본 비율대로 자동 조정하겠다.
