학습내용

백준 1단계

• 10430 - 나머지
• 2588 - 곱셈

웹 퍼블리싱 정복 3주차

백준

1단계 - 입출력과 사칙연산

10430 : 나머지

문제
(A+B)%C는 ((A%C) + (B%C))%C 와 같을까?
(A×B)%C는 ((A%C) × (B%C))%C 와 같을까?
세 수 A, B, C가 주어졌을 때, 위의 네 가지 값을 구하는 프로그램을 작성하시오.

입력
첫째 줄에 A, B, C가 순서대로 주어진다. (2 ≤ A, B, C ≤ 10000)

출력
첫째 줄에 (A+B)%C, 둘째 줄에 ((A%C) + (B%C))%C, 셋째 줄에 (A×B)%C, 넷째 줄에 ((A%C) × (B%C))%C를 출력한다.

제출 답안

num = list(map(int, input().split()))

for n in num:
    print((n[0]+n[1]) % n[2])
    print((n[0]%n[2]) + (n[1]%n[2])) % n[2]
    print((n[0]*n[1]) % n[2])
    print((n[0]%n[2]) * (n[1]%n[2]) % n[2])

⚠️ 런타임에러 발생
1. A, B, C를 리스트로 받아오기
2. 반복문으로 돌면서 각각의 결과 출력하기

오답 풀이
a, b, c 값을 임의로 부여해서 풀이해보았다.

num = list(map(int, '5 8 4'.split())) = num = [5, 8, 4]
이 상태에서 for n in num: print(n[0])을 출력하면 TypeError: 'int' object is not subscriptable 에러가 발생한다. 인덱스를 갖지 않는 값에 인덱싱을 부여했기 때문이다.

for n in num:
    print(n)
> 5
  8
  4

인덱싱을 부여하지 않고 n으로 반복문을 돌려보면 왜 에러가 발생했는지 알 수 있다. n이 리스트가 아니기 때문이다. 즉, 원래 의도했던 값은 n[i]가 아니라 num[i]이다.

정답

a,b,c = map(int, input().split())
print((a+b)%c, ((a%c)+(b%c))%c, (a*b)%c, ((a%c)*(b%c))%c, sep='\n')

제출 답안의 num 리스트를 살린다면 a, b, c를 사용하지 않고 (num[0]+num[1]) % num[2] 이런식으로도 풀이할 수 있다. 근데 이 편이 코드도 더 길고 직관적이지 못하니까 쉽게쉽게 가는 걸로....

3003번 문제를 응용해서 풀어본 거였는데 같은 로직을 적용할 수가 없는 문제였다. 3003번은 기준값과 구해야 하는 값의 순서가 일정했기 때문에 반복문을 활용할 수 있었지만 이 경우는 아니다.

출력문 구분자

• sep='' 배열 내에서 요소와 요소 사이에 들어가는 구분자
• end='' 배열의 마지막 요소와 배열의 첫번째 요소 사이에 들어가는 구분자

print(1,2,3,4,5, sep='/')
=> 1/2/3/4/5

print(1,2,3,4,5, end='/')
=> 1 2 3 4 5/

array = [1,2,3]

for i in array:
    print(i, sep='/')
1
2
3

for i in array:
    print(i, end='/')
=> 1/2/3    

2588 : 곱셈

문제
(세 자리 수) × (세 자리 수)는 다음과 같은 과정을 통하여 이루어진다.
(1)과 (2)위치에 들어갈 세 자리 자연수가 주어질 때 (3), (4), (5), (6)위치에 들어갈 값을 구하는 프로그램을 작성하시오.

입력
첫째 줄에 (1)의 위치에 들어갈 세 자리 자연수가, 둘째 줄에 (2)의 위치에 들어갈 세자리 자연수가 주어진다.

출력
첫째 줄부터 넷째 줄까지 차례대로 (3), (4), (5), (6)에 들어갈 값을 출력한다.

제출답안 및 정답

num = int(input())
a,b,c = map(int, str(input()))

