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

1. git 버전관리

버전관리는 필수이다.
버전관리를 이용하면 아래 두가지 장점이 있다.
표준처럼 사용되고 있는 버전관리 프로그램에는 git이 있다.

1. 어떤 부분이 변경되었는지 변경전후의 소스코드를 비교하여 볼 수 있다.

2. 시간의 순서대로 변경한 내용을 확인할 수 있다.
   • 특정코드를 누가 수정했는지 사용자가 적혀있어서 바로 확인할 수 있다

2. git관리영역 세가지

1. 작업디렉토리 Working directory : 현재 편집중인 파일이 저장되는 영역.

2. 임시구역 Staging area : 저장소에 저장할 변경사항을 임시적으로 보관하는 영역.

3. 저장소 Repository : 지금까지의 모든 변경된 작업내역이 영구히 저장되는 영역.

저장되는 순서는

1. 소스코드를 편집 후

2. git add ‘경로’ 명령어로 임시구역에 보관한 뒤

3. git commit 명령어로 repository에 저장한다.

3. vs code로 git commit하는 방법

1. 소스코드를 저장한다.

2. git init 명령어 또는 vs code의 source control에서 저장한 소스코드를 불러와서 git과 소스코드를 연결한다. changes 아래에 변경된 소스코드가 보이지않는 경우 소스코드파일명을 검색해서 연결하면 된다.

3. stage change 혹은 +버튼을 눌러서 임시구역에 보관한다.

4. ctrl+enter로 repository에 저장한다.

즉, 소스코드를 변경한 뒤 commit을 하고 싶다면
일단 소스코드를 변경한 뒤 저장을 누른다. -> vs code의 stage change 혹은 +버튼을 누른다. -> 커밋메모를 입력한 뒤 ctrl + enter를 누른다.
위의 세단계가 기본중의 기본이다.

여기서 commit이란 두가지의 의미가 있다.

• 스테이징영역의 변경사항을 레포지토리에 저장하는 행위

• 변경사항을 묶어주는 단위 : commit을 변경사항이 있을때마다 할 수 있고 또는 모든 변경사항을 다 해준뒤 한번에 commit할수도있다.

4. vs code의 확장프로그램extensions 다운

효율적인 git버전관리를 위해서 vs code의 익스텐션에서 아래 두가지익스텐션을 다운로드한다.

1. GitLens : 소스코드옆에 바로 누가 언제 변경했는 지 알려주는 프로그램

2. Git History : 지금까지 commit된 히스토리를 보여주면서 언제 누가 고쳤는 지 알려주는 프로그램

5. Git History extension 사용방법

vs code의 Source Control에서 ctrl + shift + p 를 누른 뒤 git view history를 검색한다.

commit의 history가 최신순으로 나타나게된다

확인하고싶은 commit을 누른뒤 Compare against previous version을 클릭하면 commit전의 소스코드와 commit후의 소스코드를 비교하여 보기편하게 알려준다.

6. 위의 사항을 git bash로 하기

1. 먼저 git bash를 열어주고 소스코드가 있는 주소로 이동한다.

2. git status : commit이 되지 않은 변경사항을 확인한다

3. git add 소스코드파일명 : 변경한 소스코드파일명을 add해준다. 이 명령어로는 잘 진행되었는지 진행사항체크하기가 어렵기때문에 다시 스테이터스를 확인해줘야한다.

4. git status : commit이 완료되었는지 확인한다.

5. git commit -m “메모내용입력” : commit명령어를 통해 스테이징영역에 보관해둔 소스코드를 레포지토리에 저장한다. -m “메모내용입력”은 생략가능하나 앞으로의 history관리를 위해 간단한 변경사항내용을 적어주면 좋다.

7. git 원격 자동저장설정하기

1. vs code의 Source Control에서 ctrl + shift + p 를 누른 뒤 git add remote를 클릭한다

2. 원격저장할 레포지토리 주소를 붙여넣는다.

3. 이름은 origin입력한다.

4. 점점점(…)을 클릭하여 push를 해준다

5. 참고로, 역으로 웹 레포지토리에서 수정한 내용을 vs code로 받아보고싶을때는 ctrl + shift + p를 누른뒤 git pull을 입력하면 된다

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

