Emmet

 Emmet은 조금 더 적은 손길을 거쳐 효율적으로 HTML 코드를 작성하게 해주는 플러그인이다. 따고 Extension에서 설치하지 않아도 요즘 vscode에는 기본적으로 내장되어 있다. 윈도우에서는 기본적으로 tab키를 사용한다.

 

 이러한 Emmet은 대량의, 그리고 반복적인 HTML 코드를 작성할 때 좀 더 빠르게 작성할 수 있도록 도와준다.

 

 

 HTML 파일을 만든 후 !만 친 다음에 tab키를 누르면 밑의 코드가 알아서 만들어진다.

<!-- ! -->
<!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>Document</title>
  </head>
  <body></body>
</html>

 

    <!-- div -->
    <div></div>

    <!-- .class -->
    <div class="class"></div>

    <!-- .id -->
    <div class="id"></div>

    <!-- div>ul>li -->
    <div>
        <ul>
            <li></li>
        </ul>
    </div>

    <!-- div>ul+ol -->
    <div>
        <ul></ul>
        <ol></ol>
    </div>

    <!-- div>ol>li*3 -->
    <div>
        <ol>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>

    <!-- div>ul>li^ol -->
    <div>
        <ul>
            <li></li>
        </ul>
        <ol></ol>
    </div>

    <!-- div>ul>li^^span -->
    <div>
        <ul>
            <li></li>
        </ul>
    </div>
    <span></span>

    <!-- div>(header>ul>(li>a)*2)+(footer>p) -->
    <div>
        <header>
            <ul>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </header>
        <footer>
            <p></p>
        </footer>
    </div>

    <!-- p{hello} -->
    <p>hello</p>

    <!-- p.class${item$}*3 -->
    <p class="class1">item1</p>
    <p class="class2">item2</p>
    <p class="class3">item3</p>

    <!-- p>lorem -->
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita fugit tempore atque unde! Repudiandae perspiciatis magnam voluptas? Quisquam ipsum, quaerat distinctio est veritatis voluptatum quae omnis illo culpa illum expedita!</p>

    <!-- p>lorem3 -->
    <p>Lorem, ipsum dolor.</p>

 단순히 div, .class, #id와 같이 입력한 후 tab키를 눌러서 간단하게 태그를 만들 수 있다. 그리고 >와 +를 통해 부모자식형제 구조를 형성할 수 있고 *를 통해 반복되는 태그를 여러 개 형성할 수도 있다. ^를 통해서는 한 단계 위의 부모로 올라간다. ()을 통해 묶어서 태그를 형성할 수도 있다.

 

 {}로는 text로 어떤 것이 올지 적어줄 수 있고 $를 통해서 반복적인 숫자를 적어줄 수도 있다. 그리고 더미용 텍스트가 필요할 때는 lorem을 사용하면 되고 뒤에 숫자를 붙여서 더미용 텍스트의 단어를 조절할 수 있다.

'프로그래밍 > HTML' 카테고리의 다른 글

Data Attribute  (0) 2022.03.07
Semantic Markup, 시멘틱 구조  (0) 2021.11.07

* 유튜브 나도코딩의 동영상을 시청하며 작성한 개인 학습용 글입니다.

* 나도코딩 유튜브 : https://www.youtube.com/channel/UC7iAOLiALt2rtMVAWWl4pnw

 

문자열
sentence = '나는 소년입니다.'
print(sentence)
sentence2 = "파이썬은 쉬워요."
print(sentence2)
sentence3 = """
나는 소년이고,
파이썬은 쉬워요
"""
print(sentence3)

 '와 ", """로 문자열을 사용할 수 있다.

 