print(c*num, b*num, a*num, c*num+b*num*10+a*num*100, sep='\n')

1. (1),(2)의 자연수 받기
2. (2)의 자연수 분리하기
3. (2)의 분리된 요소에 (1)을 곱한 각각의 값 구하기
4. 세 개의 값을 자리수에 맞게 더하기
5. 출력시 sep='' 사용

✅ num = input()으로 받아오면 문자형 num이 인풋값으로 들어오기 때문에 연산이 불가능하므로 반드시 int()를 적용해야 한다.

드디어 맞았다 감격.....🥹 심지어 코드도 간결해....
성장해버렸다.....

다른 방식으로 풀기
[파이썬(Python)] 백준 2588번 곱셈 : 세자리수 곱셈

• 문자열
• 문자열+반복문
• 산술연산자

---

웹퍼블리싱

hover

예제

    <div class="buttons">
      <button class="button use-css">웹 퍼블리싱</button>
      <button class="button use-javascript">왕초보 시작반</button>
      <button class="button use-class">웹개발 플러스</button>
    </div>

CSS와 JS를 활용해서 각기 다른 방식으로 버튼 hover 효과를 구현해보자.

CSS

.button.use-css:hover {
  background-color: #e8344e;
  color: white;
}

JavaScript

$(".button.use-javascript")
  .mouseover(function () {
    $(this).css({
      backgroundColor: "#e8344e",
      color: "white",
    });
  })
  .mouseout(function () {
    $(this).css({
      backgroundColor: "white",
      color: "#e8344e",
    });
  });

.button.use-javascript에 마우스오버와 마우스아웃시 스타일을 변경해줄 함수 추가

CSS + JavaScript

• JavaScript

  $(".button.use-class")
    .mouseenter(function () {
      $(this).addClass("on");
    })
    .mouseleave(function () {
      $(this).removeClass("on");
    });

  마우스가 mouseenter / mouseleave 상태인지에 따라서 on 클래스를 추가/제거

• CSS

    .button.use-class.on {
      background-color: #e8344e;
      color: white;
    }

  on 클래스에 대한 스타일은 CSS에서 지정

CSS 속성

color: inherit

<a> 태그를 적용하면 자동으로 생기는 색상을 제거하고 상위 클래스에서 지정한 색상을 적용

option: pointer

마우스를 올렸을 때 손가락 모양의 커서로 변경. 클릭 액션이 포함된 요소에 사용.

Reset

body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, select, table, td,  textarea, th, ul {
  margin: 0;
  padding: 0;
}

웹 브라우저의 디폴트 값을 초기화 해주는 작업. 브라우저마다 동일한 CSS 스타일을 적용하기 위해선 스타일을 작업하기에 앞서 반드시 해야하는 작업이다. Reset CSS라는 키워드로 검색하면 직접 작성하지 않고 초기화값을 가져올 수 있다. reset.css 파일에 리셋값을 저장해서 css 파일에 import 하면 더 가독성 좋은 코드를 작성할 수 있다.

clip

요소의 특정 부분만 출력

• auto 모든 부분 출력(기본값)
• shape 특정 부분 출력
• initial 기본값으로 설정
• inherit 부모의 속성값 상속
• rect(top,right,bottom,left) 출력할 위치를 직접 지정. position: absolute에서만 사용 가능

예제
<span class="blind">검색</span>

.blind {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
}

검색창에 들어간 코드를 clip으로 인보이게 설정한 상태. 유저가 검색한 데이터를 수집하는 등 사용자에게 노출되지 않고 작업을 수행하기 위함이다.

display: table

요소들이 일정한 너비를 나눠갖는 속성

가상요소 before / after

.text:before {
	content: 'before';
    color: red;
}
.text:after {
	content: 'after';
    color: blue;
}

<span class="text">text</span>에 위와 같은 스타일을 적용시, 실제로는 태그가 하나밖에 없지만 화면상에는 before text after가 모두 출력된다.

드롭다운

