공부 정리용 블로그

HTML 수업 (1) 260313

6o0o0o9 — Fri, 10 Apr 2026 14:21:41 +0900

사용 프로그램은 visual studio code를 사용했음

+Extension에서 golive를 깔아서 바로 확인할 수 있도록 했음

첫 번째 수업에서는 가볍게 리스트 뽑기, 공지사항 따라 하기, 사진 삽입을 해보았다

처음에 기본적인것을 세팅하는 방법에는 new file로 새로운 파일을 만들고 .html로 확장자를 만들어 놓는다

그리고 !+tab을 누르게 되면 아래와 같이 기본 틀이 생성된다

우리는 한글을 사용하기 때문에 lang="en"을 "kr"로 바꿔주었고, 으로 이름을 달아줬다

그리고 처음에 기본적으로 테두리값이 들어가 있기 때문에 <style>로 margin과 padding을 0으로 초기화를 했다

이렇게 기본 틀을 완성해놨다

그리고 첫 시작으로 리스트 뽑기를 해 보았다

코드(과별 리스트)

<div>로 우선 다 묶어주고
<h1>로 제목을 넣어주었음 (크고 굵게 표시하는 코드)
그리고 <ol>에 <li>로 리스트를 넣어서 과들을 표기하였음
<ol>을 넣으면 이스트에 자동으로 번호가 표기됨
그리고 스타일을 이용해 왼쪽에 padding을 20px을 넣었다 근데 티는 잘 안 나는 듯..

결과물

이번엔 공지사항을 비슷하게 만들어보는 것을 했다

이거를 참고하였고

코드 (공지사항)

공지사항처럼 보이고 싶으면 표를 만들어야 하는데 그러기 위해서는 <table>을 통해 표를 만들어야 한다
<th> / <thead>는 제목칸이라는 의미고, 거기에 <tr>을 삽입하게 되면 행(가로줄)을 삽입할 수 있게 됨
<td>를 넣어 table data를 넣을 수 있다(세로줄 느낌인 듯)

그리고 class=""로 이름을 붙일 수 있다
맨 위에 공지사항 글자 부분과 공지 부분만 볼드체에 색이 다르기 때문에 스타일을 넣어야 해서 fix라는 이름을 붙여줬다

스타일 (공지사항)

style을 넣지 않으면 아래와 같이 글자만 뽑히기 때문에 style을 넣어줘야 한다

전체 스타일을 보면 이런 식으로 구성해 보았고 하나하나 따져보려고 한다

우선 .notice부터 알아보려고 한다 한 페이지에 목록, 공지사항, 사진을 넣었기 때문에
공지만 따로 위에 공백을 주고 싶어서 notice라는 class명을 따로 줬었다
이제 이 부분에만 style을 주고 싶으면 class명 앞에 .을 붙이고 .(class명) {} 이렇게 넣어주면 된다
padding은 내부에 공백을 주려고 할 때 쓰는 것이고 padding-top을 넣어 안쪽 상부에 50px의 공백을 주었다
padding을 줬을 때랑 주지 않았을 때 이런 차이가 난다

그리고 table의 width를 80%, border-collapse를 collapse로 줬는데
여기서 table은 표를 의미하는 거고 넓이를 80%로 줬다는 의미인데, %로 넣게 되면 100px이 있다고 하면 80px을 차지한다는 뜻이다
그리고 border-collapse는 table의 테두리를 어떻게 줄 것인지 결정하는 것인데, 여기서 collapse를 넣게 되면 합쳐준다는 뜻이다 (반대로 한 줄을 나누고 싶을 때는 separate를 넣으면 된다)

그리고 td값을 설정했는데, 이거는 표 내부의 스타일을 어떻게 할 것인지 결정하는 것이라고 한다
아까 사용했던 padding을 똑같이 넣어 내부값을 설정했는데, padding-(위치)로 값을 넣어줘도 되지만, 한 번에 상하좌우의 공간을 설정하고 싶을때는 padding : 상 우 하 좌 (시계방향)px으로 한번에 값을 줄 수도 있다

지금까지는 전체 표의 크기와 공간을 설정했으니 이번엔 내부에 세부적인 설정을 넣으려고 하는데
thead는 표 제목 부분의 스타일을 tbody는 아래 하부 항목을 설정하는 것이다

우선 공지사항을 보게 되면 제목 부분은 가운데정렬이고, 아랫부분에 굵은 선으로 구분이 되어있으며
하부 내용들은 연한 선으로 구분이 되어있다

