TIL-First day at Bootcamp-OT & HTML/CSS

대망의 그날.. OT 듣는다.

 

 

- 첫 2주 - Pre Course

프론트엔드 

기본 html css java  replit기본으로 사용 , 프로젝트 2개 진행할 예정.웹게임 만들어보기.

 

- 2주 - Foundations

 백엔드 기초역량

파이썬 , 장고, 데이터베이스, 모델링

repl.it

Backed API Project.

 

- 그다음 4 주

그룹프로젝트

우리의 아이디어 구현

기본 서비스 클론

실무영역 다지는 기간

성장하는 시간

 

- 마지막 4주 - Final Projects

4가지중 고르기

기업협업 프로젝트

개인 프로젝트

내부 팀 프로젝트

자유롭게 개인이 원하는 공부 및 취업 준비

 

Daily schedule

10시-7시

런치 12시-1시

디너 6~7시

opened 24/7

 

하루 시작

Code kata to start the day

1시간 알고리즘 코딩 문제

짝코딩(pair coding)으로 진행

매일 아침 카타 짝과 코드카타하는 것으로 시작

자바/파이썬 역량

 

하루 마무리

TIL on your blog to end the day

배운 것을 복습하고 완벽하게 소화

기업에게 어필할 수 있는 무기!

 

 

사용하는 툴

지메일 - 구글캘린더쓰기때문

슬랙

스택 오버플로우 - 개발자 지식인

깃헙

비쥬얼 스튜디오 코드 - 프론트 엔드

VIM - 백엔드

 

학습공간

위워크선릉2호점 10층

1,8층 라운지 공간 - 간헐적 사용 권장

첫 8주 동안 카드 제공

첫 8주 동안 개별 책상 제공

 

 

 

—점심시간이후—

 

위코드의 교육 철학

 

- 주도적으로 할 수 있는 역량

- 스스로 찾는 능력

// 주입식교육,수업 위주 교육, 수동적 학습X

-> 주도적인 학습, 실습 위주의 교육, 그룹 기반 학습

 

학습 태도

1. 절대적인 시간 투자 - 10~12시긴/day (주말포함)
2. 주도적 학습 - 묻어가지 않기, 외우지 말고 원리 이해 필수! ,  비교가 아닌 성장 중심의 학습
3. 질문 하기 - 무의미한 질문은 삼가, 물어본 질문 삼가
4. 공동체

 

규칙 & 행동강령

• 명칭은 ~님.
• 서로 리스펙!
• 시간은 금
• 프린트50장까지만//하루
• 회의실 예약은 멘토통해서만

 

 

집에서 들고 올 것

슬리퍼

폰 충전기

폰 거치대

마우스

마우스패드

 

 

------------------<<<<<<<<<<>>>>>>>>>>------------------

 

 

 

HTML/CSS를 repl.it을 통해 배운다.

 

사전 스터디에서 놓쳤던 , 중요한 정보들 메모.

 

---

 

selector 우선순위

이 우선순위는 점수 계산으로 이루어집니다.

• inline styling(13줄에 style 요소로 직접): 1000점

• id: 100점

• class: 10점

• tag: 1점

---

디자인 변경 - input width

input과 textarea의 가로가 모두 제각각이라서 통일시켜봅시다.

여러 방법이 있습니다.

1. input, textarea에 같은 width 값을 부여한다.

2. 부모에 width를 주고 input, textarea의 width는 100%로 설정한다.

 

1번 방법도 쓰긴 하지만,

만약 디자이너가 마음이 바뀌어서 가로 값을 변경하자고 하면

CSS에서 모든 input과 textarea를 일일이 찾아서 변경해야 합니다.

---

마우스 올렸을 때를 스타일링

 

button:hover 
{
  cursor: pointer;
  opacity:0.8;
}

------

<input type="text" placeholder="ID">

<input type="password" placeholder="비밀번호">

<input type="number" placeholder="학번">

------

Placeholder

입력 전 안내문구(기본값으로 살짝 회색임. 입력하려고 클릭하면 없어짐)

 

----

• position: static;

• position: relative;

• position: absolute;

• position: fixed;

------

검색 인풋창! CSS먼저.

input
{
  width:100%;
  border: 1px solid #bbb;
  border-radius:8px;
  padding: 10px 12px 10px 12px;
  font-size:14px;
  
}
.dd
{
  position:relative;
  width:300px;
  
}
#pic
{
  position:absolute;
  width:17px;
  height:17px;
  margin:0;
  right:12px;
  top:10px;
  
}