• HTML

  <body>
    <div class="dorpdown">
      <button class="dropbtn">수업탐색</button>
      <ul>
        <li><a href="#webpublishing">웹 퍼블리싱</a></li>
        <li><a href="#start">왕초보 시작반</a></li>
        <li><a href="#plus">웹개발 플러스</a></li>
      </ul>
    </div>
    <script src="script.js"></script>
  </body>

• JS

$('.dropbtn').on('click', function (evt) {
  const ulElement = $('ul');
  ulElement.toggle();
});

1. dropbtn 클래스에 해당하는 요소를 클릭하면 함수를 실행
2. <ul>을 ulElement라는 변수에 할당
3. ulElement에 toggle() 메서드 적용

• CSS

ul {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  display: show;
  position: absolute;
  background-color: #f1f1f1;
  border-radius: 10px;
  box-shadow: 0px 8px 16px 0px #00000033;
  overflow: hidden;
}

ul li a{
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
}

4. toggle()를 보여줄 display 속성 적용

자동 새로고침 방지

preventDefault()

// 2-3 폼태그
    <script>
      $('#login').submit(function (event) {
        event.preventDefault(); 
        var username = $('#username').val();
        var password = $('#password').val();
        var isChecked = !!$('#checkbox:checked').val();
        alert(username + ' / ' + password + ' / ' + isChecked);
      });
    </script>

event 함수는 submit이 승인되면 자동으로 창을 새로고침 하는데 perventDefault은 이를 방지한다. 폼태그에서는 새로고침시 입력했던 정보가 사라지므로 자주 사용한다.

이때 var isChecked = !!$('#checkbox:checked').val();에서 체크박스는 value 대신 checked 값을 가져온다.

!!를 사용하면 불린형으로 변경돼서 True/False로 반환할 수 있다.

키보드포커스와 tabindex 속성

키보드포커스
키보드를 통해 웹 페이지의 정보에 접근하는 행위로 tab키와 shift+tab키로 이동할 수 있다. 키포드포커스의 접근 가능한 태그로는 <a>, <button>, <input>, <select>, <textarea> 등이 포함된다.

tabindex
요소의 탭 순서를 지정하는 속성

• 양수
  1부터 순번대로 처리.
• 0
  <h1>, <div>와 같이 키보드포커스가 접근 불가능한 태그들에 접근 가능
• 음수
  키보드포커스가 접근 가능한 태그들이 접근하지 못하도록 처리. 어떤 음수를 받아도 상관 없으나 통상적으로 -1을 사용한다.

<button> 내 요소 가운데 정렬

1. display: inline-block 추가 후 text-align: center
2. 요소들을 <span> 태그로 배치 후 부모 태그에 text-align: center 적용

display: block = <p>
display: inline-block = <span>

슬라이더

swiper()
가로나 세로 형태의 슬라이더를 만들 때 사용하는 플러그인.
데모 사이트를 참조하면 보다 쉽게 생성할 수 있다.

---

원래는 백준 1단계를 모두 푸는 게 목표였는데 꼴랑 2문제 푸는 데 오전 타임을 다 써버리는 바람에 끝내지 못했다. 그래도 이제 로직을 짜볼 수도 있고 왜 오답인지, 왜 정답인지 이해가 되니까 할 맛 난다ㅎ 또 문제를 풀면서 제대로 정립되지 않았던 개념들이 머릿속에 확실히 자리잡게 되어서 그 점도 즐겁다. 꾸준히 하다보면 언젠간 프로그래머스 2단계도 격파할 수 있겠지?(제발요)

웹퍼블리싱은 전반적으로 알고있던 내용이 많았지만 이론부터 차근차근 공부한 게 아니라 프로젝트 만들면서 야매로 배운 거라 확실히 디테일한 부분에서는 모르는 개념이 많았다. 그래서 생각보다 수강하는 데 시간이 꽤 걸린다. 진도가 너무 더디게 나가는데 프로젝트 전까지 다 들을 수 있을까....?