그래서 우선 thead에 text-align을 center로 줘서 가운데 정렬로 바꿨으며,

thead/tbody>tr>td는 가로줄> 칸칸마다라는 뜻이어서 아까 말한 것처럼 thead top(상부)에는 1px solid black을 입력해
1px짜리 검정 실선을 넣고, bottom(하부)에는 px값만 조금 굵게 2px을 줬다

여기서 선의 종류는 solid 외에도 dotted(점선), dashed(파선,-모양이 이어짐), double(이중실선), none(없음)이 있다

그리고 하부 내용도 연한 실선으로 나눠주고 싶어서 thead값과 동일하지만 색만 연하게 넣어줬다

그리고 공지사항에서 제목 부분을 제외하면 가운데 정렬이 들어가 있는데, 2열을 제외하고 값을 넣고 싶을 때는 nth-child라는 것을 넣으면 된다고 한다

nth-child() 형식으로 넣게 되는데 이 괄호안에 값을 집어넣으면 된다
괄호 안에 숫자(n)를 집어넣게 되면 n번째 자식만 선택해서 값을 줄 수 있다
또, 괄호 안에 odd/even이 들어가게 되면 홀수/짝수만 선택,
3n이면 3의 배수, n+3이면 3번째 이후부터 선택할 수 있음

우리는 제목열을 제외한 1,3,4번째 열만 선택을 하고 싶기 때문에 nth-child 1,3,4를 이용해 값을 넣었다
width값을 준 것과 주지 않은 것을 비교해 보면 주지 않게 되면 너무 다닥다닥 붙은 느낌이라 width 값은 1%를 주었다
width를 주지 않았을때

width값 1%

그리고 white-space는 글자가 칸을 넘어갈 경우 어떻게 처리할 것인지 설정하는 건데 이렇게 4가지 항목이 있다
글자 크기에 맞춰서 칸 넓이를 맞추고 싶었기 때문에 nowrap을 주었고, nowrap가 들어가지 않은 제목열은 길게 늘어나면
이렇게 다음 줄로 넘어가지만 nowrap을 준 날짜열에 긴 문자를 주게 되면
이렇게 절대 다음 줄로 넘어가지 않고 칸 넓이가 늘어나게 된다
긴 문자가 들어가는 제목열 같은 곳에는 자동줄 바꿈이 있는 css를 주고, 글자가 정해져 있거나, 길게 들어가지 않는 열에 nowrap 같은 속성을 넣어주면 좋을 것 같다

제목을 제외한 모든 열에 가운데정렬을 넣어주기 위해 text-align을 center로 넣었다

마지막으로 아까 공지 부분만 bold에 다른 컬러를 넣고 싶어 fix라는 class명을 넣었던걸 효과 주기 위해서
td(칸 내부).fix(class명)으로 color은 붉은색, bold는 font-weight를 bold를 넣어서 마무리했다

결과물(공지사항)

그러면 이렇게 글자만 다닥다닥 있던 공지사항이 이제 좀 웹페이지 같은 느낌이 나게 되었다

코드(이미지)

마지막으로 간단하게 이미지를 넣어보는 연습을 해보았는데 우선 이미지를 .jpg로 저장하였다

그리고 드래그드롭으로 EXPLORER에 불러와 img 폴더를 생성해서 거기에 보관해 놨다

이미지 쪽 전체 스타일을 주기 위해 아까 공지사항처럼 class값을 box로 넣어줬다
그리고 <h1>으로 제목을 삽입했고 이미지는 간단하게 img src=""로 삽입을 하면 되는데, 폴더가 없이 이미지만 있으면
그 이미지 파일명을 넣으면 되고 폴더 안에 집어넣었다면, img/(이미지 폴더 안) img.jpg(파일명)을 넣어주면 된다

스타일(이미지)

우선, 스타일 없이 이미지를 넣게 되면 이미지 자체가 커서 아래같이 엄청난 사이즈로 들어가게 된다

그렇기 때문에 우선은 이미지 구간에 스타일을 주려고 하는데 아까와 같이 위에 padding값을 50을 주어
공지사항과 공간을 주었고 width는 80%, height는 400px을 주었는데.. 이미지에는 아무런 값을 주지 않아서
padding을 넣은 부분 외에는 차이를 잘 못 느꼈다

그리고 아직도 이미지 사이즈는 크기 때문에 이미지에만 .box>img로 다시 값을 넣기로 했다
여기서 width와 height를 넣었는데, 높이나 넓이 중 한 개의 값만 주게 되면 가로세로 비율은 유지하되 값을 준 곳만 사이즈가 달라지고 두 개 다 주게 되면 비율이 맞지 않는 경우에 찌그러질 수 있다고 한다

