프론트엔드스쿨 1주차
📍 10/29 오리엔테이션
1. 이두희님 특강
특강을 들으며 정말 좋은 말씀을 많이 해주셨다. 기록을 해두어야 기억을 할 수 있다고 생각해 꼼꼼히 메모해두었다.
😲 의미 있는 성공의 반복 그리고 확장
- 친구, 가족을 위한 웹사이트를 간단하게 작게작게 키워나가며
내가 만든 것으로 친구를 놀래켜볼 것 - 아이디어를 스스로 내고 질문하며 디벨롭할 것
🚩 '나는 퍽(공)이 있는 곳이 아니라, 퍽(공)이 가야 할 곳으로 움직인다'
- 내가 지금 어디있는지가 아니라
5년 뒤 어디로 갈지를 생각하며 코딩 공부를 할 것
🗣️ 개발하며 가장 중요한 언어는 '영어'
- StackOverFlow에 질문하고 영어로 검색하며 영어 사이트에서 놀 것
🌍 언어가 통일되는 세상
- 예전과 달리 현재는 프론트엔드에서 데이터를 아우르는 스킬이 생기면 그것을 백으로 가져갈 수 있음
- 언어 하나 정해서 끝판왕을 찍어 볼 것
🌟 차별성이 있는 아이디어
- 하늘 아래 새로운 아이디어는 없다. 99%가 똑같을거고, 1%가 다르더라도 차별성이 있게끔 만들면 된다. 분명 기존의 것에 불편점이 있을 것이다. 이를 개선하는 작업해볼 것
💛 개발자로서 갖춰야할 자세와 태도
- 인내력 (오래 앉아있는 사람이 무조건 짱임)
- 질문 많이 하는 태도 (부끄럼 없이 물어볼 수 있는 사람)
📝 어떻게 TIL을 작성할 것인가
- 스스로 회고, 피드백, 개선에 대한 기록을 할 것
- 학습 후 아쉬운점, 향후 계획과 같이 실패, 시도, 성장을 쌓아나가는 기록 남기기
2. 팀 미션
세렝게티 동물 성격테스트 결과'유연한 나무늘보'가 나왔다
테스트 결과에 따라 팀을 배정 받은 뒤, 개인 별로 30/60/90일 계획을 세웠다.
앞으로의 계획을 세워야하는데 막막함이 커서 계획을
구체적으로 세우지 못했다😅
다 같이 공유했는데 정말 구체적으로 잘 적으신 분들이 정말 많았다
구체적으로 실현 가능한 계획인지 생각하며 계속 수정해 나가야겠다💪
3. 새롭게 배운 내용
(1) HTML파일과 CSS파일과 연결
<head>
<link rel="stylesheet" href="codelion.css">
</head>(2) 박스 중앙정렬
.mainbox {
margin-right: auto; /*박스 중앙정렬*/
margin-left: auto; /*박스 중앙정렬*/
}(3) 박스에 그림자 넣기
.mainbox {
box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1);
}- 첫번째 숫자 : x축으로 그림자를 이동하는 것
- 두번째 숫자 : y축으로 그림자가 이동하는 것
- 세번째 숫자 : 그림자의 흐림정도
- 네번째 숫자 : 그림자의 퍼짐도
- 0.1 : 투명도 (0부터1까지ㅣ1이 제일 진함)
(4) 구글폰트
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800&display=swap')
* {
font-family: 'Montserrat' ;
}
/* 별은 문서전체 적용이라는 강력한 선언*/(5) float 속성
h1 {
font-size: 36px;
font-weight: bold;
font-style: italic;
color: #282828;
border-bottom: 1px solid #ebebeb;
line-height: 16px; /*줄간간격*/
float: left; /*왼쪽으로 붙어 떠다님*/
}(6) float가 다른 요소들과 겹치는 것 방지
/*float요소 모두 묶어주고 다른 요소에 영향주지 않게 해줌*/
.float-wrap {
overflow: hidden;
}4. 느낀점
디스코드를 통해 팀미션을 진행하는 것이 많이 어색했다. 노트북이랑 대화하는 것 같고..!🤣 적극적으로 소통하고자 노력해야겠다! 낯가림 언넝 버리자!😭
📍 11/01 첫 수업
1. 새롭게 배운 내용
(1) EMMET
(2) Request, Response
- Request(요청) : 웹 브라우저(클라이언트)를 통해 서버에 요청하는것
- Response(응답) : 서버에서 웹 브라우저(클라이언트)에 응답하는 것
(3) Markup, Markdown
- Markup Language : .html
- Markdown Language : .md (ex. notion)
(4) a 태그
/*절대경로*/
<a href="https://www.naver.com">click</a>
<a href="https://www.naver.com" target="_blank">click</a>
/*상대경로*/
<a href="./test.html">click</a>
/*페이지 내 아이디로 이동*/
<a href="#move">click</a>
<a href="./test.png" download>click</a>(5) 많이 쓰이는 단축키
- ctrl + [ : 들여쓰기
- ctrl + ] : 내어쓰기
- ctril + / : 주석
- alt + shift + 위아래 : 복사
- shift로선택 + alt누르기 : 위치 변경
- alt + z : 자동위치정렬
(6) reset code
body, h1 {
padding: 0;
margin: 0;
}2. 홈페이지 마크업 해보기
- 내맘대로 정렬하는 것이 쉽지 않았던 홈페이지 마크업
3. 더 알고 싶은 내용
시멘틱한 HTML, 시멘틱한 태그란 무엇일까
📍 11/02 특강
1. 포트폴리오 워크샵
(1) 주제
- 워킹백워즈 방법론을 활용한 나만의 포트폴리오 만들기
(feat. 우아한테크코스의 임동준 코치님)
(2) 워킹백워즈 (Working Backwards)
- 사용자 입장에서 생길 수 있는 모든 입장을 생각해보고,
어떻게 대응할 수 있을지에 대한 FAQ 만들기
(3) 좋은 포트폴리오란?
-
내가 잘하기 위해 노력한 것, 어떤 문제를 해결하기 위해
노력했는지가 나타난 포트폴리오 (성장 가능성과 방향성이 보임) -
3개월 후 빛나게될 나의 장점은 무엇일지,
이 교육 과정을 통해 어떤 역량을 얻어가고 싶은지에 대해 생각할 것
(4) Action Plan
-
꾸준함
매일 TIL 작성 (일주일에 한 번 공유하고, 피드백 받기)
깃허브 1일 1커밋 -
자기객관화
과제 완료 후, 올라와 있는 코드와 비교하고 처음부터 스스로 다시 해보기 -
언어학습
그 날 배운 내용에 대해서 당일 복습하기
2. 느낀점
- 아직 나의 action plan이 다소 구체적이지 않다는 점이 아쉽다
- 앞으로 쭉 학습을 이어나가면서 내가 어떤 역량을 얻어가고 싶은지에 대해
끊임없이 질문해야겠다는 생각이 든다
📍 11/03 HTML & CSS
1. 새롭게 배운 내용
(1) 테이블 테그
- table 전체 표
- table heading (th)
- table data (td) 하나의 데이터
- table row (tr) 열
(2) CSS 적용순서
- 인라인 > 내부 > 외부
(3) id와 class의 중첩 가능 여부
- id는 중첩해서 사용 불가한 반면에 class는 중첩 가능
(4) CSS 선택자 구분
- li 바로 밑에 있는 p만 선택
li > p {
color:blue;
}- ul 속, 모든 p 선택
ul p {
color:red;
}- ul과 p모두 선택
ul, p {
color:red;
}- 둘 다 가지고 있음
.one .two {
color:red;
}- one에 속한 two
.one.two {
color:blue;
}2. 느낀점
(1) Korea Startup Forum 메인 페이지를 함께 마크업
- 더 효율적으로 코딩할 수 있는 다양한 단축키를 알 수 있었다. 괄호 하나 하나 일일이 쳤던 내겐 완전 신세계였다-! 그 중에서도
alt + w가 정말 편해서 가장 기억에 남는다😉 정리해두고 손에 익혀가며 연습해야지.
(2) CSS의 기본 구조에서부터 다양한 선택자를 배움
- 생각보다 정말 많아서 수업 들으면서 막막하기도 했다. 수업이 끝나고 복습을 했음에도 이해 가지 않고 어떻게 쓰일 지 잘 감이 잡히지 않는 부분이 꽤 있었다. 매일 배운 내용에 대해 완벽히 이해하진 못하더라도, 눈에 익숙해지게끔 여러 번 보고 직접 해보는 시간을 충분히 갖자!
📍 11/04 자신만의 캐릭터 그리기
- 멋사 프론트엔드 스쿨 내에서 열린 '자신만의 캐릭터 그리기 경진대회'
1. 아쉬운점
- CSS의 position 속성에 대해 충분히 이해하지 못해서, 이를 잘 활용하지 못했다
- 귀가 접힌다든지, 속눈썹을 표현한다던지 등 화려하게 만들어보고 싶었지만 도저히 내가 아는 지식으로는 한계가 있었다
2. 향후계획
- 공유해주신 라이언 그리기 클론코딩 해봐야지
📍 11/05 CSS 레이아웃
1. 새롭게 배운 내용
(1) display : inline-block ;
- inline으로 사용해야하는데 margin등을 변경해야 하는 경우 주로 사용
div {
display: inline-block;
/* width: 100px;
height: 100px; */
background: pink;
/* margin: 20px; */
} 
(2) position : sticky ;
section {
height: 1000px;
border: 3px solid black;
}
h2 {
position: -webkit-sticky;
position: sticky;
top: 0;
background: greenyellow;
}
- h2의 부모요소인 section부분을 스크롤링하다 section 부분이 끝나 임계점을 넘었을때 다음 h2로 넘어감
(3) float
float되면 부모가 자식을 못찾음float사용했더니 요소 사라진다면width가 없기 때문- 원래가진 normal flow로 돌아가고 싶다면, 같은 형제 요소
clear:left;사용
ul {
overflow: hidden;
}
li{
height: 100px;
background: pink;
}
li:nth-child(2) {
width: 100%;
float: left;
background: black;
}
li:nth-child(3) {
clear: left;
}- 부모가 자식의 존재를 알기 위해 사용하는 것
overflow:hidden;
display: inline block;
clear-fix;
-
clear
normal flow(자연스럽게 생성되는 흐름)가float를 알아볼 수 있게 하는 것
2. 아쉬운점 및 향후계획
-
flex와float가 정말 어려웠다. 아직 개념이 잘 잡히지 않는다😳 수업을 듣다가도 너무 어려워서 점점 멍때리는 나 자신을 발견할 수 있었다😭 최대한 집중해야했는데 그 점이 아쉽다. -
주말에
flex와float에 대해 공부해서 다음주 수업에 차질이 없도록 해야겠다!
Author And Source
이 문제에 관하여(프론트엔드스쿨 1주차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hye_rin/프론트엔드스쿨-1주차저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
