본문 바로가기
공부/학원.

국비 개발 학원 7주차(05.10~05.14)

by 햄이; 2021. 5. 11.

 

05.10

 

전날 커피를 잘못 마셨더니

잠이 안 와 늦게 자고 말았다.

그 결과 눈물 날 정도로 피곤ㅠㅠ

오늘은 주로 문제 위주의 수업이었기에

대부분 과제 카테고리에 올라 올 예정이다!!

 

 

package Day13;
/*p.144 예제*/
public class Student {

	int studenID;
	String studentName;
	int grade;
	String address;
	
	public String getStudentName() {
		return studentName;
	}
	
	public static void main(String[] args) {
		Student studentAhn = new Student();
		studentAhn.studentName = "안연수";
		
		System.out.println(studentAhn.studentName);
		System.out.println(studentAhn.getStudentName());
		
	}
	
}

 

예제문제 getter()

 

package Day13;
/*p.146 예제*/
public class SyudentTest {

	public static void main(String[] args) {
		// TODO Auto-generated method stub

		Student studentAhn = new Student();
		studentAhn.studentName = "안승연";
		
		System.out.println(studentAhn.studentName);
		System.out.println(studentAhn.getStudentName());
	}

}

 

package Day13;
/*p.148 예제*/
public class StudentTest1 {

	public static void main(String[] args) {
		// TODO Auto-generated method stub

		Student student1 = new Student();
		student1.studentName ="안연수";
		System.out.println(student1.getStudentName());
		
		Student student2 = new Student();
		student2.studentName="안승연";
		System.out.println(student2.getStudentName());
	}

}

 

 

 

05.11

접근하기 쉬워서 그런지

요 근래 재미가 붙은 파이썬 수업

정처기 시험 보기 전에나 재미가 붙을 것이지..^^

(파이썬 문제 장렬하게 틀리고 옴)

 

우선 수업 중간중간 시간이 빌 때마다 정리해서 올리기!

 

str_input = input("태어난 해를 입력해주세요.")
birth_year = int(str_input) %12

if birth_year == 0 :
  print("원숭이 띠입니다.")
elif birth_year == 1:
  print("닭 띠입니다.")
elif birth_year == 2:
  print("개 띠입니다.")
elif birth_year == 3:
  print("돼지 띠입니다.")
elif birth_year == 4:
  print("쥐 띠입니다.")
elif birth_year == 5:
  print("소 띠입니다.")
elif birth_year == 6:
  print("호랑이 띠입니다.")
elif birth_year ==7:
  print("토끼 띠입니다")
elif birth_year ==8:
  print("용 띠입니다.")
elif birth_year ==9:
  print("뱀 띠입니다.")
elif birth_year ==10:
  print("말 띠입니다.")
else : 
  print("양 띠입니다.")

 

지난주 복습 겸 if조건문 연습문제 풀이

 

위 실행 결과

 

리스트

리스트 (list)
여러 가지 자료를 저장할 수 있는 자료
자료들을 모아서 사용할 수 있게 해 줌
대괄호 내부에 자료들 넣어 선언


요소

리스트의 대괄호 내부에 넣는 자료
[요소, 요소, 요소...]
숫자, 문자열, 여러 자료형으로 구성된 리스트 가능

인덱스

대괄호 안에 들어간 숫자
ex) list_a = [273,32,100,"문자열",True]
=> [0] 273 [1] 32 [2] 100 ...

리스트 접근 연산자를 이중으로 사용할 수 있음
ex) list_a[3] = '문자열'
list_a[3][0] = '문'


리스트에서의 IndexError 예외

리스트의 길이 넘는 인덱스로 요소에 접근하려는 경우 발생


append() 함수
리스트 뒤에 요소를 추가
 사용법 : 리스트명.append(요소)


insert() 함수


리스트 중간에 요소를 추가
사용법 : 리스트명.insert(위치, 요소)


extend() 함수 = 파괴적


원래 리스트 뒤에 새로운 리스트의 요소 모두 추가
매개변수로 리스트 입력
사용법 : 리스트명.extend(새 리스트)



인덱스로 제거하기: del 키워드, pop() 함수

del 리스트명[인덱스]
리스트명.pop(인덱스)
 
값으로 제거하기: remove() 함수


특정 값을 지정하여 제거


모두 제거하기 : clear() 함수


리스트 내부의 요소를 모두 제거
 
in 연산자


특정 값이 리스트 내부에 있는지 확인
사용법 : 값 in 연산자


not in 연산자


리스트 내부에 해당 값이 없는지 확인
사용법 : 값 not in 연산자 or not 값 in 연산자

 

#리스트 연산자 : 연결(+) , 반복(*) , len() 예제