그리고 display는 이미지 배치 스타일을 정하는 것인데, inline/block 두 가지가 있다
inline는 글자처럼 취급을 해서 이미지 아래 미세한 빈틈이 생길 수도 있다고 한다
내가 설정한 block으로 넣게 되면 한 개의 큰 덩어리로 취급을 하게 되어 한 줄을 다 차지하게 된다
여기에 margin:0 auto;를 넣으면 가운데 정렬이 가능하다고 한다

마지막으로 object-fit이 있는데 배치 스타일을 결정할 수 있는 속성이다
아까 위에 width와 height값을 둘 다 줬었는데, 이 경우에 찌그러질 수 있다고 했었다 이때 찌그러짐 문제를 해결할 수 있는 속성이라고 한다
fill(기본값)/cover/contain 이렇게 세가지가 있는데, fill은 액자에 맞춰 강제로 이미지를 늘려 찌그러짐이 발생한다
내가 사용한 cover은 가장 많이 쓰는 속성이며, 액자를 빈틈없이 채우되, 비율을 유지하며 넘치는 부분은 잘라낸다
그래서 인터넷 창 크기에 따라 이미지가 잘리면서 사이즈가 변경된다
contain은 이미지를 잘라내지 않고 전체가 다 보이도록 채우며, 비율도 유지되지만 빈 공간이 생길 수 있다
cover과 다르게 인터넷 창에 따라 비율을 유지하면서 사이즈가 달라진다

결과물(이미지)

이제 커다란 이미지에서 한눈에 잘 보이게 바뀌었다

전체 모습

파이썬 학습 내용 3주차

6o0o0o9 — Wed, 8 Apr 2026 13:35:19 +0900

연산자와 우선순위

지난번에 배웠던 자료형 구분을 복습하였고

새로운 연산식들도 배웠다 **이 제곱이라는 점은 외우기 쉬웠는데 //가 몫 %이 나머지라는 사실은 약간 헷갈렸음

연산자 우선순위를 넣는 방법을 배웠고, 수학이랑 동일하게 곱셈 나눗셈이 우선으로 계산이 되고,

괄호를 넣어 우선순위를 정할 수 있었다

변수

슬슬 중요 개념을 배우기 시작했다

변수 지정법을 배웠다

변수 = 값 을 지정해서 식에서 사용이 가능했다

이걸 응용해서 식에서도 활용 가능하기 때문에 파이 변수를 지정하고

초등학교때 배운 식을 응용해서 출력하는 식도 완성해 보았다

그리고 변수는 float 타입이기 때문에 이렇게 입력은 가능하지만,

변수 pi를 넣어서 출력하게 되면 str인 '안녕'과 같이 출력이 되지 않는다

아까 파이와 비슷하게 화씨와 캘빈온도를 구하는 식을 입력해 보았고

지난번에 문자열 추출로 출력해보기 했던 문장을 변수로 지정해서 출력해보기를 해 보았다

변수 추가/제거

변수를 지정한 뒤에 나중에 += / -=식을 통해 내용을 추가하거나 제거할 수 있다

숫자로도 가능하고 문자열로도 가능하다

그리고 플러스 마이너스 뿐만 아니라 곱셈 나눗셈도 가능하다

input()

input 함수를 배웠다 이 함수를 사용하게 되면 실행했을때

이렇게 입력란이 생겨 이 입력된것에 따라 바뀌게 된다

그리고 input을 통해 입력하게 되면 숫자를 입력하게 되어도 string 문자열로 입력되기 때문에,

꼭 int나 float로 변형을 해주어야 한다

int/float()

이것처럼 int()와 float()함수로 변환을 할 수 있으며 숫자를 입력받아 계산식을 만들 경우에 응용할 수 있다

응용을 하게되면 이렇게 된다

그리고 변수를 지정할 때 앞에 float나 int 함수를 씌워 한번에 변환을 하여 깔끔하게 볼 수 있다

파이썬 학습 내용 2주차

6o0o0o9 — Fri, 27 Mar 2026 02:39:22 +0900

자료형 확인하기 - type()

자료형이 뭔지 확인하는 함수로 예제들을 넣어봤다

종류가 진짜 많아서 제미나이한테 정리해달라고 해봤다

