TIL 1 | 1주차 HTML CSS JS

 

html 뼈대 css 꾸밈담당 js 동적요소 담당

 

 

 

1) HTML 부모-자식 구조 살펴보기

 

 html 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요합니다. 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받습니다.

 

• 빨간색 div 안에, 초록색/파란색 div가 들어있습니다. 아래와 같은 상황에서 빨간색 div를 가운데로 옮기면, 내용물인 초록/파란 div도 모두 함께 이동합니다.
• 즉, 박스를 옮기면 안의 내용물도 함께 옮겨지는 것과 같은 원리입니다
• 같은 원리로, 초록 div의 글씨색을 바꾸면, 나는버튼1의 글씨색도 바뀝니다.

이 내용을 들은후 주석에 관한내용을 다뤘는데 html과 파이썬의 차이를 알고싶어 검색을 하였습니다.

 

 

 

html에 관한내용

주석

---

주석(Comment)

주석(comment)이란 개발자가 작성한 해당 코드에 대한 이해를 돕는 설명이나 디버깅을 위해 작성한 구문을 의미합니다.

이러한 주석은 다른 HTML 코드와는 달리 웹 브라우저에 의해 표현되지 않습니다.

 

HTML에서 주석을 표현하는 방법은 다음과 같습니다.

문법

<!-- 주석내용 -->

 

HTML 주석의 시작 태그(<!--)에는 느낌표(!)가 있지만 종료 태그(-->)에는 느낌표가 없습니다.

이러한 주석은 HTML 코드의 어느 부분에서라도 사용할 수 있습니다.

또한, 여러 줄에 걸쳐 주석을 작성해도 정확히 인식할 것입니다.

예제

<!-- 작성자 : 홍길동 -->

<p>이 부분은 조금 어려운 코드입니다.</p>

<!--

    위와 같이 어려운 코드의 이해를 돕기 위해서 개발자가 적어놓은 설명입니다.

-->

위의 예제처럼 HTML 주석은 절대 웹 페이지에 나타나지 않습니다.

HTML 코드에 삽입된 주석을 읽고 싶다면, 웹 브라우저의 페이지 소스 보기 등을 통해서 확인할 수 있습니다.

 

익스플로러는 마우스 오른쪽을 누른 후 소스 보기를 통해서, 크롬과 파이어폭스에서는 F12 버튼으로 HTML 코드를 확인할 수 있습니다.

---

중첩 주석

HTML 주석은 HTML 코드의 어느 부분에서라도 사용할 수 있습니다.

하지만 HTML 주석 안에 또 다른 주석을 작성할 수는 없습니다.

 

다음 예제는 HTML 주석 안에 또 다른 주석을 삽입하는 예제입니다.

예제

<p>이 부분은 조금 어려운 코드입니다.</p>

<!--

    <!-- 주석 안에 또 다른 주석을 삽입했습니다. -->

    위와 같이 어려운 코드의 이해를 돕기 위해서 개발자가 적어놓은 설명입니다.

-->

 

위의 예제처럼 HTML 주석 안에 또 다른 주석을 삽입하면, 삽입한 주석의 종료 태그(-->)를 첫 번째 주석이 자신의 종료 태그로 인식하게 됩니다.

따라서 삽입한 주석의 종료 태그 다음부터 첫 번째 주석의 종료 태그까지의 모든 내용이 그대로 웹 페이지에 노출됩니다.

 

그러므로 HTML 주석은 절대로 중첩해서 사용해서는 안 됩니다.

 

출처:http://www.tcpschool.com/html/html_text_comments

 

 

1. 파이썬 주석의 종류

 

▶ 한줄 주석 : 샾(#)

파이썬에서는 한줄 주석을 달때는 #을 사용합니다. 아래 코드를 보시죠

 

1) 아무것도 없는 줄에 주석 달기

# 파이썬 한줄 주석 예제1
def juseok():
    print("주석 예제. BlockDMask")

보통은 #하고 스페이스로 한칸을 띄운 후에 글을 작성합니다. (파이참 IDE에서 그렇게 추천을 하네요)

 

2) 문장의 끝에 주석 달기

def juseok():
    print("주석 예제. BlockDMask") # 이것이 한줄 주석2 입니다.

 

▶ 여러줄 주석 : 큰따옴표 3개, 작은따옴표 3개

여러줄 주석은 두가지 방법으로 사용이 가능합니다.

 

1) 큰 따옴표 3개 연속으로 """ ~ """

def juseok():
    print("주석 예제. BlockDMask")
"""
첫 큰 따옴표 세개는 주석의 시작을 나타냅니다.
이렇게 자유롭게 주석을 작성한 후에 
주석이 끝난 부분에 아래처럼 큰 따옴표 세개를 다시 작성하면
주석의 끝을 나타내게 됩니다.
"""
a = 3 # 그냥 코드1
b = 4 # 그냥 코드2