HTML은 여기부터

----- 

div class="dd

input type="text" placeholder="검색어 입력"

img id="pic" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/icon/search.png"

------

이렇게 하면 완성된다..

margin 은 브라우저 기본값으로 들어있어서 0으로 지정.

그리고 부모로부터 오른쪽 공백 12px 주고 위에서 10 준거. 저게 어려웠다.

absolute는 relative를 가진 부모가 필요.

fixed는 부모가 필요 없음. 잘못 보면 패드립 같은데.. 그런 거 아님.

 

------

header -- 상단 탑에 네비가 들어가는 것. 살짝 투명도 줘서 뒤에 비치게 함.
{
  position:fixed;
  left:0;
  right:0;
  top:0;
  height:48px;
  background-color:rgba(45,45,45,0.95);
}

 

position:fixed;를 썼다. 스크롤을 내려도 위에 고정적으로 박혀있음.

좌우 탑 0을 준 것은 딱 위에 붙어있게. 좌우 탑과 사이의 거리가 0인 것.

그리고 높이만 설정해준 것은 너비는 그냥 블락 속성을 가진 것처럼 꽉 참.

---------------------

CSS) 레이아웃 

1. <div> 태그에 대해

 

레이아웃이라고 특별할 것이 없습니다.

웹 페이지 레이아웃은 어떤 정보를 페이지의 어떤 영역에 넣느냐에 관한 문제입니다.

 

CSS에서 정보 배치 단위를 정의하기 위해 널리 사용되는 태그가 바로 <div>입니다.

이 태그는 요소를 하나의 논리적인 그룹으로 묶거나, 페이지의 구획을 정의할 목적으로 사용됩니다.

 

<div> 태그는 만들고 나면 class나 id를 부여하여 각각의 스타일을 적용하게 됩니다.

그러나 id를 적용하면 우선순위가 아주 높다 보니 다른 스타일 속성을 쉽게 무력화시키게 되죠.

id를 범용 하면 #home #banner #nav a와 같이 길고 복잡한 selector를 사용해야 하니, id 대신 class를 더 자주 쓰는 것이 좋겠습니다.

물론 한 페이지에 단 하나만 있을법한 논리적인 구분은 id로 하셔도 좋습니다.

예를 들어 전체 페이지를 감싸는 #login-page 환영 팝업인 #welcome-popup 과 같은 정도는 괜찮습니다.

 

 

2. 영역 구분 태그

 

HTML5 버전은 현재 모든 브라우저가 지원하며, 대부분의 개발자가 사용하는 HTML 버전입니다.

HTML5 에서는 div를 대신할 여러 태그가 나왔으니 한번 살펴보시고 의도적으로 사용하려고 노력하면 좋을 것 같습니다.

https://www.w3schools.com/html/html5_semantic_elements.asp

꼭 읽어주세요!

 

 

3. 레이아웃 전략

 

6-7년 동안 구입한 CSS 책이 여러 권이고, 많은 해외의 온라인 강좌도 들었지만 모두 하는 말은 "CSS 레이아웃은 경험을 통해 배우는 것이다"라고 합니다.

 

레이아웃을 설계하는 것은 공식이나 정답이 없고, 오히려 예술에 가깝습니다.

현존하는 CSS 프로퍼티를 통해 정말 창의적인 트릭으로 interactive 한 사이트를 만들어내고 있는 좋은 웹사이트들이 많습니다.

 

다음에 있을 여러 프로젝트를 통해 레이아웃 잡는 법을 익히고,

좋은 사이트에 들어가 개발자 도구를 보며 어떻게 레이아웃을 잡았는지 보시면 빠르게 습득할 것입니다.

 

-------위 내용은 통째로 발췌했음-------

 

중요하다고 강조함. 새로운 요소들

In HTML there are some semantic elements that can be used to define different parts of a web page:

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

 

-----중요하다니 한번 더 읽어보게 되었다.----

Float 기반 레이아웃

이거는 물에 띄운다고 생각하면 되니까.

float을 한눈에 파악하기 좋은 쉬운 tutorial이 있어서 url을 드립니다.

10분 정도면 휘리릭~ 볼 수 있으니 이것 먼저 보고 와주세요!

http://ko.learnlayout.com/float.html

 

위의 내용에서 float을 보고 왔다는 가정하에 내용을 이어나가도록 하겠습니다.

 

예제 1 - float 사용 예제

float 속성에는 left, right, none 가운데 하나를 값으로 줄 수 있습니다.