#리스트 선언
list_a = [1, 2, 3]
list_b = [4, 5, 6]

#출력
print("# 리스트")
print("list_a = ", list_a)
print("list_b = ", list_b)
print()

#기본 연산자
print("# 리스트 기본 연산자")
print("list_a + list_b =",list_a + list_b)
print("list_a * 3 = ",list_a * 3)
print()

#함수
print("#길이 구하기")
print("len(list_a) =",len(list_a))

 

리스트 연산자 : 연결(+) , 반복(*) len() 예제

 

위 실행 결과

 

#리스트에 요소 추가하기 : append , insert 예제
#리스트 선언
list_a = [1, 2, 3]

#리스트 뒤에 요소 추가하기
print("# 리스트 뒤에 요소 추가하기")
list_a.append(4)
list_a.append(5)
print(list_a)
print()

#리스트 중간에 요소 추가하기
print("#리스트 중간에 요소 추가하기")
list_a.insert(0, 10)
print(list_a)
print()

#extend() 함수
print("#extend 함수")
list_b = [1, 2, 3]
list_b.extend([4, 5, 6])
print(list_b)

 

리스트에 요소 추가하기 : append , insert , extend 예제

 

위 실행 결과

 

리스트를 연결 연산자로 연결할 시

list_a와 list_b에는 어떠한 변화도 없음을 알 수 있다

즉, 결과상 원본에 변화는 없다

= 비파괴적 처리

 

#인덱스로 제거하기 : del 키워드 , pop()함수
list_a = [0, 1, 2, 3, 4, 5]
print("# 리스트의 요소 하나 제거하기")

#제거 방법[1] - del
del list_a[1]
print("del list_a[1] : ", list_a)

#제거 방법[2] - pop()
list_a.pop(2)
print("pop(2) :",list_a)
print()

print("#del키워드 사용하여 여러 요소 제거")
list_b = [0,1,2,3,4,5,6]
del list_b[3:6]
print(list_b)
print()

print("#범위 한쪽을 입력하지 않으면 지정위치 기준으로 한쪽을 전부 제거")
list_c =[0,1,2,3,4,5,6]
del list_c[:3]
print(list_c)

 

리스트 요소 제거하기

del 키워드, pop() 함수

 

위 실행 결과

 

 

in , not in 연산자 사용해보기

 

 

 

반복문

for 반복문 

특정 코드를 반복해서 실행할 때 사용하는 기본 구문
사용법 : for 반복자 int 반복할 수 있는 것 :
코드

ex) 리스트 선언
array = [273, 32, 103, 57, 52]
#리스트에 반복문을 적용
for element in array :

  #출력
  print(element)

 

 

numbers = [273,103,5,32,65,9,72,800,99]

print("#첫번째 연습문제")
for number in numbers :
    if(number%2==0):
      print(number,"은 짝수입니다.")
    else : 
      print(number,"은 홀수입니다.")
print()

#두번째 연습문제
print("#두번째 연습문제")
for item in numbers :
  print(item,"는",len(str(item)),"자릿수 입니다.")

 

반복문 연습문제 , 조건문, len() 함수 이용

 

위 실행 결과

 

 

딕셔너리와 반복문(1)
딕셔너리 (dictionary)
키를 기반으로 값을 저장하는 것
사용법 : ' 키 : 값' 형태를 쉼표로 연결해서 만듦
변수 = { 키 : 값,
 키 : 값,
...
키 : 값
}


리스트와 딕셔너리의 차이점

리스트 : 변수 = []
딕셔너리 : 변수 = {}



특정 키 값만 따로 출력하기


딕셔너리 뒤에 대괄호 입력하고 그 내부에 키 입력

딕셔너리에 값 추가할 때는 키를 기반으로 값 입력
딕셔너리[새로운 키] = 새로운 값



딕셔너리 요소의 제거 : del 키워드



KeyError 예외


딕셔너리에서 존재하지 않는 키에 접근할 경우



in 키워드


사용자로부터 접근하고자 하는 키 입력받은 후 존재하는 경우에만
접근하여 값을 출력
 
 
get() 함수


딕셔너리의 키로 값을 추출
존재하지 않는 키에 접근할 경우 None 출력
 
키워드
딕셔너리 : 키를 기반으로 여러 자료 저장하는 자료형


키 : 딕셔너리 내부에서 값에 접근할 때 사용하는 것


값 : 딕셔너리 내부에 있는 각각의 내용
 

 

 

딕셔너리의 요소에 접근하기

 

1) 딕셔너리를 선언

 

2) 특정 키 값만 따로 출력하기

 

#딕셔너리 요소에 접근하기 예제

