기술소개

HTML : Hyper Text Markup Language

Hyper Text : 링크와 같은기능

Markup : 문법적인 형식 

-> 하이퍼텍스트를 가장 중요한 특징으로 하는 마크업 형식을 가진 프로그래밍 언어

Language : 언어

언어의 핵심은 약속이다. 약속을 공유하고 있기 때문에 서로 소통이 가능하다.

기계를 제어하고 싶으면 사람도 이해할 수 있고, 기계도 이해할 수 있는 약속이 필요하며 이를 언어라고 부른다.

HTML은 웹 브라우저에 표시되는 웹 페이지를 컴퓨터에게 만들어달라고 표현하는 언어이다.

사람과 웹 브라우저 사이에서 모두가 이해 가능한 약속(언어)이다.

웹 브라우저에서 우클릭 -> 페이지 소스 보기를 클릭하면 나오는 문자들이 HTML 코드 이다.

 

기본 문법

태그 : HTML에서 가장 중요한 문법이며 Markup가 태그와 밀접한 관계를 가진다.

텍스트 파일에 내용을 넣고, 인코딩은 utf-8 로 하고, 확장자는 .html 확장자를 사용하여야 한다.

확장자가 html이면 파일을 더블클릭 했을 때 웹 브라우저가 열린다. 운영체제가 해당 확장자를 열 프로그램을 미리 지정하고 있기 때문이다.

텍스트 편집기에 입력된 내용을 웹 브라우저가 화면에 표시해주고 있다.

<strong> </strong>안에 있는 내용은 글씨가 굵게 강조되어 표시된다. 이러한 것들을 태그라 그러고, <strong>를 시작태그 , </strong>를 닫히는 태그라 한다. 시작 태그에서 닫히는 태그 안에 있는 내용을 강조하는 것이다.

웹 브라우저에서는 텍스트 편집기에서 입력한 줄바꿈이 적용되지 않는다.

위와 같이 <h1>태그를 사용하면 제목을 적을 수 있다. h1은 heading 1 이라는 뜻이다. 웹 브라우저는 h1이라는 태그가 사용되면 굵고 큰 글씨로 표현되고, 줄을 바꾼다고 약속되어 있기 때문에  h1 태그를 작성하면 위와 같이 표현한다. 더 작은 제목을 쓰고 싶으면 h2를 사용하면 된다.

태그는 꺽쇠로 시작하고, 꺽쇠 안 태그 이름에 슬래시를 붙인다.

 

하이퍼텍스트와 속성

a 라는 태그로 다른 웹사이트의 링크를 달 수 있다. 연결될 웹 페이지의 url을  a 뒤 href=""에 넣어야 한다. href와 같은것을 속성 이라고 한다.

웹 페이지에 링크가 생기며 클릭하면 href속성에 작성한 url로 페이지가 이동된다.

위와 같이 target 라는 속성에 "_blank"를 넣으면 새 탭에서 연결된 url 페이지가 열린다. 속성의 순서는 상관 없고, 속성에 따라서 태그의 기능이 추가된다.

a 태그는 문서와 문서가 연결되는 하이퍼 텍스트를 구현한 것이다. a태그는 anchor에서 가져온 것이다. anchor은 배의 닻이라는 의미를 갖고 있고, 연결할 url에 정박해 있다는 의미일 것이다.

GML -> SGML -> SGMLguid -> HTML의 순서로 HTML이 발전하였다. 

 

태그의 중첩과 목록

각각의 항목들을 리스트로 표현하려면 <li>라는 태그를 사용한다.

<li> 태그를 사용하면 각각의 항목들이 시각적으로 구분되게 사용할 수 있다.

서로 성격이 같은 태그들을 다음과 같이 <ul>태그로 묶으면 <ul>태그로 묶인 태그끼리 구분할 수 있다.