1. 설명글 보이지 않게 스타일링

위의 이미지처럼 설명글을 보이지않게 처리하기위해서는 두가지방법이 있다.

1. display: none;

2. visibility: hidden;

1
2
3
4

.mailing-form > lable{
    display: none;
    visibility: hidden;
}

적용시키면 아래 이미지와 같이 설명글은 보이지않게 된다.

이렇게해도 설명글은 보이지 않지만, 스크린리더와 같이 보조기기를 사용하는 사용자들을 위해 웹접근성을 고려한 스타일링을 할 수 있다.

1
2
3
4
5
6
7
8

.mailing-form > lable {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden; /*크기에 넘치는 내용은 숨겨짐*/
    margin: -1px;/*음수마진 가능*/
    clip: rect(0,0,0,0);/*상하좌우를 자를 수 있음*/
}

• overflow : hidden;의 경우 안에 있는 데이터가 흘러넘치는 경우 과감하게 넘치는 내용을 숨겨버리는 역할을 한다.

• margin : -1px; 마진은 음수로도 줄 수 있다.

• clip : rect(0,0,0,0); 앞으로도 사용될지 안될지 잘 모르는 속성이긴 하지만 현재로선 스크린리더 지원에 가장 적합한 속성이다. 상하좌우를 숫자만큼 남기고 자를수있다. 현재 아예 안보이게 만들고싶으므로 모든 숫자를 0으로 설정했다.

2. 버튼태그를 input 태그안에 넣기

위에서 가져 온 이미지를 이번엔 input태그와 button태그에 초점을 맞추어 다시 한번 더 보자.

스타일링을 위해 버튼태그를 어떻게 하면 input태그안에 넣을 수 있을까?
position속성으로 가능하다.

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

.input[type="email"]{
    width: 100%;
    border: 1px solid #44b78b;
    border-radius: 4px;
    height: 5rem;
}

.mailing-form-btn{
    position: absolute; /*input속성안에 위치해야하기때문에 그렇다면 기준은? mailing-form->mailing form에서 relative*/
    top: 0;
    right: 0;
}

.mailing-form{
    position: relative;
}

1. .input[type=”email”]{}의 의미는 input태그중에 type속성을 email로 가지고 있는 모든 태그들을 선택하는 타입선택자이다.

2. input태그에 width: 100%;를 주게되면 안에 들어오는 btn크기에 맞게 100%가 된다.

3. 버튼태그를 input태그안으로 넣기위해선 position값을 주어야한다. bhn태그는 position : absolute;로 주고 버튼태그의 기준인 form태그로 잡고 form태그의 position : relative;를 준다.

위의 태그를 적용하면 아래 이미지처럼 input태그안에 button이 들어간 것을 확인할 수 있다.
하지만 디자인으로서 아쉽다.

1
2
3
4
5
6
7
8
9

.mailing-form-btn{
    position: absolute;
    top: 30%;
    right: 10px;
    border: 0;
    background-color: white;
    color : #44b78b;
    cursor: pointer; /*닿으면 커서를 손가락모양 포인터로 변경시킴*/
}

4. top과 right를 input의 오른쪽중앙에 오도록 크기를 조절하면 된다

5. cursor는 button태그에 닿으면 커서가 화살표모양에서 손가락모양으로 변화하게끔 해주는 속성이다.

   • progress; 로딩모양의 커서로 변한다.
   • row-resize : 가로선 크기를 변화시켜주는 모양의 커서로 변한다.
   • 등등 많다.

코드를 적용한 이미지이다.
input태그안에 button태그가 조화롭게 잘 배치되어있고 커서모양도 submit위에 위치할때 손가락모양으로 변하는 것을 확인할 수 있다.

3. main의 side content 레이아웃 스케치

1. div.container-side-cta : 클릭을 유도하는 다운로드 요소가 배치되어있기에 a태그를 이용해서 버튼처럼 표현할 수 있다.

2. 다운로드 밑에 more로 추가설명링크가 있으므로 이것또한 a태그로 마크업해주면 된다. 그리고 > 부분은 가상요소를 이용하여 출력하면된다.