#딕셔너리 선언
dictionary = {
  "name" : "7D 건조 망고",
  "type" : "당절임",
  "ingredient" : ["망고","설탕","메타중아황산나트륨","치자황색소"],
  "origin" : "필리핀"
}

#출력
print("name : ",dictionary["name"])
print("type : ",dictionary["type"])
print("ingredient : ", dictionary["ingredient"])
print("origin : ",dictionary["origin"])
print()

#값을 변경
dictionary["name"] = "8D 건조 망고"
print("name : ",dictionary["name"])

 

딕셔너리의 요소 접근 및 요소 값 변경하기

 

위 실행 결과

 

#딕셔너리에 값 추가하기 / 제거하기

#딕셔너리 선언
dictionary = {}

#요소 추가 전에 내용을 출력
print("요소 추가 이전 : ",dictionary)

#딕셔너리에 요소 추가
dictionary["name"] = "새로운 이름"
dictionary["head"] = "새로운 정신"
dictionary["body"] = "새로운 몸"

#출력
print("요소 추가 이후", dictionary)

print()

#딕셔너리 값 제거하기

#딕셔너리 선언
dictionary = {
  "name" : "7D 건조 망고",
  "type" : "당절임"
}

#요소 제거 전에 내용 출력
print("요소 제거 이전",dictionary)

#요소 제거하기
del dictionary ["name"]
del dictionary ["type"]

#요소 제거 후에 내용을 출력
print("요소 제거 이후",dictionary)

 

딕셔너리에 값 추가하기 / 제거하기(del 사용)

 

위 실행 결과

#딕셔너리 내부에 키가 있는지 확인하기

#딕셔너리 선언
dictionary = {
  "name" : "7D 건조 망고",
  "type" : "당절임",
  "ingredient" : ["망고","설탕","메타중아황산나트륨","치자황색소"],
  "origin" : "필리핀"
}

#사용자로부터 입력받기
key = input("> 접근하고자 하는 키")

#출력
if key in dictionary :
  print(dictionary[key])
else :
  print("존재하지 않는 키입니다.")

 

딕셔너리 내부에 키가 있는지 확인하기 1 - in 키워드 사용

 

위 실행 결과

 

 

#딕셔너리 내부에 키가 있는지 확인하기 - get()함수

#딕셔너리 선언
dictionary = {
  "name" : "7D 건조 망고",
  "type" : "당절임",
  "ingredient" : ["망고","설탕","메타중아황산나트륨","치자황색소"],
  "origin" : "필리핀"
}

#존재하지 않는 키에 접근
value = dictionary.get("존재하지 않는 키")
print("값 : ",value)

#None 확인 방법
if value == None :
  print("존재하지 않는 키에 접근했습니다.")

 

딕셔너리 내부에 키가 있는지 확인하기 2 - get() 함수 사용

 

위 실행 결과

 

 

#확인 문제 1
dict_a = {}
print("dict_a 값 : ",dict_a)
dict_a["name"] = "구름"
print("추가 후 dict_a값 : ",dict_a)
print()

#확인 문제 2
dict_b = {
  "name" : "구름" 
  }
print("dict_b 값 : ",dict_b)

del dict_b["name"] 

print("dict_b 값 : ",dict_b)
print()

#확인 문제 3
numbers=[1,2,6,8,4,3,5,2,1,9,5,4,9,7,2,1,3,5,4,8,9,7,2,3]
counter = {}

for number in numbers :
  if number in counter :
    counter[number] = counter[number] + 1
  else : 
    counter[number] = 1

#최종 출력
print(counter)

 

연습문제 3개 풀이

(주의 할 점 : 반복,조건문 쓸 때 tab 조심!!)

 

위 실행 결과

딕셔너리와 반복문(2)
범위 (range)
특정 횟수만큼 반복해서 돌리고 싶을 때 for 반복문과 조합하여 사용



매개변수에 숫자를 한 개 넣는 방법


0부터 A-1까지의 정수로 범위 만듦
range(A) -> A는 숫자



매개변수에 숫자를 두 개 넣는 방법


A부터 B-1까지의 정수로 범위 만듦
range(A,B) ->A,B는 숫자



매개변수에 숫자를 세 개 넣는 방법


A부터 B-1까지의 정수로 범위 만들되 앞뒤의 숫자가 C만큼의 차이 가짐
range(A,B,C) ->A,B,C는 숫자



범위 만들 때 매개변수 내부에 수식 사용하는 경우

range(A,B+1) : A부터 B까지의 정수로 범위를 만듦
but, range(0, n/2)-> 매개변수로 나눗셈을 사용한 경우 오류가 발생
매개변수는 무조건 정수여야함
이럴 경우 range(0, int(n/2)) 로 바꿔 오류 정정



역반복문