슬라이싱
jumin = "950622-1234567"
print('성별:', jumin[7])
print('년도:', jumin[0:2]) # 0부터 2 직전까지, 즉 0부터 1까지
print('월:', jumin[2:4]) # 2부터 4 직전까지, 즉 2부터 3까지
print('일:', jumin[4:6])
print('생년월일:', jumin[0:6])
print('생년월일:', jumin[:6]) # 해당 경우에는 처음 0이 생략가능하다. 즉 처음부터 6 직전까지
print('주민번호 뒷자리:', jumin[7:14])
print('주민번호 뒷자리:', jumin[7:]) # 7부터 끝까지
print('주민번호 뒷자리(뒤에서부터):', jumin[-7:]) # 뒤에서부터 index가 시작된다고 한다면, 맨 뒤 index는 -1이다. 따라서 index -7의 값은 1이 된다.

 슬라이싱, slicing은 필요한 만큼 정보를 자르는 것이다. Python 문법을 보면 맨 끝자리가 생략되고 그 직전까지 포함하는 경우가 많은데 조금 불편한 것 같다. 아직 왜 그렇게 하는지 몰라서 이런 생각이 드는 것 같다.

 

문자열 처리 함수
python = 'Python is Amazing'
print(python.lower()) # 문자열을 소문자로 바꿔준다.
print(python.upper()) # 문자열을 대문자로 바꿔준다.
print(python[0].isupper()) # 해당 요소가 대문자인지 판단해준다.
print(python[0].islower()) # 해당 요소가 소문자인지 판단해준다.
print(len(python)) # 길이를 반환해준다.
print(python.replace('Python', 'Java')) # 해당 요소의 문자열을 교체해준다.

 

index = python.index('n') # 해당 요소의 index 값을 반환한다.
print(index) # 5
index = python.index('n', index + 1) # 처음 n을 찾고 난 index의 + 1을 한 index, 즉 5에서부터 두번째 n을 찾고 그 값을 반환한다.
print(index) # 15
print(python.find('n')) # 비슷하게 처음 찾은 n의 index 값을 반환한다.
print(python.find('Java')) # 찾지 못할 경우 find는 -1을 반환한다.
# print(python.index('Java')) # 찾지 못할 경우 index는 에러를 낸다.
print(python.count('n')) # n이 몇 번 등장하는지 계산해준다.

 find는 원하는 요소를 못 찾으면 -1을 반환하고 index는 에러를 발생시킨다. 의도적으로 -1을 반환해야 되거나 찾지 못해도 에러가 발생하는 걸 원하지 않을 경우 find를 사용하고, 찾지 못했을 경우 치명적인 오류라고 판단해야 될 때는 index를 사용하면 될 것 같다.

 

문자열 포맷
print('나는 %d살입니다.' % 20) # % 뒤의 값을 %d에 넣겠다는 의미이다. 이떄 d는 정수형을 의미하므로 여기의 % 뒤에는 정수형 값만 넣을 수 있다.
print('나는 %s을 좋아해요.' % '파이썬') # s는 문자형을 의미한다. 참고로 s는 문자이든 숫자이든 모두 받을 수 있다.
print('나는 %s살입니다.' % 20)
print('Apple은 %c로 시작해요.' % 'A') # c는 character라서 한 글자만 받겠다는 의미이다.

print('나는 %s색과 %s색을 좋아해요.' % ('파란', '빨간'))
print('나는 {}살입니다.'.format(20))
print('나는 {}색과 {}색을 좋아해요.'.format('파란', '빨간'))
print('나는 {4}색과 {2}색을 좋아해요.'.format('파란', '빨간', '노란', '초록', '주황'))
print('나는 {age}살이며, {color}색을 좋아해요.'.format(age=20, color='빨간'))
print('나는 {age}살이며, {color}색을 좋아해요.'.format(color='빨간', age=20))

 %d, %s, %c와 format을 이용해 문자열을 좀 더 효과적으로 표현할 수 있다.

 

탈출 문자
# print('백문이 불여일견 
# 백견이 불여일타') # 2줄로 쓰고 싶을 때, 이렇게 출력하면 오류가 발생한다.