위와 같이 태그 안에 태그를 넣어 중첩하여 사용할 수도 있다. 위와  같은 방식으로 사용하면 태그가 복잡해질수록 읽기 힘들어 지기 때문에 들여쓰기를 사용하여 가독성을 높여줄 수도 있다.

위에 있는 순서가 있는 리스트로 표현하려면 ul을 ol로 바꿔 주면 된다.

li 는 list의 약자이고, ol은 ordered list의 약자이고, ul은 unordered list의 약자이다.

 

문서의 구조

<title> 태그를 사용하면 탭의 제목을 정해줄 수 있다. <meta charset="utf-8">을 사용하면 문서가 깨질 경우를 방지할 수 있다.

<title>HTML - 수업</title>
<meta charset="utf-8">

<h1>HTML</h1>
<ol>
    <li>기술소개</li>
    <li>기본문법</li>
    <li>하이퍼텍스트와 속성</li>
    <li>리스트와 태그의 중첩</li>
</ol>

<h2>hello world</h2>

html 문서의 위 두줄은 본문과는 관계없는 부가적인 내용들을 담고 있고, 그 아래부터는 본문의 내용들을 담고 있다. 

html에서는 문서의 부가적인 정보들과 본문에 해당하는 정보들을 각각 다른 태그에 담도록 약속하고 있다.

본문이 아닌 태그들과 본문인 태그들은 head태그와 body 태그로 구분하기로 약속하고 있다.

또한 문서의 가장 바깥에 html 태그를 두어 그 안에 head 태그와 body 태그를 담기로 약속되어 있다.

<html>
<head>
    <title>HTML - 수업</title>
    <meta charset="utf-8">
</head>

<body>
    <h1>HTML</h1>
    <ol>
        <li>기술소개</li>
        <li>기본문법</li>
        <li>하이퍼텍스트와 속성</li>
        <li>리스트와 태그의 중첩</li>
    </ol>

    <h2>hello world</h2>
</body>
</html>

 

DOCTYPE

DOCTYPE은  html문서의 시작 부분에 <!DOCTYPE html>이라는 태그를 넣어 줘야 한다. 

DOCTYPE은 Document type declaration의 약자이다. 어떤 방식으로 html코드를 작성했는지 브라우저에게 알려주는 문자이다. 어떠한 표준에 따라 문서를 작성했는지 알려주는 역할을 한다.

 

웹사이트 만들기

<html>
<head>
    <title>HTML - 수업</title>
    <meta charset="utf-8">
</head>

<body>
    <h1><a href="index.html">HTML</a></h1>
    <ol>
        <li><a href=1.html>기술소개</a></li>
        <li><a href=2.html>기본문법</a></li>
        <li><a href=3.html>하이퍼텍스트와 속성</a></li>
        <li><a href=4.html>리스트와 태그의 중첩</a></li>
    </ol>

    <h2>hello world</h2>
</body>
</html>

위와 같은 li 태그의 내용에  a태그로 링크를 걸어서 각 페이지 마다 다른 내용을 웹 브라우저에서 보여주는 웹 사이트를 만들 수 있다. 이 실습에서는 본문은 다 동일하게 하고 페이지 구분을 위해 h2 태그의 내용만 수정하였다. 다음은 기본문법에 링크된 페이지(2.html) 이다.

 

개발도구

html을 사용하여 웹 페이지를 만들 때 사용하는 도구(프로그램)이다. 개발 도구에는 atom, sublime text, bracket등이 있다. 나는 개발도구로 vscode를 사용할 것이다.

 

HTML의 변천사와 통계

www.martinrinehart.com/frontend-engineering/engineers/html/html-tag-history.html

 

HTML Tag History

HTML Tags: Past, Present, Proposed © 2012, Martin Rinehart Prerequisite: This page was prepared for students learning from Professional HTML, Volume I of V in the Frontend Engineering series. It is most meaningful to persons currently using HTML who wish

www.martinrinehart.com

위 사이트는 html 버전의 태그들이 어느 버전때 생겨났고, 어느 버전때 사라지게 된 태그들이 있는지 확인할 수 있는 html 연대기 사이트 이다.