3. 최근 뉴스가 나오는 부분은 그 부분 전체로 완결성을 가지고 있으므로 article태그로 작성하면된다.

4. news의 날짜와 작성자가 출력되는 부분은 meta태그로 span, time 이용하여 작성하면된다.

5. 위의 2번과 마찬가지이므로 class를 이용하여 같이 스타일링하고 다른 부분만 id를 이용하여 적용한다.

6. 정의부분이기때문에 dl태그와 dt태그를 세트로 이용하면 된다.

4. 가상요소사용하여 “>” 만들기

아래 코드를 적용하면 바로 > 가 추가됨을 확인할 수 있다.

1
2
3

.more::after {
	content : ">";
}

5. nth-chird()

nth-child()는 괄호안에 오는 숫자에 따라 선택되어지는 값이 다르다.

• nth-child(8) : 8번째 요소를 선택하게 된다.
• nth-child(n+6) : 6번째 이후의 모든 요소들을 선택하게 된다.

더 궁금한 사항은 아래 링크를 참고하면 비쥬얼적으로 잘 나타나있어 이해하기 쉽다.

참고링크 : nthmaster

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

1. a태그 버튼처럼 만들기

a태그를 css를 이용하여 버튼처럼 보이게 만들 수 있다.
또 가상클래스 hover를 이용하여 마우스를 올렸을때 색상변화를 주어 선택된 것처럼 보이게 만들어 더욱 버튼같은 느낌을 연출할수있다.

참고로 cta란 Call To Action의 약자로서 클릭유도라는 의미를 가진다.
hero-section자체가 클릭유도를 하는 곳이기때문에 실무에서도 cta로 사용한다고 한다.

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

.cta{
    color: white;
    width: 300px;
    font-weight: 400;
    margin: 0 auto 60px;
    display: block;
    padding: 20px 50px;
    border-radius: 8px;
    background: #44b78b;
}

.cta:hover{
    background: #51be95;
}

아래 이미지는 위의 태그를 적용하여 a태그를 버튼처럼 보이게 만든 것이다.

2. 수평선만들기

border를 이용해서 원하는 곳에 수평선이든 수직선이든 다 그릴 수 있다.

1
2
3
4
5

.hero-section{
    padding: 50px 0;
    text-align: center;
    border-bottom: 1px solid #000000;
}

아래 이미지는 위의 태그를 적용하여 수평선을 만든 모습이다

3. 메인콘텐츠마크업

Django사이트의 메인콘텐츠를 어떻게 구성되어있는 지 확인하고 큰 스케치를 그려보자.

Stay in loop의 경우 중요한 부분이므로 h2로 작업하고 바로 밑의 설명은 여백이 있는 p태그로 진행하면 된다.

Using Django 와 Contributing to Django는 메일링 서비스이므로 중요한 영역이고 동일하게 float처리를 한 것으로 보인다.
따라서 h3로 작성하고 이름에는 a태그를 주어 관련된 링크로 이동시킬 수 있도록해야한다.

제출하는 곳은 form태그를 사용한다.

form태그 밑에는 설명영역을 한번 더 추가하면 끝! 설명영역은 구분될 수 있도록 여백이 있는 p태그를 이용하면 된다

4. 다양한 form태그 종류와 사용법

form이란 사용자의 서버에 전송하는 방법이다. 보통 어디에 활용할까?

• 로그인 : 아이디/비밀번호를 입력시
• 회원가입 : 개인정보를 입력시
• 블로그나 게시판 : 글작성이나 파일전송시

그렇다면 form태그는 어떻게 생겼을까?

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

<form action="/url입력" method="post">
	<div>
		<label for="next">텍스트 필드</label>
		<input type="text" id="text"/>
	</div>
	<div>
		<label for="checkbox">체크박스</label>
		<input type="checkbox" id="checkbox"/>
	</div>
	<div>
		<label for="radio">라디오버튼</label>
		<input type="radio" id="radio"/>
	</div>
	<div>
		<label for="search">검색</label>
		<input type="search" id="search"/>
	</div>
	<div>
		<label for="textarea">텍스트 영역</label>
		<input name="textarea" id="textarea"/>
	</div>
	<button>전송버튼</button>