print('백문이 불여일견\n백견이 불여일타') # \n으로 해결 가능하다.
# print("저는 "나도코딩"입니다.") # 오류가 발생한다.
print('저는 "나도코딩"입니다.')
print("저는 \"나도코딩\"입니다.") # \는 뒤의 '이나 "을 문자열 그대로 출력해주는 역할을 한다.
print("저는 \'나도코딩\'입니다.")

# print("C:\Users\Administrator\Desktop\Code\Prac") # \은 뒤의 '이나 "을 문자열 그대로 출력해주기 때문에 해당 코드는 오류가 난다.
print('C:\\Users\\Administrator\\Desktop\\Code\\Prac') # \\ 으로 뒤의 \을 문자열 그대로 출력하게 해줘서 해결 가능하다.

print('Red Apple\rPine') # \r은 커서를 맨 앞으로 이동시킨다. 따라서 Red' ' 대신에 Pine으로 대체되어 PineApple이 된다.

print("Redd\bApple") # \b는 백스페이스(한 글자 삭제)이다. \b 앞의 d를 지우게 되어 RedApple을 출력하게 된다.

print('Red\tApple') # \t는 탭이다. 키보드에서 탭을 치는 것과 동일하게 작용한다.

 \n을 통해 다음 줄로 넘어가는 것이 가능하다. 그리고 '와 "을 문자열 그대로 나타낼려면 앞에 \을 붙여주면 된다. \자체를 문자열로 표현하기 위해서는 \\으로 해야된다. 그러면 \이 문자열 그대로 출력된다.

 

 \r은 커서를 맨 앞으로 이동시키고, \b는 백스페이스를 실행한다. 그리고 \t는 탭을 실행한다.

 

 여기서 \은 역슬래쉬이다.

 

퀴즈
'''
Quiz) 사이트별로 비밀번호를 만들어주는 프로그램을 작성하시오.

규칙1 : http:// 부분은 제외 => naver.com
규칙2 : 처음 만나는 점(.) 이후 부분은 제외 => naver
규칙3 : 남은 글자 중 처음 세자리 + 글자 갯수 + 글자 내 'e' 갯수 + '!'로 구성

예) 생성된 비밀번호 : nav51!
'''
website = 'http://google.com'
replacedWebsite = website.replace('http://', '') # 규칙 1
finalReplacedWebsite = replacedWebsite.replace('.com', '') # 규칙 2 # 해당 경우는 사이트가 .com으로 끝나지 않을 수 있으므로 적절치 않다.
# finalReplacedWebsite = replacedWebsite[:replacedWebsite.index('.')] # index를 활용한 규칙 2 대체 방안

password = finalReplacedWebsite[:3] + str(len(finalReplacedWebsite)) + str(finalReplacedWebsite.count('e')) + '!'
print(f'생성된 비밀번호 : {password}')
print('생성된 비밀번호 : {}'.format(password))
print('생성된 비밀번호 : {2}'.format(0, 'jun', password, 'hello'))
print('{0}으로 인해 생겨난 비밀번호는 {2}입니다.'.format(website, 'jun', password, 'hello'))

 처음 내가 짠 코드는 마지막 사이트가 .com으로 끝나지 않는다면 유효하지 않다. 나도코딩님 해설이 더 정확할 듯 싶다. 그리고 http가 아닌 https라면 if 구문으로 나눠야 할 것 같다.

'프로그래밍 > Python' 카테고리의 다른 글

리스트, 딕셔너리, 튜플, 세트  (0) 2022.03.09
조건문과 반복문  (0) 2022.03.08
연산자  (0) 2022.03.03
자료형  (0) 2022.03.03

* 유튜브 나도코딩의 동영상을 시청하며 작성한 개인 학습용 글입니다.

* 나도코딩 유튜브 : https://www.youtube.com/channel/UC7iAOLiALt2rtMVAWWl4pnw

 