www.advancedwebranking.com/html/

 

The average web page from top twenty Google results

Apparently, an average web page uses thirty-two different element types: The thirty-two elements used on most pages, ordered by appearance frequency:

www.advancedwebranking.com

위 사이트는 구글에서 분석한 웹 페이지에서 html태그를 얼마나 많이 사용하는가? 어떤 태그들이 웹 페이지에서 많이 등장하는가? 등의 html의 태그에 관련된 통계를 확인할 수 있다.

 

주요태그

단락 - p

p 태그는 paragraph의 줄임말로 단락을 구분할 때 사용한다. 단락은 줄바꿈과 약간의 여백으로 구분한다.

<html>
    <body>
        <p> 
        Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. 
        It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.
        </p>
        <p>
        Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. 
        HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
        HTML elements are the building blocks of HTML pages.
        </p>
        <p>
        With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. 
        HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. 
        HTML elements are delineated by tags, written using angle brackets.
        </p>
    </body>
</html>

p 태그를 사용하면 웹 페이지에서 단락을 구분할 수 있다. 단락간의 간격은 CSS를 통해서 변경시킬 수 도 있다.

'Project H4C Study Group' 카테고리의 다른 글

[Project H4C] opentutorials HTML(3)  (0) 2021.02.09
[Project H4C] opentutorials HTML(2)  (0) 2021.02.06
[Project H4C] 코드업 기초100제(4)  (0) 2021.02.04
[Project H4C] 코드업 기초 100제(3)  (0) 2021.02.04
[Project H4C] 코드업 기초100제(2)  (0) 2021.02.03

1097 : [기초-2차원배열] 바둑알 십자 뒤집기(설명)

처음 바둑판 상태를 입력받고, 뒤집기할 횟수를 입력받고, 좌표를 입력받는다.  반복문으로 반복하며 좌표의 가로줄과 세로줄의 흑, 백을 변환한다. 처음 바둑판 상태는 판 리스트를 하나 만들어 두고, 입력값 각 줄을 리스트로 만들어 기존에 만들어둔 리스트에 넣어 2차원 리스트로 만들었다. 십자 뒤집기는 입력받은 좌표의 세로줄과 가로줄 각각 반복문으로 19번 반복하며 흑과 백을 변환하였다.

pan = []
# 바둑판 초기 상태 입력
for i in range(19):
    a = list(map(int, input().split()))
    pan.append(a)

n = int(input())

for i in range(n):
    # 십자 뒤집기 할 좌표
    x, y = map(int, input().split())
    # 리스트 인덱스는 0번부터 시작하므로 1씩 빼줌
    x -= 1
    y -= 1
    # 가로 줄 흑, 백 변환
    for j in range(19):
        if pan[x][j] == 0:
            pan[x][j] = 1
        else:
            pan[x][j] = 0
    # 세로줄 흑, 백 변환
    for j in range(19):
        if pan[j][y] == 0:
            pan[j][y] = 1
        else:
            pan[j][y] = 0

# 최종 값 출력
for i in range(19):
    for j in range(19):
        print(pan[i][j], end = ' ')
    print()

 

1098 : [기초-2차원배열] 설탕 과자 뽑기

입력받은 가로, 세로 크기 만큼 0을 채운 격자판을 2차원 리스트로 만들고, 길이, 방향, 좌표를 입력받아 입력받은 좌표부터 가로 또는 세로 방향으로 입력받은 길이까지 1로 채우는 행위를 입력받은 좌표 수만큼 반복하고, 막대가 채워진 최종 격자판을 출력한다.

h, w = map(int, input().split())
pan = []

# 격자판 초기상태(모든 칸 0)
for i in range(h):
    pan.append([0] * w)