</form>

1. form의 action속성 : form태그로 입력받은 전체 내용을 어디에 보낼 것인지를 결정한다. 즉, 사용자가 입력한 데이터를 전송할 서버의 URL를 입력하면 된다.

2. form의 method속성 : form태그로 입력받은 전체 내용을 어떻게 처리한 것인지를 결정한다 즉, 사용자가 입력한 데이터를 전송하는 방법으로 아래와 같은 방식이 있다. method는 기본적으로 get과 post방식을 지원한다.

   • get : action에 입력한 URL에 파라미터의 형태로 전송.
   • post : header의 body에 포함해서 전송.(보통 새로운 글등록할때 post방식사용)
   • delete : 정보를 삭제함.
   • put : 정보 전체를 수정 또는 정보 전체를 대체함.
   • patch : 정보 일부 부분 수정함.
   • 참고링크 : 제로초 HTTP 메서드

3. form태그 사이에는 텍스트 필드, 라디오 버튼, 체크 박스와 같은 컨트롤을 생성하는 태그들이 들어가줘야한다.

4. label태그는 input태그가 무엇인지 설명해주는 태그로 lable태그를 사용하게 된다면 항상 세트로 lable태그와 input태그를 사용해야한다. 그리고 lable태그의 for속성에는 꼭 input태그의 id값과 동일한 값이 설정되어야한다.

이를 실습페이지에 적용해보자.
input과 button태그를 아래 이미지와 같이 생성한다.

placholder속성을 이용하면 사용자에게 어떤 걸 적어야하는 지 알려줄수있고 사용자가 입력하는 순간 사라지는 가이드라인이라고 생각하면 된다.

그리고 나면 아래 이미지와 같이 적용된 것을 확인할 수 있다.

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

1. web font사용

폰트패밀리로 폰트를 지정해주었을 때, 만약 사용자가 해당 폰트를 다운로드해서 가지고 있지않으면 폰트 적용이 아예 안된다.
이를 방지하기위해 웹폰트를 사용하면 사용자가 굳이 다운로드하지않더라고 폰트가 적용된 채로 홈페이지를 볼 수 있다.

웹폰트는 무료도 있고 유료도 있지만 제일 유명한 구글폰트는 무료이다.

• 구글웹폰트

• 구글웹폰트깃허브 : 한글

• 눈누 : 한글폰트로 유로뿐만 아니라 무료상업용웹폰트도 쉽게 찾을 수 있다.

웹폰트 사용법은 간단하다. 웹폰트의 link태그를 복사하여 head태그 사이에 붙여넣기하면 된다.

2. a태그 밑줄제거 text-decoration: none;

a태그등을 링크를 나타나내는 태그를 사용하면 자동적으로 밑줄이 나타난다.
이를 없애주기 위해서 { text-decoration: none; }을 주면 된다

아래 1번은 a태그의 본래 그대로의 모습이고 이제 { text-decoration: none; }를 적용하면 3번처럼 밑줄이 없이 예쁘게 출력되는 것을 볼 수 있다.

3. 카테고리 기본 레이아웃만들기 display: block; + padding: 10px;

list-itmes밑에 있는 8개의 a태그를 한꺼번에 선택하는 방법에는 두가지가 있다.
편한 방법으로 선택해주면 된다.

1. 첫번째 방법 : .list-items a {}

   1 2 3 4 5

   .list-items a{ color: white; display: block; padding: 10px; }

2. 두번째 방법 : .list-items > a {}

   1 2 3 4 5

   .list-items > a{ color: white; display: block; padding: 10px; }

1번은 위의 태그가 적용되기 전의 모습이고 3번은 적용된 후의 모습이다.
패딩을 넓게 주어 사용자가 카테고리를 편하게 선택할 수 있도록 했다. 기본적으로 홈페이지 만들때 자주 사용되니 알아두면 좋다.

4. 가상클래스이용해서 마우스오버시 색상변경 구현

가상클래스를 이용하여 카테고리에 마우스를 올리면 글자색상을 변경해보자.
기존 글자색사은 흰색이고 해당 클래스에 마우스를 올리면 검정색으로 글자색이 변한다.

