파이썬 인강 자기계발 챌린지 21회차 미션

1. Reset보단 normalize

기본값으로 설정된 css가 레이아웃을 잡을때 불편함을 초래하기도 한다.
이에 reset을 시켜주는 코드들이 생겨났다.
하지만 reset코드들은 오래된 것들이 많아 요즘 유용하게 쓰이는 기본값까지 초기화시켜버리기떼문에 효율적이지 못하다.

따라서 최근에는 normalize를 더 많이 사용한다.

Normalize.css 파일에 들어가서 다운로드를 누르면 css 파일이 나오고 해당 파일 코드를 전체복사하여 내 프로젝트에 normalize.css로 새로운 파일을 만들어 전체붙여넣기해준다.
normalize.css안에는 주석으로 해당 코드들이 어떤 역할을 하는지 자세하게 알려주어 필요한 코드만 사용할 수 있고 필요하지 않는 코드들은 삭제하기만 하면 된다.

2. 기본 box-sizing 잡기

레이아웃의 에러를 최소화하기 위해서는 box-sizing을 border-box로 하는 것이 좋다.
여기서 *는 모든 영역에 적용한다는 뜻이다.
*::before와 *::atfer는 숨은 영역을 뜻한다.

1
2
3
4
5
6

*, 
*::before,
*::atfer {
	box-sizing : border-box;
}
 box-sizing을 border-box

3. 레이아웃짜기 hero-section

웹페이지를 구성할 레이아웃을 짜본적이 없어서 혼자서 웹페이지를 만들때 수정을 엄청 많이 하게 된다.
그래서 다른 사람은 어떻게 짜는 지 궁금했는데 강사가 자신이 왜 이렇게 레이아웃을 짜게 되었는지 설명을 해줘서 좋았다.

hero-section을 처음 듣게되었는데 이는 해당 웹페이지가 중요시하는 콘텐츠를 먼저 배치하고 링크를 걸어두는 것이다.

아래 이미지는 강사님이 장고사이트의 레이아웃을 분석한 것이다.

4. Pseudo-class 가상클래스 (hover, active, focus 등 )

가상클래스를 사용하여 마우스가 올라가있거나, 활성화되어있거나, 키보드로 선택되었을 때 css요소를 적용할 수 있다.
예를 들면 아래 태그는 a태그에 마우스가 올라가있거나, 활성화되어있거나, 키보드로 선택되었을때 배경색상 변경하는 코드이다.

• hover : 마우스가 올라가 있는 경우
• active : 활성화되어 있는 경우
• focus : 키보드로 선택되어있는 경우

1
2
3
4
5
6