n = int(input())
for i in range(n):
    l, d, x, y = map(int, input().split())
    x -= 1
    y -= 1
    # 막대가 가로로 놓여있을 때
    if d == 0:
    	# 시작 좌표부터 가로 길이만큼 1로 채워짐
        for j in range(l):
            pan[x][y+j] = 1
    # 세로로 놓여있을 때
    else:
        # 시작 좌표부터 세로 길이만큼 1로 채워짐
        for j in range(l):
            pan[x+j][y] = 1

# 격자판 채운 모양 출력
for i in range(h):
    for j in range(w):
        print(pan[i][j], end = ' ')
    print()

 

1099 : [기초-2차원배열] 설탕 과자 뽑기

리스트의 인덱스는 0부터 시작하기 때문에 시작 인덱스를 1,1 로 지정하였고, 입력값은 한 줄씩 리스트로 만들어 입력받아 2차원 리스트로ㅓ 만들었다. 무한 루프 반복문을 만들어 개미가 먹이를 만나거나, 오른쪽 또는 아래로 이동할 수 없을 때 반복문을 탈출하도록 하였고, 벽이 없으면 오른쪽으로 벽이 있으면 아래로 이동하면서 현재 위치에 9를 저장하였다.

miro = []
x, y = 1, 1
for i in range(10):
    a = list(map(int, input().split()))
    miro.append(a)

while True:
    if miro[x][y] == 2:
        miro[x][y] = 9
        break
    miro[x][y] = 9
    if miro[x][y+1] == 0:
        y += 1
    elif miro[x][y+1] == 1:
        if miro[x+1][y] == 1:
            break
        elif miro[x+1][y] == 2:
            miro[x+1][y] = 9
            break
        else:
            x += 1
    else:
        miro[x][y+1] = 9
        break



for i in range(10):
    for j in range(10):
        print(miro[i][j], end = ' ')
    print()

'Project H4C Study Group' 카테고리의 다른 글

[Project H4C] opentutorials HTML(2)  (0) 2021.02.06
[Project H4C] opentutorials HTML(1)  (0) 2021.02.04
[Project H4C] 코드업 기초 100제(3)  (0) 2021.02.04
[Project H4C] 코드업 기초100제(2)  (0) 2021.02.03
[Project H4C] 코드업 기초 100제 (1)  (0) 2021.02.02

1078 : [기초-종합] 짝수 합 구하기(설명)

for 반복문으로 1부터 입력받은 수까지 반복하고, 반복문 안에서 짝수일 경우 그 숫자들의 합을 누적하여 저장한다.

n = int(input())
s = 0
for i in range(1,n+1):
    if i % 2 == 0:
        s += i
print(s)

 

1079 : [기초-종합] 원하는 문자가 입력될 때 까지 반복 출력하기(설명)

입력값들을 변수 하나에 공백으로 분리하여 입력받고, 입력 받은 문자 수만큼 반복하여 각 문자를 각 줄에 출력하고, q를 확인하면 반복문을 종료한다.

chars = input().split()
for i in chars:
    print(i)
    if i == 'q':
        break

 

1080 : [기초-종합] 언제까지 더해야 할까?

정수를 입력받아, 1부터 그 정수 만큼 반복하며 합을 누적한다. 누적된 합이 입력받은 정수보다 같거나 커지면 마지막으로 더한 정수를 출력하고 반복문을 종료시킨다.

n = int(input())
s = 0
for i in range(1, n):
    s += i
    if s >= n:
        print(i)
        break

 

1081 : [기초-종합] 주사위를 2개 던지면?(설명)

첫 번째 주사위 면이 1부터 n일 때 각 면의 주사위 숫자에 두번째 주사위 1부터 m이 조합될 수 있다. 1부터 n 까지 반복하면서 그 안에서 1부터 m까지 반복하여 첫번째 주사위 면이 1일때 두번째 주사위 면이 1, 2, 3, ... , m인 경우를 모두 출력할 수 있다.

n, m = map(int, input().split())

for i in range(1, n+1):
    for j in range(1, m+1):
        print(i,j)

 