큰 숫자에서 작은 숫자로 반복문 적용
range() 함수의 매개변수 세 개 사용하는 방법
ex) for i in range(4, 0 -1 , -1) :
print("현재 반복 변수 : {}".format(i))

실행 결과
현재 반복 변수 : 4
현재 반복 변수 : 3
.
.
현재 반복 변수 : 0


reversed() 함수



이 또한 위와 결과 동일
ex) for i in reversed(range(5)) :
  print("현재 반복 변수 : {}".format(i))



while 반복문


리스트 또는 딕셔너리 내부의 요소를 특정 횟수만큼 반복
사용법 : while 불 표현식 :
문장

ex) while True : 
print("." , end ="")
위는 무한 반복문
(ctrl + c로 멈추기)
 




 

 

 

#for 반복문과 범위를 함꼐 조합해서 사용합니다.

for i in range(5) :
  print(str(i) + "= 반복 변수")
print()

for i in range(5, 10) :
  print(str(i)+ "= 반복 변수")
print()

for i in range(0, 10, 3) :
  print(str(i)+ "= 반복 변수")
print()

 

range() 예시

 

위 실행 결과

 

#반복 변수를 기반으로 반복하기

i = 0
while i < 10 :
  print("{}번 째 반복입니다.".format(i))
  i += 1

print()


#while 반복문 : 상태를 기반으로 반복하기
print("#while 반복문 : 상태를 기반으로 반복하기")
#변수선언
list_test = [1,2,3,4]
value = 2

#list_test 내부에 value가 있다면 반복
while value in list_test :
  list_test.remove(value)

#출력
print(list_test)

 

반복 변수를 기반으로 while 반복문 실행

 

위 실행 결과

 

 

#유닉스타임과 while 반복문을 조합
#시간과 관련된 기능을 가져온다
import time

#변수 선언
number = 0

# 5초동안 반복
target_tick = time.time() + 5
while time.time() < target_tick :
  number += 1

#출력
  print("5초동안 {}번 반복했습니다.".format(number))

 

유닉스 타임과 while 반복문 조합

 

위 실행 결과

#변수 선언
i = 0

#반복
while True :
  print("{}번 쨰 반복문입니다.".format(i))
  i = i+1

  input_text = input(">종료하시겠습니까?(y/n) : ")
  if input_text in ["y" , "Y"] :
      print("반복을 종료합니다.")
      break

 

break 키워드

반복문 벗어날 때 사용하는 키워드

 

위 실행 결과

 

#continue 키워드

#변수 선언
numbers = [5, 15, 6, 20, 7, 25]

#반복
for number in numbers :
  if number < 10 :
    continue
  print(number)

 

continue 키워드

현재 반복을 생략하고 다음 반복으로 넘어감

 

위 실행 결과

 

#확인 문제
print("#확인 문제1")
key_list = ["name", "hp","mp","level"]
value_list = ["기사",200,30,5]
character = {}

for i in range(0,len(key_list)) :
    character[key_list[i]] = value_list[i]

print(character)
print()

#확인 문제 2
print("#확인 문제2")
limit = 10000
i = 1

sum_value = 0

while sum_value < limit :
  sum_value += i
  i+=1

print("{}를 더할 떄 {}을 넘으며 그 때의 값은 {}입니다.".format(i,limit,sum_value))
print()


#연습 문제
print("#연습 문제1")

max_value = 0
a = 0
b = 0