그런데 float 속성을 가진 요소는 부모가 높이를 인지할 수 없어서 왼쪽과 같이 부모를 벗어납니다.

그래서 float을 다루기 어렵거나 귀찮은 요소 중 하나라고 생각하는 개발자가 많이 있습니다.

 

예제 2 - float 문제 해결

float을 해결하려면 clear라는 속성이 필요합니다.

float 요소 옆에 채워지는 요소들에게 적용하는 프로퍼티입니다.

해결방법은 여러 개가 있지만 그중 몇 개만 소개해드려요.

 

해결방법 1.

바깥 div(. wecode-box) 마지막에 아무 태그나 넣고 clear 속성을 적용합니다.

이 기법을 사용할 때에는 HTML 코드를 더 입력해야 하는 부담이 있습니다.

 

해결방법 2.

주로 많이 사용하는 방법인데 바깥 div(. wecode-box)에 overflow: hidden; 을 주는 것입니다.

 

해결방법 3.

바깥 div(. wecode-box)를 float 시킵니다.

그러면 자식의 float 높이를 인지하여 그만큼 높이를 차지하게 됩니다.

하지만 이것도 문제가 있죠, float이 되어버려 block 요소의 성질이 없어지게 됩니다. 이러면 width를 100% 추가하거나 해야 합니다.

 

-----------

#main

{ width:600px; ###보다는 ->> max-width:600px; 하면 됨.

margin:0 auto;

}

 

###div의 아이디 #main의 css이다. 먼저 너비를 설정하면 좌우 가장자리가 안 늘어나게 됨.

clear:left;이런 식으로 Css 에 추가하면 지정 위치를 비울 수 있다.

clearfix핵

overflow:auto; 이런식으로 css에 추가하면 div공간이 옆에 float 되어 있는 그림과 사이즈가 차이 나더라도 맞춰지게 된다.

 

박스 너비 맞추기

. simple {

width:500px;

margin:20px auto;

-webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

             box-sizing: border-box;

}

. fancy {

width: 500px;      

margin: 20px auto;

padding:50px;

border: solid blue 10px;      

-webkit-box-sizing: border-box;                           

    -moz-box-sizing: border-box;

             box-sizing: border-box;

}              

원래 simple과 fancy의 크기 차이는 꽤 난다.

width500px인 simple과 달리 fancy는 margin과 padding값과 border굵기까지 더해야 되는데...

-webkit-box-sizing: border-box;                           

    -moz-box-sizing: border-box;

             box-sizing: border-box;

애네를 통해서 그냥 단순히 width:500px;로 맞춰질 수 있다.

 

-------

article img

{

float:right;

width: 50%

}

항상 이미지 크기를 컨테이너 너비의 50%맞추게 하는 css.

------------

미디어 쿼리

"반응형 디자인"은 사이트가 표시되는 브라우저와 디바이스에 "반응하는" 사이트를 만드는 전략입니다.

미디어 쿼리는 이렇게 하는 가장 강력한 도구입니다. 아래의 퍼센트 너비를 사용하는 레이아웃을 가지고 메뉴를 사이드바에 놓기에는 브라우저 창의 크기가 너무 작을 때 메뉴가 한 칼럼에 표시되도록 만들어 봅시다.

@media screen and (min-width:600px) {

nav {

float: left;

width: 25%;

}

section {

margin-left: 25%;

}

}

@media screen and (max-width:599px) {

nav li {

display: inline;

}

}

 

----------

그리고 박스들을 왼쪽으로 float 줘서 여러 개 띄우는 방법이 있고

display:inline-block;
사용해서 나열할 수도 있음.

 

-----------

inline-block 레이아웃

레이아웃을 잡기 위해 inline-block을 사용할 수도 있습니다. 이때 몇 가지 염두에 둘 점이 있습니다.

• inline-block 엘리먼트는 vertical-align 프로퍼티의 영향을 받습니다(아마 이 프로퍼티는 top으로 설정하고 싶을 겁니다).
• 각 칼럼의 너비를 설정할 필요가 있습니다.
• HTML의 각 칼럼 사이에 공백이 있으면 칼럼 간에 틈이 생깁니다.

.three-column

{

padding: 1em;

-moz-column-count: 3;

-moz-column-gap: 1em;

-webkit-column-count: 3;

-webkit-column-gap: 1em;

column-count: 3;

column-gap: 1em;

}

 

신문처럼  3개의 칼럼 나눠서 박스에 글 나오게 함.

 

 

------

이제 집 갈란다. 오늘은 여기까지. 내일 또 온다.