기본 연산 및 조건 연산
print(1+1)
print(3-2)
print(5*2)
print(6/3)
print(2**3) # 제곱
print(5%3) # 나머지
print(5//3) # 몫

print(10 > 3)
print(4 >= 7)
print(10 < 3)
print(5 <= 5)

print(3 == 3) # 앞과 뒤의 값이 같은지 확인
print(4 == 2)
print(3 + 4 == 7)
print(1 != 7) # 앞과 뒤의 값이 같지 않은지 확인
print(not(1 != 3)) # True를 역으로 변환하여 False가 출력된다.

print((3 > 0) and (3 < 5))
print((3 > 0) & (3 < 5))

print((3 > 0 ) or ( 3 > 5))
print((3 > 0 ) | (3 > 5))

print(5 > 4 > 3)
print(5 > 4 > 7)

 

변수를 이용한 연산
number = 2 + 3 * 4
print(number) # 14
number = number + 2
print(number) # 16
number += 2
print(number) # 18
number *= 2
print(number) # 36
number /= 2
print(number) # 18
number -= 2
print(number) # 16
number %= 5
print(number) # 1

 

숫자 처리 함수
print(abs(-5)) # 절댓값 5
print(pow(4, 3)) # 4^3 64
print(max(5, 12, 7, 2014, 34, 703)) # 최댓값을 반환한다. 2014
print(min(5, 12, 7, 2014, 34, 703)) # 최솟값을 반환한다. 5
print(round(3.14)) # 반올림 3

 

math 라이브러리를 사용한 연산
from math import *
print(floor(4.99)) # 내림
print(ceil(3.14)) # 올림
print(sqrt(16)) # 제곱근, 즉 출력값은 4

 이 때 from math import *에서 *은, math 라이브러리의 모든 함수, 변수, 클래스를 가져오겠다는 의미이다.

 

랜덤 함수
from random import *
print(random()) # 0.0 이상 1.0 미만의 임의의 값을 생성한다.
print(random() * 10) # 0.0 이상 10.0 미만의 임의의 값을 생성한다.
print(int(random() * 10)) # int로 인해 정수형만 출력한다. 따라서 0 이상 10 미만의 임의의 정수형의 값을 생성한다.
print(int(random() * 10) + 1) # 1 이상 11 미만, 즉 1 ~ 10 사이의 임의의 정수형 값을 생성한다.

 

 - 랜덤 함수를 활용한 로또 번호 생성

print(int(random() * 45) + 1) # 1 ~ 45
print(randrange(1, 46)) # 1 이상 46 미만의 임의의 정수형 값을 생성한다. randrange는 끝을 포함하지 않는다.
print(randint(1, 45)) # 1 이상 45 이하의 임의의 정수형 값을 생성한다.randint는 끝을 포함한다.

 위 3가지 방법 중 1개를 골라 6번 출력시키면 6개의 로또 번호를 생성할 수 있다.

 

퀴즈
'''
Quiz) 당신은 최근에 코딩 스터디 모임을 새로 만들었습니다.
월 4회 스터디를 하는데 3번은 온라인으로 하고 1번은 오프라인으로 하기로 했습니다.
아래 조건에 맞는 오프라인 모임 날짜를 정해주는 프로그램을 작성하시오.

조건1 : 랜덤으로 날짜를 뽑아야 한다.
조건2 : 월별 날짜는 다름을 감안하여 최소 일수인 28일 이내로 정한다.
조건3 : 매월 1 ~ 3일은 스터디 준비를 해야 하므로 제외한다.

(출력문 예제)
오프라인 스터디 모임 날짜는 매월 x일로 선정되었습니다.
'''
randomDay = randint(4, 28)
print('오프라인 스터디 모임 날짜는 매월', randomDay, '일로 선정되었습니다.')
print('오프라인 스터디 모임 날짜는 매월 ' + str(randomDay) + '일로 선정되었습니다.')

'프로그래밍 > Python' 카테고리의 다른 글

리스트, 딕셔너리, 튜플, 세트  (0) 2022.03.09
조건문과 반복문  (0) 2022.03.08
문자열  (0) 2022.03.04
자료형  (0) 2022.03.03

* 유튜브 나도코딩의 동영상을 시청하며 작성한 개인 학습용 글입니다.

* 나도코딩 유튜브 : https://www.youtube.com/channel/UC7iAOLiALt2rtMVAWWl4pnw

 

 자료형

숫자형
print(5)
print(-10)
print(3.14)
print(1000)
print(5+3)
print(2*8)
print(3*(3+1))

 

문자형
print('풍선')
print("나비")
print('ㅋㅋㅋㅋㅋㅋㅋ')
print('ㅋ'*7)

 

 

Boolean(True / False)
print(5 > 10)
print(5 < 10)
print(True)
print(not True) # False

 not 연산자를 통해 뒤에 오는 값을 역으로 변환 시킬 수 있다. 

 

변수
animal = '강아지'
name = '연탄이'
age = 4
hobby = '산책'
is_adult = age >= 3

 JavaScript와는 달리(그나마 좀 배운 것이 JavaScript 밖에 없다), var이나 let, const와 같은 선언이 필요 없다.

 

print('우리집 ' + animal + '의 이름은 ' + name + '예요')
print(name + '는 ' + str(age) + '이며, ' + hobby + '을 아주 좋아해요')
# 파이썬에서 정수형을 문자형으로 출력할 때는 str을 붙여줘야 한다.

print(name + '는 어른일까요? ' + str(is_adult))
# Boolean형도 마찬가지로 문자형으로 출력하려면 str을 붙여줘야 한다.

 JavaScript에서는 위에서 str을 사용한 것처럼 정수형을 문자형으로 바꿔줄 필요가 없으나, Python에서는 필요하다. 

Boolean형도 마찬가지로 str을 써서 문자형으로 바꿔줘야 한다.

 

hobby = '낮잠'
print(name, '는', age, '이며 ', hobby, '을 아주 좋아해요')
# 연탄이 는 4 이며  낮잠 을 아주 좋아해요

 Python에서는 그냥 변수 재할당이 가능하다.

 

 그리고 쉼표를 사용해서 문자열들을 붙여줄 수 있다. 이 때 각 요소의 뒤에 공백 1칸이 추가된다. 또한, 쉼표를 사용하여 문자열을 출력할 때는, 정수형이나 Boolean형에 str을 쓰지 않아도 된다.

 

퀴즈
Quiz) 변수를 이용하여 다음 문장을 출력하시오.

