강의

1. 실습 helbak

1. 반응형 웹사이트

• w3school
• viewport값 설정

2. css default

• 모든 html 태그를 초기화작업할때
• * 을 쓰면된다.

  *{
  margin: 0;	
  padding: 0;}

• font-weight는 100~900까지 100단위로 작성
• span 태그 요소도 원래는 inline이지만 여기선 block으로 변경

3. 맨위에 부분

• 이 사이트는 반대로 모바일버전 먼저 작업하고,@media에서 pc버전 작업을함

• 210712 때 먼저 실습했던적이있다.

• img y축 중앙정렬

  position: relative;
  top: 50%;
  transform: translateY(-50%);

  • 일단 top을 써야하니까 relative
  • 이러면 y축 중앙정렬됨
  • 기억할것, 자주씀

• 1em = 16px

• @media pc버전 작성

• pc버전에선 여백부분에 클릭되는부분좀 줄여주고
  반대로 모바일에선 클릭이나 터치되는부분을 좀 늘려주자

  #header h1 .logo{
  	width: 280px;
  	height: 80px;}

  • 이렇게 로고부분값을 줘서 pc버전 클릭부분을 줄임

• absolute를 쓰면 width값을 정확히 인식못하니까 지정해줄것

• 이전에 할때 float , flex 등을써서 ul부분을 오른쪽위로 당겼는데

  #header .buttons{
  	position: absolute;
  	width: 50%;
  	left: 50%;
  	top: 0;

  • 이렇게 그냥 옮겨서도 가능

4. 제품영역

• main태그 사용
• 항상 role="main" 기입해줄것
• main높이값이 없어서 pc 버전일때

  .main-content {
  	overflow: hidden;}

  • 로 만들어주자.
• 위에 로고부분이랑 겹치는 부분은 padding-top으로 따로 공백을 넣어줘서 해결

5. 하단부분

• payment부분에

  <li><span class="payment-icon one"></span></li>
  			<li><span class="payment-icon two"></span></li>
  			<li><span class="payment-icon three"></span></li>
  			<li><span class="payment-icon four"></span></li>
  			<li><span class="payment-icon five"></span></li>

  • 이렇게하면 class 부분 앞에 payment-icon은 그냥 총괄로 icon속성값 하는거고 뒤에 숫자는 각각할때
  • 이거 따로 할때

    .payment-icon.one

    • 이렇게 붙여써야함

• 마지막부분에 to-top-button을 위해서는 맨처음 footer에서 padding-bottom 으로 얘만을 위한 공간을 만들어주자.

• 안그러면 겹친다

• 항상 공간, padding margin 등등 영역 잡는건 연습하고 미리잡고 모든지 다해보자 어렵다.

6. 실무팁

1. id

• id값은 언제나 한개 이름같은거 걍 하나만쓰자
• 여기서 이제
• href값으로는
  • url
  • 파일명
  • id속성값
• 을 넣을수있는데 id속성을 넣으면 그 id값으로 바로 이동함
• class는 안됨

2. 말줄임

• html

  <p class="text-box">
   </p>

• CSS

  .text-box{
  width: 200px;
  height: 200px;
  background-color: yellow;
  white-space: nowrap;}

  • 칸을 넘어가게 되면 줄바꿈이 되는데 white-space를 넣어서 nowrap으로 안묶으면 x축으로 쭉- 감, 그만큼 x스크롤도 쭉늘어남
  • 그게 이상해서

    overflow: hidden;

    • 요걸 추가하면 글짜가 이상하게 잘리거나 그렇게됨

       text-overflow: ellipsis;

    • 이거까지 추가하면 우리가 아는 그 ... 이게 나온다

• 이걸 필요할때마다 계속 반복해서 쓰기 귀찮으니 미리 class로 만들자.
• 약간 float할때 clear미리 만들어두는거랑 같은느낌

  .ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;}

• 간단하게 말하면 그냥 자주 쓰는 css들 class로 만들어두면 코드량 줄어들고 쓰기편하고 보기쉽고 그냥 좋다.

2. 어려웠던점

• padding margin 공간 영역 잡고 머하고 겹치고 안겹치고
  헷갈림
• 이전에 했던 부분이랑 반대로 모바일을 만들고 pc로 만드는부분이 어렵다 정도까진 아니고, 헷갈리긴했다.

3. 해결

• 머 하다보면 잘되겠지..

4. 소감

• 복습하고 계속 연습하고 해보는게 답인듯하다.

5. 오늘한 Git