1082 : [기초-종합] 16진수 구구단?

입력 받은 값을 1부터 F까지 반복하여 계산하여 출력하면 된다. 출력 예시를 보니 16진수 인데, 0x가 안붙어 있고, 다 대문자로 출력되어 있어서, 출력값을 문자열로 바꿔서 인덱스 슬라이싱과 .upper()을 통해 출력 형태를 예시와 동일하게 맞췄다.

dan = input()
dan = int(dan, 16)
for i in range(1, 16):
    print('{}*{}={}'.format(str(hex(dan))[2:].upper(), 
    str(hex(i))[2:].upper(), str(hex(dan*i))[2:].upper()))

 

1083 : [기초-종합] 3 6 9 게임의 왕이 되자!(설명)

1부터 입력값까지 반복하는 코드를 작성하고, 반복문 안에서 현재 값이 3 또는 6또는 9면 or연산을 이용하여 X를 출력하고 continue를 이용하여 반복 처음을 돌아가고, 3, 6, 9가 아니라면 그 숫자를 출력한다. 출력은 한 줄로 한 칸 씩 띄워서 하므로 end = ' '를 사용하였다.

n = int(input())
for i in range(1,n+1):
    if i == 3 or i == 6 or i == 9:
        print('X', end = ' ')
        continue
    print(i, end=' ')

 

1084 : [기초-종합] 빛 섞어 색 만들기(설명)

r, g, b는 각각 하나라도 다른 값을 가지면 다른 색을 만들수 있으므로 0부터 각 색에 대한 입력값까지 3번 중첩하여 반복하면 모든 경우의 수를 출력할 수 있고, 각 경우의 조합을 출력할때 가지수를 세는 변수를 만들어 1씩 누적한후 마지막에 누적한 값을 출력하면 된다.

r, g, b = map(int, input().split())
cnt = 0

for i in range(0, r):
    for j in range(0, g):
        for k in range(0, b):
            print(i,j,k)
            cnt += 1
print(cnt)

 

1085 : [기초-종합] 소리 파일 저장용량 계산하기(설명)

입력받은 h,b,c,s를 위에서 제시한 계산식에 넣어 계산하고, MB단위로 맞추면 된다. 위 제시한 계산식에 넣어 계산했을 때의 단위는 bit이기 때문에 MB 단위로 표현하려면 8로 한번 나누고, 1024로 두번 나눈 후 소수점 첫째자리까지 출력하면 된다.

h, b, c, s = map(int, input().split())
pcm = h * b * c * s
mb = pcm / 8 / 1024 / 1024
print(format(mb, '.1f'), 'MB')

 

1086 : [기초-종합] 그림 파일 저장용량 계산하기(설명)

입력 값들을 문제에서 제시한 계산식에 넣어 계산 한 뒤 MB단위로 바꾸면 된다. 계산식에 넣어 계산하면 단위가 비트이기 때문에 8로 나눈 후 1024로 두번 나누면 된다.

w, h, b = map(int, input().split())
bit = w * h * b
mb = bit / 8 / 1024 /1024
print(format(mb,'.2f'), 'MB')

 

1087 : [기초-종합] 여기까지! 이제 그만~(설명)

1 부터 입력값 만큼 반복하며 각 숫자의 합을 누적한다. 누적한 값이 입력한 값과 같아지거나 더 커지면 break로 반복문을 종료하고 누적했던 값을 출력한다.

n = int(input())
s = 0

for i in range(1, n+1):
    s += i
    if s >= n:
        break
print(s)

 

1088 : [기초-종합] 3의 배수는 통과?(설명)

for 반복문으로 1부터 입력 받은 숫자까지 출력하는데, 3의 배수이면 continue로 숫자를 출력하지 않고, 반복문 처음으로 돌아간다.

n = int(input())

for i in range(1, n+1):
    if i % 3 == 0:
        continue
    print(i, end = ' ')

 