자료형	이름	특징
int	정수형	소수점이 없는 숫자
float	실수형	소수점이 있는 숫자
str	문자열	따옴표로 감싼 텍스트
bool	불리언	논리판단 True/False
None	없음	값이 없음
List [ ]	리스트	데이터를 자유롭게 넣고 빼고 수정할 수 있음
Tuple ( )	튜플	한 번 만들면 수정이 불가능(Immutable) 프로그램의 안전성을 위해 사용
Dict { }	딕셔너리	마치 사전처럼 '키(Key)'와 '값(Value)'이 한 쌍으로 이루어져 있음
Set { }	세트	수학의 집합과 같음. 중복허용X 순서 X

대충 이렇다고 한다....

문자열 만들기

작은/큰따옴표를 넣으면 string이 됨

여기서 문자열 내부에 따옴표를 넣고 싶으면 "와 '를 번갈아가면서 쓰거나

이스케이프 문자를 조합해서 쓰면 된다는데.. 이게 좀 어려웠음

머 줄바꿈이나 탭 연속기호 쓰고싶을때 넣으면 된다는데 정리하면 이렇다

\n	줄바꿈	\'	'를 출력
\t	탭	\"	"를 출력
\\	\를 그대로 출력

줄바꿈

문장을 길게 작성하고 싶을때는 \n도 가능하지만 가독성이 안좋기 때문에

""" 문자열 """ 을 넣으면 엔터를 사용 가능하다고 한다

또, 괄호부터 시작을 안하고 온전한 문장으로만 넣고 싶으면 앞뒤로 \\까지 넣으면 더 깔끔해짐

기타 연산자나 연산

머.. 숫자만 연산 가능한게 아니라 문자열도 붙여서 넣을 수 있다..

근데 문자열+문자열만 가능해서 문자열+숫자를 넣으면

요런 에러가 나온다..

그리고 문자열 반복도 가능한데 앞에 붙여도 되고.. 뒤에 붙여도 되고... 앞뒤 중복으로 붙여도 된다

문자열 개수, 슬라이싱

배우면서 막 어렵지 않은게 뭔가 엑셀에서 하던거랑 비슷한 느낌이고..

파이썬이 쉬운 언어라(고들었는데 아직까진 쉬운듯...) 막 어렵진 않은 느낌이다

문장에서 글자 순서를 세는 기준은

안	녕	하	세	요		하	하
0	1	2	3	4	5	6	7
-8	-7	-6	-5	-4	-3	-2	-1

이렇게 띄어쓰기도 포함되고 앞은 0 뒤는 -1부터라고 한다

그리고 :을 넣을 경우에는 부터~까지이고 맨 처음 끝부터면 생략할 수 있음

그리고 궁금해서 실험해보니 연산자를 넣은 경우에도 사용 가능했다

대신 정해진 범위를 벗어날 경우엔 요런 범위가 벗어났다는 오류가 뜬다

len()

그리고 이런 길이를 구하는 함수도 있는데 위에 썻던 범위랑 같이 응용해서 사용하면 좋을듯

연습문제

첫번째꺼는 할 만 했는데 마지막 예측하기가 살짝 어려웠다

\\ -> \ 으로 치는거였어서 첨에 답이 \가 5개인건가? 했는데 2개씩 쌍으로 치는거였음

그래서 답은 \\\

그리고 len으로 세는것도 아까 수식 넣은것까지 계산되는걸 봤듯이 \\\3개를 세는거이기 때문에 3으로 결과가 나왔다

파이썬 학습 내용 1주차

6o0o0o9 — Thu, 26 Mar 2026 23:20:49 +0900

학습 참고 교제는 "혼자 공부하는 파이썬"으로 학습하였고

colab에서 파이썬 학습을 했다

print

역시 파이썬 시작은 hello world인듯... 제일 기본인 print 부터 시작했다

여러개를 print하고싶으면 괄호 안에서 , 를 넣어 여러개를 출력하면 되고

공백을 넣을 경우 줄바꿈처럼 쓸 수 있다

그리고 문자를 쓰고싶은 경우에는 "문자"로 넣으면 출력이 가능하다

문장 표현식

keyword 관련된 단어는 print를 하지 못하기 때문에 keyword에는 어떤것이 있는지 알아볼 수 있는 함수

>import keyword로 keyword를 불러온 다음에

>print로 키워드 리스트를 print하면 된다

이것처럼 keyword에 해당되는 단어를 print를 해보면 출력이 되지 않는 것을 알 수 있다

변수지정과 수식

변수를 지정하고 그걸 출력하는 식과 수학식을 써봤음

기호들은 다 똑같은데

% : 나머지 연산자
** : 제곱

이라는 점이 신기했다