for i in range(1, 100//2+1) :
  j = 100- i

  current = i*j
  if max_value < current :
    a = i
    b = j
    max_value = current
  
print("최대가 되는 경우 : {} * {}".format(a,b ,max_value))

 

연습 문제 예제

 

위 실행 결과

 

 

문자열, 리스트, 딕셔너리와 관련된 기본 함수

리스트에 적용할 수 있는 기본 함수
리스트를 매개변수로 넣어 사용하는 기본 함수들
min(), max(), sum() 함수

 

리스트에 적용할 수 있는 min(), max(), sum()함수 연습

 

#reversed()함수로 리스트 뒤집기
#리스트 선언 후 뒤집기
list_a = [1,2,3,4,5]
list_reversed = reversed(list_a)

#출력
print("#reversed()함수")
print("reversed[1,2,3,4,5] : ",list_reversed)
print("list(reversed([1,2,3,4,5]) :",list(list_reversed))
print()

#반복문 적용
print("#reversed() 함수와 반복문")
print("for i in reversed([1,2,3,4,5]) : ")
for i in reversed(list_a) :
  print("-",i)

 

reversed() 함수로 리스트 뒤집기

 

위 실행 결과

 

 

슬라이싱을 사용하여 리버스 시키기

#딕셔너리의 items()함수와 반복문 조합하기
#변수 선언
example_dictionary = {
  "키A" : "값A",
  "키B" : "값B",
  "키C" : "값C"
}

#딕셔너리의 items()함수 결과출력하기
print("#딕셔너리의 items()함수")
print("items() :",example_dictionary.items())
print()

#for반복문과 items() 함수 조합해서 사용하기
print("#딕셔너리의 items() 함수와 반복문 조합하기")

for key, element in example_dictionary.items() :
  print("dictionary[{}] = {}".format(key,element))

위 실행 결과

 

 

05.12

장염땜에 죽겠어요.. ㅎ

오늘은 HTML + CSS!!

 

첫 시간은 지지난주에 했었던

내용 복습이라 스킵!

오늘은 모바일과 태블릿 PC용

레이아웃을 공부했다.

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>스마트폰 레이아웃 만들기</title>
  
    <!--초기화-->
    <style>
      *{margin: 0; padding: 0;}
      body{}
      li{list-style: none;}
      a{text-decoration: none;}
    </style>
    <!--헤더-->
    <style>
      #main_header{
        height: 45px;
        background-image: url('header_background.png');

        position: relative;
        text-align: center;
        line-height: 45px;
      }
      #main_header > h1{
        color:white;
      }
      #main_header > a, #main_header > label{
        display: block;
        height: 32px;
        position: absolute;
      }
      #main_header > a.left{
        width: 62px;
        left: 5px; top:7px;
      }
      #main_header > label.right{
        width: 32px;
        right: 5px;top: 7px;
      }
    </style>
    <!--스프라이트 이미지-->
    <style>
      #main_header>a.left{
        background-image: url("sprites.png");
        background-position: 0px 0px;
        text-indent: -99999px;
      }
      #main_header > label.right{
        background-image: url("sprites.png");
        background-position: -62px 0px;
        text-indent: -99999px;
      }
    </style>
    <!--토글목록-->
    <style>
    /*토글구현*/
      #toggle{display: none;}
      #toggle + #wrap > #toggle_gnb_wrap{display: none;}
      #toggle:checked + #wrap > #toggle_gnb_wrap{display:block;}
    
    /*레이아웃 색상*/
      #toggle_gnb_wrap{
        background-color: gray;
        padding : 15px;
      }
      #toggle_gnb {
        background : #ffffff;
        padding : 5px;
      }

    /*토글 목록*/
    #toggle_gnb>ul{
      overflow: hidden;
    }
    #toggle_gnb >ul >li{
      width: 80px;
      float: left;
    }
    </style>
    
    <!--네비게이션1-->
    <style>
      #top_gnb{
        overflow: hidden;
        border-bottom: 1px solid black;
        background: #b42111;
      }
      #top_gnb > div > a{
        float: left;
        width: 25%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        color: white;
      }
    </style>
    <!--네비게이션2-->
    <style>
      #bottom_gnb{
        display: table;
        width: 100%;
        border-bottom: 1px solid black;
      }
      #bottom_gnb > div{
        display: table-cell;
        position: relative;
      }
      #bottom_gnb > div > a{
        display: block;
        height: 35px;
        line-height: 35px;
        text-align: center;
      }
      #bottom_gnb > div > a::before{
        display: block;
        position: absolute;
        top: 9px; left: -1px;
        width: 1px; height: 15px;
        border-left: 1px solid black;
        content: '';
      }
    </style>
    <!--본문-->
    <style>
      #section_header{
        padding: 20px;
      }
      #section_article{
        padding: 10px;
      }
    </style>
    <!--푸터-->
    <style>
      #main_footer{
        padding: 10px;
        border-top: 3px solid black;
        text-align: center;
      }
    </style>
</head>
<body>
  <input id="toggle" type="checkbox"/>
  <div id="wrap">
    <header id="main_header">
      <a class="left" href="#">Main</a>
      <h1>Mobile</h1>
      <label class="right" for="toggle" onclick="">Toggle</label>
    </header>
  <div id="toggle_gnb_wrap">
    <div id="toggle_gnb">
      <ul>
        <li><a href="#">버튼</a></li>
        <li><a href="#">버튼</a></li>
        <li><a href="#">버튼</a></li>
        <li><a href="#">버튼</a></li>
        <li><a href="#">버튼</a></li>
        <li><a href="#">버튼</a></li>
        <li><a href="#">버튼</a></li>
        <li><a href="#">버튼</a></li>
      </ul>
    </div>
  </div>
  <nav id="top_gnb">
    <div><a href="#">버튼</a></div>
    <div><a href="#">버튼</a></div>
    <div><a href="#">버튼</a></div>
    <div><a href="#">버튼</a></div>
  </nav>
  <nav id="bottom_gnb">
    <div><a href="#">버튼</a></div>
    <div><a href="#">버튼</a></div>
    <div><a href="#">버튼</a></div>
    <div><a href="#">버튼</a></div>
    <div><a href="#">버튼</a></div>
  </nav>
  <section id="main_section">
    <header id="section_header">
      <h1>Lorem ipsum</h1>
      <time> 2021-05-12 - Birthday</time>
    </header>
    <article id="section_article">
      <p>Sint deserunt ea ad excepteur amet quis non aute exercitation est sit quis elit. Irure sint incididunt sit cillum cupidatat culpa nulla esse id laborum. Ex in cillum eiusmod et aliquip. Enim velit ex elit ea eiusmod nisi non officia cillum aliqua voluptate. Ex eu elit irure consectetur esse pariatur voluptate ullamco. Eiusmod eiusmod ipsum irure deserunt proident.