1089 : [기초-종합] 수 나열하기1

수학에서 등차수열 n번째 항을 구하는 공식을 이용하여 풀었다.

a, d, n = map(int, input().split())

an = a + (n-1)*d
print(an)

 

1090 : [기초-종합] 수 나열하기2

수학에서 등비수열의 n번째 항을 구하는 공식을 이용하여 풀었다.

a, r, n = map(int, input().split())
an = a * r ** (n-1)
print(an)

 

1091 : [기초-종합] 수 나열하기3

시작 값에 어떤 값을 곱하고, 더하는 행위를 계속 반복하므로 n번째 반복했을때의 수를 구하는 것이므로 반복문으로 n번째 까지 반복한 값을 출력했다.

a, m, d, n = map(int, input().split())

for i in range(n-1):
    a = m * a + d

print(a)

 

1092 : [기초-종합] 함께 문제 푸는 날(설명)

가입한 다음 모두 같이 함께 방문하는 날은 각 방문 주기의 최소 공배수 이다. for문으로 하루씩 증가시키면서 and연산으로 방문 주기의 최소공배수를 출력하면 된다.

a, b, c = map(int,input().split())
day = 1
while True:
    if day % a == 0 and day % b == 0 and day % c == 0:
        print(day)
        break
    day += 1

 

1093 : [기초-1차원 배열] 이상한 출석번호 부르기1(설명)

무작위로 부른 출석 번호를 입력 받아 리스트로 만들고, 23개의 요소가 0으로 채워진 리스트를 만들어 23번 반복하며 리스트의 각 요소를 무작위로 부른 리스트에서 각 번호가 몇번 불러졌는지 .count로 세서 넣었다.

n = int(input())
num = map(int, input().split())
num = list(num)
num_li = [0]*23

for i in range(len(num_li)):
    num_li[i] = num.count(i+1)

for i in num_li:
    print(i, end = ' ')

 

1094 : [기초-1차원 배열] 이상한 출석번호 부르기2(설명)

리스트는 list.reverse()와 같은 형식으로 거꾸로 뒤집을 수 있다. 무작위로 부른 번호를 리스트로 만들고 거꾸로 뒤집은 후 출력하면 된다.

n = int(input())
num = map(int, input().split())
num_li = list(num)
num_li.reverse()

for i in num_li:
    print(i, end=' ')

 

1095 : [기초-1차원 배열] 이상한 출석번호 부르기3(설명)

list.sort()와 같이 사용하면 리스트가 오름차순으로 정렬된다. 무작위로 부른 번호들을 리스트로 만들어 오름차순으로 정렬한 후 첫번째 요소를 출력하면 된다.

n = int(input())
num = map(int, input().split())
num_li = list(num)
num_li.sort()
print(num_li[0])

 

1096 : [기초-2차원 배열] 바둑판에 흰 돌 놓기(설명)

19 * 19 크기의 2차원 리스트의 모든 요소를 다 0으로 초기화 하고, 흰돌의 개수를 입력 받고, 개수 만큼 반복하여 해당 위치의 요소를 1로 바꿨다. for 문 2중 중첩으로 2차원 리스트의 모든 요소를 바둑판 모양으로 출력하였다.

n = int(input())
pan = [[0]*19 for i in range(19)]

for i in range(n):
    x, y = map(int, input().split())
    pan[x-1][y-1] = 1
    
for i in range(19):
    for j in range(19):
        print(pan[i][j], end = ' ')
    print()

'Project H4C Study Group' 카테고리의 다른 글

[Project H4C] opentutorials HTML(1)  (0) 2021.02.04
[Project H4C] 코드업 기초100제(4)  (0) 2021.02.04
[Project H4C] 코드업 기초100제(2)  (0) 2021.02.03
[Project H4C] 코드업 기초 100제 (1)  (0) 2021.02.02
[Project H4C] 파이썬 코딩도장(12)  (0) 2021.01.31

+ Recent posts

티스토리툴바