1
2
3

list-items > a:hover {
    color: black;
}

이러한 디자인으로 사용자에게 지금 어느 카테고리위에 마우스가 있는지 친절하게 알려주어 사용성이 올라간다.

5. float 적용방법

위의 이미지는 메인콘텐츠와 사이드콘텐츠에 각각 { float : left; }, { float : right; }를 주었다.
이로 인해 3가지 문제점이 발견된다.

1. 하늘색은 main태그인데 main영역이 메인콘텐츠와 사이드콘텐츠의 높이를 전혀 인지하지못하고 있어 히어로콘텐츠와 메인콘텐츠, 사이드콘텐츠의 높이를 함께 포함하고 있어야하는데 히어로콘텐츠의 높이만 인식하고있다.

2. 초록색은 footer태그인데 footer영역이메인콘텐츠와 사이드콘텐츠의 영향을 받고 있어 높이가 메인콘텐츠와 사이드콘텐츠만큼 올라와 있다.

float된 속성은 normal flow에서 벗어나기때문에 자기자신의 높이를 상위태그가 알지 못하게 된다.
normal flow에서 벗어났다는 의미는 해당 부분이 띄어져있다는 의미이다.
따라서 이에 영향을 받는 태그들에게 { clear : both; }를 해줘서 자신의 높이를 찾도록 해줘야한다.