Do duis veniam occaecat ad voluptate culpa esse eiusmod ea quis. Ipsum amet eiusmod consectetur reprehenderit nulla velit laborum nostrud. Adipisicing consectetur velit duis qui fugiat eiusmod.

Adipisicing culpa aute esse ullamco tempor nulla do incididunt. Sunt ullamco ex sunt labore irure nulla velit voluptate commodo nostrud enim mollit. Voluptate sit amet elit mollit qui deserunt ea veniam culpa pariatur. Ipsum esse aliquip dolor in id commodo. Ut officia nulla cupidatat excepteur veniam.

Duis est laboris magna eu laborum. Consectetur sint est anim aliquip ut. Ullamco irure voluptate exercitation eiusmod mollit. Deserunt ut pariatur dolor est pariatur ullamco et culpa nulla. Consequat reprehenderit tempor amet laborum Lorem nisi ut. Ullamco dolor ullamco ex tempor ullamco elit. Aliqua aute tempor velit ut qui eiusmod laborum culpa minim anim minim proident pariatur consequat.

Dolor deserunt occaecat velit nostrud ullamco ipsum reprehenderit. Cupidatat fugiat labore tempor Lorem aute ut. Ad amet tempor est laborum laboris tempor veniam esse consectetur laborum officia voluptate nulla nostrud.</p>
<br>
<p>Duis ut fugiat Lorem occaecat adipisicing dolore consectetur. Enim aliquip labore occaecat mollit duis excepteur ad incididunt laborum labore laborum. Voluptate duis sint ullamco dolore aliqua veniam reprehenderit cillum do ea. Pariatur mollit proident cillum id in nulla mollit nulla ex aute exercitation. Consectetur sit sint mollit ex fugiat pariatur ex laboris dolor sunt sint culpa exercitation. Aute minim magna adipisicing exercitation cupidatat.

Eu ea sint amet commodo amet laboris ex consectetur tempor velit eu non. In Lorem adipisicing ad est ullamco. Lorem id ea ex et dolor nisi. Qui Lorem incididunt ea deserunt sunt ut est culpa laborum. Dolore dolore dolore exercitation incididunt deserunt labore ut dolore enim ullamco amet deserunt nulla. Tempor aliqua ex labore dolor nisi labore in anim id sunt eiusmod aliquip ipsum.

Sunt proident voluptate excepteur laboris cillum nostrud minim voluptate tempor consectetur. Laborum irure incididunt cillum deserunt proident tempor. Cupidatat aliqua tempor proident adipisicing esse. Culpa culpa ad fugiat reprehenderit occaecat incididunt ex ex quis amet qui labore. Ex nisi mollit excepteur consectetur officia sit deserunt laboris aute non nostrud ut cupidatat.

Mollit id esse duis do sunt sunt et. Excepteur anim dolor aute proident enim eiusmod fugiat cillum. Esse quis non anim sint pariatur adipisicing nostrud occaecat anim ipsum eiusmod. Ad deserunt veniam eu commodo nisi sit. Elit ex in nisi eu in sit incididunt. Adipisicing aliqua pariatur consectetur ullamco qui velit ullamco nulla ipsum dolor ea sit. Nisi officia nisi esse voluptate.

Voluptate sit ea in ut. Laboris aute quis laboris esse dolor occaecat dolor id aute. Incididunt fugiat nostrud et incididunt ipsum pariatur deserunt excepteur dolore officia aute magna tempor minim.</p>
<br>
<p>Nulla aute ad Lorem excepteur voluptate. Ut ea aliquip in irure qui dolor voluptate. Laborum laborum sunt duis magna velit consequat cillum amet. Eu dolore deserunt proident adipisicing reprehenderit ea magna. Consectetur cupidatat culpa dolor reprehenderit commodo consequat consequat quis minim ullamco sint occaecat eu amet.

