※디자인, 코딩 레퍼런스 많이 보고 많이 따라하기※
생각하면서 작성해보기
Best practice(모범 사례): 좋은 결과를 얻을 수 있는 방법이나 규칙
실무: soft landing (잘 적응할 수 있게 스무스하게 도와주는)
수업에서는 기초 정도만(소프트 랜딩을 위해. 시작이 쉬워야하니까)
나중에 좀 멋지고 화려한 화면 개발
실무에서 계속 공부: 훑어보기(숲)=>상세보기(나무)
예술형 it업계랑 잘 맞을 수도..
공통적인(전체적인 거)>세부적인 거 순서로 코딩하기
<body>
<div class="quiz"></div>
</body>.quiz {
width: 99vw;
height: 0;
background-image: url("../../img/7_7_2_quiz.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
/* TODO: 가로세로비율: */
padding-top: calc(3 / 16 * 100%);
}height 0; 생략 가능
어차피 컨텐츠 없어서 0이므로
max-width: 100%
최대 원본크기까지만 늘이기
가로, 세로 한 쪽 값만 주면 원본 비율대로 자동 설정됨
.quiz {
width: 200px;
border: 2px solid lightgoldenrodyellow;
padding: 14px;
background-color: lightyellow;
border-radius: 14px;
}
.quiz > li {
list-style-type: none;
display: inline-block;
margin-left: 14px;
}display: inline-block; 넣으면 list-style-type: none; 안 써도 목록 점 없어져 있음
label tag for 속성 공백이어도 상관없는 이유?
html은 느슨한 언어라서 다 안 채워도 동작함
보더, 마진, 패딩
커서가 두꺼워졌을 때는 insert 누르기
1개 포트폴리오(발표)=>css/피그마 이후 바로
ppt(pdf)=>이력서 첨부
1)웹제작: 무료 업로드(공짜인터넷주소)
(일주일~일주일 반)
js/jquery(화면에 동적효과: 메뉴 내려오기 등)
두 번째 포트폴리오: 동적 효과 들어가게 만들기(일주일~이주일)
와일드카드(*)-우선순위 가장 낮음
클래스가 태그선택자보다 우선순위 높음
id가 클래스보다 우선순위 높음
css 뭘 선택하느냐가 중요!
태그 선택: 별명 선택
박스 속성: 마진, 패딩, 보더
배치: 이미지 좌측/우측/중앙=>좌표 개념
input tag 가로,세로 적용되니까 인라인으로 분류하지만 정확하게는 인라인블록(줄바꿈x)
max-height 있긴한데
부모태그에 height
자식태그에 max-height 이런식으로는 잘 안 쓴대
거의 부모태그에 width 자식태그에 max-width 이런식으로 사용
목표는 크게
복지: 대기업(자식: 학비 풀)
풀스택: 스타트업 > 2/3년
=> sk/lg/삼성: 영어 토익(700점)
=> 나머지: 신세계/롯데: 영어 없음(대기업 4년 대졸 필)
프론트: 유통/쇼핑/화장품
width: 100% max-width:100% 비교
부모태그 width값과 비례해서 자식태그 width 늘어남
width 100% 부모태그 값과 same
max-width는 최대 원본크기까지만 늘어남
퍼센트 속성은 부모를 기준으로 함
부모태그에 디자인하면 자식태그도 같이 디자인 됨
근데 마진,패딩,보더는 multi-selector로 태그 다중 선택해서 디자인 해야 함
css
위에서 아래로 갈수록(코딩 윗라인>아랫라인) 덧칠되는 개념
h3{color:red;}
h3{color:blue;}
아래줄에 디자인된 블루색으로 글자색 정해짐
ul에 디폴트 패딩 들어가 있음
라이브 서버-검사 열어서 확인해보기