1. 1번문제 해결방법 : float한 태그들을 div.container-float로 묶은 뒤 div.container-float에 가상요소를 주고 그 가상요소에 { clear : both; }를해준다.

   1. 메인콘텐츠와 사이드콘텐츠를 div.container-float안으로 감싸준다.

   2. .container-float에 가상요소를 주어 { clear : both; } 를 적용시킨다.

      1 2 3 4 5

      .container-float ::after{ //가상요소after display: block; content: ""; clear: both; }

2. 2번문제 해결방법 : footer { clear : both; }

   1. footer태그에 아래와 같이 { clear : both; }속성을 적용시킨다.

      1 2 3

      .footer{ clear: both; }

      

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

이때까지 배운 HTML와 CSS를 가지고 Django 사이트를 만들어보는 실습을 해보자.
참고링크 : Django

1. 전체 페이지 레이아웃잡고 마크업하기

먼저 홈페이지를 보고 레이아웃을 잡고 미리 스케치하는 것이 좋다.
그래야 안 헷갈리고 필요한 태그들만 사용하여 깔끔한 마크업이 가능하기때문이다.

지난 포스팅에서 Django홈페이지 전체를 스케치한 이미지이다.

전체 홈페이지를 가장 큰 세가지부분으로 나눈다

1. Header
2. main
3. footer

그 뒤로 안에 있는 요소들을 스케치한 뒤 그대로 마크업하면 된다!
간단한 작업처럼 보이지만 깔끔하게 잘 만들기 여건 어려운 것이 아니다.
나도 강사님처럼 척보면 척하고 짜임새있게 짜고 싶다.

2. Header 전체구상

먼저 첫번째 큰 부분인 Header부분이다.
안을 보면 logo와 navigator로 나눌 수 있다.
logo안은 이미지태크와 링크를 넣어 이미지를 누를때마다 홈으로 돌아가게끔 구현할 것이다.
navigator는 ul태그로 만들어서 li태그에 a태그를 넣어 li태그를 누를때 관련 페이지로 이동할 수 있도록 구현할 것이다.

1. logo

   • logo
     • img + link to home

2. navigator

   • list
     • li + link to overview page
     • li + link to download page
     • li + link to documentation page
     • li + link to news page
     • li + link to community page
     • li + link to code page
     • li + link to issues page
     • li + link to about page

스케치를 보고 그대로 html를 작성해주면 좋다.
위의 이미지처럼 class 이름까지 지정해서 하면 훨씬 편하고 빠르게 마크업할수있다.

li태그와 a태그는 묶어서 총 8번 작성해야한다.
이때 효율적으로 코드를 작성할 수 있는 방법이 있다.

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

 (li>a)*8
 
 
 // 출력값은
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>

li태그 안에 a태그를 만들고 전체를 곱하기 8번해서 총 8개의 태그를 만들게 된다.
참~ 쉽죠?

3. max-width 속성과 min-width속성

브라우저의 크기를 조절할때, 브라우저가 일정한 크기에 도달할 경우 더이상 콘텐츠의 크기도 같이 줄어들거나 늘어나지 않는다.
이러한 속성을 max-width와 min-width라고 한다.

브라우저 전체 넓이가 1060px이 되면 더 이상 줄어들지 않도록 지정하고 1400px이 되면 더 이상 늘어나지않도록 지정해보자.

이를 위해서 먼저 생각해야할 것이 어느 부분에 max-width와 min-width를 적용시킬 것인 가이다.

브라우저 전체 넓이가 일정크기보다 작아지면 모든 요소들이 다 작아지다가 멈춰야하므로 body에 min-width를 주면 된다.

반면 브라우저 전체 넓이가 일정크기보다 커지면 header는 크기와 상관없이 양옆에 컬러가 계속 칠해져있어야하므로 container를 주어 container태그안에 max-width속성을 적용하여 디자인을 유지할 수 있다.

1
2
3
4
5
6
7
8

body{
    min-width: 1060px;
}

.container{
    max-width: 1400px;
    margin: 0 auto 0 auto;
}

4. margin과 padding의 단축속성

margin과 padding값을 주는 데는 총 4가지 단축 방법이 있다.

1. { margin: 0 auto 0 auto}
   이렇게 4개가 나열되어 있는 경우의 순서는 top right botton left순이다.

2. { margin: 0 auto 10px }
   이렇게 3개 값이 나열되어 있는 경우에는 순서가 첫번째값은 top, 두번째 값은 left와 right 그리고 마지막 값은 bottom이다

즉 { margin: 0 auto 10px } 는 { margin: 0 auto 10px auto} 와 동일한 값을 가진다.

3. { margin: 0 auto }
   이렇게 2개가 나열되어 있는 경우의 순서는 첫번째값은 top botton에 적용 두번째 값은 left와 right에 적용된다.

즉 { margin: 0 auto } 는 { margin: 0 auto 0 auto} 와 동일한 값을 가진다.

4. { margin: 10px }
   이렇게 1개 값만 있는 경우는 어디에 값이 적용될까?
   정답은 모든 곳에 적용된다.
   다시말해 10px이 top right botton left에 각각 적용된다.

즉 { margin: 10px } 는 { margin: 10px 10px 10px 10px } 와 동일한 값을 가진다.

5. display: inline-block;

display속성에 inline-block을 넣어보자.

1
2
3
4
5
6
7

.nav{
    text-align: right;
}

.list-items{
    display: inline-block;
}

아래 이미지를 순서대로 본다면 1번에는 적용되지 않은 순수한 모습에서
위의 코드를 적용한 후 3번을 본다면 예쁘게 오른쪽으로 카테고리가 일렬로 배열되어 있는 것을 확인할 수 있다.

6. position: absolute; 와 relative; 적용

가장 헷갈리는 position속성을 적용하기 전후를 비교해보자.

position : relative;로는 어떠한 값도 바꿀 수 없다.
그 밑에 꼭 top, bottom, left, right의 값을 통해 어디를 얼만큼 이동할 것인지 정할 수 있다.

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

.container{
    max-width: 1400px;
    background-color: red;
    margin: 0 auto;
    padding: 0 20px;
    position: relative; //normal flow의 속성에 변화가 있는 것이 아니기때문에 화면에 출력될때 변화가 없다
}

.logo{
    position: absolute;
    top: 0;
    left: 0; 
}

1번은 위의 태그를 적용하기 전의 모습이고 container클래스에 position: relative;를 적용하고 logo클래스에 position: absolute;를 적용을 하면 아래 이미지의 3번으로 화면에 출력된다.

파이썬 인강 자기계발 챌린지 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 클래스값이 출력되게 된다.

파이썬 인강 자기계발 챌린지 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을 치면 해당사이트내에서 검색결과를 바로 확인할 수 있다.

와… 대박!