Mollit adipisicing tempor ea consectetur adipisicing veniam nulla sunt nostrud esse aute consequat fugiat velit. Fugiat labore occaecat exercitation irure esse veniam reprehenderit esse qui minim officia aliqua reprehenderit culpa. Commodo ullamco id minim labore nisi nisi ea consectetur ullamco magna labore proident magna. Ut officia ullamco reprehenderit consectetur minim duis eiusmod eiusmod ut. Amet veniam Lorem aliquip cupidatat incididunt ex reprehenderit occaecat ea ea esse consectetur consequat in. Elit mollit laboris velit nostrud ipsum et nisi aliquip commodo eiusmod ut sint. Laborum do est pariatur labore culpa sint est nostrud deserunt Lorem.

Velit aliquip minim magna laboris ea esse officia exercitation anim ea. Nisi aliquip occaecat occaecat excepteur. Ullamco tempor veniam consectetur et aliqua enim proident consectetur duis cillum reprehenderit veniam elit duis.

Nulla aliqua ea incididunt elit est Lorem incididunt. Cupidatat ex pariatur dolor ipsum fugiat. Magna excepteur ex ipsum velit reprehenderit id exercitation exercitation in laboris officia esse aliquip labore. Eu culpa ea sint nisi elit ut qui amet qui magna. Mollit minim minim officia anim quis ut magna cillum fugiat est nisi. Laboris anim esse in sint. Exercitation fugiat eiusmod esse exercitation labore labore aliquip nisi cillum veniam culpa culpa incididunt.

Non in ut Lorem fugiat cillum nisi mollit aliquip anim do fugiat sit aliquip. Non laboris ullamco eiusmod eu id sit velit excepteur ad aliquip nisi proident duis. Consectetur id tempor laborum sint eu dolor magna eiusmod nostrud excepteur nulla.</p>
<br>  

</section>
  <footer id="main_footer">
    <h3>Mobile HTML+CSS</h3>
    <address>https://www.w3schools.com/</address>
  </footer>
  </div>
</body>
</html>

 

우선 모바일 버전 레이아웃

 

위 실행 결과

 

메뉴 토글이 가능하도록 만들어 보았다.

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>태블릿PC_레이아웃</title>
  <!--초기화-->
  <style>
    *{margin: 0; padding: 0;}
    li{list-style: none;}
    a{text-decoration: none;}
  </style>
  <!--헤더-->
  <style>
    #main_header{
      height: 60px;
      line-height: 60px;
      background: #1D4088;
      color: white;
      padding-left: 10px;
      border-bottom: 1px solid black;
    }
  </style>
  <!--네비게이션-->
  <style>
    #main_gnb{
      overflow: hidden;
      border-bottom: 1px solid black;
      background: #32394a;
    }
    #main_gnb > ul.left{
      overflow: hidden;
      float: left;
    }
    #main_gnb > ul.right{
      overflow: hidden;
      float: right;
    }
    #main_gnb > ul.left>li{
      float: left;
    }
    #main_gnb > ul.right>li{
      float:right;
    }
    #main_gnb a{
      display : block;
      padding : 10px 20px;
      border-left: 1px solid #5f6673;
      border-right: 1px solid #242a37;
      color: white;
      font-weight: bold;
    }
    body{min-width: 760px;}
  </style>
  <!--콘텐츠-->
  <style>
    #wrap{
      overflow: hidden;
    }
    #wrap > #main_lnb{
      float: left;
      width: 200px;
    }
    #wrap > #content_wrap{
      float: left;
      width: 100%;
      margin-right: -200px;
    }
    #wrap > #content_wrap > #content{
      padding-right: 200px;
    }
  </style>
  <!--수직목록-->
  <style>
    #wrap{
      background: #71b1d1;
    }
    #main_lnb >ul > li > a{
      display: block;
      height: 40px;
      line-height: 40px;
      padding-left: 15px;

      border-top: 1px solid #96d6f6;
      border-bottom: 1px solid #6298b2;
      color: white;
      font-weight: bold;
    }

  </style>
  <!--본문-->
  <style>
    #content{
      background: white;
      border-left: 1px solid black;
    }
    article{
      padding : 10px;
    }
  </style>
  <!--푸터-->
  <style>
    #main_footer{
      text-align: center;
      padding-left: 10px;
      border-top: 3px solid black;
    }
  </style>