변수명
 : station

변수값
 : '사당', '신도림', '인천공항' 순서대로 입력

출력 문장
 : xx행 열차가 들어오고 있습니다.
station1 = '사당'
station2 = '신도림'
station3 = '인천공항'
sentence = '행 열차가 들어오고 있습니다.'

print(station1 + sentence)
print(station2 + sentence)
print(station3 + sentence)

'프로그래밍 > Python' 카테고리의 다른 글

리스트, 딕셔너리, 튜플, 세트  (0) 2022.03.09
조건문과 반복문  (0) 2022.03.08
문자열  (0) 2022.03.04
연산자  (0) 2022.03.03

 2진법을 통해서 컴퓨터가 어떻게 0과 1만으로 숫자들을 나타내는지 확인해보았다. 그렇다면 문서나 이메일과 같이 글자를 쓸 때는 어떻게 표현하는 걸까?

 

 ASCII 

 문자를 숫자로 표현할 수 있도록 정해진 약속이 있는데, 미국 기준으로 만들어진 ASCII(아스키 코드)이다. 아스키 코드는 7비트를 사용하기 때문에 총 128개의 부호가 있다. 확장 아스키코드는 8비트로 256개의 부호를 사용할 수 있다.

아스키 코드 중 영어 알파벳들

 아스키 코드로 만들어진 CS50이라는 문자를 2진수로 변환한다면 1000011 / 1010011 / 101 / 0 이 된다.

 

 아스키 코드에서 A의 10진수는 65인데, 이를 2진수로 표현하면 1000001(64x1 + 1x1)이 된다. 현대에는 128개 혹은 256개의 부호만으로는 충분치 않아 Unicode(100만개 이상의 문자 사용 가능)를 사용하고 있다.

 

 이 Unicode에서 😂는 10진수로 128,514이고 2진수로는 11111011000000010이다.

 

 

 그림, 영상, 음악의 표현

 2진법으로 10진수를 나타낼 수 있고, 이 10진수로 RGB를 통한 색 표현에서 나아가 사진이 표현 가능하다. 하나의 픽셀에 서브 픽셀로 빨간색, 초록색, 파란색이 들어가게 되는데 이 3가지 색상이 적절하게 섞여서 하나의 색깔을 가진 픽셀이 된다. 예를 들자면 (72, 73, 33)이라고 할 때 빨간색이 72정도, 초록색이 73정도, 파란색이 33정도라는 것이고 이것이 섞여 하나의 픽셀이 된다. 실제로 (72, 73, 33)는 누르끼리한 노란색의 색깔을 나타낸다.

 

 이러한 픽셀들이 모여서 사진이되고, 사진이 모여서 만들어지는 것이 영상이다. 그리고 각 음표를 특정한 숫자에 녹음하여 음악 또한 표현이 가능하다. 그러므로 2진법을 이용해 10진수, 글자, 사진, 영상, 음악의 표현이 가능해지는 것이다.

 

 

 