이렇게 코드와 코드 사이에 주석을 작성할 수 있습니다.

 

2) 작은 따옴표 3개 연속으로 ''' ~ '''

while True:
    '''
    이 프로그램은 이렇고 저렇고 한 프로그램입니다.
    사용하실때는 출처를 남겨주세요
    설명설명설명~~
    '''
    print("=" * 30)  # "="를 30개 출력

 

2. 주석 단축키 (파이참, 파이썬 IDLE, vscode)

 

주석을 다는 단축키와 제거하는 단축키가 다른 경우가 있지만, 대부분은 동일한 단축키를 사용합니다.

보통 달려있는 주석에 같은 단축키를 입력하면 주석이 해제되고, 

주석이 없는 곳에서 주석 단축키를 사용하면 주석이 달리는 그러한 로직으로 돌아가게 됩니다.

 

▶ 파이참, vscode, vs 등 대부분 idle에서의 주석 단축키

 

Window : CTRL + /

Mac OS : Command + /

 

▶ 파이썬 IDLE 주석 단축키

 

주석 생성 : ALT + 3 

주석 제거 : ALT + 4

▶ 명령어로 여러줄 주석 달기

보통 여러줄 주석 """, ''' 을 사용하지 않고 단축키를 이용해서 원하는 코드를 드래그 한 후 명령어를 입력해서 주석을 달곤 합니다.

 

이렇게 소스코드가 존재하는데 이 소스코드를 전체 한번에 주석 처리 해야하는 상황이라 가정해볼게요

def addNum(a, b):
    print(f"{a} + {b} = {a + b}")

a = 10
b = 20
addNum(a, b)

이 소스코드를 드래그 합니다.

 

그후에 command + / , ctrl + / 등 주석 명령어를 입력합니다.

# def addNum(a, b):
#     print(f"{a} + {b} = {a + b}")
# 
# a = 10
# b = 20
# addNum(a, b)

이런식으로 한줄 짜리 주석으로 모두 주석처리 되는것을 볼 수 있습니다. 

주석해제는 주석 되어있는 줄에 커서를 두거나, 많은 줄인 경우 드래그를 한 후에 다시 주석 명령어를 입력하면 됩니다.

 

 

3. 파이썬 주석 사용시 주의사항

 

제가 공부했던 C#, C언어, C++같은 경우에는 주석의 위치나 들여쓰기등 주석은 아무곳에서나 사용하면 되었었는데요. (문장 사이 제외)

파이참의 주석은 좀 달랐습니다.

 

▶ 파이썬 주석의 특징, 주의할점

눈치가 빠르신 분들은 제가 1번 주석의 종류에서 작은따옴표로 예제를 든 부분을 보시고 땋 캐치 하셨을 수도 있습니다.

아니 그렇다고 위에 다시 가지 않으셔도 됩니다. 아래에서 다른 예제로 보여드리겠습니다. :)

 

파이썬 주석은.... "들여쓰기"를 해주어야합니다.

무슨 뜻인가 하면 파이썬은 들여쓰기로 if문의 끝, 함수의 끝 등 범위를 인식하게 되는데요, 주석도 마찬가지로 들여쓰기로 어느 함수의 주석인지 구분을 하게 됩니다.

아래 예제들을 보시죠.

class juseokExample:
'''
파이썬 주석은 들여쓰기를 잘 맞춰주어야 합니다. 이런경우 에러남
'''
    def __init__(self):
        a = 10
        b = 20

이런식으로 주석을 달려고 하면 IDE에서 IndentationError: expected an indented block 이라는 에러를 뱉습니다.

 

그렇기 때문에 들여쓰기로 맞추어서 아래처럼 이쁘게 주석을 달아주어야합니다.

class juseokExample:
'''
파이썬 주석은 들여쓰기를 잘 맞춰주어야 합니다. 이렇게 들여쓰기 맞춰주기
'''
def __init__(self):
a = 10
b = 20

출처: https://blockdmask.tistory.com/376 [개발자 지망생]

 

오늘 강의를 들으면서 그동안 그냥 넘어갔던부분 로직적인부분말고도 기능적인부분을 생각해서

background image로 구현된 코드를 img태그로 바꿔서 구현해볼려고했지만 그부분을 끝내 완성하지못하였고 성공되지않은 코드를 옮기기 민망하여 작성을 하지않았습니다. 이번에 주석에 대해서 알아본이유는 앞으로 코딩을하면서 주석을 달 부분이 많아질거같아서 조사를했던부분이었으며 이번주동안 내가 이 강의를 들으면서 작아도 꼭 궁금했었던 내용들을 위주로 기록을 해놓으면서 가고싶다. 가장 핵심내용은 css관련내용 중 부모-자식 간의 관계가 가장 중요해보였기에 이 내용을 오늘의 핵심내용이라고 생각한다.