</head>
<body>
  <header id="main_header">
    <h1>Fluid</h1>
  </header>
  <nav id="main_gnb">
    <ul class="left">
      <li><a href="#">BUTTON</a></li>
      <li><a href="#">BUTTON</a></li>
      <li><a href="#">BUTTON</a></li>
      <li><a href="#">BUTTON</a></li>
      <li><a href="#">BUTTON</a></li>
      <li><a href="#">BUTTON</a></li>
    </ul>
    <ul class="right">
      <li><a href="#">BUTTON</a></li>
      <li><a href="#">BUTTON</a></li>
    </ul>
  </nav>
  <div id="wrap">
    <nav id="main_lnb">
      <ul>
        <li><a href="#">BUTTON</a></li>
        <li><a href="#">BUTTON</a></li>
        <li><a href="#">BUTTON</a></li>
        <li><a href="#">BUTTON</a></li>
        <li><a href="#">BUTTON</a></li>
      </ul>
      </nav>
  <div id="content_wrap">
    <div id="content">
      <article>
        <h1>본문1</h1>
        <p>Aute consectetur sit proident cillum ipsum nisi id pariatur esse. 
          Nulla eiusmod esse qui pariatur. Lorem consequat dolore occaecat officia nisi. 
          Consequat veniam ipsum nisi labore esse nisi veniam. Laboris incididunt et id voluptate ullamco deserunt minim cillum.
          Qui voluptate consequat reprehenderit veniam do in nostrud.
          Adipisicing proident aliquip incididunt sint aliqua cupidatat labore tempor irure dolor. 
          Commodo non dolor cillum eu. Ipsum ut voluptate officia laborum irure culpa voluptate ipsum tempor voluptate quis mollit ipsum.
          Consectetur consequat ut cillum nulla incididunt ad eu enim ut.
          Dolore eu elit sunt aliqua mollit sunt. Amet ipsum consectetur ea in consequat commodo reprehenderit elit magna nostrud aliqua ipsum nostrud ut.
          Ea voluptate nulla elit nulla excepteur quis exercitation anim reprehenderit.
          Sit aliqua minim laboris eiusmod fugiat cillum tempor enim quis enim proident nostrud.
        </p>
      </article>
      <article>
        <h1>본문2</h1>
        <p>Adipisicing deserunt mollit non anim est aliqua ut officia minim enim ea ut incididunt consectetur.
          Occaecat esse proident anim proident enim id ullamco nulla excepteur quis officia excepteur.
          Velit magna ullamco laborum cillum do deserunt anim consequat ullamco ea nostrud do commodo ullamco.Esse laborum mollit pariatur nulla.
          Deserunt esse et esse id duis ex laboris. Excepteur tempor adipisicing dolor Lorem nostrud qui.
          Est id cillum labore dolore amet.
          Aliqua minim ut eu est ad incididunt in anim cupidatat eu.
          Cupidatat elit labore exercitation adipisicing aute proident nulla esse qui Lorem nulla.
        </p>
      </article>
      <article>
        <h1>본문3</h1>
        <p>Adipisicing deserunt mollit non anim est aliqua ut officia minim enim ea ut incididunt consectetur.
          Occaecat esse proident anim proident enim id ullamco nulla excepteur quis officia excepteur.
          Velit magna ullamco laborum cillum do deserunt anim consequat ullamco ea nostrud do commodo ullamco.Esse laborum mollit pariatur nulla.
          Deserunt esse et esse id duis ex laboris. Excepteur tempor adipisicing dolor Lorem nostrud qui.
          Est id cillum labore dolore amet.
          Aliqua minim ut eu est ad incididunt in anim cupidatat eu.
          Cupidatat elit labore exercitation adipisicing aute proident nulla esse qui Lorem nulla.
        </p>
      </article>
    </div>
  </div>
</div>
<footer id="main_footer">
  <h3>Kim</h3>
  <address>Website Layout Basic Co.</address>
</footer>

</body>
</html>

 

태블릿 PC 버전 레이아웃 연습

 

위 실행 결과

 

05.13

낫지 않는 장염으로 인해 오늘은 재택!

오늘은 C언어 수업이다

포인터를 배우고 난 뒤

세 개의 언어중 가장 어렵다고 느껴지는

C언어.. ㅠ

 

5월의 목표..

포인터 정복하기ㅠ

 

이 날은 C언어 시험날이라 생략..!

 

 

 

05.14

JAVA 클래스 배열 관련 문제를 풀었던 날

 

밑천이 다 드러났다ㅎ

클래스 관련해서 지식이 부족하다는걸

뼈저리게 느낀 날

 

이 날은 문제 위주로 풀었기때문에 과제 카테고리에 올라올 예정!

 

'공부 > 학원.' 카테고리의 다른 글

국비 개발 학원 6주차(05.03~05.07)  (0) 2021.05.03
국비 개발 학원 5주차(04.26~04.30)  (0) 2021.04.26
국비 개발 학원 4주차(04.19~04.23)  (0) 2021.04.20
국비 개발 학원 3주차(04.12~04.16)  (0) 2021.04.12
국비 개발 학원 2주차(04.05~04.09)  (0) 2021.04.05

관련글

댓글

티스토리툴바