* 부스트코스 CS50 강의를 학습하며 작성하였습니다. https://www.boostcourse.org/

* 정보 전달이 아닌 학습을 목적으로 작성하여 함축되어져 있는 부분이 많습니다.

'프로그래밍 > CS50' 카테고리의 다른 글

컴퓨팅 사고 - 이진법  (0) 2022.03.02

 컴퓨터 과학

 컴퓨터 과학은 문제 해결을 위한 학문이다. 이 때 문제 해결이란, 입력(input)을 전달 받아 출력(output)을 만들어내는 과정을 말한다. 이러한 입력을 출력으로 만들어주는 중간 과정이 컴퓨터 과학이다.

 

 이진법

 일상 생활에서 우리는 0~9까지 총 10개의 숫자를 이용하는 10진법을 사용하지만, 컴퓨터는 0과 1로만 데이터를 표현하는 2진법을 사용한다. (컴퓨터는 트랜지스터로 이루어져 있고 이 트랜지스터는 전자의 이동에 의해 On/Off라는 2가지 동작이 실행된다. 이런 2가지 동작에 따라 0 혹은 1이라는 숫자를 인식할 수 있다)

 

 10진수를 2진수로 바꾸면 위의 사진과 같다. 만약 13(= 10x1 + 1x3)이라는 10진수를 2진수로 나타낸다면 1101(= 8x1 + 4x1 + 2x0 + 1x1)일 것이다.

 

 비트, bit는 binary digit의 약자이며 이진 숫자라는 뜻이다. 0과 1이라는 두 가지 값만 가질 수 있는 측정 단위이다. 비트 1개 로는 데이터를 표현하기에 부족하여, 비트 8개가 모인 바이트(byte)를 사용하고 있다.

 

 

 

* 부스트코스 CS50 강의를 학습하며 작성하였습니다. https://www.boostcourse.org/

* 정보 전달이 아닌 학습을 목적으로 작성하여 함축되어져 있는 부분이 많습니다.

'프로그래밍 > CS50' 카테고리의 다른 글

컴퓨팅 사고 - 정보의 표현  (0) 2022.03.02

+ Recent posts

티스토리툴바