a : hover,
a : active, 
a : focus {
/* a 요소에 
background-color : orange;
}

5. Pseudo Element 가상요소

없는 태그를 css로 넣어줄수도 있다.
아래는 h2태그에 가상의 태그인 >를 넣는 태그이다.
가상태그는 html에서 드래그를 하려고해도 드래그가 되지 않는다.
말그대로 가상태그이기 때문이다.

1
2
3

h2 ::before{
	content : " > "
}

아래 이미지는 h2태그에 가상의 태그인 손가락이모티콘을 표현했다.

6. Cascading 캐스캐이딩

캐스캐이딩은 폭포라는 의미를 가지고 있다.
웹페이지의 디자인이 아래 3가지 디자인과 결합할 수 있기때문에 그 결과값이 내가 예상한대로 나오지 않을 수 있다.

• 웹브라우저의 기본 디자인
• 브라우저 사용자의 디자인
• 그리고 웹페이지 저자의 디자인

따라서 선택자 구체성 점수를 매겨서 우선순위를 잘 파악하고 있어야한다.

7. 선택자 구체성 점수

선택자와 요소에 따라 아래와 같이 다른 값을 매기고 이를 더해주면 어느 것이 더 우선순위인지 확인 할 수 있다.

• HTML태그의 style속성 사용 : 1000점
• ID선택자 : 100점
• CLASS선택자와 가상클래스 : 10점
• TAG선택자와 가상요소 : 1점

사용한 태그가 위의 4분류중 어디에 속하는 지 잘 모르겠는 경우에는 구체성 계산기에 접속하여 궁금한 태그를 복사 붙여넣기하면 된다.
계산기가 자동적으로 사용된 아래 세가지

• ID선택자 갯수
• CLASS선택자와 가상클래스 갯수
• TAG선택자와 가상요소 갯수

를 알려준다 그걸 기준으로 위의 점수표와 함께 계산하면 된다.

파이썬 인강 자기계발 챌린지 20회차 미션

nomal flow에서 벗어나 복잡한 방식의 레이아웃을 하는 방법에 대해 알아보자.
크게 두가지 속성으로 사용할 수 있다.

• float

• position

1. float

float로는 정교한 레이아웃을 작성할 수 있다.
float는 이름그대로 띄우는, 뭔가 떠있는 배치이다.

먼저 비교를 위해 아무것도 적용안된 레이아웃을 보자.
일반적인 단락을 나눈 줄글의 형태이다.
가로로 나눠진 단락을 세로로 나누고싶을때 float가 유용하다.

이제 float는 left와 right로 줄 수 있는데 아래 이미지는 float : left;로 적용한 모습이다.
아래 이미지에서 알 수 있듯이 해당 태그가 왼쪽으로 띄어지고 밑에 배치되었던 줄글이 태그옆으로 옮겨지면서 자연스럽게 흘러내려가는 형태를 취하고 있다

여기서 footer가 조금 아쉽다.
column 3개에만 float : 30%;씩 적용해주었는데 10%가 남다보니 footer의 위치가 어색하게 되어버렸다.
따라서 column들만 float left로 주고 footer는 하단에 배치하고싶다면 아래와 같이 clear : both; 속성을 넣어주면 된다.

clear는 left, right, both 의 값을 선택할 수 있고 해당 사이드에 float정렬을 취소한다.
따라서 현재상황에서는 clear : left; 또는 clear : both; 로 같은 결과값을 출력할 수 있다.

짜잔- 세상 깔끔하다!

2. position

1. static

postion 속성의 default 값이다.
HTML 태그 순서에 따라 화면에 출력된다.

2. relative

원래 위치를 기준으로 상대적인 위치를 지정해줄 수 있다.

position : relative;로는 어떠한 값도 바꿀 수 없다.
그 밑에 꼭 top, bottom, left, right의 값을 통해 어디를 얼만큼 이동할 것인지 정할 수 있다.
여기서 중요한 점은 태그의 원래 위치는 변하지 않는다는 것이다. 없어지지 않고 기억되어져 있다.

하트의 위치에서 top과 left에 100씩 값을 주어서 하트가 글 위로 오게되었다.
여기서 쉽게 헷갈릴 수 있는 점이 있다.
바로 하트가 top과 left로 100씩 움직이는 것이 아니라, top과 left에 100씩 빈 공간을 준다고 생각하면 된다.
빈 공간만큼 원래 태그는 밀려나게된다.

3. absolute

relative와 비슷하지만 차이점이 있다면 relative는 원래 태그자리를 빈공간으로 유지하는데 반해, absolute 원래 태그자리를 없애버리고 상대적인 위치에 위치한다.
absolute는 상위태그를 기준으로 상대적인 위치를 정한다.

4. fixed

absolute와 상대적인 위치를 가진다는 것은 비슷하지만 상위태그기준이 아닌 veiwport(웹페이지가 보이는 화면)을 기준으로 뷰포인트의 특정 위치에 태그를 고정한다. 따라서 스크롤을 내려도 태그는 같은 위치에 고정되어있다.

3. css선택자 우선순위

선택자는 총 3종류가 있다.

id선택자 > class선택자 > tag선택자

만약 id와 tag에 둘다 css값이 적용되어 있으면 id클래스가 우선이므로 tag값에 덮어씌어져서 id 클래스값이 출력되게 된다.

ITWILL학원 : 3강 WEB(HTML, CSS) BY 김영희

테이블 칸 합치기

• colspan = “n” : 세로방향으로 합치는 속성
• rowspan = “n” : 가로방향으로 합치는 속성

칸합치는 속성은 항상 th나 td에서 이루어지지 tr에서는 절대 사용하지않는다!

rowspan을 생각할때는 빨래줄(tr)에 빨래(td나th)가 걸려있다고 생각하면 편하다
기준을 몇번째 tr인지 확인한 뒤 빨래줄에 빨래를 걸면 아래로 내려오듯이 td가 내려와있다고 생각하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<table>
	<tr>
		<th colspan="2">칸 합치는 속성</th>
	</tr>
	<tr>
		<th>가로방향</th>
		<th>세로방향</th>
	</tr>
	<tr>
		<td>colspan="n"</td>
		<td>rowspan="n"</td>
	</tr>
	<tr>
		<td colspan="2">n개의 칸을 하나로 합치는 속성</td>
	</tr>
</table>

가로방향 합치기와 세로방향합치기가 동시에 나오는 예시는 아래와 같다
rowspan을 위에서 말했던 빨래감예시를 들어 설명해보면, 첫 번째 tr의 빨래줄의 마지막 td에 아래 빨래감이 3개가 걸려야한다.(즉 3칸을 합친다)
따라서 첫번째 tr의 두번째 td에 rowspan=”3”를 해준다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<table>
    <tr>
        <td colspan="2">a</td>
        <td rowspan="3">b</td>
    </tr>
    <tr>
        <td>c</td>
        <td rowspan="2">d</td>
    </tr>
    <tr>
        <td>e</td>
    </tr>
    <tr>
        <td colspan="3">f</td>
    </tr>
</table>

파이썬 인강 자기계발 챌린지 19회차 미션

1. font-size

폰트 사이즈를 지정하는데 크게 가지방식이 있다.
직접 수치를 입력하는 방식과 상위요소 기준 상대적수치를 적용하는 방식 그리고 상속값을 적용하는 방식이다.

1
2
3
4
5

{
font-size : 15px; //직접 입력.
font-size : 1.5rem; //상위요소 기준 상대적 수치.
font-size : inherit; //상속값 위의 태그의 폰트사이즈를 그대로 받는다.
}

em과 rem의 차이?

css다루다보면 em과 rem을 접하게 된다.
나는 항상 px이나 %단위로 직접 수치를 입력하여 지정하였는데 em, rem을 사용하면 상대적인 수치가 자동적으로 정해져서 훨씬 디자인이 깔끔하고 통일성있어보이기도 한다.
그렇다면 em과 rem의 차이는 무엇일까?
둘 다 수치를 직접적으로 입력하는 방식이 아니다.

• em : 상위요소의 크기에 비례.
• rem : 최상위 요소의 크기 즉, html 요소 크기에 비례.
• 참고로 html 요소 크기의 기본값은 웹브라우저 설정에서 정한 크기이며 보통 16px이다.

결국 둘의 차이점은 최상위요소의 크기인지 상위요소의 크기인지의 차이다.
언뜻 읽으면 큰 차이가 없을 것 같지만 만약 em의 상위요소가 또 다른 상위요소에 상속을 받았다면 원하는 크기로 지정이 어려울 수 있다. 왜냐면 em은 상속의 영향을 받기 때문이다.

따라서 rem을 쓰는 것을 더 추천한다. 다만 rem을 쓰면 사용자가 커스터마이징해놓은 사이즈를 무시해버려서 사용자의 가독성을 오히려 떨어뜨릴수있다.

따라서 적절한 곳에 em과 rem을 쓰는 것이 좋다

그럼 언제 rem과 em을 써야할까?

참고링크 : 종합 안내: Rem 그리고 Em, 언제 써야 할까

• em 단위는 최상위 요소에 지정된 폰트 크기 말고, 다른 특정 요소의 폰트 크기에 따라 그 크기가 변해야 하는 곳에 사용하십시오.
• rem 단위는 em 단위를 쓸 필요가 없고, 또 브라우저의 폰트 크기 설정에 따라 그 크기가 변해야 하는 곳에 사용하십시오.
• 폰트 크기 지정을 비롯해서 꼭 em 단위를 써야 하는 곳이 아니라면 rem 단위를 사용하십시오.
• media queries에도 rem 단위를 쓰세요.
• 다중 칼럼 레이아웃의 너비에는 em 혹은 rem을 쓰진 마십시오 - 대신 %를 쓰세요.
• 만약에 크기가 변할 경우 해당 요소의 레이아웃이 깨지는 걸 막을 수 없다면 em과 rem 모두 쓰지 마세요.

2. font-family

폰트패밀리는 글꼴집합이다.
만약에 폰트를 하나를 지정했다고 생각해보자.
이용자가 해당 폰트가 없으면 폰트를 기본값으로 표시되어진다.

• serif는 바탕체계열
• Sans-serif는 고딕체계열
• Cursive는 필기체계열
• monospace는 가로 폭이 동일한 글꼴

아래는 폰트패밀리예시이다

1
2
3

{
font-family : Arial, Georgia, Times, "Times New Roman", serif
}

위에서 말했듯이 이용자의 컴퓨터에 지정한 폰트가 설정되어 있지 않으면 기본값으로 표시된다.
이러한 경우에는 아예 웹 폰트를 사용하면, 이용자의 컴퓨터에 설치되지 않은 글꼴을 사용할 수 있다.

웹폰트 사용 방법은 html에서 link태그로 삽입하면된다.

1
2
3
4
5
6
7
8
9
10

<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Londrina+Outline|Open+Sans+Condensed:300" rel="stylesheet">

<style>
  #font1{
	font-family: 'Open Sans Condensed', sans-serif;
  }
  #font2{
	font-family: 'Indie Flower', cursive;
  }
</style>

참고링크 : 웹폰트 생활코딩

3. font 한꺼번에 적용

위에서 사용했던 폰트스타일이외에도 다양한 폰트스타일을 한 줄 코드로 작성할 수 있다
중요한 점은 아래 순서대로 작성해야 제대로 적용이 된다

1

font : 폰트스타일 폰트웨이트 폰트사이즈 폰트패밀리

적용된 예시는 아래와 같다
표시를 한 순서대로

• 1번에는 폰트스타일
• 2번에는 폰트웨이트
• 3번에는 폰트사이즈
• 4번에는 폰트패밀리

4. font color

폰트 컬러지정은 그냥 color적어주면 된다

• rgba(0,0,0) : 숫자가 작을수록 어두운 색을 띈다 = 검정색 = #000000
• rgba(255,255,255) : 숫자가 높을수록 밝은 색을 띈다 = 흰색 = #ffffff

폰트의 투명도도 조절할 수 있다.
rgba색상코드에서 마지막에 0에서 1사이의 숫자를 정해주면 된다

• 0 : 완전투명
• 0.5 : 절반만 투명
• 1 : 불투명

1
2

color : rgba(0,0,0, 0.5)
// 검정색컬러에 절반만 투명

파이썬 인강 자기계발 챌린지 18회차 미션

HTML은 자주 공부했기때문에 약간 지루했지만…. 여전히 내가 몰랐던 내용이 있어서 해당 부분을 정리하고자한다.
알고있는 내용들은 이번 기회에 아예 외워버려야겠다.

1. 정의태그 dl, dt, dd 태그

어떠한 정의를 내리고 싶을 때 dl, dt, dd 태그를 사용한다.
자동으로 들여쓰기가 40px이 되어있다. 이때문에 들여쓰기의 거리를 조절하고 싶으면 text-indent나 margin-left, padding-left 속성값을 변경하면 된다.

• dl : definition list의 약자이다. 내부에 2개의 태그(dt, dd)를 포함하며 dt는 생략가능하지만 dd는 꼭 포함되어야한다.

• dt : definition term의 약자이며 정의하고싶은 용어의 제목을 나타낸다

• dd : definition description의 약자이며 용어의 내용을 나타내며 dl안에 필수로 들어가야한다.

1
2
3
4

<dl>
	<dt>정의하고싶은 용어의 제목</dt>
	<dd>정의할 내용</dd>
</dl>

아래 이미지는 왼쪽은 코드, 오른쪽은 그 코드출력값을 나타낸다.
1번 부분처럼 dl dt, dd를 단순하게 활용할 수 있다.

실제 포털사이트에서 이용하는 예시도 아래 링크에서 찾을 수 있다.
스크린리더이용자를 위해 dl dt dd태그를 남용해서는 안되겠다.
모두에게 공정한 정보를 제공할 수 있는 사이트를 만들고싶다.

참고링크 : dl dt dd 태그예시와 dl dt dd 태그를 남용하지마세요

2. code 태그

코드태그는 컴퓨터 코드(code)의 일부분을 나타내주는 코드이다. 그래서 컴퓨터나 프로그래밍코드일부를 그대로 표시하고자할때 유용하다.

1
2

<p>다음은 자바 코드의 일부분입니다. </p>
<code>System.out.println("헬로자바"); </code>

위의 이미지에서 2번부분을 보면 code태그안에서 html태그를 표현하고싶을때, 여전히 꺽쇠는 표현이 되지 않는다. 그래서 왼쪽꺽쇠(<)의 유니코드인 <를 사용했고
오른쪽꺽쇠인(>)의 유니코드인 >를 사용했다.

나는 마크다운으로 블로그를 작성하는데 항상 code표현을 백틱으로 이용해왔다. code태그 알아두면 html에서 유용하게 쓸 수 있다.

3. block요소와 inline요소 그리고 inline-block요소의 차이

• block 요소
  • 줄바꿈이 이루어진다.
  • 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 된다.
  • width, height, padding, margin 등을 적용 가능.
  • text-align이 적용 불가능.
  • vertical-align이 적용 불가능.
  • 예시 : article, dd, div, dl, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, noscript, ol, p, pre, section, table, ul 등등

1
2
3

div {
display : inline
}

• inline 요소
  • 줄바꿈이 이루어지지않는다.
  • 기본적으로 콘텐츠가 끝나는 지점까지의 길이를 가진다.
  • width, height, margin, padding-top, padding-bottom 적용 불가능.
  • height 대신 line-height로 높이조절가능. 대신 span태그에서는 불가능.
  • text-align 사용 가능
  • 예시 : a, b, br, button, code, em, i, img, input, kbd, label, map, object, q, samp, small, script, select, span, strong, sub, sup, textarea, tt, var

1
2
3

div {
display : inline
}

• inline-block
  위의 블럭과 인라인을 합친 것이라고 생각하면 되지만 그 특징이 조금 차이난다

  • width, height 적용 가능
  • margin, padding-top, padding-bottom 적용 가능
  • line-height 적용 가능
  • inline-block 끼리 공백 생성됨 -> 상위 div에 { font-size: 0; } 를 적용하면 해결가능.
  • inline-block 끼리 높이 불일치될수있음 -> vertical-align 값 적용하면 해결가능.

파이썬 인강 : Web 기초 (프론트엔드 VS 백엔드, Codepen, MDN, devdocs, 크롬검색꿀팁)

1. 프론트엔드 (Front‑end) VS 백엔드 (Back-end)

가장 많이 들었던 프론트엔드와 백엔드 그 차이점은 무엇일까?

간단한 도식표로 쉽게 확인할 수 있다.

1. 프론트엔드 (Front‑end)
   파란색영역으로 HTML, CSS, Javascript를 주로 다룬다.
   사용자와 웹브라우저사이에서 입력과 출력을 주로 담당하며 가독성이나 사용성을 높여 사용자가 편리하게 이용할 수 있도록 해야한다.

2. 백엔드 (Back-end)
   주황색영역으로 웹브라우저요청에 웹서버와 데이터베이스를 통해서 응답해준다.

• OS(operating system 운영체제) : windows, linux, unix, mac, ios, android 등등
• DB(DataBase 데이터베이스) : oracle, mysql, mongoDB, mssql 등등
• Framework(프레임워크) : spring, flast/Django 등등
• 프로그래밍 언어 : java, php, python 등등

3. 풀스택 (Full-stack)
   하지만 요즘은 점점 경계가 모호해지고 있는 추세이다.
   따라서 프론트엔드와 백엔드를 모두 포함하여 풀스택 (Full-stack)이라고 부르기도 한다.

실습을 하기 앞서 강사님이 여러 좋은 사이트를 알려주었다

2. Codepen 코드펜

프론트엔드를 위해 굳이 에디터를 다운로드하지않아도 웹상에서도 쉽게 다룰 수 있다.
바로 codepen에서 HTML과 CSS, Javascript가 가능하다.
가입하지 않아도 바로 쓸 수 있는 장점이 있다.

원래 알고있던 사이트이다.
다른 개발자들이 만들어 놓은 멋진 그리고 화려한 코드를 볼 수만 있는 줄 알았다.
그런데 인강에서 코드 수정도 가능하다길래 직접 들어가보니 완전 신세계!!!
코드를 수정할 수 있다는 것을 처음 알았다. 좋은 프론트엔드 공부자료가 될 것이다.

Codepen Topics

특히 codepen에 topic에는 Vue나 React를 이용해서 만든 멋진 코드들도 볼 수 있다.
보는 재미가 쏠쏠해서 시간가는 줄도 몰랐다.
특히 슉슉 날아다니는 디자인을 보면 감탄밖에 나오지 않았다.
정말 멋있다 사람들……
나도 언젠가 그러한 코드를 공유할 수 있는 실력있는 개발자가 되고싶다.

3. MDN(the Mozilla Developer Network)

개발자들의 교과서라고 불리는 MDN이다
MDN은 FIREFOX를 운영하는 회사에서 만들었다고 한다.
사이트에 접속해서 technologies를 클릭하면 다양한 언어들이 있다.
이 중에 관심있는 언어를 클릭하고 궁금한 내용을 검색하면 쫘라락- 관련정보들이 엄청난 양으로 쏟아져나온다.
차근차근 주워먹기만 하면 끝!
물론 주워먹는 일이 힘들지만…..

4. Devdocs

데브독스는 위의 MDN을 가독성있게, 즉 보기쉽고 빠르게 찾을 수 있다.
UI가 MDN보다 훨씬 깔끔하고 쉬워서 깜짝 놀랬다.
이렇게 좋은 사이트가 있었다니!!! 왜 다들 MDN만 추천해줬던 것인가…
이젠 MDN보단 DEVDOCS를 더 잘 이용할 것같다.

데드독스의 또 한가지 장점은 원하는 언어만을 설정해서 검색할 수 있다는 점이다.
데브독스의 검색창 옆에 점3개아이콘을 클릭하면 Preferences가 나온다
여기에 수많은 언어들과 툴들이 있고 이 중 관심있는 것들만 틱해주고 저장해주면 앞으로 검색시에 내가 원하는 정보만 쏙쏙 쉽게 찾을 수 있다.

위의 이미지처럼 체크박스에 체크를 해주면 된다. 완전 꿀팁!!
이렇게 수많은 언어들이 있다니 세상 놀람다.

5. Can I use _?

Can I use는 사용하고자 하는 기술이 어떤 운영체제나 기반에서 제대로 작동하는 지를 알려주는 사이트이다.
이 사이트가 중요한 이유는 프로그램을 만들고 배포하기 전에 상용이 가능한 지를 확인해야하기때문에 꼭 알아야한다.
열심히 만든 프로그램이 제대로 작동 안하면 얼마나 속상할지… 절레절레

위의 예시처럼 sticky라는 기술은 구글에서 검색한 모습이다
붉은 색이 많을수록 지원 안되는 곳이 많으니 대체가능한 기술이 있는지 체크해야한다.

처음 본 사이트인 줄 알고 즐겨찾기 추가 버튼을 눌렀는데…
아니 이미 저장되어 있는 사이트였다.
띠용?!?!?!?!?!

그말인 즉슨 좋은 사이트라서 즐겨찾기해놓고 한 번도 안 들어갔나보다…허허;;

6.크롬 검색 꿀팁

덤으로 크롬검색꿀팁을 알게되었다

크롬에서 settings에 들어가서 search를 검색하여 Manage search engines을 클릭한다
default값으로는 google을 해놓으면 되고 Other search engines에 위의 세 사이트를 추가한다

크롬 검색창에 추가한 키워드를 입력후 tab을 치면 해당사이트내에서 검색결과를 바로 확인할 수 있다.

와… 대박!

파이썬 인강 : Web 기초 (클라이언트 VS 서버, 웹프로그래밍, HTTP, 크롬 개발자도구)

15회차까지는 파이썬 기초를 배웠다.
이번에는 web기초를 후루룩 배워보자
자주 접했지만 아직 암기까진 못한 웹기초!
이번엔 기초를 탄탄히 쌓아서 다시 보는 일이 없었으면 좋겠다 ㅋㅋㅋㅋㅋ

1. 클라이언트 (client) VS 서버 (server)

클라이언트와 서버, 이 둘은 절대적인 개념이 아니라 상대적인 개념이다.
웹 브라우저가 설치된 컴퓨터에서 다른 컴퓨터에 요청을 하는 클라이언트이면서도 또다른 웹 브라우저에 요청을 받는 서버컴퓨터일 수 도 있다.

1. 클라이언트 : 요청을 보내는 주체

• 크롬, 사파리, 엣지 파이어폭스 등과 같은 웹브라우저
• 데스크톱 앱 혹은 모바일 앱
• 다른 서버에 요청을 보내는 서버
• 개발자가 개발한 별도의 소프트웨어
• 등등등

2. 서버 : 네트워크를 통해 클라이언트에 정보 혹은 제공하는 프로그램 또는 컴퓨터

• 웹 페이지, 웹 사이트, 앱 등을 저장한 컴퓨터
• 웹 서버 애플리케이션을 통해 만들어진 애플리케이션
• 등등등

이번 강의에서 배울 파이썬기반의 프레임워크인 Flask와 Django로 만들어진 어플리케이션이 서버역할을 수행할 수 도 있다.
이처럼 요즘에는 웹 프레임워크를 이용하여 웹 서버를 개발한다.

2. 웹프로그래밍 (Web Programming)

웹 프로그래밍이란 HTTP로 통신하는 클라이언트와 서버를 개발하는 것을 말한다.

클라이언트와 서버는 앞에서 배웠는데 HTTP 프로토콜은 무엇일까?

3. HTTP (HyperText Transfer Protocol)

HTTP(HyperText Transfer Protocol)란 웹서버와 클라이언트 즉, 브라우저가 인터넷에서 서로 테이터를 주고 받기 위한 약속체계이다.

그럼 실질적으로 HTTP 요청과 HTTP 응답에 대해 자세히 알아보자

1. HTTP 요청

• 매서드 Method
  • 실제 서버가 수행해야하는 동작들이다.
    • get : 정보를 가져오기
    • post : 정보를 올리기
    • delete : 삭제하기
• URL주소
• 헤더 Header
  • 브라우저 정보
  • 언어
  • 등등 여러정보가 포함된다.
• 본문 body
  • 있을 수도 있고 없을 수도 있다.
  • 페이스북으로 예를 들자면, 아이디나 패스워드 입력창이나 새글내용등이 본문에 해당된다.

2. HTTP 응답

• 상태코드

  • 요청의 성공여부가 가장 먼저 표시된다.
  • 예시
  • 200은 성공했다는 의미이다.
  • 404 Not Found …는 실패했다는 의미이다.

• 헤더 Header

• 본문 body

  • HTML(Hypertext Markup Language)코드등의 파일
  • 에러가 났다면 생략될 수 있다.

4. 크롬 개발자도구 (chrome developer tools)

위의 이미지에서 볼수있듯이 크롬 개발자도구로 많은 것들을 할 수 있다

1. Elements
   엘리먼트탭에서는 각 요소에 대해 알수있으며, 속성값을 다르게 입력하는 등 간단하게 일시수정도 가능하다.
   일시수정이라서 영영 저장되거나 보존되는 것이 아닌 그냥 임시적으로 수정가능하다.

2. Console
   콘솔탭에서는 자바스크립트 (javascript)를 다룰 수 있다.

3. Sources
   소스탭에서는 현재 웹페이지가 가지는 모든 소스코드들중 공개된 코드들을 마음껏 볼 수 있다.

4. Network
   네트워크탭은 페이지를 로딩하는데 필요한 네트워크작업에 대한 결과를 시간순으로 표시해준다.
   이를 통해서 웹서버와 주고받는 실제 데이터 모습을 볼 수 있다.

• 위의 이미지 오른쪽 하단부분에 Method를 확인 할수있다. 위에서 배웠던 get과 post매서드를 확인할 수 있다.
• 위에서 status를 확인할 수 있다 200으로 성공이 되었음을 의미한다.
• type에서도 해당 웹사이트가 불러온 데이터의 타입이 gif 이미지파일인지, script파일인지 아니면 text/html파일인지 등등을 확인할 수 있다.

목록 태그

HTML 목록 종류 3가지

-<ol>태그 : Ordered List 순서 있는 목록
-<ul>태그 : Unordered List 순서 없는 목록
-<li>태그 : 정의 목록

목록을 <ol>태그로 만들든 <ul>태그만들든간에 <li>태그는 항목을 나타내므로 모든 곳에 필수로 들어가야한다

1
2
3
4
5
6
7
8
9
10
11
12

<ol>
    <li>배</li>
    <li>부</li>
    <li>르</li>
    <li>니</li>
</ol>
<ul>
    <li>잠</li>
    <li>이</li>
    <li>온</li>
    <li>다</li>
</ul>

목록태그 앞의 모양 바꾸기

• ol태그 : 1/a/A/i/I
  

• ul태그 : disc/circle/square/non
  

정의 태그

<dl>태그는 <dt>태그 <dd>태그가 세트이다

<dt>태그 는 정의내리는 대상
<dd>태그 는 정의 내용

사실 잘 사용하지 않는 태그지만 기억해두면 필요할때 요긴하게 쓸 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<h2> 자신을 4가지 관점으로 정의</h2>
<dl>
	<dt>E</dt>
	<dd>외향적 : 에너지가 밖으로 흐르며 사람을 만나는 것을 좋아하고 사람을 만남으로써 에너지를 얻는다.<br>
		반대성향으로는 I 내향적이 있다.       
	</dd>
	<dt>N</dt>
	<dd>직관적 : 숲을 보려는 경향이 있고 아이디어나 육감에 의존하며 주의 초점은 미래와 가능성이다. 따라서 미래지향적으로 새로운 시도를 하는 것을 좋아하며 가능성과 의미를 추구하고 변화와 다양성을 좋아한다<br>
		반대성향으로는 S 감각형이 있다. 이는 나무를 보려는 경향으로 실재의 경험, 오감에 주의초점이 있어 현실 수용과 관례를 따르는 결향이 있다.        
	</dd>
	<dt>F</dt>
	<dd>감정형 : 주관적 판단에 의존하며 주된 관심주제는 사람, 관계이다<br>
		반대성향은 T 사고형이있으며 객관적 판단에 의존하고 주된 관심주제는 사실과 진실이다.           
	</dd>
	<dt>J</dt>
	<dd>판단형 : 정리정돈과 계획성이 있다 뚜렷한 기준과 자기의사가 있으며 신속한 결론을 내리고 분명한 목적의식이 있다.<br>
		반대성향으로는 P 인식형이 있고 상황에 맞추는 개방성과 목적과 방향의 변화가 상대적으로 쉽다.  
	</dd>
</dl>
</dl>

글자 관련 태그

1
2
3
4
5
6
7
8

small tag : <small>Make font size smaller </small>

sup tag : <sup>supppp 윗첨자</sup>(ex)300m<sup>2</sup>의 땅이 있었으면 좋겠다

sub tag : <sub>subbbb 아래첨자</sub>
(ex)내가 아는 원소기호는 H<sub>2</sub>O

mark tag : <mark>형광펜효과</mark>

ITWILL학원 : 1강 WEB(HTML, CSS) BY 김영희

1강 HTML 기초

WEB(HTML, CSS)을 담당하며 일주일에 1번 4시간 수업

HTML은 웹페이지를 만들어 주는 프로그래밍 언어이며 웹페이지의 구조를 담당한다
enter나 space bar(2칸 이상)는 명령으로 해결한다.

1. tag는 원칙상 대소문자의 구별이 없으나 소문자로 입력한다

2. !DOCTYPE html의 의미는 html5 문서임을 선언

3. <pre>태그

<pre>태그는 html문서안에서 <p>나 <br>를 쓰지않아도 html상의 Enter나 Tab, Space를 다 표현할 수 있기때문에 긴 문장등을 표현할때 굉장히 효율적으로 사용할 수 있다.
더불어서 자동적으로 모든 문자의 width 간격을 일치시켜준다
ex) i와 w의 크기가 같다

1
2
3
4
5
6
7

만날 수 없어
만나고 싶은데
이런 슬픔처음인걸

말할 수 없어
말하고 싶은데
속마음만 들키는 걸

위 내용을 html상에 적고 브라우저로 열어보면

1

만날 수 없어만나고 싶은데이런 슬픔처음인걸말할 수 없어말하고 싶은데속마음만 들키는 걸

우리가 원하는 건 이게 아니다!
<p>와<br>태그를 이용할 수 있으나 여간 귀찮은 일이아니다.
이때 사용하는 것이 <pre>태그이다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<pre>
만날 수 없어
만나고 싶은데
이런 슬픔처음인걸

말할 수 없어
말하고 싶은데
속마음만 들키는 걸
</pre>
``` 

위의 내용을 출력하면 아래와 같이 편~안하게 우리가 원하는대로 나타낼 수 있다

```html
만날 수 없어
만나고 싶은데
이런 슬픔처음인걸

말할 수 없어
말하고 싶은데
속마음만 들키는 걸

4. 특수문자(기호태그)

특수문자(기호)표현을 위한 특수문자 태그들.

• <는 < 를 나타내고 >는 > 를 나타낸다.
  위의 태그들을 사용하면 html이 자신의 태그로 인식하지않고 특수문자로 인식해서 그대로 표현해준다

1
2

이것은 <br> 태그입니다
이것은 &lt;br&gt; 태그입니다

각 두 줄의 코드를 동일한 값이 나오길 기대하며 브라우저 출력물해보자
아래와 같이 표시된다

1
2

이것은 
태그입니다이것은 <br>태그입니다

띠용~ 그래서 이럴때 특수문자를 사용해준다

자주 사용하는 특수문자는 result 1번부터 5번까지는 기본으로 암기해야한다

1

이것은 <br> 태그입니다

// 출력물은 아래와 같다

1

이것은 <br>태그입니다

•  는 space bar를 넣는 태그이고 자주 사용 하지만 css를 사용하면 굳이 사용할 필요없기도 한 모호한 녀석이다.

• &#9977를 하면 운동하는 사람 아이콘이 나온다. 컬러풀하고 귀여운 symbols를 확인하고 사용할 수 있다

• &는 &를 나타낸다

1

운동하는 사람 &#9977이  &#9748가 와서 운동을 그만하고  &#9749를 마셨다

출력값은 아래 이미지처럼 짜잔!

5. <b>태그 와 <strong>태그의 차이점

• b태그 : 단순히 굵게 표시

• strong태그 : 굵게와 중요한 내용이라는 표시가 내포되고있고 더불어 스크린 리더를 사용하는 경우, 음성으로도 강조해서 알려주니까 b태그보단 strong태그 이용할 것.

이와 동일하게 작용하는 것이 기울임태그이다

• i태그는 단순히 기울이게 표시
• em태그는 기울임과 강조하는 애용이라는 표시가 내포되어있고 더불어 스크린 리더를 이용할 경우, 음성으로 강조해서 알려준다.

참고링크

6. <center>태그는 더이상 사용하지않으며 대신 CSS로 text-align:center를 이용한다

7 .<hr>태그는 구분선을 그어준다

CSS background 기본속성 7종세트